12 Added notes and colours to customers

app/views/customers/_customer.html.erb

@@ -19,6 +19,14 @@
     <%= customer.notes %>
   </p>
 
+  <p class="my-5">
+    <strong class="block font-medium mb-1">Color:</strong>
+    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium" 
+          style="background-color: <%= customer.color_hex %>20; color: <%= customer.color_hex %>; border: 1px solid <%= customer.color_hex %>;">
+      <%= customer.color_emoji %> <%= (customer.color || 'green').humanize %>
+    </span>
+  </p>
+
   <p class="my-5">
     <strong class="block font-medium mb-1">Email:</strong>
     <%= customer.email %>

app/views/customers/_form.html.erb

@@ -31,6 +31,18 @@
     <%= form.text_area :notes, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
+  <div class="my-5">
+    <%= form.label :color %>
+    <%= form.select :color, 
+                   options_for_select([
+                     ['Green', 'green'], 
+                     ['Yellow', 'yellow'], 
+                     ['Red', 'red']
+                   ], customer.color), 
+                   { prompt: 'Select color' },
+                   { class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" } %>
+  </div>
+
   <div class="my-5">
     <%= form.label :email %>
     <%= form.text_field :email, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>