From 235ce3479c6d93f94109fc7cde2f245af8ecdc50 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 2 Jul 2025 19:58:34 +0530
Subject: [PATCH] refactor: use UPSERT for consistency in document upload

---
 .../pageComponents/document/DocumentForm.vue  | 20 ++++++++++---------
 .../components-next/fileUpload/FileUpload.vue |  2 +-
 .../dashboard/captain/documents/Index.vue     |  4 ++--
 .../dashboard/store/captain/document.js       |  3 ++-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index 092ce0e4a..fbb828a28 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -131,15 +131,16 @@ const handleSourceTypeChange = type => {
       <div class="flex gap-2">
         <button
           type="button"
-          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
           :class="{
-            'bg-primary-50 border-primary-500 text-primary-700':
+            'ring-2 ring-woot-500 text-woot-500 border-0':
               state.sourceType === 'url',
-            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'url',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'url',
           }"
           @click="handleSourceTypeChange('url')"
         >
-          <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <svg
               width="20"
               height="20"
@@ -157,15 +158,16 @@ const handleSourceTypeChange = type => {
         </button>
         <button
           type="button"
-          class="flex-1 p-3 rounded-lg border border-n-slate-6 hover:border-n-slate-7 transition-colors"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
           :class="{
-            'bg-primary-50 border-primary-500 text-primary-700':
+            'ring-2 ring-woot-500 text-woot-500 border-0':
               state.sourceType === 'pdf',
-            'bg-n-alpha-2 text-n-slate-10': state.sourceType !== 'pdf',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'pdf',
           }"
           @click="handleSourceTypeChange('pdf')"
         >
-          <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-2">
             <svg
               width="20"
               height="20"
@@ -205,7 +207,7 @@ const handleSourceTypeChange = type => {
       <div v-if="!state.selectedFile">
         <FileUpload
           accept="application/pdf"
-          :max-size-m-b="10"
+          :max-size-m-b="25"
           placeholder="Select a PDF file"
           upload-text="Click to select PDF or drag and drop"
           drag-text="Drop PDF file here"
diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
index 008d4f076..33765e395 100644
--- a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
+++ b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
@@ -183,7 +183,7 @@ const displayText = computed(() => {
 }
 
 .file-upload-zone.drag-over {
-  @apply border-primary-500 bg-primary-50/50;
+  @apply border-n-blue-9 bg-n-blue-2/50;
 }
 
 .file-upload-zone.disabled {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 4b66ef2b6..5f5156d8e 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -59,8 +59,8 @@ const handleCreateDialogClose = () => {
 };
 
 const handleCreateDialogSuccess = () => {
-  // Refresh the documents list after successful creation
-  fetchDocuments();
+  // Document is already added to the store optimistically, no need to refetch
+  // The store action 'uploadPdf' or 'create' already adds the document via commit(mutationTypes.ADD)
 };
 
 const handleAction = ({ action, id }) => {
diff --git a/app/javascript/dashboard/store/captain/document.js b/app/javascript/dashboard/store/captain/document.js
index 747586229..52794b21a 100644
--- a/app/javascript/dashboard/store/captain/document.js
+++ b/app/javascript/dashboard/store/captain/document.js
@@ -7,7 +7,8 @@ const actions = mutationTypes => ({
     try {
       const response = await CaptainDocumentAPI.uploadPdf(formData);
       const { data } = response;
-      commit(mutationTypes.ADD, data.document);
+      // Use UPSERT like the create action for consistency
+      commit(mutationTypes.UPSERT, data);
       commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
       return Promise.resolve(data);
     } catch (error) {