From 5b6f6d707186e2f86c34c056eb0ea74f5ec33b26 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 10 Jun 2025 00:42:14 +0200
Subject: [PATCH] updates

---
 components/EOISection.vue | 197 +++++++++++++++++++++-----------------
 1 file changed, 107 insertions(+), 90 deletions(-)

diff --git a/components/EOISection.vue b/components/EOISection.vue
index 48969ef..30afa53 100644
--- a/components/EOISection.vue
+++ b/components/EOISection.vue
@@ -1,100 +1,106 @@
 <template>
-  <div class="border rounded-lg p-4 bg-gray-50">
-    <h3 class="text-lg font-semibold mb-4">EOI Management</h3>
+  <div>
+    <v-card-title class="text-h6 d-flex align-center pb-4">
+      <v-icon class="mr-2" color="primary">mdi-file-document-edit</v-icon>
+      EOI Management
+    </v-card-title>
+    <v-card-text class="pt-2">
     
-    <!-- Generate EOI Button -->
-    <div v-if="!hasEOI" class="mb-4">
-      <button 
-        @click="generateEOI"
-        :disabled="isGenerating"
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        {{ isGenerating ? 'Generating EOI...' : 'Generate EOI' }}
-      </button>
-    </div>
-
-    <!-- EOI Status Badge -->
-    <div v-if="hasEOI" class="mb-4">
-      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
-            :class="{
-              'bg-yellow-100 text-yellow-800': interest['EOI Status'] === 'Waiting for Signatures',
-              'bg-green-100 text-green-800': interest['EOI Status'] === 'Signed',
-              'bg-gray-100 text-gray-800': interest['EOI Status'] === 'Awaiting Further Details'
-            }">
-        {{ interest['EOI Status'] }}
-      </span>
-      <span v-if="interest['EOI Time Sent']" class="ml-2 text-sm text-gray-600">
-        Sent: {{ formatDate(interest['EOI Time Sent']) }}
-      </span>
-    </div>
-
-    <!-- Signature Links -->
-    <div v-if="hasEOI" class="space-y-3">
-      <div class="border rounded p-3 bg-white">
-        <div class="flex justify-between items-center">
-          <div>
-            <span class="font-medium">Client Signature Link</span>
-            <span class="text-sm text-gray-500 ml-2">({{ interest['Full Name'] }})</span>
-          </div>
-          <button 
-            @click="copyLink(interest['Signature Link Client'])"
-            class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
-          >
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-            </svg>
-            Copy
-          </button>
-        </div>
+      <!-- Generate EOI Button -->
+      <div v-if="!hasEOI" class="mb-4">
+        <v-btn
+          @click="generateEOI"
+          :loading="isGenerating"
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-file-document-plus"
+        >
+          Generate EOI
+        </v-btn>
       </div>
 
-      <div class="border rounded p-3 bg-white">
-        <div class="flex justify-between items-center">
-          <div>
-            <span class="font-medium">CC Signature Link</span>
-            <span class="text-sm text-gray-500 ml-2">(Oscar Faragher)</span>
-          </div>
-          <button 
-            @click="copyLink(interest['Signature Link CC'])"
-            class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
-          >
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-            </svg>
-            Copy
-          </button>
-        </div>
+      <!-- EOI Status Badge -->
+      <div v-if="hasEOI" class="mb-4">
+        <v-chip
+          :color="getStatusColor(interest['EOI Status'])"
+          variant="tonal"
+          prepend-icon="mdi-file-document-check"
+          class="mr-2"
+        >
+          {{ interest['EOI Status'] }}
+        </v-chip>
+        <span v-if="interest['EOI Time Sent']" class="text-caption text-grey-darken-1">
+          Sent: {{ formatDate(interest['EOI Time Sent']) }}
+        </span>
       </div>
 
-      <div class="border rounded p-3 bg-white">
-        <div class="flex justify-between items-center">
-          <div>
-            <span class="font-medium">Developer Signature Link</span>
-            <span class="text-sm text-gray-500 ml-2">(David Mizrahi)</span>
-          </div>
-          <button 
-            @click="copyLink(interest['Signature Link Developer'])"
-            class="text-blue-600 hover:text-blue-800 text-sm flex items-center"
-          >
-            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-            </svg>
-            Copy
-          </button>
-        </div>
-      </div>
-    </div>
+      <!-- Signature Links -->
+      <v-list v-if="hasEOI" density="comfortable">
+        <v-list-item class="mb-2">
+          <template v-slot:prepend>
+            <v-avatar color="primary" size="40">
+              <v-icon>mdi-account</v-icon>
+            </v-avatar>
+          </template>
+          <v-list-item-title>Client Signature Link</v-list-item-title>
+          <v-list-item-subtitle>{{ interest['Full Name'] }}</v-list-item-subtitle>
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-content-copy"
+              variant="text"
+              @click="copyLink(interest['Signature Link Client'])"
+            ></v-btn>
+          </template>
+        </v-list-item>
 
-    <!-- Regenerate Button -->
-    <div v-if="hasEOI && interest['EOI Status'] !== 'Signed'" class="mt-4">
-      <button 
-        @click="generateEOI"
-        :disabled="isGenerating"
-        class="text-sm text-gray-600 hover:text-gray-800 underline"
-      >
-        Regenerate EOI
-      </button>
-    </div>
+        <v-list-item class="mb-2">
+          <template v-slot:prepend>
+            <v-avatar color="success" size="40">
+              <v-icon>mdi-account-check</v-icon>
+            </v-avatar>
+          </template>
+          <v-list-item-title>CC Signature Link</v-list-item-title>
+          <v-list-item-subtitle>Oscar Faragher</v-list-item-subtitle>
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-content-copy"
+              variant="text"
+              @click="copyLink(interest['Signature Link CC'])"
+            ></v-btn>
+          </template>
+        </v-list-item>
+
+        <v-list-item class="mb-2">
+          <template v-slot:prepend>
+            <v-avatar color="secondary" size="40">
+              <v-icon>mdi-account-tie</v-icon>
+            </v-avatar>
+          </template>
+          <v-list-item-title>Developer Signature Link</v-list-item-title>
+          <v-list-item-subtitle>David Mizrahi</v-list-item-subtitle>
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-content-copy"
+              variant="text"
+              @click="copyLink(interest['Signature Link Developer'])"
+            ></v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
+
+      <!-- Regenerate Button -->
+      <div v-if="hasEOI && interest['EOI Status'] !== 'Signed'" class="mt-4">
+        <v-btn
+          @click="generateEOI"
+          :loading="isGenerating"
+          variant="text"
+          size="small"
+          prepend-icon="mdi-refresh"
+        >
+          Regenerate EOI
+        </v-btn>
+      </div>
+    </v-card-text>
   </div>
 </template>
 
@@ -174,4 +180,15 @@ const formatDate = (dateString: string) => {
     minute: '2-digit'
   });
 };
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'Waiting for Signatures':
+      return 'warning';
+    case 'Signed':
+      return 'success';
+    default:
+      return 'grey';
+  }
+};
 </script>