From ae88c19964fe4585e7ecb482f179da01fb5f7006 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:53:23 +0700
Subject: [PATCH 01/63] refactor:edit get file

---
 src/components/upload-file/UploadFile.vue | 86 +++++++++++------------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 8b5949e0..58ce086f 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -1,26 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { SaveButton, UndoButton } from 'components/button';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const currentFileUrl = defineModel<string>('currentFileUrl');
-const { pdf, pages } = usePDF(currentFileUrl);
+const groupSelected = defineModel<string>('selected');
+const file = defineModel<
+  {
+    group?: string;
+    url?: string;
+    file?: File;
+  }[]
+>('file', {
+  default: [],
+});
 
-const selected = defineModel<string>('selected');
-const file = defineModel<File | null>('file');
+const currentFile = computed(() => file.value.at(currentIndex.value));
+const currentIndex = ref(0);
 
 const scale = ref(1);
 const page = ref(1);
 
-const currentTab = ref<string>('information');
-
 const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
     tree?: { label: string; children: { label: string }[] }[];
     dropdownList?: string[];
+    hideAction?: boolean;
   }>(),
   {
     tree: () => [],
@@ -47,10 +54,19 @@ function change(e: Event) {
     const reader = new FileReader();
     reader.readAsDataURL(_file);
     reader.onload = () => {
-      currentFileUrl.value = reader.result as string;
+      if (file.value[currentIndex.value]) {
+        file.value[currentIndex.value].url = reader.result as string;
+      }
     };
 
-    if (_file) file.value = _file;
+    if (_file && file.value[currentIndex.value]) {
+      file.value[currentIndex.value].file = _file;
+    } else {
+      file.value.push({
+        group: props.dropdownList?.[currentIndexDropdownList.value],
+        file: _file,
+      });
+    }
 
     emit(
       'sendOcr',
@@ -60,24 +76,16 @@ function change(e: Event) {
   }
 }
 
-const tabsList = [
-  {
-    label: 'information',
-    name: 'information',
-  },
-  {
-    label: 'document',
-    name: 'document',
-  },
-];
-
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
+  (e: 'save', file?: File): void;
 }>();
+
+const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 </script>
 
 <template>
-  <div class="full-height full-width row">
+  <div class="full-width row" stlye="min-height: 500px">
     <div>
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
@@ -105,7 +113,7 @@ const emit = defineEmits<{
           :nodes="tree || []"
           node-key="label"
           selected-color="primary"
-          v-model:selected="selected"
+          v-model:selected="groupSelected"
           default-expand-all
         />
       </div>
@@ -166,13 +174,16 @@ const emit = defineEmits<{
         class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
       >
         <VuePDF
-          v-if="file?.type === 'application/pdf'"
+          v-if="
+            currentFile?.url?.endsWith('.pdf') ||
+            currentFile?.file?.type === 'application/pdf'
+          "
           class="q-py-md"
           :pdf="pdf"
           :page="page"
           :scale="scale"
         />
-        <q-img v-else class="q-py-md full-width" :src="currentFileUrl" />
+        <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
       </div>
     </div>
 
@@ -183,31 +194,18 @@ const emit = defineEmits<{
       >
         ข้อมูลหนังสือเดินทาง
 
-        <div class="row">
+        <div class="row" v-if="!hideAction">
           <UndoButton icon-only type="button" />
-          <SaveButton icon-only type="button" />
+          <SaveButton
+            icon-only
+            type="button"
+            @click="$emit('save', inputFile?.files?.[0])"
+          />
         </div>
       </div>
 
       <div class="bordered-r bordered-b full-height">
-        <q-tabs
-          dense
-          inline-label
-          mobile-arrows
-          v-model="currentTab"
-          active-class="active-tab text-weight-bold"
-          class="app-text-muted full-width"
-          align="left"
-        >
-          <q-tab
-            :id="`tab-${tab.label}`"
-            v-for="tab in tabsList"
-            v-bind:key="tab.name"
-            class="content-tab text-capitalize"
-            :name="tab.name"
-            :label="$t(tab.label)"
-          />
-        </q-tabs>
+        <slot name="form" />
       </div>
     </div>
   </div>

From b36a92c05008f55602ab04ce666465549cf9e88d Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:53:44 +0700
Subject: [PATCH 02/63] refactor: add uploadFileList

---
 .../components/employer/EmployerFormBranch.vue       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index e9810973..f69ff811 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -12,6 +12,8 @@ import {
   DeleteButton,
   UndoButton,
 } from 'components/button';
+import UploadFile from 'src/components/upload-file/UploadFile.vue';
+import { uploadFileList } from '../../constant';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
@@ -160,10 +162,16 @@ defineProps<{
           />
         </q-tab-panel>
         <q-tab-panel name="attachment">
-          <EmployerFormAttachment
+          <UploadFile
+            :dropdown-list="uploadFileList"
+            v-model:file="item.file"
+            hide-action
+          />
+
+          <!-- <EmployerFormAttachment
             :readonly="readonly"
             v-model:attachment="item.file"
-          />
+          /> -->
         </q-tab-panel>
       </q-tab-panels>
     </div>

From 254710321b0daf5c09f94b256b7d6d7ff001bd82 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:54:07 +0700
Subject: [PATCH 03/63] refactor: edit manu

---
 src/pages/03_customer-management/MainPage.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 72c3a829..ed17f8d0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2515,10 +2515,15 @@ const emptyCreateDialog = ref(false);
                     name: $t('form.field.basicInformation'),
                     anchor: 'form-basic-info-customer',
                   },
+                  {
+                    name: $t('customerBranch.tab.attachment'),
+                    anchor: 'form-upload-file-customer',
+                  },
                   {
                     name: $t('customer.form.group.branch'),
                     anchor: 'form-branch-customer-branch',
                   },
+
                   ...(customerFormData.customerBranch?.map((v, i) => ({
                     name:
                       i === 0
@@ -2546,7 +2551,6 @@ const emptyCreateDialog = ref(false);
             style="height: 100%; max-height: 100%; overflow-y: auto"
           >
             <EmployerFormBasicInfo
-              class="q-mb-xl"
               :readonly="
                 (customerFormState.dialogType === 'edit' &&
                   customerFormState.readonly === true) ||
@@ -2577,6 +2581,19 @@ const emptyCreateDialog = ref(false);
               v-model:birth-date="customerFormData.birthDate"
             />
 
+            <!-- <div class="row q-col-gutter-sm q-mb-xl">
+              <UploadFile
+                id="form-upload-file-customer"
+                class="q-mb-xl"
+                hide-action
+                :dropdown-list="uploadFileList"
+                v-model:file="customerFormState.file"
+                @send-ocr="
+                  (group: any, file: any) => ocrStore.sendOcr({ file })
+                "
+              /> 
+            </div> -->
+
             <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
               <div
                 class="col-12 text-weight-bold text-body1 row items-center"

From 8ac40234ce7d69e305edbed050092ac0c20f0d61 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:54:34 +0700
Subject: [PATCH 04/63] refactor: edit type

---
 src/stores/customer/types.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index c87dd427..3fa7693b 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -106,7 +106,11 @@ export type CustomerBranchCreate = {
   registerCompanyName: string;
 
   statusSave?: boolean;
-  file?: File[];
+  file?: {
+    group?: string;
+    url?: string;
+    file?: File;
+  }[];
 
   // id?: string;
   // code?: string;

From 6882f95122fb63c3f8eb79614e8d2e8951057d4e Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:54:57 +0700
Subject: [PATCH 05/63] refactor: add Attachment

---
 src/stores/customer/index.ts | 121 +++++++++++++++++------------------
 1 file changed, 57 insertions(+), 64 deletions(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 2e4b0ae0..7d13fcfd 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -16,6 +16,7 @@ import {
 import axios from 'axios';
 import useFlowStore from '../flow';
 import { Employee } from '../employee/types';
+import { baseUrl } from '../utils';
 
 const useCustomerStore = defineStore('api-customer', () => {
   const flowStore = useFlowStore();
@@ -208,6 +209,55 @@ const useCustomerStore = defineStore('api-customer', () => {
 
     return res.data;
   }
+
+  async function putAttachment(opts: {
+    branchId: string;
+    file: File;
+    filename?: string;
+  }) {
+    await api.put(
+      `/customer-branch/${opts.branchId}/attachment/${opts.filename || opts.file.name}`,
+      opts.file,
+      {
+        headers: { 'X-Rtid': flowStore.rtid },
+        onUploadProgress: (e) => console.log(e),
+      },
+    );
+  }
+
+  async function deleteAttachment(id: string, filename: string) {
+    await api.delete(`/customer-branch/${id}/attachment/{${filename}}`);
+  }
+
+  async function listAttachment(id: string) {
+    const res = await api.get<string[]>(`/customer-branch/${id}/attachment`, {
+      headers: { 'X-Rtid': flowStore.rtid },
+    });
+
+    if (res.status >= 400) return false;
+
+    return res.data;
+  }
+
+  async function getAttachment(id: string, filename: string, download = false) {
+    const url = `${baseUrl}/customer-branch/${id}/attachment/${filename}`;
+    const res = await api.get<string>(url);
+
+    if (download) {
+      fetch(res.data)
+        .then(async (res) => await res.blob())
+        .then((blob) => {
+          let a = document.createElement('a');
+          a.download = filename;
+          a.href = window.URL.createObjectURL(blob);
+          a.click();
+          a.remove();
+        });
+    }
+
+    return res.data;
+  }
+
   async function create(
     data: CustomerCreate,
     flow?: {
@@ -395,7 +445,7 @@ const useCustomerStore = defineStore('api-customer', () => {
     });
     if (!res) return false;
 
-    if (file) await addBranchAttachment(res.data.id, { file });
+    // if (file) await addBranchAttachment(res.data.id, { file });
 
     return res.data;
   }
@@ -443,7 +493,7 @@ const useCustomerStore = defineStore('api-customer', () => {
       },
     );
 
-    if (file) await addBranchAttachment(id, { file });
+    // if (file) await addBranchAttachment(id, { file });
 
     if (!res) return false;
 
@@ -472,68 +522,6 @@ const useCustomerStore = defineStore('api-customer', () => {
     return false;
   }
 
-  async function addBranchAttachment(
-    branchId: string,
-    payload: BranchAttachmentCreate,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
-    const list: { name: string; file: File }[] = [];
-
-    payload.file.forEach((v) => {
-      let filename = v.name;
-
-      if (list.some((v) => v.name === filename)) {
-        const dotIndex = filename.lastIndexOf('.');
-        const originalName =
-          dotIndex !== -1 && !filename.startsWith('.')
-            ? filename.slice(0, dotIndex)
-            : filename;
-        const extension =
-          dotIndex !== -1 && !filename.startsWith('.')
-            ? filename.slice(dotIndex)
-            : '';
-
-        let i = 0;
-
-        while (list.some((v) => v.name === filename)) {
-          filename = `${originalName} (${++i})`;
-          if (dotIndex !== -1) filename += extension;
-        }
-      }
-
-      list.push({ name: filename, file: v });
-    });
-
-    const res = await api.post<(BranchAttachment & { uploadUrl: string })[]>(
-      `/customer-branch/${branchId}/attachment`,
-      { file: list.map((v) => v.name) },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
-    );
-
-    await Promise.all(
-      res.data.map(async (a) => {
-        const found = list.find((b) => b.name === a.name)!;
-
-        await axios
-          .put(a.uploadUrl, found.file, {
-            headers: { 'Content-Type': found.file.type },
-            onUploadProgress: (e) => console.log(e),
-          })
-          .catch((e) => console.error(e));
-      }),
-    );
-  }
-
   async function fetchListCustomeBranchById(
     branchId: string,
     flow?: {
@@ -576,6 +564,11 @@ const useCustomerStore = defineStore('api-customer', () => {
     fetchListCustomeBranchById,
 
     fetchBranchEmployee,
+
+    listAttachment,
+    getAttachment,
+    putAttachment,
+    deleteAttachment,
   };
 });
 

From f875d11b4f7faa4a26c3cd7a8a71c22fe80a6b1b Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:55:11 +0700
Subject: [PATCH 06/63] refactor: edit map data

---
 src/pages/03_customer-management/form.ts | 81 ++++++++++++++----------
 1 file changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 8781bb05..6441cfd1 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -127,41 +127,52 @@ export const useCustomerForm = defineStore('form-customer', () => {
     resetFormData.birthDate = new Date(data.birthDate);
     resetFormData.image = null;
 
-    resetFormData.customerBranch = data.branch.map((v) => ({
-      id: v.id,
-      code: v.code || '',
-      customerCode: '',
-      provinceId: v.provinceId,
-      districtId: v.districtId,
-      subDistrictId: v.subDistrictId,
-      wageRate: v.wageRate,
-      payDate: new Date(v.payDate), // Convert the string to a Date object
-      saleEmployee: v.saleEmployee,
-      jobDescription: v.jobDescription,
-      jobPositionEN: v.jobPositionEN,
-      jobPosition: v.jobPosition,
-      businessTypeEN: v.businessTypeEN,
-      businessType: v.businessType,
-      employmentOffice: v.employmentOffice,
-      telephoneNo: v.telephoneNo,
-      email: v.email,
-      addressEN: v.addressEN,
-      address: v.address,
-      workplaceEN: v.workplaceEN,
-      workplace: v.workplace,
-      status: v.status,
-      customerId: v.customerId,
-      citizenId: v.citizenId || '',
-      authorizedCapital: v.authorizedCapital || '',
-      registerDate: new Date(v.registerDate), // Convert the string to a Date object
-      registerNameEN: v.registerNameEN || '',
-      registerName: v.registerName || '',
-      legalPersonNo: v.legalPersonNo || '',
-      registerCompanyName: '',
-      statusSave: true,
-      contactName: v.contactName || '',
-      file: undefined,
-    }));
+    resetFormData.customerBranch = await Promise.all(
+      data.branch.map(async (v) => ({
+        id: v.id,
+        code: v.code || '',
+        customerCode: '',
+        provinceId: v.provinceId,
+        districtId: v.districtId,
+        subDistrictId: v.subDistrictId,
+        wageRate: v.wageRate,
+        payDate: new Date(v.payDate), // Convert the string to a Date object
+        saleEmployee: v.saleEmployee,
+        jobDescription: v.jobDescription,
+        jobPositionEN: v.jobPositionEN,
+        jobPosition: v.jobPosition,
+        businessTypeEN: v.businessTypeEN,
+        businessType: v.businessType,
+        employmentOffice: v.employmentOffice,
+        telephoneNo: v.telephoneNo,
+        email: v.email,
+        addressEN: v.addressEN,
+        address: v.address,
+        workplaceEN: v.workplaceEN,
+        workplace: v.workplace,
+        status: v.status,
+        customerId: v.customerId,
+        citizenId: v.citizenId || '',
+        authorizedCapital: v.authorizedCapital || '',
+        registerDate: new Date(v.registerDate), // Convert the string to a Date object
+        registerNameEN: v.registerNameEN || '',
+        registerName: v.registerName || '',
+        legalPersonNo: v.legalPersonNo || '',
+        registerCompanyName: '',
+        statusSave: true,
+        contactName: v.contactName || '',
+        file: await customerStore.listAttachment(v.id).then(async (r) => {
+          if (r) {
+            return await Promise.all(
+              r.map(async (item) => ({
+                url: await customerStore.getAttachment(v.id, item),
+              })),
+            );
+          }
+          return [];
+        }),
+      })),
+    );
 
     currentFormData.value = structuredClone(resetFormData);
   }

From 58aea36328a5f711344407ade67f8df064df3e84 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 12:57:19 +0700
Subject: [PATCH 07/63] refactor: edit i18n

---
 src/i18n/eng/index.ts | 2 +-
 src/i18n/tha/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index 65dea4a4..e03cfba2 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -392,7 +392,7 @@ export default {
       address: 'Address',
       business: 'Business',
       contact: 'Contact',
-      attachment: 'Attachment',
+      attachment: 'Upload Document',
     },
     form: {
       title: 'Branch',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index 1ace455b..c329f134 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -392,7 +392,7 @@ export default {
       address: 'ที่อยู่',
       business: 'ธุรกิจ',
       contact: 'ติดต่อ',
-      attachment: 'เอกสารเพิ่มเติม',
+      attachment: 'อัปโหลดเอกสาร',
     },
     form: {
       title: 'สาขา',

From 6103a0566008cd5929b8beac9a1fce776b12e2fa Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Tue, 27 Aug 2024 13:04:34 +0700
Subject: [PATCH 08/63] fix: pdf not found

---
 src/components/upload-file/UploadFile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 58ce086f..c063ee16 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -175,7 +175,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       >
         <VuePDF
           v-if="
-            currentFile?.url?.endsWith('.pdf') ||
+            currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
             currentFile?.file?.type === 'application/pdf'
           "
           class="q-py-md"

From 11767a722b4f6bc9bc4f2aafe639fdc2f7fa066f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:17:01 +0700
Subject: [PATCH 09/63] refactor: add defineProps ocr

---
 .../FormEmployeePassport.vue                  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 9781cf82..e5543eea 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -32,6 +32,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  ocr?: boolean;
 
   prefixId: string;
 }>();
@@ -84,7 +85,35 @@ watch(
 </script>
 
 <template>
-  <div class="row col-12">
+  <div class="row col-12" v-if="ocr">
+    <div class="col-12 row">
+      <div class="col-6 flex flex-center">
+        <q-img
+          src="/images/customer-CORP-avartar.png "
+          style="height: 100px; max-width: 50%"
+        />
+      </div>
+      <div class="col-6 column">
+        <q-input
+          lazy-rules="ondemand"
+          :for="`${prefixId}-input-passport-no`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-md-3 col-6"
+          :label="$t('customerEmployee.form.passportNo')"
+          v-model="passportNumber"
+          :rules="[
+            (val: string) =>
+              !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
+          ]"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="row col-12" v-else>
     <div class="col-12 q-pb-sm text-weight-bold text-body1">
       <q-icon
         flat

From beedae034fa68ae05e145b8555bf0962e99305c8 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:17:13 +0700
Subject: [PATCH 10/63] refactor: add i18n

---
 src/i18n/eng/index.ts | 11 +++++++++++
 src/i18n/tha/index.ts | 10 ++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index e03cfba2..f993c44a 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -238,6 +238,17 @@ export default {
     },
   },
   customer: {
+    typeFile: {
+      citizenId: 'National ID card',
+      registrationBook: 'Household registration',
+      houseMap: 'House map',
+      businessRegistration: 'Commercial registration',
+      dbdCertificate: 'DBD Certificate',
+      VatRegistrationCertificate: 'VAT Registration Certificate',
+      powerOfAttorney: 'Power of Attorney',
+      others: 'Others',
+    },
+
     employer: 'Employer',
     employerLegalEntity: 'Legal Entity',
     employerNaturalPerson: 'Natrual Person',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index c329f134..0795726c 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -239,6 +239,16 @@ export default {
     },
   },
   customer: {
+    typeFile: {
+      citizenId: 'บัตรประจำตัวประชาชน',
+      registrationBook: 'ทะเบียนบ้าน',
+      houseMap: 'แผนที่ (บ้าน)',
+      businessRegistration: 'ทะเบียนพาณิชย์',
+      dbdCertificate: 'หนังสือรับรอง (DBD)',
+      VatRegistrationCertificate: 'ภ.พ.20',
+      powerOfAttorney: 'หนังสือมอบอำนาจ',
+      others: 'อื่นๆ',
+    },
     employer: 'นายจ้าง',
     employee: 'ลูกจ้าง',
     employerLegalEntity: 'นิติบุคคล',

From 82470fcda5ebd466cce3f533986136094f106367 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:17:41 +0700
Subject: [PATCH 11/63] refactor: currentFileSelected

---
 src/components/upload-file/UploadFile.vue | 45 ++++++++++++++++-------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index c063ee16..75fa09a2 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -4,7 +4,7 @@ import { SaveButton, UndoButton } from 'components/button';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const groupSelected = defineModel<string>('selected');
+const currentFileSelected = ref<string>('');
 const file = defineModel<
   {
     group?: string;
@@ -25,12 +25,12 @@ const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
-    tree?: { label: string; children: { label: string }[] }[];
-    dropdownList?: string[];
+    treeFile: { lable: string; file: { lable: string }[] }[];
+    dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
   }>(),
   {
-    tree: () => [],
+    treeFile: () => [],
   },
 );
 
@@ -61,24 +61,34 @@ function change(e: Event) {
 
     if (_file && file.value[currentIndex.value]) {
       file.value[currentIndex.value].file = _file;
+      file.value[currentIndex.value].group =
+        props.dropdownList?.[currentIndexDropdownList.value].value;
     } else {
       file.value.push({
-        group: props.dropdownList?.[currentIndexDropdownList.value],
+        group: props.dropdownList?.[currentIndexDropdownList.value].value,
         file: _file,
       });
     }
 
     emit(
       'sendOcr',
-      props.dropdownList?.[currentIndexDropdownList.value] || '',
+      props.dropdownList?.[currentIndexDropdownList.value].value || '',
       inputFile?.files?.[0],
     );
   }
 }
 
+watch(currentFileSelected, () => {
+  file.value.findIndex((v, i) => {
+    if (v.url?.includes(currentFileSelected.value)) {
+      currentIndex.value = i;
+    }
+  });
+});
+
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
-  (e: 'save', file?: File): void;
+  (e: 'save', เgroup: string, file?: File): void;
 }>();
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
@@ -89,7 +99,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
     <div>
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
-          <q-list v-for="(v, i) in dropdownList" :key="v">
+          <q-list v-for="(v, i) in dropdownList" :key="v.value">
             <q-item
               clickable
               v-close-popup
@@ -101,7 +111,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
               "
             >
               <q-item-section>
-                <q-item-label>{{ v }}</q-item-label>
+                <q-item-label>{{ $t(v.label) }}</q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
@@ -110,10 +120,12 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 
       <div class="full-height bordered-l bordered-b q-pa-sm">
         <q-tree
-          :nodes="tree || []"
-          node-key="label"
+          :nodes="treeFile || []"
+          node-key="lable"
+          label-key="lable"
+          children-key="file"
           selected-color="primary"
-          v-model:selected="groupSelected"
+          v-model:selected="currentFileSelected"
           default-expand-all
         />
       </div>
@@ -183,6 +195,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           :page="page"
           :scale="scale"
         />
+
         <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
       </div>
     </div>
@@ -199,7 +212,13 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           <SaveButton
             icon-only
             type="button"
-            @click="$emit('save', inputFile?.files?.[0])"
+            @click="
+              $emit(
+                'save',
+                dropdownList?.[currentIndexDropdownList].value || '',
+                inputFile?.files?.[0],
+              )
+            "
           />
         </div>
       </div>

From 055a8a1a9bf4533b65638769a5d463e94a5eeaab Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:18:28 +0700
Subject: [PATCH 12/63] refactor: add uploadFile in EmployerFormBranch

---
 .../employer/EmployerFormBranch.vue           | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index f69ff811..233675e8 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -5,7 +5,11 @@ import EmployerFormBusiness from './EmployerFormBusiness.vue';
 import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
-import EmployerFormAttachment from './EmployerFormAttachment.vue';
+import EmployerFormBasicInfo from './EmployerFormBasicInfo.vue';
+
+import useOcrStore from 'stores/ocr';
+
+const ocrStore = useOcrStore();
 import {
   SaveButton,
   EditButton,
@@ -13,7 +17,7 @@ import {
   UndoButton,
 } from 'components/button';
 import UploadFile from 'src/components/upload-file/UploadFile.vue';
-import { uploadFileList } from '../../constant';
+import { uploadFileListCustomer } from '../../constant';
 
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
@@ -35,6 +39,7 @@ defineProps<{
   prefixId?: string;
   actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
+  treeFile?: { lable: string; file: { lable: string }[] }[];
 }>();
 </script>
 
@@ -163,10 +168,30 @@ defineProps<{
         </q-tab-panel>
         <q-tab-panel name="attachment">
           <UploadFile
-            :dropdown-list="uploadFileList"
-            v-model:file="item.file"
             hide-action
-          />
+            :dropdown-list="uploadFileListCustomer"
+            v-model:file="item.file"
+            :tree-file="treeFile"
+            @send-ocr="
+              async (v: any, f: any) => {
+                await ocrStore.sendOcr({ file: f });
+              }
+            "
+            @save="
+              (group: any, file: any) => {
+                // const ext = file.name.split('.').at(-1);
+                // let filename = group + '-' + new Date().getTime();
+                // if (ext) filename += `.${ext}`;
+                // customerFormStore.putAttachment({
+                //   branchId: item.id || '',
+                //   file,
+                //   filename,
+                // });
+              }
+            "
+          >
+            <template #form></template>
+          </UploadFile>
 
           <!-- <EmployerFormAttachment
             :readonly="readonly"

From 0a7ffb646fd9307f003c9d0b640a34fb7b33507c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:18:56 +0700
Subject: [PATCH 13/63] refactor: add Content-Type

---
 src/stores/customer/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 7d13fcfd..5a816625 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -219,7 +219,7 @@ const useCustomerStore = defineStore('api-customer', () => {
       `/customer-branch/${opts.branchId}/attachment/${opts.filename || opts.file.name}`,
       opts.file,
       {
-        headers: { 'X-Rtid': flowStore.rtid },
+        headers: { 'X-Rtid': flowStore.rtid, 'Content-Type': opts.file.type },
         onUploadProgress: (e) => console.log(e),
       },
     );

From 7a700b050af8f8b1738040b1c2fac31f5ba72ac9 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:19:18 +0700
Subject: [PATCH 14/63] refactor: map tree

---
 src/pages/03_customer-management/form.ts | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 6441cfd1..62491a1c 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -2,6 +2,7 @@ import { ref, toRaw, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { CustomerBranchCreate, CustomerCreate } from 'stores/customer/types';
 import { Employee, EmployeeCreate } from 'stores/employee/types';
+import { useI18n } from 'vue-i18n';
 
 import useMyBranch from 'stores/my-branch';
 import useCustomerStore from 'stores/customer';
@@ -9,6 +10,7 @@ import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'stores/flow';
 
 export const useCustomerForm = defineStore('form-customer', () => {
+  const { t } = useI18n();
   const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
   const customerStore = useCustomerStore();
@@ -46,6 +48,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     editCustomerId?: string;
     editCustomerCode?: string;
     editCustomerBranchId?: string;
+    treeFile: { lable: string; file: { lable: string }[] }[];
   }>({
     dialogType: 'info',
     dialogOpen: false,
@@ -59,6 +62,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     editCustomerId: '',
     editCustomerBranchId: '',
     defaultCustomerImageUrl: '',
+    treeFile: [],
   });
 
   watch(
@@ -82,6 +86,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       resetFormData = structuredClone(defaultFormData);
       resetFormData.registeredBranchId = branchStore.currentMyBranch?.id || '';
       state.value.editCustomerId = '';
+      state.value.treeFile = [];
+
       return;
     }
 
@@ -163,6 +169,25 @@ export const useCustomerForm = defineStore('form-customer', () => {
         contactName: v.contactName || '',
         file: await customerStore.listAttachment(v.id).then(async (r) => {
           if (r) {
+            r.forEach((item) => {
+              const temp = item.split('-').at(0);
+
+              if (
+                !state.value.treeFile.some(
+                  (x) => x.lable === t(`customer.typeFile.${temp || ''}`),
+                )
+              ) {
+                state.value.treeFile.push({
+                  lable: t(`customer.typeFile.${temp || ''}`),
+                  file: r
+                    .filter((x) => x.includes(temp || ''))
+                    .map((x) => ({
+                      lable: x,
+                    })),
+                });
+              }
+            });
+
             return await Promise.all(
               r.map(async (item) => ({
                 url: await customerStore.getAttachment(v.id, item),

From feea2084807b7196f68eb70a21c686cd05a38713 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:19:38 +0700
Subject: [PATCH 15/63] refactor: add data uploadFileListCustomer

---
 src/pages/03_customer-management/constant.ts | 107 +++++++++++++++++--
 1 file changed, 96 insertions(+), 11 deletions(-)

diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index a8893594..7e826af1 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -1,16 +1,101 @@
 import { QTableProps } from 'quasar';
 
-export const uploadFileList: string[] = [
-  'ข้อมูลหนังสือการเดินทาง',
-  'ข้อมูลการตรวจลงตรา',
-  'ตม.6',
-  'ใบอนุญาตทำงาน',
-  'แบบแจ้งการจ้างคนต่างด้าวทำงาน',
-  'แบบแจ้งเข้าทำงานของคนต่างด้าว',
-  'ใบคัดประวัติระบบจัดหางาน',
-  'ใบตอบรับการแจ้งเกี่ยวกับการทำงานของคนต่างด้าว',
-  'ใบเสร็จรับเงิน',
-  'อื่นๆ',
+export const uploadFileListCustomer: {
+  label: string;
+  value: string;
+}[] = [
+  {
+    label: 'customer.typeFile.citizenId',
+    value: 'citizenId',
+  },
+  {
+    label: 'customer.typeFile.registrationBook',
+    value: 'registrationBook',
+  },
+
+  {
+    label: 'customer.typeFile.houseMap',
+    value: 'houseMap',
+  },
+
+  {
+    label: 'customer.typeFile.businessRegistration',
+    value: 'businessRegistration',
+  },
+
+  {
+    label: 'customer.typeFile.dbdCertificate',
+    value: 'dbdCertificate',
+  },
+
+  {
+    label: 'customer.typeFile.vatRegistrationCertificate',
+    value: 'vatRegistrationCertificate',
+  },
+
+  {
+    label: 'customer.typeFile.powerOfAttorney',
+    value: 'powerOfAttorney',
+  },
+
+  {
+    label: 'customer.typeFile.others',
+    value: 'others',
+  },
+];
+
+export const uploadFileListEmployee: {
+  label: string;
+  value: string;
+}[] = [
+  {
+    label: 'ข้อมูลหนังสือการเดินทาง',
+    value: 'travelBook',
+  },
+  {
+    label: 'ข้อมูลการตรวจลงตรา',
+    value: 'checkList',
+  },
+
+  {
+    label: 'ตม.6',
+    value: 'tm6',
+  },
+
+  {
+    label: 'ใบอนุญาตทำงาน',
+    value: 'license',
+  },
+
+  {
+    label: 'แบบแจ้งการจ้างคนต่างด้าวทำงาน',
+    value: 'noticeJob',
+  },
+
+  {
+    label: 'แบบแจ้งเข้าทำงานของคนต่างด้าว',
+    value: 'noticeJobOther',
+  },
+
+  {
+    label: 'ใบคัดประวัติระบบจัดหางาน',
+    value: 'historyJob',
+  },
+
+  {
+    label: 'ใบตอบรับการแจ้งเกี่ยวกับการทำงานของคนต่างด้าว',
+    value: 'acceptJob',
+  },
+
+  {
+    label: 'ใบเสร็จรับเงิน',
+    value: 'receipt',
+  },
+
+  {
+    label: 'อื่นๆ',
+    value: 'other',
+  },
 ];
 
 export const formMenuIconEmployee = [

From 87cd106c43f0ab1ade0dc9a8868487a52add02c8 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 16:19:59 +0700
Subject: [PATCH 16/63] refactor: by data

---
 src/pages/03_customer-management/MainPage.vue | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ed17f8d0..330cd288 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -54,7 +54,8 @@ import {
   columnsCustomer,
   columnsEmployee,
   formMenuIconEmployee,
-  uploadFileList,
+  uploadFileListEmployee,
+  uploadFileListCustomer,
 } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
@@ -2466,8 +2467,8 @@ const emptyCreateDialog = ref(false);
     "
     :show="
       async () => {
-        await fetchListOfOptionBranch();
-        customerFormStore.resetForm(customerFormState.dialogType === 'create');
+        // await fetchListOfOptionBranch();
+        // customerFormStore.resetForm(true);
       }
     "
     :before-close="
@@ -2477,6 +2478,7 @@ const emptyCreateDialog = ref(false);
           return false;
         } else {
           fetchListCustomer();
+          customerFormStore.resetForm(true);
           customerFormState.branchIndex = -1;
         }
         return false;
@@ -2680,6 +2682,23 @@ const emptyCreateDialog = ref(false);
                           );
                         }
 
+                        customerFormData.customerBranch[idx].file?.forEach(
+                          (v) => {
+                            if (!v.file) return;
+
+                            const ext = v.file.name.split('.').at(-1);
+                            let filename = v.group + '-' + new Date().getTime();
+                            if (ext) filename += `.${ext}`;
+
+                            customerStore.putAttachment({
+                              branchId:
+                                customerFormData.customerBranch?.[idx].id || '',
+                              file: v.file,
+                              filename,
+                            });
+                          },
+                        );
+
                         await customerFormStore.assignFormData(
                           customerFormState.editCustomerId,
                         );
@@ -2694,6 +2713,7 @@ const emptyCreateDialog = ref(false);
                     v-model:customer-branch="
                       customerFormData.customerBranch[idx]
                     "
+                    :tree-file="customerFormState.treeFile"
                     :customer-type="customerFormData.customerType"
                     :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
                     :action-disabled="
@@ -3080,11 +3100,11 @@ const emptyCreateDialog = ref(false);
               />
 
               <UploadFile
-                :tree="[]"
-                :dropdown-list="uploadFileList"
+                :treeFile="[]"
+                :dropdown-list="uploadFileListEmployee"
                 @send-ocr="
                   async (v: any, f: any) => {
-                    console.log(v, f);
+                 
 
                     await ocrStore.sendOcr({ file: f });
                   }

From 33264ae8ea1d2cda66a6dcf3bc0826a9c258c00c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:34:23 +0700
Subject: [PATCH 17/63] refactor: add FormCitizen

---
 src/components/upload-file/FormCitizen.vue | 397 +++++++++++++++++++++
 1 file changed, 397 insertions(+)
 create mode 100644 src/components/upload-file/FormCitizen.vue

diff --git a/src/components/upload-file/FormCitizen.vue b/src/components/upload-file/FormCitizen.vue
new file mode 100644
index 00000000..4367d068
--- /dev/null
+++ b/src/components/upload-file/FormCitizen.vue
@@ -0,0 +1,397 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { QSelect } from 'quasar';
+import { selectFilterOptionRefMod } from 'stores/utils';
+import { getRole } from 'src/services/keycloak';
+import useOptionStore from 'stores/options';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import DatePicker from '../shared/DatePicker.vue';
+const { locale } = useI18n();
+
+import {
+  dateFormat,
+  calculateAge,
+  parseAndFormatDate,
+  disabledAfterToday,
+} from 'src/utils/datetime';
+
+import {
+  SaveButton,
+  EditButton,
+  DeleteButton,
+  UndoButton,
+} from 'components/button';
+defineProps<{
+  prefixId?: string;
+  outlined?: boolean;
+  readonly?: boolean;
+  create?: boolean;
+  actionDisabled?: boolean;
+  customerType?: 'CORP' | 'PERS';
+  orc?: boolean;
+}>();
+defineEmits<{
+  (e: 'save'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+  (e: 'cancel'): void;
+}>();
+
+const optionStore = useOptionStore();
+const namePrefix = defineModel<string | null>('namePrefix');
+const birthDate = defineModel<Date | string | null>('birthDate');
+const gender = defineModel<string>('gender');
+
+const address = defineModel<string>('address');
+const firstName = defineModel<string>('firstName', { required: true });
+const lastName = defineModel<string>('lastName', { required: true });
+const firstNameEN = defineModel<string>('firstNameEn', { required: true });
+const lastNameEN = defineModel<string>('lastNameEn', { required: true });
+
+const citizenId = defineModel<string | undefined>('citizenId', {
+  required: true,
+});
+const nationality = defineModel<string>('nationality');
+
+const religion = defineModel<string>('religion');
+
+const branchOptions = defineModel<{ id: string; name: string }[]>(
+  'branchOptions',
+  { default: [] },
+);
+const filteredBranchOptions = ref<Record<string, unknown>[]>([]);
+
+let branchFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  branchFilter = selectFilterOptionRefMod(
+    branchOptions,
+    filteredBranchOptions,
+    'name',
+  );
+});
+
+watch(
+  () => branchOptions.value,
+  () => {
+    branchFilter = selectFilterOptionRefMod(
+      branchOptions,
+      filteredBranchOptions,
+      'name',
+    );
+  },
+);
+
+const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const prefixNameEnOptions = ref<Record<string, unknown>[]>([]);
+let prefixNameEnFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const genderOptions = ref<Record<string, unknown>[]>([]);
+let genderFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  prefixNameFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.prefix),
+    prefixNameOptions,
+    'label',
+  );
+  genderFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.gender),
+    genderOptions,
+    'label',
+  );
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    prefixNameFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.prefix),
+      prefixNameOptions,
+      'label',
+    );
+    genderFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.gender),
+      genderOptions,
+      'label',
+    );
+  },
+);
+
+function formatCode(input: string | undefined, type: 'code' | 'number') {
+  if (!input) return;
+  return input.slice(...(type === 'code' ? [0, -6] : [-6]));
+}
+</script>
+
+<template>
+  <div class="row q-mb-sm">
+    <template v-if="orc">
+      <div class="row q-pa-sm" style="gap: 10px">
+        <div class="col-4 flex flex-center">
+          <q-img
+            src="/images/customer-CORP-avartar.png"
+            width="80px"
+            height="80px"
+          ></q-img>
+        </div>
+        <div class="col row" style="gap: 10px">
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :label="$t('customer.form.citizenId')"
+            for="input-citizen-id"
+            v-model="citizenId"
+          />
+
+          <DatePicker
+            :label="$t('form.birthDate')"
+            v-model="birthDate"
+            class="col-12"
+            :id="`${prefixId}-input-birth-date`"
+            :readonly="readonly"
+            clearable
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="$t('general.nationality')"
+            for="input-nationality"
+            v-model="nationality"
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="$t('customer.form.religion')"
+            for="input-religion"
+            v-model="religion"
+          />
+
+          <q-select
+            outlined
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            lazy-rules="ondemand"
+            class="col"
+            dense
+            :readonly="readonly"
+            :options="genderOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-gender`"
+            :label="$t('form.gender')"
+            @filter="genderFilter"
+            :model-value="readonly ? gender || '-' : gender"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (gender = v) : '')
+            "
+            @clear="gender = ''"
+            :rules="[
+              (val) => {
+                const roles = getRole() || [];
+                return !!val || $t('form.error.required');
+              },
+            ]"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+
+        <div class="row q-col-gutter-sm">
+          <q-select
+            outlined
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            lazy-rules="ondemand"
+            hide-dropdown-icon
+            class="col-2"
+            dense
+            :readonly="readonly"
+            :options="prefixNameOptions"
+            :for="`${prefixId}-select-prefix-name`"
+            :label="$t('form.prefixName')"
+            @filter="prefixNameFilter"
+            :model-value="readonly ? namePrefix || '-' : namePrefix"
+            @update:model-value="
+              (v) => {
+                typeof v === 'string' ? (namePrefix = v) : '';
+              }
+            "
+            @clear="namePrefix = ''"
+            :rules="[
+              (val) => {
+                const roles = getRole() || [];
+                return !!val || $t('form.error.required');
+              },
+            ]"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-5"
+            :label="$t('customer.form.firstName')"
+            for="input-first-name"
+            v-model="firstName"
+            :rules="[
+              (val) => {
+                const roles = getRole() || [];
+                return !!val || $t('form.error.required');
+              },
+            ]"
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-5"
+            :label="$t('customer.form.lastName')"
+            for="input-last-name"
+            v-model="lastName"
+            :rules="[
+              (val) => {
+                const roles = getRole() || [];
+                return !!val || $t('form.error.required');
+              },
+            ]"
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :disable="!readonly"
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-2"
+            :label="$t('customer.form.prefixName')"
+            for="input-prefix-name"
+            :model-value="
+              namePrefix ? $t(`customer.form.prefix.${namePrefix}`) : '-'
+            "
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-5"
+            :label="$t('customer.form.firstNameEN')"
+            for="input-first-name-en"
+            v-model="firstNameEN"
+          />
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-5"
+            :label="$t('customer.form.lastNameEN')"
+            for="input-last-name-en"
+            v-model="lastNameEN"
+          />
+
+          <q-input
+            lazy-rules="ondemand"
+            dense
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :label="$t('general.address')"
+            for="input-address"
+            v-model="address"
+            :rules="[
+              (val) => {
+                const roles = getRole() || [];
+                return !!val || $t('form.error.required');
+              },
+            ]"
+          />
+          <DatePicker
+            :label="$t('customer.form.issueDate')"
+            v-model="firstName"
+            class="col-6"
+            :id="`${prefixId}-input-issue-date`"
+            :readonly="readonly"
+            clearable
+          />
+
+          <DatePicker
+            :label="$t('customer.form.passportExpiryDate')"
+            v-model="firstName"
+            class="col-6"
+            :id="`${prefixId}-input-passport-expiry-date`"
+            :readonly="readonly"
+            clearable
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

From 991153df4e3eb0c18b03517f9c5ba2f52fb9279c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:35:40 +0700
Subject: [PATCH 18/63] refactor: add i18n

---
 src/i18n/eng/index.ts | 5 +++++
 src/i18n/tha/index.ts | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index f993c44a..c8ed670e 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -266,6 +266,11 @@ export default {
         miss: 'Miss.',
       },
 
+      citizenId: 'Citizen ID',
+      religion: 'Religion',
+      issueDate: 'Issue Date',
+      passportExpiryDate: 'Passport Expiry Date',
+
       firstName: 'First Name in Thai',
       lastName: 'Last Name in Thai',
       firstNameEN: 'First Name in English',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index 0795726c..f4a215b6 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -266,6 +266,11 @@ export default {
         miss: 'Miss.',
       },
 
+      citizenId: 'บัตรประจำตัวประชาชน',
+      religion: 'ศาสนา',
+      issueDate: 'วันที่ออกหนังสือ',
+      passportExpiryDate: 'วันหiมดอายุหนังสือเดินทาง',
+
       firstName: 'ชื่อ ภาษาไทย',
       lastName: 'นามสกุล ภาษาไทย',
       firstNameEN: 'ชื่อ ภาษาอังกฤษ',

From 5fdfa232e7be40b3f728b9c22c60d0b398d62a5a Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:35:54 +0700
Subject: [PATCH 19/63] refactor: export FormCitizen

---
 src/components/upload-file/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/upload-file/index.ts b/src/components/upload-file/index.ts
index 18f798a5..dc6ce189 100644
--- a/src/components/upload-file/index.ts
+++ b/src/components/upload-file/index.ts
@@ -1 +1,2 @@
 export { default as UploadFile } from './UploadFile.vue';
+export { default as FormCitizen } from './FormCitizen.vue';

From 51fd9e0c84c7633a9c953d9cec9fc90875437fe4 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:36:13 +0700
Subject: [PATCH 20/63] refactor: add Spinners

---
 src/components/upload-file/UploadFile.vue | 39 ++++++++++++++---------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 75fa09a2..994e3261 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -16,6 +16,7 @@ const file = defineModel<
 });
 
 const currentFile = computed(() => file.value.at(currentIndex.value));
+const statusOcr = defineModel<boolean>('statusOcr', { default: false });
 const currentIndex = ref(0);
 
 const scale = ref(1);
@@ -25,7 +26,7 @@ const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
-    treeFile: { lable: string; file: { lable: string }[] }[];
+    treeFile: { label: string; file: { label: string }[] }[];
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
   }>(),
@@ -70,6 +71,8 @@ function change(e: Event) {
       });
     }
 
+    statusOcr.value = true;
+
     emit(
       'sendOcr',
       props.dropdownList?.[currentIndexDropdownList.value].value || '',
@@ -121,8 +124,8 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div class="full-height bordered-l bordered-b q-pa-sm">
         <q-tree
           :nodes="treeFile || []"
-          node-key="lable"
-          label-key="lable"
+          node-key="label"
+          label-key="label"
           children-key="file"
           selected-color="primary"
           v-model:selected="currentFileSelected"
@@ -185,22 +188,28 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div
         class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
       >
-        <VuePDF
-          v-if="
-            currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
-            currentFile?.file?.type === 'application/pdf'
-          "
-          class="q-py-md"
-          :pdf="pdf"
-          :page="page"
-          :scale="scale"
-        />
+        <template v-if="statusOcr">
+          <q-spinner color="primary" size="3em" :thickness="2" />
+        </template>
 
-        <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
+        <template v-else>
+          <VuePDF
+            v-if="
+              currentFile?.url?.split('?').at(0)?.endsWith('.pdf') ||
+              currentFile?.file?.type === 'application/pdf'
+            "
+            class="q-py-md"
+            :pdf="pdf"
+            :page="page"
+            :scale="scale"
+          />
+
+          <q-img v-else class="q-py-md full-width" :src="currentFile?.url" />
+        </template>
       </div>
     </div>
 
-    <div class="col-4">
+    <div class="col-5">
       <div
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"

From 22fae293e3daf54bfaaa76b2b8e63ee91bf57567 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:36:59 +0700
Subject: [PATCH 21/63] refactor: by data

---
 .../employer/EmployerFormBranch.vue           | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 233675e8..f4196efc 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -19,6 +19,7 @@ import {
 import UploadFile from 'src/components/upload-file/UploadFile.vue';
 import { uploadFileListCustomer } from '../../constant';
 
+const customer = defineModel<CustomerCreate>('customer', { required: true });
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
   { required: true },
@@ -174,23 +175,47 @@ defineProps<{
             :tree-file="treeFile"
             @send-ocr="
               async (v: any, f: any) => {
-                await ocrStore.sendOcr({ file: f });
-              }
-            "
-            @save="
-              (group: any, file: any) => {
-                // const ext = file.name.split('.').at(-1);
-                // let filename = group + '-' + new Date().getTime();
-                // if (ext) filename += `.${ext}`;
-                // customerFormStore.putAttachment({
-                //   branchId: item.id || '',
-                //   file,
-                //   filename,
-                // });
+                const res = await ocrStore.sendOcr({ file: f });
+
+                if (res) {
+                  const map = res.fields.reduce<Record<string, string>>(
+                    (a, c) => {
+                      a[c.name] = c.value;
+                      return a;
+                    },
+                    {},
+                  );
+                  if (!item.citizenId) item.citizenId = map['citizen_id'] || '';
+                  if (!item.address) item.address = map['address'] || '';
+                  if (!customer.firstName)
+                    customer.firstName = map['firstname'] || '';
+                  if (!customer.lastName)
+                    customer.lastName = map['lastname'] || '';
+                  if (!customer.firstNameEN)
+                    customer.firstNameEN = map['firstname_en'] || '';
+                  if (!customer.lastNameEN)
+                    customer.lastNameEN = map['lastname_en'] || '';
+                  if (!customer.birthDate)
+                    customer.birthDate = new Date(map['birth_date'] || '');
+                }
+
+                statusOcr = false;
               }
             "
+            @save="(group: any, file: any) => {}"
           >
-            <template #form></template>
+            <template #form>
+              <FormCitizen
+                orc
+                v-model:citizen-id="item.citizenId"
+                v-model:birth-date="customer.birthDate"
+                v-model:first-name="customer.firstName"
+                v-model:first-name-en="customer.firstNameEN"
+                v-model:last-name="customer.lastName"
+                v-model:last-name-en="customer.lastNameEN"
+                v-model:address="item.address"
+              />
+            </template>
           </UploadFile>
 
           <!-- <EmployerFormAttachment

From 381f1c18e6e1cc29d40eea85bcc8364cdc9053f4 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:37:14 +0700
Subject: [PATCH 22/63] refactor: add statusOcr

---
 .../components/employer/EmployerFormBranch.vue             | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index f4196efc..eac5271f 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -5,7 +5,8 @@ import EmployerFormBusiness from './EmployerFormBusiness.vue';
 import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
-import EmployerFormBasicInfo from './EmployerFormBasicInfo.vue';
+
+import { FormCitizen } from 'components/upload-file/';
 
 import useOcrStore from 'stores/ocr';
 
@@ -19,6 +20,7 @@ import {
 import UploadFile from 'src/components/upload-file/UploadFile.vue';
 import { uploadFileListCustomer } from '../../constant';
 
+const statusOcr = ref(false);
 const customer = defineModel<CustomerCreate>('customer', { required: true });
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
@@ -40,7 +42,7 @@ defineProps<{
   prefixId?: string;
   actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
-  treeFile?: { lable: string; file: { lable: string }[] }[];
+  treeFile?: { label: string; file: { label: string }[] }[];
 }>();
 </script>
 
@@ -171,6 +173,7 @@ defineProps<{
           <UploadFile
             hide-action
             :dropdown-list="uploadFileListCustomer"
+            v-model:status-ocr="statusOcr"
             v-model:file="item.file"
             :tree-file="treeFile"
             @send-ocr="

From d1133d0bc2a0ee5cf3bdf853368fabc4fbddcec0 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:37:30 +0700
Subject: [PATCH 23/63] refactor: edit type

---
 src/pages/03_customer-management/form.ts | 10 ++++++----
 src/stores/ocr/index.ts                  | 11 +++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 62491a1c..987a3219 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -48,7 +48,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
     editCustomerId?: string;
     editCustomerCode?: string;
     editCustomerBranchId?: string;
-    treeFile: { lable: string; file: { lable: string }[] }[];
+    treeFile: { label: string; file: { label: string }[] }[];
+    formDataOcr: Record<string, any>;
   }>({
     dialogType: 'info',
     dialogOpen: false,
@@ -63,6 +64,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     editCustomerBranchId: '',
     defaultCustomerImageUrl: '',
     treeFile: [],
+    formDataOcr: {},
   });
 
   watch(
@@ -174,15 +176,15 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
               if (
                 !state.value.treeFile.some(
-                  (x) => x.lable === t(`customer.typeFile.${temp || ''}`),
+                  (x) => x.label === t(`customer.typeFile.${temp || ''}`),
                 )
               ) {
                 state.value.treeFile.push({
-                  lable: t(`customer.typeFile.${temp || ''}`),
+                  label: t(`customer.typeFile.${temp || ''}`),
                   file: r
                     .filter((x) => x.includes(temp || ''))
                     .map((x) => ({
-                      lable: x,
+                      label: x,
                     })),
                 });
               }
diff --git a/src/stores/ocr/index.ts b/src/stores/ocr/index.ts
index 96a4ce1d..bbf4ddf0 100644
--- a/src/stores/ocr/index.ts
+++ b/src/stores/ocr/index.ts
@@ -18,12 +18,19 @@ const useOcr = defineStore('useOcrStore', () => {
     },
   ) {
     const res = await axios
-      .post(`${baseUrl}/`, payload.file, {
+      .post<{
+        document: string;
+        fields: { name: string; value: string }[];
+        result: string;
+      }>(`${baseUrl}/`, payload.file, {
         headers: { 'Content-Type': payload.file?.type },
         onUploadProgress: (e) => console.log(e),
       })
       .catch((e) => console.error(e));
-    // ]);
+
+    if (!res || res.status >= 400) return false;
+
+    return res.data;
   }
 
   return {

From 425bd0b78474220b4fc7d62054ef52d125a57d44 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Tue, 27 Aug 2024 19:37:46 +0700
Subject: [PATCH 24/63] refactor: by data

---
 src/pages/03_customer-management/MainPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 330cd288..ab789c26 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1872,6 +1872,7 @@ const emptyCreateDialog = ref(false);
                 <EmployerFormBranch
                   v-if="!!customerFormState.editCustomerId"
                   :index="idx"
+                  v-model:customer="customerFormData"
                   v-model:customer-branch="customerFormData.customerBranch[idx]"
                   :customer-type="customerFormData.customerType"
                   :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
@@ -2710,6 +2711,7 @@ const emptyCreateDialog = ref(false);
                   <EmployerFormBranch
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
+                    v-model:customer="customerFormData"
                     v-model:customer-branch="
                       customerFormData.customerBranch[idx]
                     "
@@ -3104,8 +3106,6 @@ const emptyCreateDialog = ref(false);
                 :dropdown-list="uploadFileListEmployee"
                 @send-ocr="
                   async (v: any, f: any) => {
-                 
-
                     await ocrStore.sendOcr({ file: f });
                   }
                 "

From 15277d3a0329ceed0a137b72cec3852f3923fb95 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 08:48:19 +0700
Subject: [PATCH 25/63] fix: wrong detect customer type

---
 src/pages/03_customer-management/form.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 987a3219..0a8795ad 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -312,6 +312,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
 export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
   const customerStore = useCustomerStore();
+  const customerFormStore = useCustomerForm();
 
   const defaultFormData: CustomerBranchCreate & { id?: string } = {
     code: '',
@@ -442,6 +443,10 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     if (!currentFormData.value.id) {
       const res = await customerStore.createBranch({
         ...currentFormData.value,
+        citizenId:
+          customerFormStore.currentFormData.customerType === 'CORP'
+            ? undefined
+            : currentFormData.value.citizenId,
         customerId: state.value.currentCustomerId,
       });
       if (res) return res;

From 86a0c1f775de23cce7a569fa5bc0adbff835ca05 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:46:32 +0700
Subject: [PATCH 26/63] refactor: add type namePrefix

---
 src/stores/employee/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index ee8c90ef..53245a61 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -11,6 +11,7 @@ export type Employee = {
   createdByUserId: string;
   updatedByUserId: string;
   statusOrder: string;
+  namePrefix: string;
   firstName: string;
   firstNameEN: string;
   lastName: string;

From d66c2b34692019e854ed39eecccca5015b75035a Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:47:05 +0700
Subject: [PATCH 27/63] refactor: edit assign treeFile

---
 src/pages/03_customer-management/form.ts | 35 ++++++++++++++----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 0a8795ad..37ac8ae6 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -171,25 +171,29 @@ export const useCustomerForm = defineStore('form-customer', () => {
         contactName: v.contactName || '',
         file: await customerStore.listAttachment(v.id).then(async (r) => {
           if (r) {
-            r.forEach((item) => {
-              const temp = item.split('-').at(0);
+            const fileGroups: Record<
+              string,
+              { label: string; files: { label: string }[] }
+            > = {};
 
-              if (
-                !state.value.treeFile.some(
-                  (x) => x.label === t(`customer.typeFile.${temp || ''}`),
-                )
-              ) {
-                state.value.treeFile.push({
-                  label: t(`customer.typeFile.${temp || ''}`),
-                  file: r
-                    .filter((x) => x.includes(temp || ''))
-                    .map((x) => ({
-                      label: x,
-                    })),
-                });
+            r.forEach((file) => {
+              const temp = file.split('-')[0];
+
+              if (!fileGroups[temp]) {
+                fileGroups[temp] = {
+                  label: t(`customer.typeFile.${temp}`),
+                  files: [],
+                };
               }
+
+              fileGroups[temp].files.push({ label: file });
             });
 
+            state.value.treeFile = Object.values(fileGroups).map((group) => ({
+              label: group.label,
+              file: group.files,
+            }));
+
             return await Promise.all(
               r.map(async (item) => ({
                 url: await customerStore.getAttachment(v.id, item),
@@ -848,6 +852,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
       resetEmployeeData = {
         ...playlond,
+
         provinceId: province?.id,
         districtId: district?.id,
         subDistrictId: subDistrict?.id,

From 7bcdb26c4b70262afcd63c89291a5370a4d03748 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:48:36 +0700
Subject: [PATCH 28/63] refactor: put File return data at succeed

---
 src/stores/customer/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 5a816625..3abdf649 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -215,7 +215,7 @@ const useCustomerStore = defineStore('api-customer', () => {
     file: File;
     filename?: string;
   }) {
-    await api.put(
+    const res = await api.put(
       `/customer-branch/${opts.branchId}/attachment/${opts.filename || opts.file.name}`,
       opts.file,
       {
@@ -223,6 +223,10 @@ const useCustomerStore = defineStore('api-customer', () => {
         onUploadProgress: (e) => console.log(e),
       },
     );
+
+    if (res.status >= 400) return false;
+
+    return true;
   }
 
   async function deleteAttachment(id: string, filename: string) {

From 57a32bdd0425c554e6d157fc32352d65a1673d52 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:50:43 +0700
Subject: [PATCH 29/63] refactor: add  defineProps  readonly

---
 src/components/upload-file/UploadFile.vue             | 11 +++++++++--
 .../components/employer/EmployerFormBranch.vue        |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 994e3261..cddcb356 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -4,7 +4,7 @@ import { SaveButton, UndoButton } from 'components/button';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const currentFileSelected = ref<string>('');
+const currentFileSelected = ref<string>('citizenId');
 const file = defineModel<
   {
     group?: string;
@@ -27,6 +27,7 @@ const currentIndexDropdownList = ref(0);
 const props = withDefaults(
   defineProps<{
     treeFile: { label: string; file: { label: string }[] }[];
+    readonly?: boolean;
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
   }>(),
@@ -101,7 +102,13 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
   <div class="full-width row" stlye="min-height: 500px">
     <div>
       <div class="q-pa-sm text-center bordered" style="height: 50px">
-        <q-btn-dropdown icon="mdi-upload" color="info" label="อัปโหลดเอกสาร">
+        <q-btn-dropdown
+          :disable="readonly"
+          icon="mdi-upload"
+          color="info"
+          label="อัปโหลดเอกสาร"
+          d
+        >
           <q-list v-for="(v, i) in dropdownList" :key="v.value">
             <q-item
               clickable
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index eac5271f..b95bac0d 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -172,6 +172,7 @@ defineProps<{
         <q-tab-panel name="attachment">
           <UploadFile
             hide-action
+            :readonly="readonly"
             :dropdown-list="uploadFileListCustomer"
             v-model:status-ocr="statusOcr"
             v-model:file="item.file"

From 53c015ae6c3ad4483f3bddaec1f9b093a1519f07 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:51:12 +0700
Subject: [PATCH 30/63] refactor: wait putAttachment

---
 src/pages/03_customer-management/MainPage.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ab789c26..210fa868 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2684,25 +2684,32 @@ const emptyCreateDialog = ref(false);
                         }
 
                         customerFormData.customerBranch[idx].file?.forEach(
-                          (v) => {
+                          async (v) => {
                             if (!v.file) return;
 
                             const ext = v.file.name.split('.').at(-1);
                             let filename = v.group + '-' + new Date().getTime();
                             if (ext) filename += `.${ext}`;
 
-                            customerStore.putAttachment({
+                            const res = await customerStore.putAttachment({
                               branchId:
                                 customerFormData.customerBranch?.[idx].id || '',
                               file: v.file,
                               filename,
                             });
+
+                            if (res) {
+                              await customerFormStore.assignFormData(
+                                customerFormState.editCustomerId,
+                              );
+                            }
                           },
                         );
 
                         await customerFormStore.assignFormData(
                           customerFormState.editCustomerId,
                         );
+
                         customerFormStore.resetForm();
                       }
                     }

From 69d1e1bc72425655cb66cd7ad02110d021d0334a Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 09:51:40 +0700
Subject: [PATCH 31/63] refactor: delete rules

---
 src/components/upload-file/FormCitizen.vue | 30 ----------------------
 1 file changed, 30 deletions(-)

diff --git a/src/components/upload-file/FormCitizen.vue b/src/components/upload-file/FormCitizen.vue
index 4367d068..7b52c127 100644
--- a/src/components/upload-file/FormCitizen.vue
+++ b/src/components/upload-file/FormCitizen.vue
@@ -221,12 +221,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
               (v) => (typeof v === 'string' ? (gender = v) : '')
             "
             @clear="gender = ''"
-            :rules="[
-              (val) => {
-                const roles = getRole() || [];
-                return !!val || $t('form.error.required');
-              },
-            ]"
           >
             <template v-slot:no-option>
               <q-item>
@@ -266,12 +260,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
               }
             "
             @clear="namePrefix = ''"
-            :rules="[
-              (val) => {
-                const roles = getRole() || [];
-                return !!val || $t('form.error.required');
-              },
-            ]"
           >
             <template v-slot:no-option>
               <q-item>
@@ -292,12 +280,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.firstName')"
             for="input-first-name"
             v-model="firstName"
-            :rules="[
-              (val) => {
-                const roles = getRole() || [];
-                return !!val || $t('form.error.required');
-              },
-            ]"
           />
 
           <q-input
@@ -310,12 +292,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.lastName')"
             for="input-last-name"
             v-model="lastName"
-            :rules="[
-              (val) => {
-                const roles = getRole() || [];
-                return !!val || $t('form.error.required');
-              },
-            ]"
           />
 
           <q-input
@@ -366,12 +342,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('general.address')"
             for="input-address"
             v-model="address"
-            :rules="[
-              (val) => {
-                const roles = getRole() || [];
-                return !!val || $t('form.error.required');
-              },
-            ]"
           />
           <DatePicker
             :label="$t('customer.form.issueDate')"

From 1b040210b7ca6b2d0f687b90b0360b993293128d Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 09:54:44 +0700
Subject: [PATCH 32/63] feat: update emploee store for attachment function

---
 src/pages/03_customer-management/form.ts | 49 ++++++++++++--------
 src/stores/employee/index.ts             | 57 ++++++++++++++++++++++++
 src/stores/employee/types.ts             |  6 +++
 3 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 37ac8ae6..4e50f0a7 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -830,10 +830,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       return;
     }
 
-    const res = await employeeStore.fetchById(id);
+    const _data = await employeeStore.fetchById(id);
 
-    if (res) {
-      state.value.currentEmployee = res;
+    if (_data) {
+      const _attach = await employeeStore.listAttachment(_data.id);
+
+      state.value.currentEmployee = _data;
 
       const {
         createdAt,
@@ -847,48 +849,59 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         createdBy,
         updatedBy,
         profileImageUrl,
-        ...playlond
-      } = res;
+        ...payload
+      } = _data;
 
       resetEmployeeData = {
-        ...playlond,
-
+        ...payload,
         provinceId: province?.id,
         districtId: district?.id,
         subDistrictId: subDistrict?.id,
         employeeCheckup: structuredClone(
-          playlond.employeeCheckup?.length === 0
+          payload.employeeCheckup?.length === 0
             ? defaultFormData.employeeCheckup
-            : playlond.employeeCheckup?.map((item) => ({
+            : payload.employeeCheckup?.map((item) => ({
                 ...item,
                 statusSave: true,
               })),
         ),
         employeeOtherInfo: structuredClone(
           {
-            ...playlond.employeeOtherInfo,
-            statusSave: !!playlond.employeeOtherInfo?.id ? true : false,
+            ...payload.employeeOtherInfo,
+            statusSave: !!payload.employeeOtherInfo?.id ? true : false,
           } || {},
         ),
         employeeWork: structuredClone(
-          playlond.employeeWork?.length === 0
+          payload.employeeWork?.length === 0
             ? defaultFormData.employeeWork
-            : playlond.employeeWork?.map((item) => ({
+            : payload.employeeWork?.map((item) => ({
                 ...item,
                 statusSave: true,
               })),
         ),
+        file: _attach
+          ? await Promise.all(
+              _attach.map(async (v) => {
+                const group = v.split('-').at(0);
+
+                return {
+                  url: await employeeStore.getAttachment(_data.id, v),
+                  group,
+                };
+              }),
+            )
+          : [],
         image: null,
       };
 
       currentFromDataEmployee.value = structuredClone(resetEmployeeData);
       const foundBranch = await customerStore.fetchListCustomeBranchById(
-        playlond.customerBranchId,
+        payload.customerBranchId,
       );
 
-      state.value.currentEmployeeCode = playlond.code;
+      state.value.currentEmployeeCode = payload.code;
 
-      state.value.profileUrl = profileImageUrl || ' ';
+      state.value.profileUrl = profileImageUrl || '';
 
       profileImageUrl
         ? (state.value.profileSubmit = true)
@@ -897,8 +910,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       state.value.formDataEmployeeOwner = { ...foundBranch };
 
       if (
-        foundBranch.address === playlond.address &&
-        foundBranch.zipCode === playlond.zipCode
+        foundBranch.address === payload.address &&
+        foundBranch.zipCode === payload.zipCode
       ) {
         state.value.formDataEmployeeSameAddr = true;
       } else {
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 858b12d7..d2fc5836 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -16,6 +16,7 @@ import {
 import { CustomerBranch } from '../customer/types';
 import axios from 'axios';
 import useFlowStore from '../flow';
+import { baseUrl } from '../utils';
 
 const useEmployeeStore = defineStore('api-employee', () => {
   const flowStore = useFlowStore();
@@ -544,6 +545,57 @@ const useEmployeeStore = defineStore('api-employee', () => {
     }
   }
 
+  async function listAttachment(employeeId: string) {
+    const res = await api.get<string[]>(`/employee/${employeeId}/attachment`);
+    return !res || res.status >= 400 ? false : res.data;
+  }
+  async function getAttachment(
+    employeeId: string,
+    filename: string,
+    download = false,
+  ) {
+    const url = `${baseUrl}/employee/${employeeId}/attachment/${filename}`;
+    const res = await api.get<string>(url);
+
+    if (download) {
+      fetch(res.data)
+        .then(async (res) => await res.blob())
+        .then((blob) => {
+          let a = document.createElement('a');
+          a.download = filename;
+          a.href = window.URL.createObjectURL(blob);
+          a.click();
+          a.remove();
+        });
+    }
+
+    return res.data;
+  }
+  async function uploadAttachment(
+    employeeId: string,
+    file: File,
+    filename?: string,
+  ) {
+    const res = await api.put(
+      `/employee/${employeeId}/attachment/${filename || file.name}`,
+      file,
+      {
+        headers: {
+          'X-Rtid': flowStore.rtid,
+          'Content-Type': file.type,
+        },
+      },
+    );
+    return !(!res || res.status >= 400);
+  }
+  async function deleteAttachment(employeeId: string, filename: string) {
+    const res = await api.put(
+      `/employee/${employeeId}/attachment/${filename}`,
+      { headers: { 'X-Rtid': flowStore.rtid } },
+    );
+    return !(!res || res.status >= 400);
+  }
+
   return {
     data,
     globalOption,
@@ -571,6 +623,11 @@ const useEmployeeStore = defineStore('api-employee', () => {
 
     createEmployeeOtherInfo,
     editByIdEmployeeOtherInfo,
+
+    listAttachment,
+    getAttachment,
+    uploadAttachment,
+    deleteAttachment,
   };
 });
 
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 53245a61..2e32368c 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -108,6 +108,12 @@ export type EmployeeCreate = {
   employeeCheckup?: EmployeeCheckupCreate[];
 
   employeeOtherInfo?: EmployeeOtherCreate;
+
+  file?: {
+    group?: string;
+    url?: string;
+    file?: File;
+  }[];
 };
 
 export type EmployeeUpdate = {

From f9637e8b0ea9f14430320dbe09d5359bba92509a Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 10:00:36 +0700
Subject: [PATCH 33/63] fix: styling

---
 src/components/upload-file/UploadFile.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index cddcb356..2dba2114 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -143,7 +143,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 
     <div class="col">
       <div
-        class="bordered row items-center justify-evenly q-pa-sm"
+        class="bordered row items-center justify-evenly q-pa-sm no-wrap"
         style="height: 50px"
       >
         <q-btn
@@ -155,7 +155,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           id="btn-prev-page-top"
         />
 
-        <div>Page {{ page }} of {{ pages }}</div>
+        <div class="ellipsis">Page {{ page }} of {{ pages }}</div>
 
         <q-btn
           @click="scale = scale > 0.25 ? scale - 0.25 : scale"

From 7fb103ede3445a4719ab009b4cda67157bdb8a47 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 11:29:59 +0700
Subject: [PATCH 34/63] refactor: remove unnecessary param

---
 src/stores/employee/index.ts | 293 ++++++-----------------------------
 1 file changed, 45 insertions(+), 248 deletions(-)

diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index d2fc5836..9212f7fa 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -32,22 +32,15 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function fetchList(
-    opts?: {
-      page?: number;
-      pageSize?: number;
-      query?: string;
-      gender?: string;
-      status?: Status;
-      zipCode?: string;
-      customerId?: string;
-    },
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function fetchList(opts?: {
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    gender?: string;
+    status?: Status;
+    zipCode?: string;
+    customerId?: string;
+  }) {
     const params = new URLSearchParams();
 
     for (const [k, v] of Object.entries(opts || {})) {
@@ -59,11 +52,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     const res = await api.get<Pagination<Employee[]>>(
       `/employee${(params && '?'.concat(query)) || ''}`,
       {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+        headers: { 'X-Rtid': flowStore.rtid },
       },
     );
 
@@ -74,23 +63,12 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function create(
-    data: EmployeeCreate,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function create(data: EmployeeCreate) {
     const { id, code, image, ...payload } = data;
     const res = await api.post<
       Employee & { profileImageUrl: string; profileImageUploadUrl: string }
     >('/employee', payload, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
 
     image &&
@@ -109,23 +87,12 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function createEmployeeCheckup(
     employeeId: string,
     data: EmployeeCheckupCreate,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const { id, statusSave, ...payload } = data;
     const res = await api.post<EmployeeCheckupCreate>(
       `/employee/${employeeId}/checkup`,
       { ...payload },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -136,23 +103,12 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function createEmployeeWork(
     employeeId: string,
     data: EmployeeWorkCreate,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const { id, ...payload } = data;
     const res = await api.post<EmployeeWorkCreate>(
       `/employee/${employeeId}/work`,
       { ...payload },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -163,22 +119,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function createEmployeeOtherInfo(
     employeeId: string,
     data: EmployeeOtherCreate,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const { id, statusSave, ...payload } = data;
     const res = await api.post<EmployeeOtherCreate>(
       `/employee/${employeeId}/other-info`,
       { ...payload },
       {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+        headers: { 'X-Rtid': flowStore.rtid },
       },
     );
 
@@ -190,11 +137,6 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function editByIdEmployeeCheckup(
     employeeOfId: string,
     data: Partial<EmployeeCheckupCreate>,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const {
       id,
@@ -209,13 +151,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     const res = await api.put<EmployeeCheckupCreate>(
       `/employee/${employeeOfId}/checkup/${id}`,
       { ...payload },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -226,11 +162,6 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function editByIdEmployeeWork(
     employeeOfId: string,
     data: Partial<EmployeeWorkCreate>,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const {
       id,
@@ -245,13 +176,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     const res = await api.put<EmployeeWorkCreate>(
       `/employee/${employeeOfId}/work/${id}`,
       { ...payload },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -262,11 +187,6 @@ const useEmployeeStore = defineStore('api-employee', () => {
   async function editByIdEmployeeOtherInfo(
     employeeOfId: string,
     data: Partial<EmployeeOtherCreate>,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
   ) {
     const {
       id,
@@ -281,13 +201,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     const res = await api.put<EmployeeOtherCreate>(
       `/employee/${employeeOfId}/other-info/${id}`,
       { ...payload },
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -295,24 +209,12 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return res.data;
   }
 
-  async function editById(
-    employeeId: string,
-    data: Partial<EmployeeCreate>,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function editById(employeeId: string, data: Partial<EmployeeCreate>) {
     const { id, code, image, ...payload } = data;
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${employeeId}`, payload, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
 
     image &&
@@ -328,26 +230,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return res.data;
   }
 
-  async function deleteByIdCheckUp(
-    opts: {
-      employeeId: string;
-      checkUpId?: string;
-    },
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function deleteByIdCheckUp(opts: {
+    employeeId: string;
+    checkUpId?: string;
+  }) {
     const res = await api.delete<Employee>(
       `/employee/${opts.employeeId}/checkup/${opts.checkUpId}`,
-      {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
-      },
+      { headers: { 'X-Rtid': flowStore.rtid } },
     );
 
     if (!res) return false;
@@ -356,25 +245,11 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function deleteByIdWork(
-    opts: {
-      employeeId: string;
-      workId?: string;
-    },
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function deleteByIdWork(opts: { employeeId: string; workId?: string }) {
     const res = await api.delete<Employee>(
       `/employee/${opts.employeeId}/work/${opts.workId}`,
       {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+        headers: { 'X-Rtid': flowStore.rtid },
       },
     );
 
@@ -384,20 +259,9 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function deleteById(
-    id: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function deleteById(id: string) {
     const res = await api.delete<Employee>(`/employee/${id}`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
 
     if (!res) return false;
@@ -406,82 +270,38 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
-  async function fetchCheckup(
-    id: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function fetchCheckup(id: string) {
     const res = await api.get<EmployeeCheckup[]>(`/employee/${id}/checkup`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
     if (res && res.status === 200) {
       return res.data;
     }
   }
 
-  async function fetchWork(
-    id: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function fetchWork(id: string) {
     const res = await api.get<EmployeeWork[]>(`/employee/${id}/work`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
     if (res && res.status === 200) {
       return res.data;
     }
   }
 
-  async function fetchOther(
-    id: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function fetchOther(id: string) {
     const res = await api.get<EmployeeOther>(`/employee/${id}/other-info`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
     if (res && res.status === 200) {
       return res.data;
     }
   }
 
-  async function getStatsEmployee(
-    customerBranchId?: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function getStatsEmployee(customerBranchId?: string) {
     const res = await api.get(
       `/employee/stats${customerBranchId ? '?customerBranchId=' + customerBranchId : ''}/`,
       {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+        headers: { 'X-Rtid': flowStore.rtid },
       },
     );
     if (res && res.status === 200) {
@@ -489,19 +309,11 @@ const useEmployeeStore = defineStore('api-employee', () => {
     }
   }
 
-  async function getStatsEmployeeGender(
-    opts?: {
-      customerBranchId?: string;
-      status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
-      query?: string;
-    },
-
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function getStatsEmployeeGender(opts?: {
+    customerBranchId?: string;
+    status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+    query?: string;
+  }) {
     const params = new URLSearchParams();
 
     for (const [k, v] of Object.entries(opts || {})) {
@@ -513,11 +325,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     const res = await api.get(
       `/employee/stats/gender${(params && '?'.concat(query)) || ''}`,
       {
-        headers: {
-          'X-Session-Id': flow?.sessionId,
-          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-          'X-Tid': flow?.transactionId,
-        },
+        headers: { 'X-Rtid': flowStore.rtid },
       },
     );
     if (res && res.status === 200) {
@@ -525,20 +333,9 @@ const useEmployeeStore = defineStore('api-employee', () => {
     }
   }
 
-  async function getEditHistory(
-    employeeId: string,
-    flow?: {
-      sessionId?: string;
-      refTransactionId?: string;
-      transactionId?: string;
-    },
-  ) {
+  async function getEditHistory(employeeId: string) {
     const res = await api.get(`/employee/${employeeId}/edit-history`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
-      },
+      headers: { 'X-Rtid': flowStore.rtid },
     });
     if (res && res.status === 200) {
       return res.data;

From 5a27d424ccdb10955a7a3c6811b03c4959d3b1b7 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 13:16:48 +0700
Subject: [PATCH 35/63] refactor: add classellipsis

---
 src/components/upload-file/UploadFile.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 2dba2114..cf27dda6 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -99,15 +99,14 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 </script>
 
 <template>
-  <div class="full-width row" stlye="min-height: 500px">
-    <div>
+  <div class="full-width row">
+    <div class="col">
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown
           :disable="readonly"
           icon="mdi-upload"
           color="info"
           label="อัปโหลดเอกสาร"
-          d
         >
           <q-list v-for="(v, i) in dropdownList" :key="v.value">
             <q-item
@@ -128,7 +127,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         </q-btn-dropdown>
       </div>
 
-      <div class="full-height bordered-l bordered-b q-pa-sm">
+      <div class="bordered-l bordered-b q-pa-sm">
         <q-tree
           :nodes="treeFile || []"
           node-key="label"
@@ -137,7 +136,14 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           selected-color="primary"
           v-model:selected="currentFileSelected"
           default-expand-all
-        />
+        >
+          <template v-slot:default-header="prop">
+            <div class="ellipsis">
+              <q-tooltip>{{ prop.node.label }}</q-tooltip>
+              {{ prop.node.label }}
+            </div>
+          </template>
+        </q-tree>
       </div>
     </div>
 

From 7400f9f611724e9d7f03d59597251faa2f712d78 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 13:17:29 +0700
Subject: [PATCH 36/63] feat: add clear button

---
 src/components/ImageUploadDialog.vue  | 13 ++++---------
 src/components/button/ClearButton.vue | 26 ++++++++++++++++++++++++++
 src/components/button/index.ts        |  1 +
 3 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/components/button/ClearButton.vue

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index a5c56788..0d72d366 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import AppBox from './app/AppBox.vue';
-import { CancelButton, SaveButton } from './button';
+import { CancelButton, ClearButton, SaveButton } from './button';
 
 defineExpose({ browse });
 defineProps<{
@@ -131,20 +131,15 @@ async function downloadImage(url: string) {
         class="row items-center justify-end q-py-sm q-px-md bordered-t"
         v-if="!hiddenFooter"
       >
-        <q-btn
-          dense
-          unelevated
-          flat
-          :color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
-          :text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
-          :label="$t('general.clear')"
+        <ClearButton
+          outlined
           @click="
             inputFile && (inputFile.value = ''),
               (imageUrl = defaultUrl || fallbackUrl || ''),
               (file = null)
           "
           class="q-px-md q-mr-auto"
-          :disable="
+          :disabled="
             clearButtonDisabled ||
             imageUrl === fallbackUrl ||
             imageUrl === defaultUrl ||
diff --git a/src/components/button/ClearButton.vue b/src/components/button/ClearButton.vue
new file mode 100644
index 00000000..67d437f1
--- /dev/null
+++ b/src/components/button/ClearButton.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import MainButton from './MainButton.vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <MainButton
+    @click="(e) => $emit('click', e)"
+    v-bind="{ ...$props, ...$attrs }"
+    icon="mdi-broom"
+    color="var(--gray-7-hsl)"
+    :title="iconOnly ? $t('general.clear') : undefined"
+  >
+    {{ $t('general.clear') }}
+  </MainButton>
+</template>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 87f1b458..945f207a 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -6,3 +6,4 @@ export { default as DeleteButton } from './DeleteButton.vue';
 export { default as BackButton } from './BackButton.vue';
 export { default as UndoButton } from './UndoButton.vue';
 export { default as ToggleButton } from './ToggleButton.vue';
+export { default as ClearButton } from './ClearButton.vue';

From 218a2f39d479a2970f941bfd5c6f0782d3095a21 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 13:42:28 +0700
Subject: [PATCH 37/63] refactor: return mode from slot

---
 src/components/upload-file/UploadFile.vue             | 11 +++++++----
 .../components/employer/EmployerFormBranch.vue        |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index cf27dda6..de2d6338 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -17,6 +17,7 @@ const file = defineModel<
 
 const currentFile = computed(() => file.value.at(currentIndex.value));
 const statusOcr = defineModel<boolean>('statusOcr', { default: false });
+const currentMode = ref<string>('citizenId');
 const currentIndex = ref(0);
 
 const scale = ref(1);
@@ -86,6 +87,7 @@ watch(currentFileSelected, () => {
   file.value.findIndex((v, i) => {
     if (v.url?.includes(currentFileSelected.value)) {
       currentIndex.value = i;
+      currentMode.value = currentFileSelected.value.split('-').at(0) || '';
     }
   });
 });
@@ -227,8 +229,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"
       >
-        ข้อมูลหนังสือเดินทาง
-
+        {{ $t(`customer.typeFile.${currentMode}`) }}
         <div class="row" v-if="!hideAction">
           <UndoButton icon-only type="button" />
           <SaveButton
@@ -245,8 +246,10 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         </div>
       </div>
 
-      <div class="bordered-r bordered-b full-height">
-        <slot name="form" />
+      <div class="q-pa-sm bordered-r bordered-b full-height">
+        <slot name="form" :mode="currentMode" />
+
+        {{ currentFileSelected }}
       </div>
     </div>
   </div>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index b95bac0d..fbeda26c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -208,8 +208,9 @@ defineProps<{
             "
             @save="(group: any, file: any) => {}"
           >
-            <template #form>
+            <template #form="{ mode }">
               <FormCitizen
+                v-if="mode === 'citizenId'"
                 orc
                 v-model:citizen-id="item.citizenId"
                 v-model:birth-date="customer.birthDate"

From 79dab0a0e3d4136d2aa6bb8d7ceccea3b0b9ef13 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 13:42:52 +0700
Subject: [PATCH 38/63] refactor:delete q-pa-sm

---
 src/components/upload-file/FormCitizen.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/upload-file/FormCitizen.vue b/src/components/upload-file/FormCitizen.vue
index 7b52c127..90baa1ad 100644
--- a/src/components/upload-file/FormCitizen.vue
+++ b/src/components/upload-file/FormCitizen.vue
@@ -142,7 +142,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
 <template>
   <div class="row q-mb-sm">
     <template v-if="orc">
-      <div class="row q-pa-sm" style="gap: 10px">
+      <div class="row" style="gap: 10px">
         <div class="col-4 flex flex-center">
           <q-img
             src="/images/customer-CORP-avartar.png"

From cd7bbc21a6151d5bd31401cc7a6e4dbca7ef34af Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 13:47:23 +0700
Subject: [PATCH 39/63] refactor: deleteAttachment return data

---
 src/stores/customer/index.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 3abdf649..70944cd2 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -230,7 +230,12 @@ const useCustomerStore = defineStore('api-customer', () => {
   }
 
   async function deleteAttachment(id: string, filename: string) {
-    await api.delete(`/customer-branch/${id}/attachment/{${filename}}`);
+    const res = await api.delete(
+      `/customer-branch/${id}/attachment/{${filename}}`,
+    );
+
+    if (res.status >= 400) return false;
+    return true;
   }
 
   async function listAttachment(id: string) {

From 60d27ad8092f471e7c496f68d326112c551a4153 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 14:43:51 +0700
Subject: [PATCH 40/63] feat: employee file upload

---
 src/pages/03_customer-management/MainPage.vue | 41 ++++++++++--
 src/pages/03_customer-management/form.ts      |  8 ++-
 src/stores/employee/index.ts                  | 66 ++++++++++++++-----
 src/stores/employee/types.ts                  |  1 +
 4 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 210fa868..6ece0e07 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2594,7 +2594,7 @@ const emptyCreateDialog = ref(false);
                 @send-ocr="
                   (group: any, file: any) => ocrStore.sendOcr({ file })
                 "
-              /> 
+              />
             </div> -->
 
             <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
@@ -3109,11 +3109,44 @@ const emptyCreateDialog = ref(false);
               />
 
               <UploadFile
-                :treeFile="[]"
+                :tree-file="
+                  Object.values(
+                    currentFromDataEmployee.file?.reduce<
+                      Record<
+                        string,
+                        { label: string; file: { label: string }[] }
+                      >
+                    >((a, c) => {
+                      const _group = c.group || 'other';
+                      if (!a[_group]) {
+                        a[_group] = {
+                          label: _group,
+                          file: [
+                            {
+                              label:
+                                c.name ||
+                                `${c.group}-${c.file?.name || Date.now()}`,
+                            },
+                          ],
+                        };
+                      } else {
+                        a[_group].file.push({
+                          label:
+                            c.name ||
+                            `${c.group}-${c.file?.name || Date.now()}`,
+                        });
+                      }
+                      return a;
+                    }, {}) || {},
+                  )
+                "
+                v-model:file="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
                 :dropdown-list="uploadFileListEmployee"
                 @send-ocr="
-                  async (v: any, f: any) => {
-                    await ocrStore.sendOcr({ file: f });
+                  async (_, file) => {
+                    if (file) await ocrStore.sendOcr({ file });
                   }
                 "
               />
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 4e50f0a7..6a0a1ee1 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -881,11 +881,13 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         ),
         file: _attach
           ? await Promise.all(
-              _attach.map(async (v) => {
-                const group = v.split('-').at(0);
+              _attach.map(async (name) => {
+                const fragment = name.split('-');
+                const group = fragment.length === 1 ? 'other' : fragment.at(0);
 
                 return {
-                  url: await employeeStore.getAttachment(_data.id, v),
+                  url: await employeeStore.getAttachment(_data.id, name),
+                  name,
                   group,
                 };
               }),
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 9212f7fa..9a92c04e 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -64,23 +64,41 @@ const useEmployeeStore = defineStore('api-employee', () => {
   }
 
   async function create(data: EmployeeCreate) {
-    const { id, code, image, ...payload } = data;
+    const { id, code, image, file, ...payload } = data;
     const res = await api.post<
       Employee & { profileImageUrl: string; profileImageUploadUrl: string }
     >('/employee', payload, {
       headers: { 'X-Rtid': flowStore.rtid },
     });
 
-    image &&
-      (await axios
-        .put(res.data.profileImageUploadUrl, image, {
-          headers: { 'Content-Type': image?.type },
-          onUploadProgress: (e) => console.log(e),
-        })
-        .catch((e) => console.error(e)));
-
     if (!res) return false;
 
+    if (res.data.id) {
+      if (image) {
+        await api
+          .put(`/employee/${res.data.id}/image`, image, {
+            headers: { 'Content-Type': image?.type },
+            onUploadProgress: (e) => console.log(e),
+          })
+          .catch((e) => console.error(e));
+      }
+      if (file) {
+        const attachmentUpload = file.map(async ({ group, file }) => {
+          if (file) {
+            const _name = file.name;
+            const _ext = _name.split('.').at(-1);
+
+            let filename = group || 'other' + '-' + Date.now();
+
+            if (_ext) filename += '.' + _ext;
+
+            await uploadAttachment(res.data.id, file, filename);
+          }
+        });
+        await Promise.all(attachmentUpload);
+      }
+    }
+
     return res.data;
   }
 
@@ -210,22 +228,38 @@ const useEmployeeStore = defineStore('api-employee', () => {
   }
 
   async function editById(employeeId: string, data: Partial<EmployeeCreate>) {
-    const { id, code, image, ...payload } = data;
+    const { id, code, image, file, ...payload } = data;
     const res = await api.put<
       Employee & { imageUrl: string; profileImageUploadUrl: string }
     >(`/employee/${employeeId}`, payload, {
       headers: { 'X-Rtid': flowStore.rtid },
     });
 
-    image &&
-      (await axios
-        .put(res.data.profileImageUploadUrl, image, {
-          headers: { 'Content-Type': image.type },
+    if (!res) return false;
+
+    if (image) {
+      await api
+        .put(`/employee/${employeeId}/image`, image, {
+          headers: { 'Content-Type': image?.type },
           onUploadProgress: (e) => console.log(e),
         })
-        .catch((e) => console.error(e)));
+        .catch((e) => console.error(e));
+    }
+    if (file) {
+      const attachmentUpload = file.map(async ({ group, file }) => {
+        if (file) {
+          const _name = file.name;
+          const _ext = _name.split('.').at(-1);
 
-    if (!res) return false;
+          let filename = (group || 'other') + '-' + Date.now();
+
+          if (_ext) filename = filename + '.' + _ext;
+
+          await uploadAttachment(employeeId, file, filename);
+        }
+      });
+      await Promise.all(attachmentUpload);
+    }
 
     return res.data;
   }
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index 2e32368c..8eef6c15 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -110,6 +110,7 @@ export type EmployeeCreate = {
   employeeOtherInfo?: EmployeeOtherCreate;
 
   file?: {
+    name?: string;
     group?: string;
     url?: string;
     file?: File;

From 457bb40a73615d726db4238a33ffc08c7e24391c Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 14:43:58 +0700
Subject: [PATCH 41/63] chore: clean

---
 src/pages/03_customer-management/constant.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index 7e826af1..9ba90e24 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -56,42 +56,34 @@ export const uploadFileListEmployee: {
     label: 'ข้อมูลการตรวจลงตรา',
     value: 'checkList',
   },
-
   {
     label: 'ตม.6',
     value: 'tm6',
   },
-
   {
     label: 'ใบอนุญาตทำงาน',
     value: 'license',
   },
-
   {
     label: 'แบบแจ้งการจ้างคนต่างด้าวทำงาน',
     value: 'noticeJob',
   },
-
   {
     label: 'แบบแจ้งเข้าทำงานของคนต่างด้าว',
     value: 'noticeJobOther',
   },
-
   {
     label: 'ใบคัดประวัติระบบจัดหางาน',
     value: 'historyJob',
   },
-
   {
     label: 'ใบตอบรับการแจ้งเกี่ยวกับการทำงานของคนต่างด้าว',
     value: 'acceptJob',
   },
-
   {
     label: 'ใบเสร็จรับเงิน',
     value: 'receipt',
   },
-
   {
     label: 'อื่นๆ',
     value: 'other',

From 52c18e6a6c3341ea496cb62585dbed2c87842d3d Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 14:44:06 +0700
Subject: [PATCH 42/63] feat: update tree and state

---
 src/components/upload-file/UploadFile.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index de2d6338..f727c645 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -117,6 +117,16 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
               @click="
                 () => {
                   currentIndexDropdownList = i;
+                  const _idx = file.findIndex(
+                    (v) => v.group === dropdownList?.[i].value,
+                  );
+                  if (_idx) {
+                    currentIndex = _idx;
+                  } else {
+                    file.push({
+                      group: dropdownList?.[i].value || 'other',
+                    });
+                  }
                   browse();
                 }
               "

From 6c30e4412d87bbfe8246316b81454c582b69bbf2 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 15:07:31 +0700
Subject: [PATCH 43/63] feat: add i18n

---
 src/i18n/eng/index.ts                         | 14 +++++++++
 src/i18n/tha/index.ts                         | 12 ++++++++
 src/pages/03_customer-management/MainPage.vue |  6 +++-
 src/pages/03_customer-management/constant.ts  | 30 +++++++++----------
 src/stores/employee/index.ts                  |  4 +--
 5 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index c8ed670e..558009b6 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -401,6 +401,20 @@ export default {
       mother: 'Mother',
       motherBirthPlace: 'Mother Birth Place',
     },
+    fileType: {
+      passport: 'Passport',
+      visa: 'VISA',
+      tm6: 'TM.6',
+      workPermit: 'Work Permit',
+      noticeJobEmployment: 'Foreign Worker Employment Notification Form',
+      noticeJobEntry:
+        'Foreign Worker Employment Commencement Notification Form',
+      historyJob: 'Employment History Form',
+      acceptJob:
+        'Acknowledgement of Foreign Worker Employment Notification Form',
+      receipt: 'Receipt',
+      other: 'Other',
+    },
   },
   customerBranch: {
     tab: {
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index f4a215b6..dc285183 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -400,6 +400,18 @@ export default {
       mother: 'มารดา',
       motherBirthPlace: 'สถานที่เกิดของมารดา',
     },
+    fileType: {
+      passport: 'ข้อมูลหนังสือการเดินทาง',
+      visa: 'ข้อมูลการตรวจลงตรา',
+      tm6: 'ตม.6',
+      workPermit: 'ใบอนุญาตทำงาน',
+      noticeJobEmployment: 'แบบแจ้งการจ้างคนต่างด้าวทำงาน',
+      noticeJobEntry: 'แบบแจ้งเข้าทำงานของคนต่างด้าว',
+      historyJob: 'ใบคัดประวัติระบบจัดหางาน',
+      acceptJob: 'ใบตอบรับการแจ้งเกี่ยวกับการทำงานของคนต่างด้าว',
+      receipt: 'ใบเสร็จรับเงิน',
+      other: 'อื่นๆ',
+    },
   },
   customerBranch: {
     tab: {
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6ece0e07..35d2441f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3120,7 +3120,11 @@ const emptyCreateDialog = ref(false);
                       const _group = c.group || 'other';
                       if (!a[_group]) {
                         a[_group] = {
-                          label: _group,
+                          label: $t(
+                            uploadFileListEmployee.find(
+                              (v) => v.value === _group,
+                            )?.label || _group,
+                          ),
                           file: [
                             {
                               label:
diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index 9ba90e24..71d5e9ad 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -49,43 +49,43 @@ export const uploadFileListEmployee: {
   value: string;
 }[] = [
   {
-    label: 'ข้อมูลหนังสือการเดินทาง',
-    value: 'travelBook',
+    label: 'customerEmployee.fileType.passport',
+    value: 'passport',
   },
   {
-    label: 'ข้อมูลการตรวจลงตรา',
-    value: 'checkList',
+    label: 'customerEmployee.fileType.visa',
+    value: 'visa',
   },
   {
-    label: 'ตม.6',
+    label: 'customerEmployee.fileType.tm6',
     value: 'tm6',
   },
   {
-    label: 'ใบอนุญาตทำงาน',
-    value: 'license',
+    label: 'customerEmployee.fileType.workPermit',
+    value: 'workPermit',
   },
   {
-    label: 'แบบแจ้งการจ้างคนต่างด้าวทำงาน',
-    value: 'noticeJob',
+    label: 'customerEmployee.fileType.noticeJobEmployment',
+    value: 'noticeJobEmployment',
   },
   {
-    label: 'แบบแจ้งเข้าทำงานของคนต่างด้าว',
-    value: 'noticeJobOther',
+    label: 'customerEmployee.fileType.noticeJobEntry',
+    value: 'noticeJobEntry',
   },
   {
-    label: 'ใบคัดประวัติระบบจัดหางาน',
+    label: 'customerEmployee.fileType.historyJob',
     value: 'historyJob',
   },
   {
-    label: 'ใบตอบรับการแจ้งเกี่ยวกับการทำงานของคนต่างด้าว',
+    label: 'customerEmployee.fileType.acceptJob',
     value: 'acceptJob',
   },
   {
-    label: 'ใบเสร็จรับเงิน',
+    label: 'customerEmployee.fileType.receipt',
     value: 'receipt',
   },
   {
-    label: 'อื่นๆ',
+    label: 'customerEmployee.fileType.other',
     value: 'other',
   },
 ];
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 9a92c04e..d1cb4a4a 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -88,9 +88,9 @@ const useEmployeeStore = defineStore('api-employee', () => {
             const _name = file.name;
             const _ext = _name.split('.').at(-1);
 
-            let filename = group || 'other' + '-' + Date.now();
+            let filename = (group || 'other') + '-' + Date.now();
 
-            if (_ext) filename += '.' + _ext;
+            if (_ext) filename = filename + '.' + _ext;
 
             await uploadAttachment(res.data.id, file, filename);
           }

From 511ff04bda471196f389fc6f375f5f4d55f1a8c6 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 15:37:51 +0700
Subject: [PATCH 44/63] feat: i18n

---
 src/i18n/eng/index.ts | 1 +
 src/i18n/tha/index.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index 558009b6..46459a67 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -54,6 +54,7 @@ export default {
     age: 'Age',
     nationality: 'Nationalality',
     times: 'No. {number}',
+    uploadFile: 'Upload File',
   },
   menu: {
     dashboard: 'Dashboard',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index dc285183..8a7409a8 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -54,6 +54,7 @@ export default {
     age: 'อายุ',
     nationality: 'สัญชาติ',
     times: 'ครั้งที่ {number}',
+    uploadFile: 'อัปโหลดไฟล์',
   },
   menu: {
     dashboard: 'แดชบอร์ด',

From 46afed06e85dccadbdaa226f72b2543708177322 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 15:37:59 +0700
Subject: [PATCH 45/63] feat: upload file employee

---
 src/pages/03_customer-management/MainPage.vue | 177 +++++++++++++-----
 1 file changed, 130 insertions(+), 47 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 35d2441f..b6747d83 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2051,6 +2051,11 @@ const emptyCreateDialog = ref(false);
                     anchor: 'form-visa',
                     tab: 'personalInfo',
                   },
+                  {
+                    name: $t('general.uploadFile'),
+                    anchor: 'drawer-info-file-upload',
+                    tab: 'personalInfo',
+                  },
                   ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
                     name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-checkup-${i}`,
@@ -2162,6 +2167,7 @@ const emptyCreateDialog = ref(false);
               employee
               separator
               title="customerEmployee.form.group.personalInfo"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:open="employeeFormState.dialogModal"
               v-model:prefixName="currentFromDataEmployee.namePrefix"
               v-model:firstName="currentFromDataEmployee.firstName"
@@ -2178,6 +2184,7 @@ const emptyCreateDialog = ref(false);
             <AddressForm
               id="form-personal-address"
               prefix-id="form-employee"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:same-with-employer="
                 employeeFormState.formDataEmployeeSameAddr
               "
@@ -2199,6 +2206,7 @@ const emptyCreateDialog = ref(false);
               outlined
               separator
               :title="$t('customerEmployee.form.group.passport')"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:passport-type="currentFromDataEmployee.passportType"
               v-model:passport-number="currentFromDataEmployee.passportNumber"
               v-model:passport-issue-date="
@@ -2225,6 +2233,7 @@ const emptyCreateDialog = ref(false);
               dense
               outlined
               title="customerEmployee.form.group.visa"
+              :readonly="!employeeFormState.isEmployeeEdit"
               v-model:visa-type="currentFromDataEmployee.visaType"
               v-model:visa-number="currentFromDataEmployee.visaNumber"
               v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
@@ -2239,6 +2248,66 @@ const emptyCreateDialog = ref(false);
               v-model:entry-date="currentFromDataEmployee.entryDate"
               class="q-mb-xl"
             />
+
+            <div class="row" id="drawer-info-file-upload">
+              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-upload"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t(`general.uploadFile`) }}
+              </div>
+              <UploadFile
+                :tree-file="
+                  Object.values(
+                    currentFromDataEmployee.file?.reduce<
+                      Record<
+                        string,
+                        { label: string; file: { label: string }[] }
+                      >
+                    >((a, c) => {
+                      const _group = c.group || 'other';
+                      if (!a[_group]) {
+                        a[_group] = {
+                          label: $t(
+                            uploadFileListEmployee.find(
+                              (v) => v.value === _group,
+                            )?.label || _group,
+                          ),
+                          file: [
+                            {
+                              label:
+                                c.name ||
+                                `${c.group}-${c.file?.name || Date.now()}`,
+                            },
+                          ],
+                        };
+                      } else {
+                        a[_group].file.push({
+                          label:
+                            c.name ||
+                            `${c.group}-${c.file?.name || Date.now()}`,
+                        });
+                      }
+                      return a;
+                    }, {}) || {},
+                  )
+                "
+                v-model:file="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :dropdown-list="uploadFileListEmployee"
+                @send-ocr="
+                  async (_, file) => {
+                    if (file) await ocrStore.sendOcr({ file });
+                  }
+                "
+              />
+            </div>
           </template>
 
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
@@ -2340,6 +2409,7 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+            a
           </template>
 
           <template v-if="employeeFormState.currentTab === 'other'">
@@ -2915,7 +2985,7 @@ const emptyCreateDialog = ref(false);
                     },
 
                     {
-                      name: $t('อัปโหลดไฟล์'),
+                      name: $t('general.uploadFile'),
                       anchor: 'drawer-upload-file',
                       tab: 'personalInfo',
                     },
@@ -3108,52 +3178,65 @@ const emptyCreateDialog = ref(false);
                 class="q-mb-xl"
               />
 
-              <UploadFile
-                :tree-file="
-                  Object.values(
-                    currentFromDataEmployee.file?.reduce<
-                      Record<
-                        string,
-                        { label: string; file: { label: string }[] }
-                      >
-                    >((a, c) => {
-                      const _group = c.group || 'other';
-                      if (!a[_group]) {
-                        a[_group] = {
-                          label: $t(
-                            uploadFileListEmployee.find(
-                              (v) => v.value === _group,
-                            )?.label || _group,
-                          ),
-                          file: [
-                            {
-                              label:
-                                c.name ||
-                                `${c.group}-${c.file?.name || Date.now()}`,
-                            },
-                          ],
-                        };
-                      } else {
-                        a[_group].file.push({
-                          label:
-                            c.name ||
-                            `${c.group}-${c.file?.name || Date.now()}`,
-                        });
-                      }
-                      return a;
-                    }, {}) || {},
-                  )
-                "
-                v-model:file="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :dropdown-list="uploadFileListEmployee"
-                @send-ocr="
-                  async (_, file) => {
-                    if (file) await ocrStore.sendOcr({ file });
-                  }
-                "
-              />
+              <div class="row" id="drawer-upload-file">
+                <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-upload"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`general.uploadFile`) }}
+                </div>
+                <UploadFile
+                  :tree-file="
+                    Object.values(
+                      currentFromDataEmployee.file?.reduce<
+                        Record<
+                          string,
+                          { label: string; file: { label: string }[] }
+                        >
+                      >((a, c) => {
+                        const _group = c.group || 'other';
+                        if (!a[_group]) {
+                          a[_group] = {
+                            label: $t(
+                              uploadFileListEmployee.find(
+                                (v) => v.value === _group,
+                              )?.label || _group,
+                            ),
+                            file: [
+                              {
+                                label:
+                                  c.name ||
+                                  `${c.group}-${c.file?.name || Date.now()}`,
+                              },
+                            ],
+                          };
+                        } else {
+                          a[_group].file.push({
+                            label:
+                              c.name ||
+                              `${c.group}-${c.file?.name || Date.now()}`,
+                          });
+                        }
+                        return a;
+                      }, {}) || {},
+                    )
+                  "
+                  v-model:file="currentFromDataEmployee.file"
+                  hide-action
+                  :readonly="!employeeFormState.isEmployeeEdit"
+                  :dropdown-list="uploadFileListEmployee"
+                  @send-ocr="
+                    async (_, file) => {
+                      if (file) await ocrStore.sendOcr({ file });
+                    }
+                  "
+                />
+              </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck

From d9aa8c1959cd1ab8494074e3d8b1f563fa0fdf35 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 15:44:25 +0700
Subject: [PATCH 46/63] refactor: add dialog delete

---
 src/components/upload-file/UploadFile.vue | 29 +++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index f727c645..1eb93056 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { SaveButton, UndoButton } from 'components/button';
+import { SaveButton, UndoButton, CloseButton } from 'components/button';
+import { dialog } from 'stores/utils';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
@@ -95,6 +96,7 @@ watch(currentFileSelected, () => {
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
   (e: 'save', เgroup: string, file?: File): void;
+  (e: 'deleteFile', filename: string): void;
 }>();
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
@@ -259,7 +261,30 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div class="q-pa-sm bordered-r bordered-b full-height">
         <slot name="form" :mode="currentMode" />
 
-        {{ currentFileSelected }}
+        <div class="row items-center">
+          {{ currentFileSelected }}
+          <CloseButton
+            icon-only
+            type="button"
+            @click="
+              () => {
+                dialog({
+                  color: 'negative',
+                  icon: 'mdi-alert',
+                  title: $t('dialog.title.confirmDelete'),
+                  actionText: $t('general.delete'),
+                  persistent: true,
+                  message: $t('dialog.message.confirmDelete'),
+                  action: async () => {
+                    $emit('deleteFile', currentFileSelected);
+                  },
+
+                  cancel: () => {},
+                });
+              }
+            "
+          />
+        </div>
       </div>
     </div>
   </div>

From 0d6f2593530eb373d5d408b0fe6da30ca26ac96c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 15:53:33 +0700
Subject: [PATCH 47/63] refactor: add closeButton

---
 src/components/button/CloseButton.vue | 26 ++++++++++++++++++++++++++
 src/components/button/index.ts        |  1 +
 2 files changed, 27 insertions(+)
 create mode 100644 src/components/button/CloseButton.vue

diff --git a/src/components/button/CloseButton.vue b/src/components/button/CloseButton.vue
new file mode 100644
index 00000000..bd44ca50
--- /dev/null
+++ b/src/components/button/CloseButton.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import MainButton from './MainButton.vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <MainButton
+    @click="(e) => $emit('click', e)"
+    v-bind="{ ...$props, ...$attrs }"
+    icon="mdi-close"
+    color="var(--gray-7-hsl)"
+    :title="iconOnly ? $t('general.clear') : undefined"
+  >
+    {{ $t('general.clear') }}
+  </MainButton>
+</template>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 945f207a..6e350f92 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -7,3 +7,4 @@ export { default as BackButton } from './BackButton.vue';
 export { default as UndoButton } from './UndoButton.vue';
 export { default as ToggleButton } from './ToggleButton.vue';
 export { default as ClearButton } from './ClearButton.vue';
+export { default as CloseButton } from './CloseButton.vue';

From cc140f0124a68a61d76a0f95cadb2273cdf47a38 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:22:39 +0700
Subject: [PATCH 48/63] fix: height

---
 src/components/upload-file/UploadFile.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 1eb93056..fa3f3f78 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -103,8 +103,8 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 </script>
 
 <template>
-  <div class="full-width row">
-    <div class="col">
+  <div class="full-width row no-wrap wrapper">
+    <div class="col column no-wrap">
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown
           :disable="readonly"
@@ -141,7 +141,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         </q-btn-dropdown>
       </div>
 
-      <div class="bordered-l bordered-b q-pa-sm">
+      <div class="bordered-l bordered-b q-pa-sm col full-height scroll">
         <q-tree
           :nodes="treeFile || []"
           node-key="label"
@@ -161,7 +161,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       </div>
     </div>
 
-    <div class="col">
+    <div class="col column no-wrap">
       <div
         class="bordered row items-center justify-evenly q-pa-sm no-wrap"
         style="height: 50px"
@@ -236,7 +236,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       </div>
     </div>
 
-    <div class="col-5">
+    <div class="col-5 column no-wrap">
       <div
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"
@@ -258,7 +258,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         </div>
       </div>
 
-      <div class="q-pa-sm bordered-r bordered-b full-height">
+      <div class="q-pa-sm bordered-r bordered-b full-height col scroll">
         <slot name="form" :mode="currentMode" />
 
         <div class="row items-center">
@@ -290,4 +290,8 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.wrapper > * {
+  height: 300px;
+}
+</style>

From 0a13d1d29ddcd5557c8b91ae9008a37cf586ca3b Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:22:57 +0700
Subject: [PATCH 49/63] feat: add spacing

---
 src/pages/03_customer-management/MainPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b6747d83..45a2c634 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2249,7 +2249,7 @@ const emptyCreateDialog = ref(false);
               class="q-mb-xl"
             />
 
-            <div class="row" id="drawer-info-file-upload">
+            <div class="row q-mb-md" id="drawer-info-file-upload">
               <div class="col-12 q-pb-sm text-weight-bold text-body1">
                 <q-icon
                   flat

From 2f9d84d8923747fdf8fc8d7d4d523150885b91f5 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:38:29 +0700
Subject: [PATCH 50/63] feat: add status ocr model

---
 src/pages/03_customer-management/MainPage.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 45a2c634..878f16d5 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2299,11 +2299,13 @@ const emptyCreateDialog = ref(false);
                 "
                 v-model:file="currentFromDataEmployee.file"
                 hide-action
+                v-model:status-ocr="employeeFormState.ocr"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 :dropdown-list="uploadFileListEmployee"
                 @send-ocr="
                   async (_, file) => {
                     if (file) await ocrStore.sendOcr({ file });
+                    employeeFormState.ocr = false;
                   }
                 "
               />
@@ -3228,11 +3230,13 @@ const emptyCreateDialog = ref(false);
                   "
                   v-model:file="currentFromDataEmployee.file"
                   hide-action
+                  v-model:status-ocr="employeeFormState.ocr"
                   :readonly="!employeeFormState.isEmployeeEdit"
                   :dropdown-list="uploadFileListEmployee"
                   @send-ocr="
                     async (_, file) => {
                       if (file) await ocrStore.sendOcr({ file });
+                      employeeFormState.ocr = false;
                     }
                   "
                 />

From b9201d79ed071fd04d46497f046c323a25400ed8 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:38:52 +0700
Subject: [PATCH 51/63] fix: wrong condition

---
 src/components/upload-file/UploadFile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index fa3f3f78..1c4c8103 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -122,7 +122,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
                   const _idx = file.findIndex(
                     (v) => v.group === dropdownList?.[i].value,
                   );
-                  if (_idx) {
+                  if (_idx !== -1) {
                     currentIndex = _idx;
                   } else {
                     file.push({

From 84ed9bd6a579c45c0f7ca63c907c2fe36ffdd883 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:41:50 +0700
Subject: [PATCH 52/63] fix: error

---
 src/pages/03_customer-management/form.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 6a0a1ee1..24344d1c 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -514,6 +514,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
           zipCode: string;
         }
       | undefined;
+    ocr: boolean;
   }>({
     currentIndex: -1,
     statusSavePersonal: false,
@@ -531,6 +532,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     editReadonly: false,
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
+    ocr: false,
   });
 
   const defaultFormData: EmployeeCreate = {

From 80b8d3f6cbeb9085538ebe8a07f1f956f34958ed Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:41:55 +0700
Subject: [PATCH 53/63] feat: delete employee file

---
 src/pages/03_customer-management/MainPage.vue | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 878f16d5..321c7702 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2302,6 +2302,22 @@ const emptyCreateDialog = ref(false);
                 v-model:status-ocr="employeeFormState.ocr"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 :dropdown-list="uploadFileListEmployee"
+                @delete-file="
+                  async (filename) => {
+                    if (currentFromDataEmployee.id) {
+                      const result = await employeeStore.deleteAttachment(
+                        currentFromDataEmployee.id,
+                        filename,
+                      );
+                      if (result) {
+                        currentFromDataEmployee.file =
+                          currentFromDataEmployee.file?.filter(
+                            (v) => v.name !== filename,
+                          );
+                      }
+                    }
+                  }
+                "
                 @send-ocr="
                   async (_, file) => {
                     if (file) await ocrStore.sendOcr({ file });
@@ -3233,6 +3249,22 @@ const emptyCreateDialog = ref(false);
                   v-model:status-ocr="employeeFormState.ocr"
                   :readonly="!employeeFormState.isEmployeeEdit"
                   :dropdown-list="uploadFileListEmployee"
+                  @delete-file="
+                    async (filename) => {
+                      if (currentFromDataEmployee.id) {
+                        const result = await employeeStore.deleteAttachment(
+                          currentFromDataEmployee.id,
+                          filename,
+                        );
+                        if (result) {
+                          currentFromDataEmployee.file =
+                            currentFromDataEmployee.file?.filter(
+                              (v) => v.name !== filename,
+                            );
+                        }
+                      }
+                    }
+                  "
                   @send-ocr="
                     async (_, file) => {
                       if (file) await ocrStore.sendOcr({ file });

From 6b877d44f1f34282ac04ab5fe8e007fbe227ee5f Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 16:42:04 +0700
Subject: [PATCH 54/63] fix: wrong http method call

---
 src/stores/employee/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index d1cb4a4a..868e5b9d 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -420,7 +420,7 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return !(!res || res.status >= 400);
   }
   async function deleteAttachment(employeeId: string, filename: string) {
-    const res = await api.put(
+    const res = await api.delete(
       `/employee/${employeeId}/attachment/${filename}`,
       { headers: { 'X-Rtid': flowStore.rtid } },
     );

From e863ed2580e775ff850a702b6ab3cddf25565822 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:31:30 +0700
Subject: [PATCH 55/63] fix: Index missing

---
 src/components/upload-file/UploadFile.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 1c4c8103..10fea4bc 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -128,6 +128,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
                     file.push({
                       group: dropdownList?.[i].value || 'other',
                     });
+                    currentIndex = file.length - 1;
                   }
                   browse();
                 }

From 4b6feae65e177409f2ec1ca9a0ff459fd758e632 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:33:54 +0700
Subject: [PATCH 56/63] refactor: add type name

---
 src/stores/customer/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 3fa7693b..847bb773 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -107,6 +107,7 @@ export type CustomerBranchCreate = {
 
   statusSave?: boolean;
   file?: {
+    name?: string;
     group?: string;
     url?: string;
     file?: File;

From 3a1c0aba635f5d81c2275ed8d5f2cb0c7537837e Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:34:19 +0700
Subject: [PATCH 57/63] refactor: edit url deleteAttachment

---
 src/stores/customer/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 70944cd2..939460ed 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -231,7 +231,7 @@ const useCustomerStore = defineStore('api-customer', () => {
 
   async function deleteAttachment(id: string, filename: string) {
     const res = await api.delete(
-      `/customer-branch/${id}/attachment/{${filename}}`,
+      `/customer-branch/${id}/attachment/${filename}`,
     );
 
     if (res.status >= 400) return false;

From f922a3a7e5350fb9e6b38356b5612cf9db5557fa Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:35:34 +0700
Subject: [PATCH 58/63] refactor: header  Deleted value, index changed value

---
 src/components/upload-file/UploadFile.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 10fea4bc..d91c4832 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -5,7 +5,7 @@ import { dialog } from 'stores/utils';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
-const currentFileSelected = ref<string>('citizenId');
+const currentFileSelected = ref<string>('');
 const file = defineModel<
   {
     group?: string;
@@ -269,6 +269,16 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
             type="button"
             @click="
               () => {
+                const tempValue = treeFile.find(
+                  (v) => v.label === $t(`customer.typeFile.${currentMode}`),
+                );
+
+                if (!tempValue) return;
+
+                const idx = tempValue.file?.findIndex(
+                  (v) => v.label === currentFileSelected,
+                );
+
                 dialog({
                   color: 'negative',
                   icon: 'mdi-alert',
@@ -278,6 +288,8 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
                   message: $t('dialog.message.confirmDelete'),
                   action: async () => {
                     $emit('deleteFile', currentFileSelected);
+
+                    currentFileSelected = tempValue.file?.[idx - 1].label || '';
                   },
 
                   cancel: () => {},

From 659f2f5da55bb7ae734bff67628f2a79987a4a0f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:36:19 +0700
Subject: [PATCH 59/63] refactor: add deleteAttachment

---
 src/pages/03_customer-management/form.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 24344d1c..54eceb2a 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -72,6 +72,16 @@ export const useCustomerForm = defineStore('form-customer', () => {
     (v) => (defaultFormData.customerType = v.customerType),
   );
 
+  async function deleteAttachment(
+    id: { branchId: string; customerId: string },
+    filename: string,
+  ) {
+    const res = await customerStore.deleteAttachment(id.branchId, filename);
+    if (res) {
+      assignFormData(id.customerId);
+    }
+  }
+
   function isFormDataDifferent() {
     return (
       JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)

From 3529f81352cb09b4550ebf00aa4e8165e22023d2 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:36:30 +0700
Subject: [PATCH 60/63] refactor: edit map data

---
 src/pages/03_customer-management/form.ts | 39 ++++++++----------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 54eceb2a..441e892b 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -181,33 +181,17 @@ export const useCustomerForm = defineStore('form-customer', () => {
         contactName: v.contactName || '',
         file: await customerStore.listAttachment(v.id).then(async (r) => {
           if (r) {
-            const fileGroups: Record<
-              string,
-              { label: string; files: { label: string }[] }
-            > = {};
-
-            r.forEach((file) => {
-              const temp = file.split('-')[0];
-
-              if (!fileGroups[temp]) {
-                fileGroups[temp] = {
-                  label: t(`customer.typeFile.${temp}`),
-                  files: [],
-                };
-              }
-
-              fileGroups[temp].files.push({ label: file });
-            });
-
-            state.value.treeFile = Object.values(fileGroups).map((group) => ({
-              label: group.label,
-              file: group.files,
-            }));
-
             return await Promise.all(
-              r.map(async (item) => ({
-                url: await customerStore.getAttachment(v.id, item),
-              })),
+              r.map(async (item) => {
+                const fragment = item.split('-');
+                const group = fragment.length === 1 ? 'other' : fragment.at(0);
+
+                return {
+                  url: await customerStore.getAttachment(v.id, item),
+                  name: item,
+                  group: group,
+                };
+              }),
             );
           }
           return [];
@@ -321,6 +305,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     assignFormData,
     submitFormCustomer,
     addCurrentCustomerBranch,
+    deleteAttachment,
   };
 });
 
@@ -475,8 +460,8 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
 
   return {
     state,
-    initForm,
     currentFormData,
+    initForm,
     isFormDataDifferent,
     submitForm,
   };

From d839f41b2471f16aeb5b66feca9fab1e5ff2859c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:36:55 +0700
Subject: [PATCH 61/63] refactor: add  deleteAttachment

---
 .../components/employer/EmployerFormBranch.vue        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index fbeda26c..add73ca4 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -206,7 +206,16 @@ defineProps<{
                 statusOcr = false;
               }
             "
-            @save="(group: any, file: any) => {}"
+            @delete-file="
+              (filename) => {
+                if (!item.id) return;
+
+                customerFormStore.deleteAttachment(
+                  { branchId: item.id, customerId: item.customerId },
+                  filename,
+                );
+              }
+            "
           >
             <template #form="{ mode }">
               <FormCitizen

From 5d519dc20b6d9dd081129a0cc383c016017db48a Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 17:37:10 +0700
Subject: [PATCH 62/63] refactor: map treeFile

---
 .../employer/EmployerFormBranch.vue           | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index add73ca4..9cbeec35 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -5,7 +5,9 @@ import EmployerFormBusiness from './EmployerFormBusiness.vue';
 import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
+import { useCustomerForm } from 'src/pages/03_customer-management/form';
 
+const customerFormStore = useCustomerForm();
 import { FormCitizen } from 'components/upload-file/';
 
 import useOcrStore from 'stores/ocr';
@@ -21,11 +23,14 @@ import UploadFile from 'src/components/upload-file/UploadFile.vue';
 import { uploadFileListCustomer } from '../../constant';
 
 const statusOcr = ref(false);
+
 const customer = defineModel<CustomerCreate>('customer', { required: true });
+
 const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
   'customerBranch',
   { required: true },
 );
+
 const tab = ref('main');
 
 defineEmits<{
@@ -176,7 +181,38 @@ defineProps<{
             :dropdown-list="uploadFileListCustomer"
             v-model:status-ocr="statusOcr"
             v-model:file="item.file"
-            :tree-file="treeFile"
+            :tree-file="
+              Object.values(
+                item.file?.reduce<
+                  Record<string, { label: string; file: { label: string }[] }>
+                >((a, c) => {
+                  const _group = c.group || 'other';
+                  console.log(c);
+
+                  if (!a[_group]) {
+                    a[_group] = {
+                      label: $t(
+                        uploadFileListCustomer.find((v) => v.value === _group)
+                          ?.label || _group,
+                      ),
+                      file: [
+                        {
+                          label:
+                            c.name ||
+                            `${c.group}-${c.file?.name || Date.now()}`,
+                        },
+                      ],
+                    };
+                  } else {
+                    a[_group].file.push({
+                      label:
+                        c.name || `${c.group}-${c.file?.name || Date.now()}`,
+                    });
+                  }
+                  return a;
+                }, {}) || {},
+              )
+            "
             @send-ocr="
               async (v: any, f: any) => {
                 const res = await ocrStore.sendOcr({ file: f });

From 0fdae198056e2690f70c42f25b6fa38ef608d581 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Wed, 28 Aug 2024 17:37:46 +0700
Subject: [PATCH 63/63] fix: i18n

---
 src/components/upload-file/UploadFile.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index d91c4832..6dffe06f 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -18,7 +18,7 @@ const file = defineModel<
 
 const currentFile = computed(() => file.value.at(currentIndex.value));
 const statusOcr = defineModel<boolean>('statusOcr', { default: false });
-const currentMode = ref<string>('citizenId');
+const currentMode = ref<string>('');
 const currentIndex = ref(0);
 
 const scale = ref(1);
@@ -88,7 +88,8 @@ watch(currentFileSelected, () => {
   file.value.findIndex((v, i) => {
     if (v.url?.includes(currentFileSelected.value)) {
       currentIndex.value = i;
-      currentMode.value = currentFileSelected.value.split('-').at(0) || '';
+      currentMode.value =
+        props.dropdownList?.[currentIndexDropdownList.value].label || 'other';
     }
   });
 });
@@ -200,7 +201,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           icon="mdi-magnify-plus-outline"
           @click="scale = scale < 2 ? scale + 0.25 : scale"
         >
-          <q-tooltip>{{ $t('zoomIn') }}</q-tooltip>
+          <q-tooltip>{{ $t('general.zoomIn') }}</q-tooltip>
         </q-btn>
 
         <q-btn
@@ -242,7 +243,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"
       >
-        {{ $t(`customer.typeFile.${currentMode}`) }}
+        {{ $t(currentMode) }}
         <div class="row" v-if="!hideAction">
           <UndoButton icon-only type="button" />
           <SaveButton
@@ -266,7 +267,9 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
           {{ currentFileSelected }}
           <CloseButton
             icon-only
+            v-if="!readonly"
             type="button"
+            class="q-ml-sm"
             @click="
               () => {
                 const tempValue = treeFile.find(