From ef091d7b29682f0b1ef668b75d7a9fa98f113bed Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 5 Jun 2025 14:49:29 +0200
Subject: [PATCH] Update sales level styling and improve UI performance

- Standardize sales level color mapping across components
- Enhance delete button styling with flat variant and white text
- Improve stepper visualization with consistent color logic
- Optimize Safari scrolling performance with CSS transforms
- Add TypeScript casting for data operations
---
 components/InterestDetailsModal.vue | 54 ++++++++++++-----------------
 pages/dashboard/interest-list.vue   | 19 +++++++++-
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index 13e5aa8..2d9df19 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -60,7 +60,7 @@
           </v-btn>
           <v-btn
             @click="confirmDelete"
-            variant="text"
+            variant="flat"
             color="error"
             :loading="isDeleting"
             :disabled="
@@ -72,8 +72,8 @@
             "
             class="ml-4"
           >
-            <v-icon start>mdi-delete</v-icon>
-            Delete
+            <v-icon start color="white">mdi-delete</v-icon>
+            <span class="text-white">Delete</span>
           </v-btn>
           <v-btn
             variant="flat"
@@ -109,7 +109,7 @@
                 :step="index"
                 :complete="currentStep + 1 > index"
                 :title="level"
-                :color="currentStep === index ? 'primary' : 'grey'"
+                :color="currentStep === index ? getSalesLevelColor(level) : (currentStep + 1 > index ? getSalesLevelColor(level) : 'grey')"
                 :icon="currentStep + 1 > index ? 'mdi-check' : undefined"
               />
               <v-divider
@@ -381,6 +381,7 @@
                       <v-chip
                         :color="getSalesLevelColor(item.value)"
                         size="small"
+                        class="text-white"
                       >
                         {{ item.value }}
                       </v-chip>
@@ -388,21 +389,14 @@
                     <template v-slot:item="{ item, props }">
                       <v-list-item 
                         v-bind="props"
-                        :base-color="getSalesLevelColor(item.value)"
                       >
                         <template v-slot:prepend>
                           <v-icon :color="getSalesLevelColor(item.value)">
                             mdi-circle
                           </v-icon>
                         </template>
-                        <v-list-item-title>
-                          <v-chip
-                            :color="getSalesLevelColor(item.value)"
-                            size="small"
-                            class="text-white"
-                          >
-                            {{ item.value }}
-                          </v-chip>
+                        <v-list-item-title :style="{ color: getSalesLevelColor(item.value) }">
+                          {{ item.value }}
                         </v-list-item-title>
                       </v-list-item>
                     </template>
@@ -729,8 +723,8 @@ const saveInterest = async () => {
     try {
       // Create a copy of the interest data without the Berths and Berth Recommendations fields
       const dataToSave = { ...interest.value };
-      delete dataToSave.Berths;
-      delete dataToSave["Berth Recommendations"];
+      delete (dataToSave as any).Berths;
+      delete (dataToSave as any)["Berth Recommendations"];
 
       // Call the update-interest API
       await $fetch("/api/update-interest", {
@@ -1036,24 +1030,20 @@ const formatDate = (dateString: string | null | undefined) => {
   }
 };
 
-// Get color for sales level
+// Get color for sales level - matching InterestSalesBadge.vue
 const getSalesLevelColor = (level: string) => {
-  switch (level?.toLowerCase()) {
-    case "initial inquiry":
-      return "grey";
-    case "qualified interest":
-      return "blue";
-    case "eoi sent":
-      return "orange";
-    case "loi sent":
-      return "purple";
-    case "reservation agreement sent":
-      return "green";
-    case "reserved":
-      return "success";
-    default:
-      return "grey";
-  }
+  const colorMapping = {
+    "General Qualified Interest": "blue",
+    "Specific Qualified Interest": "green",
+    "LOI and NDA Sent": "orange",
+    "Signed LOI and NDA": "purple",
+    "Made Reservation": "pink",
+    "Contract Negotiation": "brown",
+    "Contract Negotiations Finalized": "teal",
+    "Contract Signed": "indigo",
+  };
+  
+  return colorMapping[level as keyof typeof colorMapping] || "grey";
 };
 
 // Confirm delete
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index fe87176..70783db 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -498,14 +498,31 @@ const getRelativeTime = (dateString: string) => {
   opacity: 1;
 }
 
-/* Safari-specific fixes */
+/* Safari-specific fixes and scrolling performance improvements */
 .modern-table :deep(.v-table__wrapper) {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
+  /* Improve scrolling performance */
+  will-change: scroll-position;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .modern-table :deep(.v-data-table__td) {
   min-width: 0;
+  /* Optimize for better rendering */
+  contain: layout style paint;
+}
+
+/* Fix potential scrolling issues on desktop */
+.modern-table :deep(.v-table) {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.modern-table :deep(tbody tr) {
+  /* Prevent sub-pixel rendering issues */
+  transform: translateZ(0);
 }
 
 /* Column width constraints */