updates

components/ClientEmailSection.vue

@@ -6,8 +6,16 @@
     </v-card-title>
     <v-card-text class="pt-0">
       
+      <!-- Email Credentials Setup -->
+      <EmailCredentialsSetup 
+        v-if="!hasEmailCredentials"
+        @credentials-saved="onCredentialsSaved"
+      />
+      
+      <div v-else>
+      
       <!-- Compose New Email -->
-      <div class="mb-4">
+      <div class="mb-4 d-flex align-center gap-2">
         <v-btn
           @click="showComposer = true"
           color="primary"
@@ -16,6 +24,15 @@
         >
           Compose Email
         </v-btn>
+        <v-btn
+          @click="loadEmailThread"
+          variant="text"
+          icon="mdi-refresh"
+          :loading="isRefreshing"
+          size="small"
+        >
+          <v-tooltip activator="parent">Refresh Emails</v-tooltip>
+        </v-btn>
       </div>
 
       <!-- Email Thread List -->
@@ -67,10 +84,11 @@
         </v-timeline>
       </div>
       
-      <!-- Empty State -->
-      <div v-else class="text-center py-8 text-grey">
-        <v-icon size="48" class="mb-3">mdi-email-outline</v-icon>
-        <div>No email communication yet</div>
+        <!-- Empty State -->
+        <div v-else class="text-center py-8 text-grey">
+          <v-icon size="48" class="mb-3">mdi-email-outline</v-icon>
+          <div>No email communication yet</div>
+        </div>
       </div>
     </v-card-text>
 
@@ -150,17 +168,121 @@
             ref="contentTextarea"
           />
 
+          <!-- Signature Settings -->
+          <v-expansion-panels variant="accordion" class="my-4">
+            <v-expansion-panel>
+              <v-expansion-panel-title>
+                <v-icon class="mr-2">mdi-draw-pen</v-icon>
+                Email Signature Settings
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-checkbox
+                  v-model="includeSignature"
+                  label="Include signature"
+                  hide-details
+                  class="mb-3"
+                />
+                <div v-if="includeSignature">
+                  <v-text-field
+                    v-model="signatureConfig.name"
+                    label="Your Name"
+                    variant="outlined"
+                    density="compact"
+                    class="mb-2"
+                  />
+                  <v-text-field
+                    v-model="signatureConfig.title"
+                    label="Job Title"
+                    variant="outlined"
+                    density="compact"
+                    class="mb-2"
+                  />
+                  <v-text-field
+                    v-model="signatureConfig.company"
+                    label="Company"
+                    variant="outlined"
+                    density="compact"
+                    class="mb-2"
+                  />
+                  <v-text-field
+                    v-model="signatureConfig.email"
+                    label="Email"
+                    variant="outlined"
+                    density="compact"
+                    class="mb-2"
+                  />
+                  <v-textarea
+                    v-model="signatureConfig.contactInfo"
+                    label="Additional Contact Info"
+                    variant="outlined"
+                    density="compact"
+                    rows="2"
+                  />
+                </div>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
           <!-- Attachments -->
-          <v-file-input
-            v-model="emailDraft.attachments"
-            label="Attachments"
-            variant="outlined"
-            density="comfortable"
-            multiple
-            chips
-            prepend-icon="mdi-paperclip"
-            class="mt-4"
-          />
+          <div class="mt-4">
+            <div class="text-body-2 mb-2">Attachments</div>
+            
+            <!-- Attachment Options -->
+            <v-btn-toggle v-model="attachmentMode" mandatory class="mb-3">
+              <v-btn value="upload" size="small">
+                <v-icon start>mdi-upload</v-icon>
+                Upload Files
+              </v-btn>
+              <v-btn value="browse" size="small">
+                <v-icon start>mdi-folder-open</v-icon>
+                Browse Files
+              </v-btn>
+            </v-btn-toggle>
+
+            <!-- Upload Mode -->
+            <v-file-input
+              v-if="attachmentMode === 'upload'"
+              v-model="emailDraft.attachments"
+              label="Select files to attach"
+              variant="outlined"
+              density="comfortable"
+              multiple
+              chips
+              prepend-icon="mdi-paperclip"
+              show-size
+            />
+            
+            <!-- Browse Mode -->
+            <div v-else>
+              <v-btn
+                @click="openFileBrowser"
+                variant="outlined"
+                block
+                size="large"
+                prepend-icon="mdi-folder-open"
+              >
+                Browse Files
+              </v-btn>
+            </div>
+
+            <!-- Selected Files Preview -->
+            <div v-if="selectedBrowserFiles.length > 0" class="mt-3">
+              <div class="text-caption mb-2">Selected from browser:</div>
+              <v-chip
+                v-for="(file, i) in selectedBrowserFiles"
+                :key="i"
+                size="small"
+                color="primary"
+                variant="tonal"
+                closable
+                @click:close="removeBrowserFile(i)"
+                class="mr-2 mb-2"
+              >
+                <v-icon start size="small">mdi-file</v-icon>
+                {{ file.name }}
+              </v-chip>
+            </div>
+          </div>
         </v-card-text>
         
         <v-divider />
@@ -180,11 +302,31 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- File Browser Dialog -->
+    <v-dialog v-model="showFileBrowser" max-width="1200" height="80vh">
+      <v-card height="80vh">
+        <v-card-title class="d-flex align-center">
+          <v-icon class="mr-2">mdi-folder-open</v-icon>
+          Select Files from Browser
+          <v-spacer />
+          <v-btn icon="mdi-close" variant="text" @click="showFileBrowser = false"></v-btn>
+        </v-card-title>
+        <v-divider />
+        <v-card-text class="pa-0" style="height: calc(100% - 64px);">
+          <FileBrowser
+            selection-mode
+            @file-selected="handleFileSelected"
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Interest } from '~/utils/types';
+import FileBrowser from '~/pages/dashboard/file-browser.vue';
 
 const props = defineProps<{
   interest: Interest;
@@ -200,6 +342,14 @@ const showComposer = ref(false);
 const isSending = ref(false);
 const emailThreads = ref<any[]>([]);
 const contentTextarea = ref<any>(null);
+const isRefreshing = ref(false);
+const attachmentMode = ref('upload');
+const selectedBrowserFiles = ref<any[]>([]);
+const hasEmailCredentials = ref(false);
+const sessionId = ref<string>('');
+const includeSignature = ref(true);
+const signatureConfig = ref<any>({});
+const showFileBrowser = ref(false);
 
 const emailDraft = ref<{
   subject: string;
@@ -211,6 +361,33 @@ const emailDraft = ref<{
   attachments: []
 });
 
+// Check for stored session on mount
+onMounted(() => {
+  const storedSession = localStorage.getItem('emailSessionId');
+  if (storedSession) {
+    sessionId.value = storedSession;
+    hasEmailCredentials.value = true;
+  }
+  
+  // Load signature config
+  const storedSignature = localStorage.getItem('emailSignature');
+  if (storedSignature) {
+    signatureConfig.value = JSON.parse(storedSignature);
+  }
+  
+  loadEmailThread();
+  
+  // Auto-refresh every 30 seconds
+  const refreshInterval = setInterval(() => {
+    loadEmailThread();
+  }, 30000);
+  
+  // Clean up interval on unmount
+  onUnmounted(() => {
+    clearInterval(refreshInterval);
+  });
+});
+
 // Check if interest has EOI or berth
 const hasEOI = computed(() => {
   const eoiDocs = props.interest['EOI Document'];
@@ -224,17 +401,13 @@ const hasBerth = computed(() => {
   return !!(hasBerthsArray || props.interest['Berth Number']);
 });
 
-// Load email thread on mount
-onMounted(() => {
-  loadEmailThread();
-});
-
 // Watch for interest changes
 watch(() => props.interest.Id, () => {
   loadEmailThread();
 });
 
 const loadEmailThread = async () => {
+  isRefreshing.value = true;
   try {
     const response = await $fetch<{
       success: boolean;
@@ -254,6 +427,8 @@ const loadEmailThread = async () => {
     }
   } catch (error) {
     console.error('Failed to load email thread:', error);
+  } finally {
+    isRefreshing.value = false;
   }
 };
 
@@ -312,22 +487,83 @@ const sendEmail = async () => {
     return;
   }
   
+  if (!sessionId.value) {
+    toast.error('Please set up email credentials first');
+    hasEmailCredentials.value = false;
+    return;
+  }
+  
   isSending.value = true;
   
   try {
-    // Format email content with proper line breaks
-    const formattedContent = emailDraft.value.content
-      .split('\n')
-      .map(line => line.trim() ? `<p>${line}</p>` : '<br>')
-      .join('');
+    // First, upload any attachments to MinIO
+    const uploadedAttachments = [];
     
-    // Prepare email data
+    // Handle regular file attachments
+    if (emailDraft.value.attachments && emailDraft.value.attachments.length > 0) {
+      for (const file of emailDraft.value.attachments) {
+        try {
+          const formData = new FormData();
+          formData.append('file', file);
+          
+          // Use the client's name for the attachment folder
+          const clientName = props.interest['Full Name']
+            .toLowerCase()
+            .replace(/\s+/g, '-')
+            .replace(/[^a-z0-9-]/g, '');
+          
+          const uploadResponse = await $fetch<{ 
+            success: boolean; 
+            path: string; 
+            fileName: string 
+          }>('/api/files/upload', {
+            method: 'POST',
+            headers: {
+              'x-tag': '094ut234'
+            },
+            query: {
+              path: `${clientName}-attachments`,
+              bucket: 'client-emails'
+            },
+            body: formData
+          });
+          
+          if (uploadResponse.success) {
+            uploadedAttachments.push({
+              name: file.name,
+              path: uploadResponse.path
+            });
+          }
+        } catch (uploadError) {
+          console.error('Failed to upload attachment:', uploadError);
+          toast.error(`Failed to upload ${file.name}`);
+        }
+      }
+    }
+    
+    // Handle files selected from browser
+    if (selectedBrowserFiles.value.length > 0) {
+      for (const file of selectedBrowserFiles.value) {
+        // Files from browser are already in MinIO
+        // Include bucket information
+        uploadedAttachments.push({
+          name: file.displayName || file.name,
+          path: file.name,
+          bucket: file.bucket || 'client-portal' // Include bucket info
+        });
+      }
+    }
+    
+    // Prepare email data with the correct structure
     const emailData = {
       to: props.interest['Email Address'],
-      toName: props.interest['Full Name'],
       subject: emailDraft.value.subject,
-      html: formattedContent,
-      interestId: props.interest.Id.toString()
+      body: emailDraft.value.content, // Use 'body' not 'html'
+      interestId: props.interest.Id.toString(),
+      sessionId: sessionId.value,
+      includeSignature: includeSignature.value,
+      signatureConfig: signatureConfig.value,
+      attachments: uploadedAttachments
     };
     
     // Send email
@@ -350,7 +586,7 @@ const sendEmail = async () => {
         direction: 'sent',
         to: props.interest['Email Address'],
         subject: emailDraft.value.subject,
-        content: formattedContent,
+        content: emailDraft.value.content,
         timestamp: new Date().toISOString(),
         attachments: emailDraft.value.attachments.map((f: File) => ({ name: f.name }))
       });
@@ -376,6 +612,19 @@ const closeComposer = () => {
     content: '',
     attachments: []
   };
+  attachmentMode.value = 'upload';
+  selectedBrowserFiles.value = [];
+};
+
+const removeBrowserFile = (index: number) => {
+  selectedBrowserFiles.value.splice(index, 1);
+};
+
+const onCredentialsSaved = (data: { sessionId: string }) => {
+  sessionId.value = data.sessionId;
+  localStorage.setItem('emailSessionId', data.sessionId);
+  hasEmailCredentials.value = true;
+  toast.success('Email credentials saved successfully');
 };
 
 const formatDate = (dateString: string) => {
@@ -399,6 +648,19 @@ const formatEmailContent = (content: string) => {
   // Convert plain text to HTML
   return content.split('\n').map(line => `<p>${line}</p>`).join('');
 };
+
+const openFileBrowser = () => {
+  showFileBrowser.value = true;
+};
+
+const handleFileSelected = (file: any) => {
+  // Check if file is already selected
+  const exists = selectedBrowserFiles.value.some(f => f.name === file.name);
+  if (!exists) {
+    selectedBrowserFiles.value.push(file);
+  }
+  toast.success(`Added ${file.displayName || file.name} to attachments`);
+};
 </script>
 
 <style scoped>

components/EOISection.vue

@@ -45,9 +45,11 @@
       <div class="mb-4">
         <v-btn
           @click="showUploadDialog = true"
-          variant="outlined"
+          :variant="hasEOI ? 'tonal' : 'outlined'"
+          :color="hasEOI ? 'success' : 'primary'"
           prepend-icon="mdi-upload"
           :disabled="isUploading"
+          size="large"
         >
           {{ hasEOI ? 'Upload Signed EOI' : 'Upload EOI Document' }}
         </v-btn>
@@ -133,34 +135,108 @@
           Regenerate EOI
         </v-btn>
       </div>
+      
+      <!-- Reminder Settings -->
+      <v-divider v-if="hasEOI" class="mt-4 mb-4" />
+      <v-row v-if="hasEOI" dense align="center">
+        <v-col cols="auto">
+          <v-switch
+            v-model="remindersEnabled"
+            @update:model-value="updateReminderSettings"
+            color="primary"
+            hide-details
+            density="compact"
+          >
+            <template v-slot:label>
+              <span class="text-body-2">
+                Automatic Reminders
+                <v-tooltip activator="parent" location="top">
+                  <div style="max-width: 300px">
+                    When enabled, automatic reminders will be sent at 9am and 4pm daily to unsigned recipients
+                  </div>
+                </v-tooltip>
+              </span>
+            </template>
+          </v-switch>
+        </v-col>
+      </v-row>
     </v-card-text>
     
     <!-- Upload Dialog -->
-    <v-dialog v-model="showUploadDialog" max-width="500">
+    <v-dialog v-model="showUploadDialog" max-width="600">
       <v-card>
-        <v-card-title>Upload EOI Document</v-card-title>
-        <v-card-text>
-          <v-file-input
-            v-model="selectedFile"
-            label="Select EOI document (PDF)"
-            accept=".pdf"
-            prepend-icon="mdi-file-pdf-box"
-            variant="outlined"
-            density="comfortable"
-            :rules="[v => !!v || 'Please select a file']"
-          />
-        </v-card-text>
-        <v-card-actions>
+        <v-card-title class="d-flex align-center">
+          <v-icon class="mr-2" color="primary">mdi-upload</v-icon>
+          Upload EOI Document
           <v-spacer />
-          <v-btn @click="showUploadDialog = false">Cancel</v-btn>
+          <v-btn icon="mdi-close" variant="text" @click="closeUploadDialog"></v-btn>
+        </v-card-title>
+        
+        <v-divider />
+        
+        <v-card-text class="pa-6">
+          <div class="text-center mb-6">
+            <v-icon size="80" color="primary" class="mb-4">mdi-file-pdf-box</v-icon>
+            <div class="text-h6 mb-2">Choose how to upload your EOI</div>
+            <div class="text-body-2 text-grey">Upload a signed PDF document</div>
+          </div>
+
+          <v-tabs v-model="uploadTab" class="mb-4">
+            <v-tab value="upload">
+              <v-icon start>mdi-upload</v-icon>
+              Upload File
+            </v-tab>
+            <v-tab value="browse">
+              <v-icon start>mdi-folder-open</v-icon>
+              Browse Files
+            </v-tab>
+          </v-tabs>
+
+          <v-window v-model="uploadTab">
+            <v-window-item value="upload">
+              <v-file-input
+                v-model="selectedFile"
+                label="Drop your PDF here or click to browse"
+                accept=".pdf"
+                prepend-icon=""
+                variant="outlined"
+                density="comfortable"
+                :rules="[v => !!v || 'Please select a file']"
+                show-size
+                class="mt-4"
+              >
+                <template v-slot:prepend-inner>
+                  <v-icon color="primary">mdi-file-pdf-box</v-icon>
+                </template>
+              </v-file-input>
+            </v-window-item>
+            
+            <v-window-item value="browse">
+              <div class="text-center py-8 text-grey">
+                <v-icon size="48" class="mb-3">mdi-folder-open</v-icon>
+                <div>File browser integration coming soon</div>
+              </div>
+            </v-window-item>
+          </v-window>
+        </v-card-text>
+        
+        <v-divider />
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn @click="closeUploadDialog" variant="text" size="large">
+            Cancel
+          </v-btn>
           <v-btn
             color="primary"
             variant="flat"
             @click="handleUpload"
             :loading="isUploading"
-            :disabled="!selectedFile"
+            :disabled="!selectedFile && uploadTab === 'upload'"
+            size="large"
+            prepend-icon="mdi-upload"
           >
-            Upload
+            Upload EOI
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -185,6 +261,17 @@ const isGenerating = ref(false);
 const showUploadDialog = ref(false);
 const isUploading = ref(false);
 const selectedFile = ref<File | null>(null);
+const uploadTab = ref('upload');
+
+// Reminder settings
+const remindersEnabled = ref(true);
+
+// Initialize reminder state from interest data
+watch(() => props.interest, (newInterest) => {
+  if (newInterest) {
+    remindersEnabled.value = (newInterest as any)['reminder_enabled'] !== false;
+  }
+}, { immediate: true });
 
 const hasEOI = computed(() => {
   return !!(props.interest['Signature Link Client'] || 
@@ -353,4 +440,37 @@ const handleUpload = () => {
     uploadEOI(selectedFile.value);
   }
 };
+
+const updateReminderSettings = async (value: boolean | null) => {
+  if (value === null) return;
+  
+  try {
+    await $fetch('/api/update-interest', {
+      method: 'POST',
+      headers: {
+        'x-tag': '094ut234'
+      },
+      body: {
+        id: props.interest.Id.toString(),
+        data: {
+          'reminder_enabled': value
+        }
+      }
+    });
+    
+    toast.success(`Automatic reminders ${value ? 'enabled' : 'disabled'}`);
+    emit('update'); // Refresh parent data
+  } catch (error) {
+    console.error('Failed to update reminder settings:', error);
+    toast.error('Failed to update reminder settings');
+    // Revert the switch on error
+    remindersEnabled.value = !value;
+  }
+};
+
+const closeUploadDialog = () => {
+  showUploadDialog.value = false;
+  selectedFile.value = null;
+  uploadTab.value = 'upload';
+};
 </script>

components/EmailCredentialsSetup.vue

@@ -59,6 +59,47 @@
               />
             </v-expansion-panel-text>
           </v-expansion-panel>
+          
+          <v-expansion-panel>
+            <v-expansion-panel-title>
+              <v-icon class="mr-2">mdi-card-account-details</v-icon>
+              Email Signature
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <v-text-field
+                v-model="signature.name"
+                label="Your Name"
+                variant="outlined"
+                density="comfortable"
+                placeholder="John Doe"
+                class="mb-3"
+              />
+              <v-text-field
+                v-model="signature.title"
+                label="Job Title"
+                variant="outlined"
+                density="comfortable"
+                placeholder="Sales & Marketing Director"
+                class="mb-3"
+              />
+              <v-text-field
+                v-model="signature.company"
+                label="Company"
+                variant="outlined"
+                density="comfortable"
+                placeholder="Port Nimara"
+                class="mb-3"
+              />
+              <v-textarea
+                v-model="signature.contactInfo"
+                label="Additional Contact Info"
+                variant="outlined"
+                density="comfortable"
+                rows="3"
+                placeholder="Phone: +1234567890&#10;Mobile: +0987654321"
+              />
+            </v-expansion-panel-text>
+          </v-expansion-panel>
         </v-expansion-panels>
         
         <v-btn
@@ -82,6 +123,7 @@ import { ref, onMounted } from 'vue';
 
 interface Emits {
   (e: 'connected', email: string): void;
+  (e: 'credentials-saved', data: { sessionId: string }): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -100,6 +142,13 @@ const credentials = ref({
   smtpHost: ''
 });
 
+const signature = ref({
+  name: '',
+  title: 'Sales & Marketing Director',
+  company: 'Port Nimara',
+  contactInfo: ''
+});
+
 const rules = {
   required: (v: string) => !!v || 'Required',
   email: (v: string) => /.+@.+\..+/.test(v) || 'Invalid email'
@@ -107,10 +156,10 @@ const rules = {
 
 // Generate or get session ID
 const getSessionId = () => {
-  let sessionId = sessionStorage.getItem('emailSessionId');
+  let sessionId = localStorage.getItem('emailSessionId');
   if (!sessionId) {
     sessionId = `session-${Date.now()}-${Math.random().toString(36).substring(2)}`;
-    sessionStorage.setItem('emailSessionId', sessionId);
+    localStorage.setItem('emailSessionId', sessionId);
   }
   return sessionId;
 };
@@ -139,9 +188,13 @@ const testConnection = async () => {
     
     if (response.success) {
       toast.success('Email connection successful!');
-      // Store email in session for later use
-      sessionStorage.setItem('connectedEmail', credentials.value.email);
+      // Store email and signature config
+      localStorage.setItem('connectedEmail', credentials.value.email);
+      localStorage.setItem('emailSignature', JSON.stringify(signature.value));
+      
+      // Emit both events for compatibility
       emit('connected', credentials.value.email);
+      emit('credentials-saved', { sessionId: getSessionId() });
     }
   } catch (error: any) {
     console.error('Connection test failed:', error);
@@ -152,7 +205,8 @@ const testConnection = async () => {
       if (proceed) {
         // Store credentials anyway
         toast.info('Proceeding with email setup...');
-        sessionStorage.setItem('connectedEmail', credentials.value.email);
+        localStorage.setItem('connectedEmail', credentials.value.email);
+        localStorage.setItem('emailSignature', JSON.stringify(signature.value));
         
         // Manually store encrypted credentials
         try {
@@ -161,6 +215,7 @@ const testConnection = async () => {
           
           // We'll trust that the credentials are correct and proceed
           emit('connected', credentials.value.email);
+          emit('credentials-saved', { sessionId: sessionId });
         } catch (e) {
           console.error('Failed to store credentials:', e);
         }
@@ -178,5 +233,15 @@ onMounted(() => {
   if (user.value?.email) {
     credentials.value.email = user.value.email;
   }
+  
+  // Load saved signature
+  const savedSignature = localStorage.getItem('emailSignature');
+  if (savedSignature) {
+    try {
+      signature.value = JSON.parse(savedSignature);
+    } catch (e) {
+      console.error('Failed to load saved signature:', e);
+    }
+  }
 });
 </script>