From 1a2e0d7ab04ff6b2d90b5779e4f493c548bca8eb Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 12 Jun 2025 17:42:42 +0200
Subject: [PATCH] updates

---
 pages/dashboard/interest-list.vue | 567 +++++++++++++-----------------
 1 file changed, 250 insertions(+), 317 deletions(-)

diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index b9dd5a0..ae61d6b 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -118,8 +118,127 @@
         </v-col>
       </v-row>
 
-      <!-- Data Table -->
-      <v-card elevation="0" class="rounded-lg">
+      <!-- Mobile: Card-Based Layout -->
+      <div v-if="mobile" class="mobile-card-container">
+        <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
+        
+        <div v-if="!loading && filteredInterests.length === 0" class="text-center py-8">
+          <v-icon size="64" color="grey-lighten-2" class="mb-4">mdi-account-search</v-icon>
+          <p class="text-h6 text-grey-darken-1">No interests found</p>
+          <p class="text-body-2 text-grey">Try adjusting your search or filters</p>
+        </div>
+
+        <div v-for="(item, index) in filteredInterests" :key="item.Id" class="mobile-interest-card">
+          <v-card 
+            @click="handleRowClick(item)"
+            class="interest-card"
+            elevation="1"
+            hover
+          >
+            <v-card-text class="pa-4">
+              <!-- Contact Header -->
+              <div class="d-flex align-center mb-3">
+                <v-avatar size="40" color="primary" class="mr-3">
+                  <span class="text-white text-body-2 font-weight-bold">
+                    {{ getInitials(item["Full Name"]) }}
+                  </span>
+                </v-avatar>
+                <div class="flex-grow-1 min-width-0">
+                  <div class="d-flex align-center gap-1">
+                    <h3 class="text-subtitle-1 font-weight-medium text-truncate">{{ item["Full Name"] }}</h3>
+                    <v-tooltip v-if="item['Extra Comments']" location="bottom">
+                      <template #activator="{ props }">
+                        <v-icon
+                          v-bind="props"
+                          size="small"
+                          color="orange"
+                        >
+                          mdi-comment-text
+                        </v-icon>
+                      </template>
+                      <span>{{ item["Extra Comments"] }}</span>
+                    </v-tooltip>
+                  </div>
+                  <p class="text-body-2 text-grey-darken-1 text-truncate mb-0">{{ item["Email Address"] }}</p>
+                </div>
+                <v-chip
+                  size="x-small"
+                  variant="tonal"
+                  color="grey"
+                  class="ml-2"
+                >
+                  {{ getRelativeTime(item["Created At"]) }}
+                </v-chip>
+              </div>
+
+              <!-- Status Section -->
+              <div class="status-section mb-3">
+                <div class="d-flex align-center justify-space-between mb-2">
+                  <span class="text-caption text-grey-darken-1 font-weight-medium">CURRENT STATUS</span>
+                  <v-chip
+                    :color="getSalesStatusColor(item['Sales Process Level'])"
+                    size="small"
+                    variant="flat"
+                    class="font-weight-medium"
+                  >
+                    {{ getDescriptiveSalesStatus(item['Sales Process Level']) }}
+                  </v-chip>
+                </div>
+              </div>
+
+              <!-- Detailed Status Grid -->
+              <div class="status-grid">
+                <div class="status-item">
+                  <span class="status-label">EOI Status</span>
+                  <div class="status-value">
+                    <EOIStatusBadge
+                      v-if="item['EOI Status']"
+                      :eoiStatus="item['EOI Status']"
+                      size="small"
+                    />
+                    <v-chip v-else size="small" variant="tonal" color="grey">
+                      Awaiting Further Details
+                    </v-chip>
+                  </div>
+                </div>
+
+                <div class="status-item">
+                  <span class="status-label">Lead Type</span>
+                  <div class="status-value">
+                    <v-chip
+                      size="small"
+                      :color="item['Lead Category'] === 'Friends and Family' ? 'purple' : 'blue'"
+                      variant="tonal"
+                    >
+                      {{ item['Lead Category'] === 'Friends and Family' ? 'Friends & Family' : 'General Lead' }}
+                    </v-chip>
+                  </div>
+                </div>
+
+                <div v-if="item['Contract Status']" class="status-item">
+                  <span class="status-label">Contract</span>
+                  <div class="status-value">
+                    <ContractStatusBadge
+                      :contractStatus="item['Contract Status']"
+                      size="small"
+                    />
+                  </div>
+                </div>
+
+                <div class="status-item">
+                  <span class="status-label">Added</span>
+                  <div class="status-value">
+                    <span class="text-body-2">{{ formatDate(item["Created At"]) }}</span>
+                  </div>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
+      </div>
+
+      <!-- Desktop: Data Table -->
+      <v-card v-if="!mobile" elevation="0" class="rounded-lg">
         <div class="table-container">
           <v-data-table
             :headers="headers"
@@ -136,140 +255,61 @@
           >
           <template #item="{ item }">
             <tr @click="handleRowClick(item)" class="table-row">
-              <!-- Mobile: Contact + Stacked Badges -->
-              <td v-if="mobile" class="contact-cell mobile-contact-cell">
-                <div class="mobile-contact-container">
-                  <!-- Contact Info -->
-                  <div class="d-flex align-center mb-2">
-                    <v-avatar size="32" color="primary" class="mr-3">
-                      <span class="text-white text-caption font-weight-bold">
-                        {{ getInitials(item["Full Name"]) }}
-                      </span>
-                    </v-avatar>
-                    <div class="flex-grow-1 min-width-0">
-                      <div class="d-flex align-center gap-1">
-                        <span class="font-weight-medium text-truncate">{{ item["Full Name"] }}</span>
-                        <v-tooltip v-if="item['Extra Comments']" location="bottom">
-                          <template #activator="{ props }">
-                            <v-icon
-                              v-bind="props"
-                              size="x-small"
-                              color="orange"
-                            >
-                              mdi-comment-text
-                            </v-icon>
-                          </template>
-                          <span>{{ item["Extra Comments"] }}</span>
-                        </v-tooltip>
-                      </div>
-                      <div class="text-caption text-grey-darken-1 text-truncate">{{ item["Email Address"] }}</div>
-                    </div>
-                  </div>
-                  
-                  <!-- Stacked Status Badges -->
-                  <div class="mobile-badges-stack">
-                    <div class="d-flex flex-wrap gap-1 mb-1">
-                      <InterestSalesBadge
-                        :salesProcessLevel="item['Sales Process Level']"
-                        size="x-small"
-                      />
-                      <LeadCategoryBadge 
-                        :leadCategory="item['Lead Category']"
-                        size="x-small"
-                      />
-                    </div>
-                    <div class="d-flex flex-wrap gap-1">
-                      <EOIStatusBadge
-                        v-if="item['EOI Status']"
-                        :eoiStatus="item['EOI Status']"
-                        size="x-small"
-                      />
-                      <ContractStatusBadge
-                        v-if="item['Contract Status']"
-                        :contractStatus="item['Contract Status']"
-                        size="x-small"
-                      />
+              <td class="contact-cell">
+                <div class="d-flex align-center">
+                  <v-avatar size="32" color="primary" class="mr-3">
+                    <span class="text-white text-caption font-weight-bold">
+                      {{ getInitials(item["Full Name"]) }}
+                    </span>
+                  </v-avatar>
+                  <div class="flex-grow-1 min-width-0">
+                    <div class="d-flex align-center gap-1">
+                      <span class="font-weight-medium text-truncate">{{ item["Full Name"] }}</span>
+                      <v-tooltip v-if="item['Extra Comments']" location="bottom">
+                        <template #activator="{ props }">
+                          <v-icon
+                            v-bind="props"
+                            size="small"
+                            color="orange"
+                          >
+                            mdi-comment-text
+                          </v-icon>
+                        </template>
+                        <span>{{ item["Extra Comments"] }}</span>
+                      </v-tooltip>
                     </div>
+                    <div class="text-caption text-grey-darken-1 text-truncate">{{ item["Email Address"] }}</div>
                   </div>
                 </div>
               </td>
-              
-              <!-- Mobile: Sales Status (simplified) -->
-              <td v-if="mobile" class="mobile-status-cell">
+              <td>
                 <InterestSalesBadge
                   :salesProcessLevel="item['Sales Process Level']"
-                  size="small"
                 />
               </td>
-              
-              <!-- Mobile: Created Date -->
-              <td v-if="mobile" class="mobile-date-cell">
-                <div class="text-caption text-center">
-                  <div class="font-weight-medium">{{ formatDate(item["Created At"]) }}</div>
+              <td>
+                <EOIStatusBadge
+                  v-if="item['EOI Status']"
+                  :eoiStatus="item['EOI Status']"
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td>
+                <ContractStatusBadge
+                  v-if="item['Contract Status']"
+                  :contractStatus="item['Contract Status']"
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
+              <td>
+                <div class="text-caption">
+                  <div>{{ formatDate(item["Created At"]) }}</div>
                   <div class="text-grey-darken-1">{{ getRelativeTime(item["Created At"]) }}</div>
                 </div>
               </td>
-              
-              <!-- Desktop: Full Layout -->
-              <template v-if="!mobile">
-                <td class="contact-cell">
-                  <div class="d-flex align-center">
-                    <v-avatar size="32" color="primary" class="mr-3">
-                      <span class="text-white text-caption font-weight-bold">
-                        {{ getInitials(item["Full Name"]) }}
-                      </span>
-                    </v-avatar>
-                    <div class="flex-grow-1 min-width-0">
-                      <div class="d-flex align-center gap-1">
-                        <span class="font-weight-medium text-truncate">{{ item["Full Name"] }}</span>
-                        <v-tooltip v-if="item['Extra Comments']" location="bottom">
-                          <template #activator="{ props }">
-                            <v-icon
-                              v-bind="props"
-                              size="small"
-                              color="orange"
-                            >
-                              mdi-comment-text
-                            </v-icon>
-                          </template>
-                          <span>{{ item["Extra Comments"] }}</span>
-                        </v-tooltip>
-                      </div>
-                      <div class="text-caption text-grey-darken-1 text-truncate">{{ item["Email Address"] }}</div>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <InterestSalesBadge
-                    :salesProcessLevel="item['Sales Process Level']"
-                  />
-                </td>
-                <td>
-                  <EOIStatusBadge
-                    v-if="item['EOI Status']"
-                    :eoiStatus="item['EOI Status']"
-                  />
-                  <span v-else class="text-grey-darken-1">—</span>
-                </td>
-                <td>
-                  <ContractStatusBadge
-                    v-if="item['Contract Status']"
-                    :contractStatus="item['Contract Status']"
-                  />
-                  <span v-else class="text-grey-darken-1">—</span>
-                </td>
-                <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
-                <td>
-                  <div class="text-caption">
-                    <div>{{ formatDate(item["Created At"]) }}</div>
-                    <div class="text-grey-darken-1">{{ getRelativeTime(item["Created At"]) }}</div>
-                  </div>
-                </td>
-              </template>
             </tr>
           </template>
-
-
           </v-data-table>
         </div>
       </v-card>
@@ -349,13 +389,6 @@ const handleInterestCreated = async (interest: Interest) => {
 };
 
 const headers = computed(() => {
-  if (mobile) {
-    return [
-      { title: "Contact", key: "Full Name", sortable: true },
-      { title: "Status", key: "Sales Process Level", sortable: true },
-      { title: "Created", key: "Created At", sortable: true },
-    ];
-  }
   return [
     { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
     { title: "Sales Status", key: "Sales Process Level", sortable: true },
@@ -377,6 +410,27 @@ const clearAllFilters = () => {
   selectedSalesLevel.value = 'all';
 };
 
+// Helper functions for mobile card layout
+const getDescriptiveSalesStatus = (status: string) => {
+  if (!status) return 'New Interest';
+  if (status.includes('Qualified')) return 'Qualified Interest';
+  if (status.includes('LOI')) return 'LOI & NDA Sent';
+  if (status.includes('Signed')) return 'Signed LOI & NDA';
+  if (status.includes('Reservation')) return 'Made Reservation';
+  if (status.includes('Contract')) return 'Contract Stage';
+  return status;
+};
+
+const getSalesStatusColor = (status: string) => {
+  if (!status) return 'grey';
+  if (status.includes('Qualified')) return 'blue';
+  if (status.includes('LOI')) return 'orange';
+  if (status.includes('Signed')) return 'green';
+  if (status.includes('Reservation')) return 'purple';
+  if (status.includes('Contract')) return 'primary';
+  return 'grey';
+};
+
 const formatDate = (dateString: string) => {
   if (!dateString) return "-";
   
@@ -514,6 +568,59 @@ const getRelativeTime = (dateString: string) => {
   box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
 }
 
+/* Mobile Card Layout Styles */
+.mobile-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mobile-interest-card {
+  width: 100%;
+}
+
+.interest-card {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: 12px !important;
+}
+
+.interest-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
+}
+
+.status-section {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 12px;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.status-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-value {
+  display: flex;
+  align-items: center;
+}
+
+/* Desktop Table Styles */
 .modern-table :deep(.v-table__wrapper) {
   border-radius: 8px;
   overflow: hidden;
@@ -553,80 +660,13 @@ const getRelativeTime = (dateString: string) => {
   font-size: 0.875rem;
 }
 
-.logo-icon {
-  height: 32px;
-  width: auto;
-  max-width: 32px;
-  object-fit: contain;
-}
-
-/* Mobile horizontal scrolling with visual indicators */
 .table-container {
   position: relative;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-/* Scroll indicators */
-.table-container::before,
-.table-container::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 40px;
-  pointer-events: none;
-  z-index: 1;
-  transition: opacity 0.3s;
-}
-
-.table-container::before {
-  left: 0;
-  background: linear-gradient(to right, white, transparent);
-  opacity: 0;
-}
-
-.table-container::after {
-  right: 0;
-  background: linear-gradient(to left, white, transparent);
-}
-
-.table-container:not(.scroll-start)::before {
-  opacity: 1;
-}
-
-.table-container:not(.scroll-end)::after {
-  opacity: 1;
-}
-
-/* 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);
-}
-
-/* Responsive column widths */
+/* Responsive column widths for desktop */
 @media (min-width: 769px) {
   .modern-table :deep(th:nth-child(1)),
   .modern-table :deep(td:nth-child(1)) {
@@ -659,136 +699,29 @@ const getRelativeTime = (dateString: string) => {
   }
 }
 
-/* Mobile-specific styles */
+/* Mobile-specific adjustments */
 @media (max-width: 768px) {
-  /* Mobile Contact Cell with Stacked Layout */
-  .mobile-contact-cell {
-    padding: 12px 8px !important;
-    vertical-align: top !important;
-    width: 60% !important;
-    min-width: 280px !important;
-  }
-  
-  .mobile-contact-container {
-    width: 100%;
-  }
-  
-  .mobile-badges-stack {
-    margin-left: 44px; /* Align with contact info text */
-  }
-  
-  .mobile-badges-stack .v-chip {
-    height: 20px !important;
-    font-size: 0.65rem !important;
-    padding: 0 6px !important;
-    margin: 1px !important;
-  }
-  
-  /* Mobile Status Cell */
-  .mobile-status-cell {
-    padding: 12px 4px !important;
-    text-align: center !important;
-    vertical-align: middle !important;
-    width: 20% !important;
-    min-width: 80px !important;
-  }
-  
-  /* Mobile Date Cell */
-  .mobile-date-cell {
-    padding: 12px 8px !important;
-    text-align: center !important;
-    vertical-align: middle !important;
-    width: 20% !important;
-    min-width: 100px !important;
-  }
-  
-  .mobile-date-cell .text-caption {
-    font-size: 0.65rem !important;
-    line-height: 1.3;
-  }
-  
-  /* Table container improvements */
-  .table-container {
-    position: relative;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    margin: 0 -16px;
-    padding: 0 16px;
-  }
-  
-  .modern-table :deep(.v-table__wrapper) {
-    min-width: 460px; /* Minimum width to fit 3 columns properly */
-  }
-  
-  /* Table headers for mobile */
-  .modern-table :deep(th) {
-    padding: 8px 4px !important;
-    font-size: 0.75rem;
-    white-space: nowrap;
-    text-align: center;
-  }
-  
-  .modern-table :deep(th:first-child) {
-    text-align: left !important;
-    padding-left: 8px !important;
-  }
-  
-  /* Adjust table row height on mobile */
-  .table-row td {
-    height: auto !important;
-    min-height: 80px !important; /* Increased for stacked content */
-  }
-  
-  /* Contact cell text improvements */
-  .mobile-contact-cell .text-truncate {
-    max-width: 200px;
-  }
-  
-  .mobile-contact-cell .v-avatar {
-    flex-shrink: 0;
-  }
-  
-  /* Fix container padding */
   .v-container {
     padding: 12px 16px !important;
   }
   
-  /* Improve mobile row layout */
-  .modern-table :deep(tbody tr) {
-    height: auto !important;
+  .status-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
   }
   
-  /* Better text overflow handling */
-  .modern-table :deep(td) {
-    word-break: break-word;
-    overflow-wrap: break-word;
+  .status-item {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
   }
   
-  /* Add visual scroll indicators */
-  .table-container::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 16px;
-    bottom: 0;
-    width: 20px;
-    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
-    pointer-events: none;
-    z-index: 1;
+  .status-label {
+    flex: 1;
   }
   
-  /* Hover effects for mobile */
-  .modern-table :deep(tbody tr:hover) {
-    background-color: #f5f5f5;
-  }
-  
-  /* Optimize badge spacing in stacked layout */
-  .mobile-badges-stack .d-flex {
-    gap: 4px !important;
-  }
-  
-  .mobile-badges-stack .gap-1 {
-    gap: 4px !important;
+  .status-value {
+    flex: 0 0 auto;
   }
 }