refactor: edit upload

src/components/upload-file/UploadFileGroup.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar';
+import { computed, ref, watch, toRaw } from 'vue';
+
+import TableComponents from 'src/components/TableComponents.vue';
+import ShowAttachent from 'src/components/ShowAttachent.vue';
+import DialogForm from 'components/DialogForm.vue';
+
+const obj = defineModel<
+  {
+    _meta?: Record<string, any>;
+    name?: string;
+    group?: string;
+    url?: string;
+    file?: File;
+  }[]
+>({
+  default: [],
+});
+
+const dialog = ref(false);
+
+const splitAttachment = ref(50);
+
+const currentIndex = ref(-1);
+const currentIndexDropdownList = ref(0);
+
+const props = defineProps<{
+  ocr?: (group: any, file: File) => void | Promise<void>;
+  getFileList?: (group: any) => Promise<typeof obj.value>;
+  readonly?: boolean;
+  hideAction?: boolean;
+  columns: QTableProps['columns'];
+  menu?: { label: string; value: string; _meta?: Record<string, any> }[];
+}>();
+
+function browse() {
+  inputFile?.click();
+}
+
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/jpeg,image/png';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+const selectedMenu = ref<NonNullable<typeof props.menu>[number]>();
+
+function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    if (!obj.value[currentIndex.value] && selectedMenu.value) {
+      currentIndex.value = obj.value.length;
+      obj.value = [
+        ...obj.value,
+        {
+          _meta: structuredClone(toRaw(selectedMenu.value)._meta || {}),
+          group: selectedMenu.value?.value,
+          file: _file,
+        },
+      ];
+    }
+
+    const reader = new FileReader();
+    reader.readAsDataURL(_file);
+    reader.onload = () => {
+      if (obj.value[currentIndex.value]) {
+        obj.value[currentIndex.value].url = reader.result as string;
+      }
+    };
+  }
+
+  dialog.value = true;
+}
+
+defineEmits<{
+  (e: 'submit', obj: any): void;
+}>();
+</script>
+
+<template>
+  <div class="full-width row no-wrap wrapper" style="height: 250px">
+    <div class="col-3 full-height column no-wrap">
+      <div class="q-pa-sm text-center bordered" style="height: 50px">
+        <q-btn-dropdown
+          :disable="readonly"
+          icon="mdi-upload"
+          color="info"
+          label="อัปโหลดเอกสาร"
+        >
+          <q-list v-for="(v, i) in menu" :key="v.value">
+            <q-item
+              clickable
+              v-close-popup
+              @click="
+                () => {
+                  selectedMenu = menu?.[i];
+                  currentIndex = obj.length;
+
+                  browse();
+                }
+              "
+            >
+              <q-item-section>
+                <q-item-label>{{ $t(v.label) }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </div>
+
+      <div class="bordered-l bordered-b q-pa-sm col full-height scroll">
+        <template v-if="menu != undefined">
+          <q-item
+            clickable
+            v-for="v in menu"
+            :key="v.value"
+            dense
+            type="button"
+            class="no-padding items-center rounded full-width"
+            active-class="menu-active"
+            :active="selectedMenu?.value === v.value"
+            @click="
+              async () => {
+                selectedMenu = v;
+
+                if (getFileList) {
+                  const res = await getFileList(
+                    menu?.[currentIndexDropdownList].value || '',
+                  );
+
+                  console.log(res);
+                }
+              }
+            "
+          >
+            <span class="q-px-md ellipsis q-pa-sm" style="font-size: 16px">
+              {{ $t(v.label) }}
+            </span>
+          </q-item>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="obj"
+      class="bordered col surface-2 column justify-center items-center no-wrap scroll"
+    >
+      <slot name="content">
+        <template v-if="columns !== undefined">
+          <div class="full-height full-width q-pa-md">
+            <TableComponents
+              buttomDownload
+              :rows="
+                obj.map((v, index) => {
+                  return {
+                    branchNo: index + 1,
+                    attachmentName: v.file?.name,
+                    uploadDate: '',
+                  };
+                })
+              "
+              :columns="columns"
+            ></TableComponents>
+          </div>
+        </template>
+      </slot>
+    </div>
+  </div>
+  <DialogForm
+    style="position: absolute"
+    height="100vh"
+    weight="90%"
+    v-model:modal="dialog"
+    title="ดูตัวอย่าง"
+    hideCloseEvent
+    v-if="obj.length > 0"
+    :close="
+      () => {
+        obj.splice(currentIndex, 1);
+        dialog = false;
+      }
+    "
+    :submit="
+      () => {
+        dialog = false;
+      }
+    "
+  >
+    <q-splitter class="full-height" v-model="splitAttachment">
+      <template v-slot:before>
+        <div class="full-height">
+          <ShowAttachent
+            v-if="obj[currentIndex]"
+            :url="obj[currentIndex].url || ''"
+            :file="obj[currentIndex].file"
+          />
+        </div>
+      </template>
+      <template v-slot:after>
+        <div class="q-pa-md">
+          <slot
+            v-if="obj[currentIndex]"
+            name="form"
+            :mode="obj[currentIndex].group"
+            :meta="obj[currentIndex]._meta"
+          />
+        </div>
+      </template>
+    </q-splitter>
+  </DialogForm>
+</template>
+
+<style lang="scss">
+.wrapper > * {
+  height: 300px;
+}
+
+.menu-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
+</style>

src/pages/03_customer-management/MainPage.vue

@@ -32,7 +32,6 @@ import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 import ItemCard from 'src/components/ItemCard.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
-import PersonCard from 'components/shared/PersonCard.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import EmptyAddButton from 'components/AddButton.vue';
@@ -49,15 +48,14 @@ import SideMenu from 'components/SideMenu.vue';
 import { AddButton } from 'components/button';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
 import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { UploadFile } from 'components/upload-file';
+import { UploadFileGroup } from 'components/upload-file';
 
 import {
   columnsCustomer,
   columnsEmployee,
   formMenuIconEmployee,
   uploadFileListEmployee,
-  uploadFileListCustomer,
+  columnsAttachment,
-  countryCode,
 } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
@@ -69,7 +67,11 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
-import { roundElectricalServices } from '@quasar/extras/material-icons-round';
+
+const currentSelectedMenu = ref<{ label: string; value: string }>({
+  label: '',
+  value: '',
+});
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -182,6 +184,8 @@ const customerTypeSelected = ref<{
 });
 
 const customerNameInfo = computed(() => {
+  if (customerFormData.value.customerBranch === undefined) return;
+
   const name =
     locale.value === 'eng'
       ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
@@ -192,6 +196,7 @@ const currentBtnOpen = ref<boolean[]>([]);
 const employeeStats = ref(0);
 const gridView = ref(false);
 const splitPercent = ref(15); // Customer only
+
 const currentPageCustomer = ref<number>(1);
 const maxPageCustomer = ref<number>(1);
 const currentPageEmployee = ref<number>(1);
@@ -618,12 +623,6 @@ function createEmployeeForm() {
   employeeFormState.value.isEmployeeEdit = true;
 }
 
-function returnCountryCode(country: string) {
-  const tempValue = countryCode?.find((v) => v.label.includes(country));
-
-  return tempValue?.value;
-}
-
 async function fetchImageList(
   id: string,
   selectedName: string,
@@ -682,56 +681,6 @@ watch(
   },
 );
 
-function assignOcrEmployeeData(data: {
-  document: string;
-  fields: { name: string; value: string }[];
-  result: string;
-}) {
-  const map = data.fields.reduce<Record<string, string>>((a, c) => {
-    a[c.name] = c.value;
-    return a;
-  }, {});
-
-  const temp = data.document.split('_').at(0) || '';
-
-  if (data.document.includes('passport')) {
-    if (!currentFromDataEmployee.value.passportNumber)
-      currentFromDataEmployee.value.passportNumber = map['passport_no'] || '';
-    if (!currentFromDataEmployee.value.passportIssueDate)
-      currentFromDataEmployee.value.passportIssueDate =
-        new Date(map['issue_date']) || '';
-    if (!currentFromDataEmployee.value.passportExpiryDate)
-      currentFromDataEmployee.value.passportExpiryDate =
-        new Date(map['expire_date']) || '';
-
-    if (currentFromDataEmployee.value.passportIssuingPlace)
-      currentFromDataEmployee.value.passportIssuingPlace = temp;
-
-    if (currentFromDataEmployee.value.passportIssuingCountry)
-      currentFromDataEmployee.value.passportIssuingCountry =
-        returnCountryCode(temp) || '';
-  }
-
-  if (data.document.includes('visa')) {
-    if (!currentFromDataEmployee.value.visaType)
-      currentFromDataEmployee.value.visaType = map['visa_type'] || '';
-
-    if (!currentFromDataEmployee.value.visaIssueDate)
-      currentFromDataEmployee.value.visaIssueDate =
-        new Date(map['issue_date']) || '';
-
-    if (!currentFromDataEmployee.value.visaIssuingPlace)
-      currentFromDataEmployee.value.visaIssuingPlace = map['issue_place'] || '';
-
-    if (!currentFromDataEmployee.value.visaExpiryDate)
-      currentFromDataEmployee.value.visaExpiryDate =
-        new Date(map['valid_until']) || '';
-
-    if (!currentFromDataEmployee.value.visaNumber)
-      currentFromDataEmployee.value.visaNumber = map['visa_no'] || '';
-  }
-}
-
 watch(
   () => employeeFormState.value.currentTab,
   () => {
@@ -1920,6 +1869,7 @@ const emptyCreateDialog = ref(false);
 
     <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
+        v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
@@ -2004,7 +1954,10 @@ const emptyCreateDialog = ref(false);
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
           <EmployerFormBasicInfo
-            v-if="customerFormData.customerBranch.length > 0"
+            v-if="
+              customerFormData.customerBranch !== undefined &&
+              customerFormData.customerBranch.length > 0
+            "
             class="q-mb-xl"
             :readonly="
               (customerFormState.dialogType === 'edit' &&
@@ -2524,56 +2477,6 @@ const emptyCreateDialog = ref(false);
               class="q-mb-xl"
             />
 
-            <FormEmployeePassport
-              prefix-id="drawer-info-employee"
-              id="form-passport"
-              dense
-              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="
-                currentFromDataEmployee.passportIssueDate
-              "
-              v-model:passport-expiry-date="
-                currentFromDataEmployee.passportExpiryDate
-              "
-              v-model:passport-issuing-place="
-                currentFromDataEmployee.passportIssuingPlace
-              "
-              v-model:passport-issuing-country="
-                currentFromDataEmployee.passportIssuingCountry
-              "
-              v-model:previous-passport-reference="
-                currentFromDataEmployee.previousPassportReference
-              "
-              class="q-mb-xl"
-            />
-
-            <FormEmployeeVisa
-              prefix-id="drawer-info-employee"
-              id="form-visa"
-              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"
-              v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
-              v-model:visa-issuing-place="
-                currentFromDataEmployee.visaIssuingPlace
-              "
-              v-model:visa-stay-until-date="
-                currentFromDataEmployee.visaStayUntilDate
-              "
-              v-model:tm6-number="currentFromDataEmployee.tm6Number"
-              v-model:entry-date="currentFromDataEmployee.entryDate"
-              class="q-mb-xl"
-            />
-
             <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
@@ -2586,82 +2489,36 @@ const emptyCreateDialog = ref(false);
                 />
                 {{ $t(`general.uploadFile`) }}
               </div>
-              <UploadFile
+              <UploadFileGroup
-                :tree-file="
+                v-model="currentFromDataEmployee.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
-                v-model:status-ocr="employeeFormState.ocr"
+                v-model:current-selected-menu="currentSelectedMenu"
-                :readonly="!employeeFormState.isEmployeeEdit"
+                :group-list="uploadFileListEmployee"
-                :dropdown-list="uploadFileListEmployee"
+                :menu="uploadFileListEmployee"
-                @delete-file="
+                :columns="columnsAttachment"
-                  async (filename) => {
+                :get-file-list="
-                    if (currentFromDataEmployee.id) {
+                  async (group: 'passport' | 'visa') => {
-                      const result = await employeeStore.deleteAttachment(
+                    if (!!currentFromDataEmployee.id) {
-                        currentFromDataEmployee.id,
+                      return [];
-                        filename,
-                      );
-                      if (result) {
-                        currentFromDataEmployee.file =
-                          currentFromDataEmployee.file?.filter(
-                            (v) => v.name !== filename,
-                          );
-                      }
-                    }
-                  }
-                "
-                @send-ocr="
-                  async (group, file) => {
-                    if (file) {
-                      const res = await ocrStore.sendOcr({
-                        file,
-                        category: group,
-                      });
-                      employeeFormState.ocr = false;
-
-                      if (res) {
-                        assignOcrEmployeeData(res);
-                      }
                     }
+                    return [];
                   }
                 "
               >
-                <template #form="{ mode }">
+                <template #form="{ mode, meta }">
+                  <FormCitizen
+                    v-if="mode === 'citizen' && meta"
+                    orc
+                    v-model:citizen-id="meta.citizenId"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:first-name="meta.firstName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:address="meta.address"
+                  />
                   <FormEmployeePassport
-                    v-if="mode === 'passport'"
+                    v-if="mode === 'passport' && meta"
                     prefix-id="drawer-info-employee"
                     id="form-passport"
                     dense
@@ -2670,28 +2527,20 @@ const emptyCreateDialog = ref(false);
                     ocr
                     :title="$t('customerEmployee.form.group.passport')"
                     :readonly="!employeeFormState.isEmployeeEdit"
-                    v-model:passport-type="currentFromDataEmployee.passportType"
+                    v-model:passport-type="meta.type"
-                    v-model:passport-number="
+                    v-model:passport-number="meta.number"
-                      currentFromDataEmployee.passportNumber
+                    v-model:passport-issue-date="meta.passportIssueDate"
-                    "
+                    v-model:passport-expiry-date="meta.passportExpiryDate"
-                    v-model:passport-issue-date="
+                    v-model:passport-issuing-place="meta.passportIssuingPlace"
-                      currentFromDataEmployee.passportIssueDate
-                    "
-                    v-model:passport-expiry-date="
-                      currentFromDataEmployee.passportExpiryDate
-                    "
-                    v-model:passport-issuing-place="
-                      currentFromDataEmployee.passportIssuingPlace
-                    "
                     v-model:passport-issuing-country="
-                      currentFromDataEmployee.passportIssuingCountry
+                      meta.passportIssuingCountry
                     "
                     v-model:previous-passport-reference="
-                      currentFromDataEmployee.previousPassportReference
+                      meta.previousPassportReference
                     "
                   />
                   <FormEmployeeVisa
-                    v-if="mode === 'visa'"
+                    v-if="mode === 'visa' && meta"
                     prefix-id="drawer-info-employee"
                     id="form-visa"
                     ocr
@@ -2699,25 +2548,14 @@ const emptyCreateDialog = ref(false);
                     outlined
                     title="customerEmployee.form.group.visa"
                     :readonly="!employeeFormState.isEmployeeEdit"
-                    v-model:visa-type="currentFromDataEmployee.visaType"
+                    v-model:visa-type="meta.type"
-                    v-model:visa-number="currentFromDataEmployee.visaNumber"
+                    v-model:visa-number="meta.number"
-                    v-model:visa-issue-date="
+                    v-model:visa-issue-date="meta.issueDate"
-                      currentFromDataEmployee.visaIssueDate
+                    v-model:visa-expiry-date="meta.expireDate"
-                    "
+                    v-model:visa-issuing-place="meta.issuePlace"
-                    v-model:visa-expiry-date="
-                      currentFromDataEmployee.visaExpiryDate
-                    "
-                    v-model:visa-issuing-place="
-                      currentFromDataEmployee.visaIssuingPlace
-                    "
-                    v-model:visa-stay-until-date="
-                      currentFromDataEmployee.visaStayUntilDate
-                    "
-                    v-model:tm6-number="currentFromDataEmployee.tm6Number"
-                    v-model:entry-date="currentFromDataEmployee.entryDate"
                   />
                 </template>
-              </UploadFile>
+              </UploadFileGroup>
             </div>
           </template>
 
@@ -2872,7 +2710,7 @@ const emptyCreateDialog = ref(false);
         await customerStore.addImageList(
           v,
           customerFormState.editCustomerId,
-          Date.now(),
+          Date.now().toString(),
         );
         await fetchImageList(
           customerFormState.editCustomerId,
@@ -2982,7 +2820,7 @@ const emptyCreateDialog = ref(false);
         await employeeStore.addImageList(
           v,
           currentFromDataEmployee.id,
-          Date.now(),
+          Date.now().toString(),
         );
         await fetchImageList(
           currentFromDataEmployee.id,
@@ -3110,6 +2948,7 @@ const emptyCreateDialog = ref(false);
     <div class="column full-height">
       <div class="q-px-lg q-pt-lg surface-2">
         <ProfileBanner
+          v-if="customerFormData.customerBranch !== undefined"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
           useToggle
@@ -3208,7 +3047,10 @@ const emptyCreateDialog = ref(false);
             style="height: 100%; max-height: 100%; overflow-y: auto"
           >
             <EmployerFormBasicInfo
-              v-if="customerFormData.customerBranch.length > 0"
+              v-if="
+                customerFormData.customerBranch !== undefined &&
+                customerFormData.customerBranch.length > 0
+              "
               :readonly="
                 (customerFormState.dialogType === 'edit' &&
                   customerFormState.readonly === true) ||
@@ -3745,56 +3587,6 @@ const emptyCreateDialog = ref(false);
                 dense
                 class="q-mb-xl"
               />
-              <FormEmployeePassport
-                prefix-id="drawer-info-employee"
-                id="drawer-form-passport"
-                dense
-                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="
-                  currentFromDataEmployee.passportIssueDate
-                "
-                v-model:passport-expiry-date="
-                  currentFromDataEmployee.passportExpiryDate
-                "
-                v-model:passport-issuing-place="
-                  currentFromDataEmployee.passportIssuingPlace
-                "
-                v-model:passport-issuing-country="
-                  currentFromDataEmployee.passportIssuingCountry
-                "
-                v-model:previous-passport-reference="
-                  currentFromDataEmployee.previousPassportReference
-                "
-                class="q-mb-xl"
-              />
-              <FormEmployeeVisa
-                prefix-id="drawer-info-employee"
-                id="drawer-form-visa"
-                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"
-                v-model:visa-expiry-date="
-                  currentFromDataEmployee.visaExpiryDate
-                "
-                v-model:visa-issuing-place="
-                  currentFromDataEmployee.visaIssuingPlace
-                "
-                v-model:visa-stay-until-date="
-                  currentFromDataEmployee.visaStayUntilDate
-                "
-                v-model:tm6-number="currentFromDataEmployee.tm6Number"
-                v-model:entry-date="currentFromDataEmployee.entryDate"
-                class="q-mb-xl"
-              />
 
               <div class="row" id="drawer-upload-file">
                 <div class="col-12 q-pb-sm text-weight-bold text-body1">
@@ -3808,140 +3600,73 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t(`general.uploadFile`) }}
                 </div>
-                <UploadFile
+                <UploadFileGroup
-                  :tree-file="
+                  v-model="currentFromDataEmployee.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
-                  v-model:status-ocr="employeeFormState.ocr"
+                  v-model:current-selected-menu="currentSelectedMenu"
-                  :readonly="!employeeFormState.isEmployeeEdit"
+                  :group-list="uploadFileListEmployee"
-                  :dropdown-list="uploadFileListEmployee"
+                  :menu="uploadFileListEmployee"
-                  @delete-file="
+                  :columns="columnsAttachment"
-                    async (filename) => {
+                  :get-file-list="
-                      if (currentFromDataEmployee.id) {
+                    async (group: 'passport' | 'visa') => {
-                        const result = await employeeStore.deleteAttachment(
+                      if (!!currentFromDataEmployee.id) {
-                          currentFromDataEmployee.id,
+                        return [];
-                          filename,
-                        );
-                        if (result) {
-                          currentFromDataEmployee.file =
-                            currentFromDataEmployee.file?.filter(
-                              (v) => v.name !== filename,
-                            );
-                        }
-                      }
-                    }
-                  "
-                  @send-ocr="
-                    async (group, file) => {
-                      if (file) {
-                        const res = await ocrStore.sendOcr({
-                          file,
-                          category: group,
-                        });
-                        employeeFormState.ocr = false;
-
-                        if (res) {
-                          assignOcrEmployeeData(res);
-                        }
                       }
+                      return [];
                     }
                   "
                 >
-                  <template #form="{ mode }">
+                  <template #form="{ mode, meta }">
+                    <FormCitizen
+                      v-if="mode === 'citizen' && meta"
+                      orc
+                      v-model:citizen-id="meta.citizenId"
+                      v-model:birth-date="meta.birthDate"
+                      v-model:first-name="meta.firstName"
+                      v-model:first-name-en="meta.firstNameEN"
+                      v-model:last-name="meta.lastName"
+                      v-model:last-name-en="meta.lastNameEN"
+                      v-model:address="meta.address"
+                    />
                     <FormEmployeePassport
-                      v-if="mode === 'passport'"
+                      v-if="mode === 'passport' && meta"
                       prefix-id="drawer-info-employee"
-                      id="drawer-form-passport"
+                      id="form-passport"
                       dense
                       outlined
                       separator
                       ocr
                       :title="$t('customerEmployee.form.group.passport')"
                       :readonly="!employeeFormState.isEmployeeEdit"
-                      v-model:passport-type="
+                      v-model:passport-type="meta.type"
-                        currentFromDataEmployee.passportType
+                      v-model:passport-number="meta.number"
-                      "
+                      v-model:passport-issue-date="meta.passportIssueDate"
-                      v-model:passport-number="
+                      v-model:passport-expiry-date="meta.passportExpiryDate"
-                        currentFromDataEmployee.passportNumber
+                      v-model:passport-issuing-place="meta.passportIssuingPlace"
-                      "
-                      v-model:passport-issue-date="
-                        currentFromDataEmployee.passportIssueDate
-                      "
-                      v-model:passport-expiry-date="
-                        currentFromDataEmployee.passportExpiryDate
-                      "
-                      v-model:passport-issuing-place="
-                        currentFromDataEmployee.passportIssuingPlace
-                      "
                       v-model:passport-issuing-country="
-                        currentFromDataEmployee.passportIssuingCountry
+                        meta.passportIssuingCountry
                       "
                       v-model:previous-passport-reference="
-                        currentFromDataEmployee.previousPassportReference
+                        meta.previousPassportReference
                       "
                     />
                     <FormEmployeeVisa
-                      v-if="mode === 'visa'"
+                      v-if="mode === 'visa' && meta"
                       prefix-id="drawer-info-employee"
-                      id="drawer-form-visa"
+                      id="form-visa"
+                      ocr
                       dense
                       outlined
-                      ocr
                       title="customerEmployee.form.group.visa"
                       :readonly="!employeeFormState.isEmployeeEdit"
-                      v-model:visa-type="currentFromDataEmployee.visaType"
+                      v-model:visa-type="meta.type"
-                      v-model:visa-number="currentFromDataEmployee.visaNumber"
+                      v-model:visa-number="meta.number"
-                      v-model:visa-issue-date="
+                      v-model:visa-issue-date="meta.issueDate"
-                        currentFromDataEmployee.visaIssueDate
+                      v-model:visa-expiry-date="meta.expireDate"
-                      "
+                      v-model:visa-issuing-place="meta.issuePlace"
-                      v-model:visa-expiry-date="
-                        currentFromDataEmployee.visaExpiryDate
-                      "
-                      v-model:visa-issuing-place="
-                        currentFromDataEmployee.visaIssuingPlace
-                      "
-                      v-model:visa-stay-until-date="
-                        currentFromDataEmployee.visaStayUntilDate
-                      "
-                      v-model:tm6-number="currentFromDataEmployee.tm6Number"
-                      v-model:entry-date="currentFromDataEmployee.entryDate"
                     />
                   </template>
-                </UploadFile>
+                </UploadFileGroup>
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">