Refactor upcoming appointments view for improved accessibility and styling; add status badge styles and localization labels

app/views/my/blocks/_upcoming_appointments.html.erb

@@ -56,17 +56,18 @@
   <table class="list appointments">
     <thead>
       <tr>
-        <th>Title</th>
-        <th>Customer</th>
-        <th>Vehicle</th>
-        <th>Date</th>
-        <th>Status</th>
+        <th><%= l(:label_title) %></th>
+        <th><%= l(:label_customer) %></th>
+        <th><%= l(:label_vehicle) %></th>
+        <th><%= l(:label_date) %></th>
+        <th class="status"><%= l(:label_status) %></th>
       </tr>
     </thead>
     <tbody>
       <% expanded_appointments.each do |item| %>
         <% appt = item[:appointment] %>
-        <tr class="<%= cycle('odd', 'even') %>">
+        <% status_slug = appt.status.to_s.parameterize %>
+        <tr class="<%= cycle('odd', 'even') %> appointment-row status-<%= status_slug %>">
           <td class="subject">
             <%= link_to appt.subject, customer_appointment_path(appt) %>
             <% if item[:total_days] > 1 %>
@@ -74,37 +75,17 @@
             <% end %>
           </td>
           <td class="customer">
-            <% 
-              customer_obj = appt.try(:customer) || appt.try(:qbo_customer) || appt.try(:customer_name)
-              customer_text = if customer_obj.respond_to?(:display_name)
-                                customer_obj.display_name
-                              elsif customer_obj.respond_to?(:name)
-                                customer_obj.name
-                              else
-                                customer_obj.to_s
-                              end
-            %>
-            <%= customer_text.presence || '-' %>
+            <%= link_to appt.customer unless appt.customer.nil? %>
           </td>
           <td class="vehicle">
-            <% 
-              vehicle_obj = appt.try(:vehicle) || appt.try(:vehicle_name)
-              vehicle_text = if vehicle_obj.respond_to?(:name)
-                               vehicle_obj.name
-                             elsif vehicle_obj.respond_to?(:to_s)
-                               vehicle_obj.to_s
-                             else
-                               nil
-                             end
-            %>
-            <%= vehicle_text.presence || '-' %>
+            <%= link_to appt.vehicle unless appt.vehicle.nil? %>
           </td>
           <td class="start-date">
             <%= format_date(item[:date]) %>
           </td>
           <td class="status">
-            <% if appt.respond_to?(:status) && appt.status.present? %>
-              <span class="badge status-<%= appt.status.to_s.parameterize %>">
+            <% if appt.status.present? %>
+              <span class="badge status-badge status-<%= status_slug %>">
                 <%= appt.status.to_s.humanize %>
               </span>
             <% end %>

assets/stylesheets/customer_appointments.css

@@ -272,3 +272,39 @@ h2 .appointment-title {
 /* Cancelled - Red */
 .appointment-block.cancelled .appointment-bar { background-color: #d9534f; }
 .appointment-block.cancelled { background: #fdf2f2; border-color: #f8c8c8; }
+
+/* Enforce Vertical Centering on Table Cells */
+  table.appointments td,
+  table.appointments th {
+    vertical-align: middle !important;
+  }
+
+  table.appointments th.status,
+  table.appointments td.status {
+    text-align: center !important;
+  }
+
+  /* Status Badge Base Styles with Flex Alignment */
+  .status-badge {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 3px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1 !important;
+    border-radius: 12px;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  /* Status Badge Colors */
+  .status-badge.status-scheduled { background-color: #edf4ff; color: #1f77d0; border-color: #c5d8f3; }
+  .status-badge.status-checked-in,
+  .status-badge.status-checkedin { background-color: #f6f0fa; color: #8e44ad; border-color: #e2d0fb; }
+  .status-badge.status-in-progress,
+  .status-badge.status-inprogress { background-color: #fff4df; color: #e68a00; border-color: #fce2b6; }
+  .status-badge.status-ready { background-color: #e8f8f5; color: #16a085; border-color: #a3e4d7; }
+  .status-badge.status-completed { background-color: #edf9ee; color: #2d8a34; border-color: #c7eecb; }
+  .status-badge.status-cancelled { background-color: #fdf2f2; color: #d9534f; border-color: #f8c8c8; }

config/locales/en.yml

@@ -21,9 +21,11 @@ en:
   label_duration: Duration
   label_end_date: End Date
   label_estimated_hours: Estimated Time
-  label_event: "Event"
+  label_event: Event
   label_open_appointment: Open Appointment
   label_start_date: Start Date
+  label_status: Status
+  label_title: Title
   label_upcoming_appointments: "My Upcoming Appointments"
   permission_manage_customer_appointments: Manage Customer Appointments
   permission_view_customer_appointments: View Customer Appointments