From a78f2ac362c40c958fff0e575e6942323c65e69d Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 10 Jun 2025 17:37:53 +0200
Subject: [PATCH] Fix UI/UX issues across email and interest components

- Added email attachment viewing and downloading functionality
- Removed 'Insert EOI link' button when EOI is already signed
- Changed refresh button color to black for better visibility
- Fixed Generate EOI button spacing with consistent margins
- Changed 'Interest Details' title to display client's full name
- Fixed mobile table scrolling cutoff in interest list by removing negative margins
- Improved email section mobile layout:
  - Fixed button sizes and display for mobile screens
  - Fixed thread section width to prevent horizontal scrolling
  - Added proper padding and overflow handling for expansion panels
  - Improved timeline and card responsiveness
---
 components/ClientEmailSection.vue   | 136 ++++++++++++++++++----------
 components/EOISection.vue           |   4 +-
 components/EmailDetailsDialog.vue   |  22 ++++-
 components/InterestDetailsModal.vue |   2 +-
 pages/dashboard/interest-list.vue   |   3 +-
 5 files changed, 114 insertions(+), 53 deletions(-)

diff --git a/components/ClientEmailSection.vue b/components/ClientEmailSection.vue
index bd0975a..4c43155 100644
--- a/components/ClientEmailSection.vue
+++ b/components/ClientEmailSection.vue
@@ -15,62 +15,64 @@
       <div v-else>
       
       <!-- Email Controls -->
-      <div class="mb-4 d-flex align-center gap-2 flex-wrap">
-        <v-btn
-          @click="showComposer = true"
-          color="primary"
-          variant="flat"
-          :prepend-icon="!mobile ? 'mdi-email-edit' : undefined"
-          :icon="mobile ? 'mdi-email-edit' : undefined"
-          :size="mobile ? 'default' : 'default'"
-        >
-          <span v-if="!mobile">Compose Email</span>
-        </v-btn>
-        <v-btn
-          @click="loadEmailThread"
-          variant="text"
-          icon="mdi-refresh"
-          :loading="isRefreshing"
-          :size="mobile ? 'small' : 'small'"
-        >
-          <v-tooltip activator="parent">Refresh Emails</v-tooltip>
-        </v-btn>
-        <v-spacer />
-        <v-btn-group v-if="!mobile" variant="text" density="compact">
+      <div class="mb-4">
+        <div class="d-flex align-center gap-2 flex-wrap">
           <v-btn
-            @click="reconnectEmail"
-            size="small"
-            prepend-icon="mdi-connection"
+            @click="showComposer = true"
+            color="primary"
+            variant="flat"
+            prepend-icon="mdi-email-edit"
+            :size="mobile ? 'small' : 'default'"
           >
-            Reconnect
+            {{ mobile ? 'Compose' : 'Compose Email' }}
           </v-btn>
           <v-btn
-            @click="disconnectEmail"
+            @click="loadEmailThread"
+            variant="text"
+            icon="mdi-refresh"
+            :loading="isRefreshing"
             size="small"
-            color="error"
-            prepend-icon="mdi-logout"
+            color="black"
           >
-            Disconnect
+            <v-tooltip activator="parent">Refresh Emails</v-tooltip>
           </v-btn>
-        </v-btn-group>
-        <v-menu v-else>
-          <template v-slot:activator="{ props }">
+          <v-spacer />
+          <v-btn-group v-if="!mobile" variant="text" density="compact">
             <v-btn
-              v-bind="props"
-              icon="mdi-dots-vertical"
-              variant="text"
+              @click="reconnectEmail"
               size="small"
-            />
-          </template>
-          <v-list density="compact">
-            <v-list-item @click="reconnectEmail" prepend-icon="mdi-connection">
-              <v-list-item-title>Reconnect</v-list-item-title>
-            </v-list-item>
-            <v-list-item @click="disconnectEmail" prepend-icon="mdi-logout" base-color="error">
-              <v-list-item-title>Disconnect</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
+              prepend-icon="mdi-connection"
+            >
+              Reconnect
+            </v-btn>
+            <v-btn
+              @click="disconnectEmail"
+              size="small"
+              color="error"
+              prepend-icon="mdi-logout"
+            >
+              Disconnect
+            </v-btn>
+          </v-btn-group>
+          <v-menu v-else>
+            <template v-slot:activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon="mdi-dots-vertical"
+                variant="text"
+                size="small"
+              />
+            </template>
+            <v-list density="compact">
+              <v-list-item @click="reconnectEmail" prepend-icon="mdi-connection">
+                <v-list-item-title>Reconnect</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="disconnectEmail" prepend-icon="mdi-logout" base-color="error">
+                <v-list-item-title>Disconnect</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
       </div>
 
       <!-- Email Thread List -->
@@ -636,6 +638,9 @@ onMounted(() => {
 
 // Check if interest has EOI or berth
 const hasEOI = computed(() => {
+  // Don't show EOI link if EOI is already signed
+  if (props.interest['EOI Status'] === 'Signed') return false;
+  
   const eoiDocs = props.interest['EOI Document'];
   const hasEOIDocs = Array.isArray(eoiDocs) && eoiDocs.length > 0;
   return !!(props.interest['Signature Link Client'] || hasEOIDocs);
@@ -1100,9 +1105,46 @@ const saveSignature = () => {
   overflow-y: auto;
 }
 
+/* Fix expansion panel width on mobile */
+:deep(.v-expansion-panel-text__wrapper) {
+  padding: 0 !important;
+}
+
 @media (max-width: 768px) {
   .email-threads {
     max-height: 400px;
+    /* Prevent horizontal scrolling */
+    overflow-x: hidden;
+  }
+  
+  /* Adjust timeline and cards for mobile */
+  :deep(.v-timeline) {
+    padding: 0;
+  }
+  
+  :deep(.v-timeline-item__body) {
+    max-width: 100%;
+  }
+  
+  /* Ensure email cards don't overflow */
+  .email-card {
+    max-width: 100%;
+    word-break: break-word;
+  }
+  
+  /* Adjust expansion panel padding on mobile */
+  :deep(.v-expansion-panel-text) {
+    padding: 8px !important;
+  }
+  
+  /* Ensure thread titles wrap properly */
+  :deep(.v-expansion-panel-title) {
+    padding: 12px 16px !important;
+    min-height: auto !important;
+  }
+  
+  :deep(.v-expansion-panel-title__content) {
+    flex-wrap: wrap;
   }
 }
 </style>
diff --git a/components/EOISection.vue b/components/EOISection.vue
index 83eca3e..dd21a4c 100644
--- a/components/EOISection.vue
+++ b/components/EOISection.vue
@@ -29,14 +29,14 @@
       </div>
       
       <!-- Generate EOI Button - Only show if no documents uploaded -->
-      <div v-if="!hasEOI && !hasEOIDocuments" class="mb-4">
+      <div v-if="!hasEOI && !hasEOIDocuments" class="d-flex mb-4">
         <v-btn
           @click="generateEOI"
           :loading="isGenerating"
           color="primary"
           variant="flat"
           prepend-icon="mdi-file-document-plus"
-          :size="mobile ? 'default' : 'default'"
+          size="default"
           :block="mobile"
         >
           Generate EOI
diff --git a/components/EmailDetailsDialog.vue b/components/EmailDetailsDialog.vue
index deef7cc..e8d433d 100644
--- a/components/EmailDetailsDialog.vue
+++ b/components/EmailDetailsDialog.vue
@@ -62,8 +62,12 @@
             variant="tonal"
             prepend-icon="mdi-paperclip"
             class="mr-2 mb-2"
+            :href="getAttachmentUrl(attachment)"
+            :download="getAttachmentName(attachment)"
+            component="a"
+            target="_blank"
           >
-            {{ attachment.name || attachment }}
+            {{ getAttachmentName(attachment) }}
           </v-chip>
         </div>
       </v-card-text>
@@ -128,6 +132,22 @@ const formatEmailContent = (content: string) => {
     .map(line => line.trim() ? `<p>${line}</p>` : '<br>')
     .join('');
 };
+
+const getAttachmentName = (attachment: any) => {
+  if (typeof attachment === 'string') return attachment;
+  return attachment.name || attachment.filename || 'attachment';
+};
+
+const getAttachmentUrl = (attachment: any) => {
+  // If attachment has a path and bucket, construct the download URL
+  if (attachment.path && attachment.bucket) {
+    return `/api/files/proxy-download?path=${encodeURIComponent(attachment.path)}&bucket=${attachment.bucket}`;
+  }
+  // If it's just a URL, return it
+  if (attachment.url) return attachment.url;
+  // Otherwise return a placeholder
+  return '#';
+};
 </script>
 
 <style scoped>
diff --git a/components/InterestDetailsModal.vue b/components/InterestDetailsModal.vue
index f7ff93c..ff5297a 100644
--- a/components/InterestDetailsModal.vue
+++ b/components/InterestDetailsModal.vue
@@ -13,7 +13,7 @@
         </v-btn>
         <v-toolbar-title>
           <v-icon class="mr-2">mdi-account-details</v-icon>
-          Interest Details
+          {{ interest?.['Full Name'] || 'Interest Details' }}
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-toolbar-items v-if="!mobile">
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
index 3db253f..4234dcc 100644
--- a/pages/dashboard/interest-list.vue
+++ b/pages/dashboard/interest-list.vue
@@ -588,12 +588,11 @@ const getRelativeTime = (dateString: string) => {
     position: relative;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    margin: 0 -16px;
+    /* Remove negative margins to prevent cutoff */
   }
   
   /* Add padding to the wrapper instead */
   .modern-table :deep(.v-table__wrapper) {
-    padding: 0 16px;
     min-width: 600px; /* Minimum width to ensure scrolling */
   }