From e969db16e011bad8529152cca016e05387899e56 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Thu, 3 Oct 2024 17:35:56 +0700
Subject: [PATCH] refactor: add tab passport

---
 .../FormEmployeePassport.vue                  | 331 ++++++++++--------
 src/pages/03_customer-management/MainPage.vue | 199 ++++++++++-
 src/pages/03_customer-management/form.ts      | 122 +++++++
 3 files changed, 505 insertions(+), 147 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 4b9f4c8e..1c719756 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -32,7 +32,9 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  img?: string;
   ocr?: boolean;
+  hideTitle?: boolean;
 
   prefixId: string;
 }>();
@@ -86,7 +88,10 @@ watch(
 
 <template>
   <div class="row col-12">
-    <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
+    <div
+      v-if="!ocr && !hideTitle"
+      class="col-12 q-pb-sm text-weight-bold text-body1"
+    >
       <q-icon
         flat
         size="xs"
@@ -98,151 +103,189 @@ watch(
       {{ title }}
     </div>
 
-    <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-value="value"
-        option-label="label"
-        v-model="passportType"
-        class="col-12"
-        :class="{ 'col-md-3': !ocr }"
-        :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        :options="passportTypeOptions"
-        :for="`${prefixId}-select-passport-type`"
-        :label="$t('customerEmployee.form.passportType')"
-        :rules="[
-          (val) =>
-            (val && val.length > 0) ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.form.passportType'),
-            }),
-        ]"
-        @filter="passportTypeFilter"
+    <div
+      v-if="!ocr"
+      class="col-12 row justify-between q-pb-sm text-weight-bold"
+    >
+      <div class="app-text-muted">
+        <slot name="expiryDate" />
+      </div>
+
+      <div>
+        <slot name="button"></slot>
+      </div>
+    </div>
+
+    <div class="row q-col-gutter-sm">
+      <div
+        v-if="!ocr"
+        class="col row justify-center q-col-gutter-sml"
+        style="max-height: 50%"
       >
-        <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
-        :for="`${prefixId}-input-passport-no`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-        :label="$t('customerEmployee.form.passportNo')"
-        v-model="passportNumber"
-        :rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
-      />
-      <q-input
-        :for="`${prefixId}-input-passport-ref`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-12': ocr, 'col-6': !ocr }"
-        :label="$t('customerEmployee.form.passportRef')"
-        :model-value="
-          readonly
-            ? previousPassportReference || '-'
-            : previousPassportReference
-        "
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
-        "
-      />
-      <q-input
-        :for="`${prefixId}-input-passport-place`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-        :label="$t('customerEmployee.form.passportPlace')"
-        v-model="passportIssuingPlace"
-        :rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
-      />
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-value="value"
-        option-label="label"
-        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-        v-model="passportIssuingCountry"
-        :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
-        :options="passportIssuingCountryOptions"
-        :for="`${prefixId}-select-passport-country`"
-        :label="$t('customerEmployee.form.passportIssuer')"
-        :rules="[
-          (val) =>
-            (val && val.length > 0) ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.form.passportIssuer'),
-            }),
-        ]"
-        @filter="passportIssuingCountryFilter"
+        <div style="border: 1px dashed">
+          <q-avatar
+            square
+            size="100px"
+            font-size="50px"
+            color="grey-4"
+            text-color="grey"
+            icon="mdi-image-outline"
+          />
+        </div>
+      </div>
+      <div
+        class="row q-col-gutter-sm"
+        :class="{ 'col-10': !ocr, 'col-12': ocr }"
       >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <DatePicker
-        :id="`${prefixId}-date-picker-passport-issueance`"
-        :label="$t('customerEmployee.form.passportIssueDate')"
-        v-model="passportIssueDate"
-        class="col-6"
-        :class="{ 'col-md-3': !ocr }"
-        :readonly="readonly"
-        :rules="[
-          (val) =>
-            (val && val.length > 0) ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.form.passportIssueDate'),
-            }),
-        ]"
-      />
-      <DatePicker
-        :id="`${prefixId}-date-picker-passport-expire`"
-        :label="$t('customerEmployee.form.passportExpireDate')"
-        v-model="passportExpiryDate"
-        class="col-6"
-        :class="{ 'col-md-3': !ocr }"
-        :readonly="readonly"
-        :rules="[
-          (val) =>
-            (val && val.length > 0) ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.form.passportExpireDate'),
-            }),
-        ]"
-      />
+        <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
+          option-label="label"
+          v-model="passportType"
+          :class="{ 'col-12': ocr, 'col-md-3': !ocr }"
+          :dense="dense"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          :options="passportTypeOptions"
+          :for="`${prefixId}-select-passport-type`"
+          :label="$t('customerEmployee.form.passportType')"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportType'),
+              }),
+          ]"
+          @filter="passportTypeFilter"
+        >
+          <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
+          :for="`${prefixId}-input-passport-no`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
+          :label="$t('customerEmployee.form.passportNo')"
+          v-model="passportNumber"
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+          ]"
+        />
+        <q-input
+          :for="`${prefixId}-input-passport-ref`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          :class="{ 'col-12': ocr, 'col-6': !ocr }"
+          :label="$t('customerEmployee.form.passportRef')"
+          :model-value="
+            readonly
+              ? previousPassportReference || '-'
+              : previousPassportReference
+          "
+          @update:model-value="
+            (v) =>
+              typeof v === 'string' ? (previousPassportReference = v) : ''
+          "
+        />
+        <q-input
+          :for="`${prefixId}-input-passport-place`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
+          :label="$t('customerEmployee.form.passportPlace')"
+          v-model="passportIssuingPlace"
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+          ]"
+        />
+        <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
+          option-label="label"
+          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
+          v-model="passportIssuingCountry"
+          :dense="dense"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          :options="passportIssuingCountryOptions"
+          :for="`${prefixId}-select-passport-country`"
+          :label="$t('customerEmployee.form.passportIssuer')"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportIssuer'),
+              }),
+          ]"
+          @filter="passportIssuingCountryFilter"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+        <DatePicker
+          :id="`${prefixId}-date-picker-passport-issueance`"
+          :label="$t('customerEmployee.form.passportIssueDate')"
+          v-model="passportIssueDate"
+          class="col-6"
+          :class="{ 'col-md-3': !ocr }"
+          :readonly="readonly"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportIssueDate'),
+              }),
+          ]"
+        />
+        <DatePicker
+          :id="`${prefixId}-date-picker-passport-expire`"
+          :label="$t('customerEmployee.form.passportExpireDate')"
+          v-model="passportExpiryDate"
+          class="col-6"
+          :class="{ 'col-md-3': !ocr }"
+          :readonly="readonly"
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('form.error.selectField', {
+                field: $t('customerEmployee.form.passportExpireDate'),
+              }),
+          ]"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b5920259..e1093396 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -5,6 +5,7 @@ import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { baseUrl, waitAll } from 'src/stores/utils';
+import { dateFormat } from 'src/utils/datetime';
 
 import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
@@ -473,7 +474,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
 
 async function deleteEmployeeById(opts: {
   id?: string;
-  type?: 'healthCheck' | 'work';
+  type?: 'passport' | 'healthCheck' | 'work';
 }) {
   dialog({
     color: 'negative',
@@ -483,6 +484,10 @@ async function deleteEmployeeById(opts: {
     persistent: true,
     message: t('dialog.message.confirmDelete'),
     action: async () => {
+      if (opts.type === 'passport') {
+        await employeeFormStore.deletePassport();
+      }
+
       if (opts.type === 'healthCheck') {
         await employeeFormStore.deleteHealthCheck();
       }
@@ -1286,6 +1291,25 @@ const emptyCreateDialog = ref(false);
                           </q-tooltip>
                         </q-td>
 
+                        <q-td v-if="fieldSelected.includes('address')">
+                          {{
+                            locale === 'eng'
+                              ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                '-'
+                              : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                '-'
+                          }}
+                          <q-tooltip>
+                            {{
+                              locale === 'eng'
+                                ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                  '-'
+                                : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
+                                  '-'
+                            }}
+                          </q-tooltip>
+                        </q-td>
+
                         <q-td v-if="fieldSelected.includes('contactName')">
                           {{ props.row.branch[0]?.contactName || '-' }}
                         </q-td>
@@ -3537,6 +3561,11 @@ const emptyCreateDialog = ref(false);
           employeeFormState.dialogType = 'info';
           employeeFormState.isEmployeeEdit = false;
         }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
         }
@@ -3619,6 +3648,10 @@ const emptyCreateDialog = ref(false);
               name: 'personalInfo',
               label: 'customerEmployee.form.group.personalInfo',
             },
+            {
+              name: 'passport',
+              label: 'customerEmployee.fileType.passport',
+            },
             {
               name: 'healthCheck',
               label: 'customerEmployee.form.group.healthCheck',
@@ -3669,6 +3702,31 @@ const emptyCreateDialog = ref(false);
                       anchor: 'drawer-upload-file',
                       tab: 'personalInfo',
                     },
+                    {
+                      name: $t('customerEmployee.form.group.passport'),
+                      anchor: 'drawer-passport',
+                      tab: 'passport',
+                      useBtn:
+                        currentFromDataEmployee.employeePassport?.filter(
+                          (item) => {
+                            if (item.id === undefined) {
+                              return true;
+                            }
+                            return false;
+                          },
+                        ).length === 0 &&
+                        employeeFormState.currentIndexPassport === -1
+                          ? true
+                          : false,
+                    },
+                    ...(currentFromDataEmployee.employeePassport?.map(
+                      (v, i) => ({
+                        name: dateFormat(v.expireDate),
+                        anchor: `drawer-employee-employeePassport-${i}`,
+                        tab: 'passport',
+                        sub: true,
+                      }),
+                    ) || []),
 
                     ...(currentFromDataEmployee.employeeCheckup?.map(
                       (v, i) => ({
@@ -3695,7 +3753,20 @@ const emptyCreateDialog = ref(false);
                   foreground: 'var(--blue-6)',
                 }"
                 scroll-element="#drawer-employee-form-content"
-              />
+              >
+                <template v-slot:btn-drawer-passport>
+                  <q-btn
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                </template>
+              </SideMenu>
             </div>
           </div>
           <div
@@ -4010,7 +4081,7 @@ const emptyCreateDialog = ref(false);
                     v-model:passport-expiry-date="meta.expireDate"
                     v-model:passport-issuing-place="meta.issuePlace"
                     v-model:passport-issuing-country="meta.issueCountry"
-                  />
+                  ></FormEmployeePassport>
                   <FormEmployeeVisa
                     v-if="mode === 'visa' && meta"
                     prefix-id="drawer-info-employee"
@@ -4031,6 +4102,128 @@ const emptyCreateDialog = ref(false);
                 </template>
               </UploadFileGroup>
             </template>
+
+            <template v-if="employeeFormState.currentTab === 'passport'">
+              <div class="q-gutter-sm">
+                <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-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.passport') }}
+                </div>
+
+                <FormEmployeePassport
+                  v-for="(
+                    value, index
+                  ) in currentFromDataEmployee.employeePassport"
+                  prefix-id="drawer-info-employee"
+                  :key="index"
+                  id="form-passport"
+                  hide-title
+                  dense
+                  outlined
+                  separator
+                  :title="$t('customerEmployee.form.group.passport')"
+                  :readonly="employeeFormState.currentIndexPassport !== index"
+                  v-model:passport-type="value.type"
+                  v-model:passport-number="value.number"
+                  v-model:passport-issue-date="value.issueDate"
+                  v-model:passport-expiry-date="value.expireDate"
+                  v-model:passport-issuing-place="value.issuePlace"
+                  v-model:passport-issuing-country="value.issueCountry"
+                >
+                  <template v-slot:expiryDate>
+                    {{ $t('general.expirationDate') }} :
+                    {{ dateFormat(value.expireDate) }}
+                  </template>
+
+                  <template v-slot:button>
+                    <div class="surface-1 row rounded" style="min-height: 35px">
+                      <UndoButton
+                        v-if="
+                          employeeFormState.isEmployeeEdit &&
+                          !(employeeFormState.currentIndexPassport === -1) &&
+                          employeeFormState.currentIndexPassport === index
+                        "
+                        id="btn-info-basic-undo"
+                        icon-only
+                        @click="
+                          () => {
+                            employeeFormStore.resetFormDataEmployee();
+                            employeeFormState.isEmployeeEdit = false;
+                            employeeFormState.dialogType = 'info';
+                            employeeFormState.currentIndexPassport = -1;
+                          }
+                        "
+                        type="button"
+                      />
+                      <SaveButton
+                        v-if="
+                          (employeeFormState.isEmployeeEdit ||
+                            value.id === undefined) &&
+                          !(employeeFormState.currentIndexPassport === -1) &&
+                          employeeFormState.currentIndexPassport === index
+                        "
+                        id="btn-info-basic-save"
+                        icon-only
+                        @click="
+                          () => {
+                            employeeFormState.currentIndexPassport = index;
+                          }
+                        "
+                        type="submit"
+                      />
+
+                      <EditButton
+                        v-if="
+                          employeeFormState.currentIndexPassport === -1 ||
+                          (!employeeFormState.isEmployeeEdit &&
+                            value.id !== undefined &&
+                            employeeFormState.currentIndexPassport === index)
+                        "
+                        id="btn-info-basic-edit"
+                        icon-only
+                        @click="
+                          () => {
+                            employeeFormState.currentIndexPassport = index;
+                            employeeFormState.isEmployeeEdit = true;
+                            employeeFormState.dialogType = 'edit';
+                          }
+                        "
+                        type="button"
+                      />
+                      <DeleteButton
+                        v-if="
+                          employeeFormState.currentIndexPassport === -1 ||
+                          (!employeeFormState.isEmployeeEdit &&
+                            value.id !== undefined &&
+                            !(employeeFormState.currentIndexPassport === -1) &&
+                            employeeFormState.currentIndexPassport === index)
+                        "
+                        id="btn-info-basic-delete"
+                        icon-only
+                        @click.stop="
+                          () => {
+                            employeeFormState.currentIndexPassport = index;
+                            deleteEmployeeById({ type: 'passport' });
+                          }
+                        "
+                        type="button"
+                        :disabled="
+                          !(employeeFormState.currentIndex === -1) &&
+                          !(employeeFormState.currentIndex === index)
+                        "
+                      />
+                    </div>
+                  </template>
+                </FormEmployeePassport>
+              </div>
+            </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck
                 v-if="employeeFormState.currentTab === 'healthCheck'"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index cd889f40..83e6fb88 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -588,6 +588,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
     currentIndex: number;
+    currentIndexPassport: number;
     profileUrl: string;
     isEmployeeEdit: boolean;
     profileSubmit: boolean;
@@ -617,6 +618,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     ocr: boolean;
   }>({
     isImageEdit: false,
+    currentIndexPassport: -1,
     currentIndex: -1,
     statusSavePersonal: false,
     drawerModal: false,
@@ -718,6 +720,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
     employeePassport: [
       {
+        id: undefined,
         number: '',
         type: '',
         issueDate: new Date(),
@@ -763,6 +766,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
   // }
 
   function resetFormDataEmployee(clean = false) {
+    state.value.currentIndexPassport = -1;
     if (clean) {
       state.value.currentTab = 'personalInfo';
       state.value.formDataEmployeeOwner = undefined;
@@ -776,6 +780,58 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentFromDataEmployee.value = structuredClone(resetEmployeeData);
   }
 
+  async function submitPassport() {
+    if (
+      currentFromDataEmployee.value.employeePassport?.[
+        state.value.currentIndexPassport
+      ] === undefined
+    )
+      return;
+
+    if (
+      currentFromDataEmployee.value.employeePassport?.[
+        state.value.currentIndexPassport
+      ].id === undefined
+    ) {
+      const res = await employeeStore.postMeta({
+        parentId: currentFromDataEmployee.value.id || '',
+        group: 'passport',
+        meta: currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ],
+      });
+
+      if (res) {
+        currentFromDataEmployee.value.employeePassport[
+          state.value.currentIndexPassport
+        ].id = res.id;
+      }
+    }
+    if (
+      currentFromDataEmployee.value.employeePassport?.[
+        state.value.currentIndexPassport
+      ].id !== undefined
+    ) {
+      const { id, ...payload } =
+        currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ];
+
+      await employeeStore.putMeta({
+        parentId: currentFromDataEmployee.value.id || '',
+        group: 'passport',
+        metaId:
+          currentFromDataEmployee.value.employeePassport?.[
+            state.value.currentIndexPassport
+          ].id || '',
+        meta: payload,
+      });
+    }
+
+    await assignFormDataEmployee(currentFromDataEmployee.value.id);
+    state.value.currentIndexPassport = -1;
+  }
+
   async function submitOther() {
     if (!currentFromDataEmployee.value.employeeOtherInfo) return;
 
@@ -802,6 +858,25 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     await assignFormDataEmployee(currentFromDataEmployee.value.id);
   }
 
+  async function deletePassport() {
+    const res = await employeeStore.delMeta({
+      parentId: currentFromDataEmployee.value.id || '',
+      group: 'passport',
+      metaId:
+        currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ].id || '',
+    });
+
+    if (res) {
+      currentFromDataEmployee.value.employeePassport?.splice(
+        state.value.currentIndexPassport,
+        1,
+      );
+      await assignFormDataEmployee(currentFromDataEmployee.value.id);
+    }
+  }
+
   async function deleteWorkHistory() {
     if (!currentFromDataEmployee.value.employeeWork) return;
 
@@ -990,6 +1065,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         provinceId: province?.id || '',
         districtId: district?.id || '',
         subDistrictId: subDistrict?.id || '',
+
+        employeePassport: structuredClone(
+          payload.employeePassport?.length === 0
+            ? defaultFormData.employeePassport
+            : payload.employeePassport?.map((item) => ({
+                id: item.id,
+                number: item.number,
+                type: item.type,
+                issueDate: item.issueDate,
+                expireDate: item.expireDate,
+                issueCountry: item.issueCountry,
+                issuePlace: item.issuePlace,
+                previousPassportRef: item.previousPassportRef,
+              })),
+        ),
+
         employeeCheckup: structuredClone(
           payload.employeeCheckup?.length === 0
             ? defaultFormData.employeeCheckup
@@ -1029,6 +1120,17 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       };
 
       currentFromDataEmployee.value = structuredClone(resetEmployeeData);
+
+      state.value.currentIndexPassport =
+        (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
+
+      if (
+        currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ].id !== undefined
+      ) {
+        state.value.currentIndexPassport = -1;
+      }
       const foundBranch = await customerStore.fetchListCustomeBranchById(
         payload.customerBranchId,
       );
@@ -1075,16 +1177,36 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     });
   }
 
+  function addPassport() {
+    currentFromDataEmployee.value.employeePassport?.push({
+      id: undefined,
+      number: '',
+      type: '',
+      issueDate: new Date(),
+      expireDate: new Date(),
+      issueCountry: '',
+      issuePlace: '',
+      previousPassportRef: '',
+    });
+
+    state.value.currentIndexPassport =
+      (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
+  }
+
   return {
     state,
     currentFromDataEmployee,
     resetEmployeeData,
 
+    addPassport,
+
+    submitPassport,
     submitOther,
     submitWorkHistory,
     submitPersonal,
     submitHealthCheck,
 
+    deletePassport,
     deleteWorkHistory,
     deleteHealthCheck,