From afc709282fbba9d046e39180eba2286548013182 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 4 Jun 2025 20:05:49 +0200
Subject: [PATCH] Enhance sales process level selector with colored chips

- Add colored chip display to dropdown items for better visual clarity
- Apply consistent base color to list items based on sales level
- Change progress bar to use static blue color instead of dynamic coloring
- Improve visual hierarchy and readability of sales process levels
---
 components/InterestDetailsModal.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index a5cf669..13e5aa8 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -386,12 +386,24 @@
                       </v-chip>
                     </template>
                     <template v-slot:item="{ item, props }">
-                      <v-list-item v-bind="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>
                       </v-list-item>
                     </template>
                   </v-select>
@@ -400,7 +412,7 @@
                       :model-value="(currentStep + 1) / InterestSalesProcessLevelFlow.length * 100"
                       height="10"
                       rounded
-                      :color="getSalesLevelColor(interest['Sales Process Level'])"
+                      color="blue"
                     />
                     <div class="text-caption text-center mt-2">
                       Progress: {{ currentStep + 1 }} of {{ InterestSalesProcessLevelFlow.length }} stages