refactor:move dialog employee

src/pages/05_quotation/MainPage.vue

@@ -8,26 +8,21 @@ import { storeToRefs } from 'pinia';
 // NOTE: Import stores
 import useProductServiceStore from 'src/stores/product-service';
 import { useQuotationStore } from 'src/stores/quotations';
-import { baseUrl, waitAll } from 'src/stores/utils';
+import { isRoleInclude } from 'stores/utils';
-import useCustomerStore from 'stores/customer';
-import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'src/stores/flow';
-import useOcrStore from 'stores/ocr';
 import useMyBranch from 'stores/my-branch';
 import { useQuotationForm } from './form';
+import useOcrStore from 'stores/ocr';
 
 // NOTE  Import Types
 import { CustomerBranchCreate } from 'stores/customer/types';
 import { Employee } from 'src/stores/employee/types';
 
 // NOTE: Import Components
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
-import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import FormAbout from 'src/components/05_quotation/FormAbout.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
 import PersonCard from 'src/components/shared/PersonCard.vue';
@@ -37,33 +32,20 @@ import ItemCard from 'src/components/ItemCard.vue';
 import DialogForm from 'components/DialogForm.vue';
 import { AddButton } from 'src/components/button';
 import SideMenu from 'components/SideMenu.vue';
-import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 
-import {
+import { dialogCreateCustomerItem } from 'src/pages/03_customer-management/constant';
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from 'src/pages/03_customer-management/constant';
 import {
   ProductGroup,
   Product,
   Service,
 } from 'src/stores/product-service/types';
 
-import { EmployeeWorker } from 'src/stores/quotations/types';
+import { SaveButton } from 'components/button';
-
-import {
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
 
 import ProfileBanner from 'components/ProfileBanner.vue';
 import { AddressForm } from 'components/form';
 import {
   EmployerFormBusiness,
-  EmployerFormContact,
   EmployerFormAbout,
 } from 'src/pages/03_customer-management/components';
 
@@ -76,8 +58,6 @@ import QuotationView from './QuotationView.vue';
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
-const employeeStore = useEmployeeStore();
-const customerStore = useCustomerStore();
 const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const ocrStore = useOcrStore();
@@ -85,8 +65,6 @@ const ocrStore = useOcrStore();
 const { currentFormData: quotationFormData } = storeToRefs(quotationFormStore);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
 const { currentMyBranch } = storeToRefs(userBranch);
 
 const special = ref(false);
@@ -194,21 +172,6 @@ const statData = ref<
   },
 ]);
 
-const formDataEmployee = ref<EmployeeWorker>({
-  alienReferencNumber: '',
-  documentExpireDate: new Date(),
-  lastNameEN: '',
-  lastName: '',
-  middleNameEN: '',
-  middleName: '',
-  firstNameEN: '',
-  firstName: '',
-  namePrefix: '',
-  nationality: '',
-  gender: '',
-  dateOfBirth: new Date(),
-});
-
 const formDataCustomerBranch = ref<
   CustomerBranchCreate & {
     id?: string;
@@ -266,77 +229,71 @@ const formDataCustomerBranch = ref<
 });
 
 function setDefaultCustomerd() {
-  customerFormData.value.customerBranch = [
+  formDataCustomerBranch.value = {
-    {
+    customerCode: '',
-      customerCode: '',
+    customerId: '',
-      customerId: '',
+    legalPersonNo: '',
-      legalPersonNo: '',
+    citizenId: '',
-      citizenId: '',
+    namePrefix: '',
-      namePrefix: '',
+    firstName: '',
-      firstName: '',
+    lastName: '',
-      lastName: '',
+    firstNameEN: '',
-      firstNameEN: '',
+    lastNameEN: '',
-      lastNameEN: '',
+    telephoneNo: '',
-      telephoneNo: '',
+    gender: '',
-      gender: '',
+    birthDate: new Date().toString(),
-      birthDate: new Date().toString(),
+    businessType: '',
-      businessType: '',
+    jobPosition: '',
-      jobPosition: '',
+    jobDescription: '',
-      jobDescription: '',
+    payDate: '',
-      payDate: '',
+    payDateEN: '',
-      payDateEN: '',
+    wageRate: 0,
-      wageRate: 0,
+    wageRateText: '',
-      wageRateText: '',
+    homeCode: '',
-      homeCode: '',
+    employmentOffice: '',
-      employmentOffice: '',
+    employmentOfficeEN: '',
-      employmentOfficeEN: '',
+    address: '',
-      address: '',
+    addressEN: '',
-      addressEN: '',
+    street: '',
-      street: '',
+    streetEN: '',
-      streetEN: '',
+    moo: '',
-      moo: '',
+    mooEN: '',
-      mooEN: '',
+    soi: '',
-      soi: '',
+    soiEN: '',
-      soiEN: '',
+    provinceId: '',
-      provinceId: '',
+    districtId: '',
-      districtId: '',
+    subDistrictId: '',
-      subDistrictId: '',
+    contactName: '',
-      contactName: '',
+    email: '',
-      email: '',
+    contactTel: '',
-      contactTel: '',
+    officeTel: '',
-      officeTel: '',
+    agent: '',
-      agent: '',
+    status: 'CREATED',
-      status: 'CREATED',
+    customerName: '',
-      customerName: '',
+    registerName: '',
-      registerName: '',
+    registerNameEN: '',
-      registerNameEN: '',
+    registerDate: new Date(),
-      registerDate: new Date(),
+    authorizedCapital: '',
-      authorizedCapital: '',
+    authorizedName: '',
-      authorizedName: '',
+    authorizedNameEN: '',
-      authorizedNameEN: '',
+    code: '',
-      code: '',
+  };
-    },
-  ];
 }
 
-function submitCustomer() {
+async function submitCustomer() {
   if (currentMyBranch.value === undefined) return;
 
   const { code, customerCode, birthDate, ...payload } =
     formDataCustomerBranch.value;
 
   customerFormData.value.customerBranch = [{ ...payload }];
-  customerFormData.value.registeredBranchId = currentMyBranch.value.id;
+  customerFormData.value.registeredBranchId = isRoleInclude(['system'])
-  customerFormStore.submitFormCustomer();
+    ? branchId.value
-  customerFormState.value.dialogType = 'info';
+    : currentMyBranch.value.id;
-  customerFormState.value.editCustomerId = '218554';
+  await customerFormStore.submitFormCustomer();
-}
 
-function triggerCreateEmployee() {
+  customerFormState.value.dialogModal = false;
-  employeeFormStore.resetFormDataEmployee(true);
+  // customerFormState.value.dialogType = 'info';
-  employeeFormState.value.dialogType = 'create';
-  employeeFormState.value.dialogModal = true;
-  employeeFormState.value.isEmployeeEdit = true;
 }
 
 function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
@@ -1011,6 +968,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
     :close="
       () => {
         customerFormState.dialogModal = false;
+        customerFormStore.resetForm(true);
+        setDefaultCustomerd();
       }
     "
   >
@@ -1080,15 +1039,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
             v-if="customerFormData.status !== 'INACTIVE'"
             class="surface-1 row rounded"
           >
-            <UndoButton
-              v-if="
-                customerFormState.dialogType === 'edit' &&
-                customerFormState.editCustomerId !== undefined
-              "
-              icon-only
-              @click="() => {}"
-              type="button"
-            />
             <SaveButton
               v-if="
                 customerFormState.dialogType === 'edit' ||
@@ -1098,32 +1048,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
               icon-only
               type="submit"
             />
-
-            <EditButton
-              v-if="
-                customerFormState.dialogType !== 'edit' &&
-                customerFormState.editCustomerId !== undefined
-              "
-              id="btn-info-basic-edit"
-              icon-only
-              @click="() => {}"
-              type="button"
-            />
-
-            <DeleteButton
-              v-if="
-                customerFormState.dialogType !== 'edit' &&
-                customerFormState.editCustomerId !== undefined
-              "
-              id="btn-info-basic-delete"
-              icon-only
-              @click="
-                () => {
-                  //triggerDelete
-                }
-              "
-              type="button"
-            />
           </div>
         </div>
         <div
@@ -1168,6 +1092,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
             show-title
             :index="(0).toString()"
             :customerType="customerFormData.customerType"
+            :readonly="customerFormState.dialogType === 'info'"
             v-model:citizen-id="formDataCustomerBranch.citizenId"
             v-model:prefix-name="formDataCustomerBranch.namePrefix"
             v-model:first-name="formDataCustomerBranch.firstName"
@@ -1193,6 +1118,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
             prefixId="dialog"
             dense
             outlined
+            :readonly="customerFormState.dialogType === 'info'"
             v-model:bussiness-type="formDataCustomerBranch.businessType"
             v-model:job-position="formDataCustomerBranch.jobPosition"
             v-model:job-description="formDataCustomerBranch.jobDescription"
@@ -1210,6 +1136,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
             :title="$t('form.address')"
             :addressTitle="$t('form.address')"
             :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+            :readonly="customerFormState.dialogType === 'info'"
+            v-model:bussiness-type="formDataCustomerBranch.businessType"
             v-model:address="formDataCustomerBranch.address"
             v-model:address-en="formDataCustomerBranch.addressEN"
             v-model:street="formDataCustomerBranch.street"
@@ -1228,362 +1156,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </div>
   </DialogForm>
 
-  <!-- NOTE: END - Customer / Employer Add Form -->
-
-  <!-- NOTE: START - Employee Add Form -->
-
-  <DialogForm
-    hide-footer
-    ref="formDialogRef"
-    v-model:modal="employeeFormState.dialogModal"
-    :title="$t('form.title.create', { name: $t('customer.employee') })"
-    :submit="() => {}"
-    :close="
-      () => {
-        customerFormState.dialogModal = false;
-      }
-    "
-  >
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        active
-        useToggle
-        color="white"
-        icon="mdi-account-plus-outline"
-        :bg-color="
-          employeeFormState.profileUrl
-            ? 'white'
-            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
-        "
-        v-model:current-tab="employeeFormState.currentTab"
-        v-model:toggle-status="currentFromDataEmployee.status"
-        fallbackCover="/images/employee-banner.png"
-        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
-        :toggleTitle="$t('status.title')"
-        hideFade
-        @view="
-          () => {
-            employeeFormState.imageDialog = true;
-            employeeFormState.isImageEdit = false;
-          }
-        "
-        @edit="
-          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
-        "
-        @update:toggle-status="
-          () => {
-            currentFromDataEmployee.status =
-              currentFromDataEmployee.status === 'CREATED'
-                ? 'INACTIVE'
-                : 'CREATED';
-          }
-        "
-      />
-    </div>
-    <div
-      class="col"
-      :class="{
-        'q-px-lg q-pb-lg': $q.screen.gt.sm,
-        'q-px-md q-pb-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <div
-        style="overflow-y: auto"
-        class="row full-width full-height surface-1 rounded bordered relative-position"
-      >
-        <div
-          :class="{
-            'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-py-sm q-px-lg': !$q.screen.gt.sm,
-          }"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
-        >
-          <div
-            v-if="customerFormData.status !== 'INACTIVE'"
-            class="surface-1 row rounded"
-          >
-            <UndoButton
-              v-if="
-                employeeFormState.isEmployeeEdit &&
-                employeeFormState.dialogType !== 'create'
-              "
-              id="btn-info-basic-undo"
-              icon-only
-              @click="
-                () => {
-                  employeeFormStore.resetFormDataEmployee();
-                  employeeFormState.isEmployeeEdit = false;
-                  employeeFormState.dialogType = 'info';
-                }
-              "
-              type="button"
-            />
-            <SaveButton
-              v-if="employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-save"
-              icon-only
-              type="submit"
-            />
-            <EditButton
-              v-if="!employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-edit"
-              icon-only
-              @click="
-                () => {
-                  employeeFormState.isEmployeeEdit = true;
-                  employeeFormState.dialogType = 'edit';
-                }
-              "
-              type="button"
-            />
-            <DeleteButton
-              v-if="!employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-delete"
-              icon-only
-            />
-          </div>
-        </div>
-        <div
-          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
-          v-if="$q.screen.gt.sm"
-        >
-          <SideMenu
-            :menu="[
-              {
-                name: $t('form.customerInformation'),
-                anchor: 'form-information',
-              },
-              {
-                name: $t('customerBranch.tab.business'),
-                anchor: 'form-business',
-              },
-              {
-                name: $t('form.address'),
-                anchor: 'form-address',
-              },
-            ]"
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
-            }"
-            scroll-element="#branch-form"
-          />
-        </div>
-
-        <div
-          class="col-12 col-md-10 full-height q-col-gutter-sm"
-          :class="{
-            'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
-          }"
-          id="branch-form"
-          style="overflow-y: auto"
-        >
-          <FormReferDocument
-            title="form.field.basicInformation"
-            prefixId="dialog"
-            dense
-            v-model:alien-reference-number="
-              formDataEmployee.alienReferencNumber
-            "
-            v-model:document-expire-date="formDataEmployee.documentExpireDate"
-          />
-
-          <FormPerson
-            id="form-personal"
-            prefix-id="form-employee"
-            dense
-            outlined
-            employee
-            separator
-            hideNameEn
-            title="personnel.form.personalInformation"
-            class="q-mb-xl"
-            v-model:prefix-name="formDataEmployee.namePrefix"
-            v-model:first-name="formDataEmployee.firstName"
-            v-model:mid-name="formDataEmployee.middleName"
-            v-model:last-name="formDataEmployee.lastName"
-            v-model:birth-date="formDataEmployee.dateOfBirth"
-            v-model:gender="formDataEmployee.gender"
-            v-model:nationality="formDataEmployee.nationality"
-          />
-
-          <UploadFileGroup
-            v-model:current-id="currentFromDataEmployee.id"
-            v-model="currentFromDataEmployee.file"
-            hide-action
-            :group-list="uploadFileListEmployee"
-            :menu="uploadFileListEmployee"
-            :columns="columnsAttachment"
-            :ocr="
-              async (group, file) => {
-                const res = await ocrStore.sendOcr({
-                  file: file,
-                  category: group,
-                });
-
-                if (res) {
-                  const tempValue = {
-                    status: true,
-                    group,
-                    meta: res.fields,
-                  };
-
-                  return tempValue;
-                }
-                return { status: false, group, meta: [] };
-              }
-            "
-            :auto-save="currentFromDataEmployee.id !== ''"
-            :download="
-              (obj) => {
-                employeeStore.getFile({
-                  parentId: currentFromDataEmployee.id || '',
-                  group: obj.group,
-                  fileId: obj._meta.id,
-                });
-              }
-            "
-            :delete-item="
-              async (obj) => {
-                const res = await employeeStore.delMeta({
-                  parentId: currentFromDataEmployee.id || '',
-                  group: obj.group,
-                  metaId: obj._meta.id,
-                });
-
-                if (res) {
-                  return true;
-                }
-                return false;
-              }
-            "
-            :save="
-              async (
-                group: 'passport' | 'visa',
-                _meta: any,
-                file: File | undefined,
-              ) => {
-                if (file !== undefined && currentFromDataEmployee.id) {
-                  const res = await employeeStore.postMeta({
-                    parentId: currentFromDataEmployee.id || '',
-                    group,
-                    meta: _meta,
-                    file,
-                  });
-
-                  if (res) {
-                    return true;
-                  }
-                } else {
-                  const { id, employeeId, createdAt, updatedAt, ...payload } =
-                    _meta;
-                  const res = await employeeStore.putMeta({
-                    parentId: currentFromDataEmployee.id || '',
-                    group,
-                    metaId: _meta.id,
-                    meta: payload,
-                    file,
-                  });
-                  if (res) {
-                    return true;
-                  }
-                }
-
-                return false;
-              }
-            "
-            :get-file-list="
-              async (group: 'passport' | 'visa') => {
-                if (!!currentFromDataEmployee.id) {
-                  const resMeta = await employeeStore.getMetaList({
-                    parentId: currentFromDataEmployee.id,
-                    group,
-                  });
-
-                  const tempValue = resMeta.map(async (i: any) => {
-                    return {
-                      _meta: { ...i },
-                      name: i.id || '',
-                      group: group,
-                      url: await employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group,
-                        fileId: i.id,
-                      }),
-                      file: undefined,
-                    };
-                  });
-
-                  return await waitAll(tempValue);
-                }
-                return [];
-              }
-            "
-          >
-            <template #form="{ mode, meta, isEdit }">
-              <FormCitizen
-                v-if="mode === 'citizen' && meta"
-                orc
-                ra
-                :readonly="!isEdit"
-                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' && meta"
-                prefix-id="drawer-info-employee"
-                id="form-passport"
-                dense
-                outlined
-                separator
-                ocr
-                :title="$t('customerEmployee.form.group.passport')"
-                :readonly="!isEdit"
-                v-model:passport-type="meta.type"
-                v-model:passport-number="meta.number"
-                v-model:passport-issue-date="meta.issueDate"
-                v-model:passport-expiry-date="meta.expireDate"
-                v-model:passport-issuing-place="meta.issuePlace"
-                v-model:passport-issuing-country="meta.issueCountry"
-              />
-              <FormEmployeeVisa
-                v-if="mode === 'visa' && meta"
-                prefix-id="drawer-info-employee"
-                id="form-visa"
-                ocr
-                dense
-                outlined
-                title="customerEmployee.form.group.visa"
-                :readonly="!isEdit"
-                v-model:visa-type="meta.type"
-                v-model:visa-number="meta.number"
-                v-model:visa-issue-date="meta.issueDate"
-                v-model:visa-expiry-date="meta.expireDate"
-                v-model:visa-issuing-place="meta.issuePlace"
-              />
-
-              <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-            </template>
-          </UploadFileGroup>
-        </div>
-      </div>
-    </div>
-  </DialogForm>
-
-  <!-- NOTE: END - Employee Add Form -->
-
   <ProductServiceForm
     v-model="pageState.productServiceModal"
     v-model:product-group="productGroup"

src/pages/05_quotation/QuotationForm.vue

@@ -6,15 +6,18 @@ import { nextTick, onMounted, reactive, ref } from 'vue';
 
 // NOTE: Import stores
 import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
+import { useEmployeeForm } from 'src/pages/03_customer-management/form';
 import useProductServiceStore from 'stores/product-service';
+import { baseUrl, waitAll } from 'src/stores/utils';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useOptionStore from 'stores/options';
-import { baseUrl } from 'src/stores/utils';
 import { useQuotationForm } from './form';
+import useOcrStore from 'stores/ocr';
 
 // NOTE  Import Types
 import { QuotationPayload } from 'src/stores/quotations/types';
+import { EmployeeWorker } from 'src/stores/quotations/types';
 import { Employee } from 'src/stores/employee/types';
 import {
   ProductGroup,
@@ -23,6 +26,12 @@ import {
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
+import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
+import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
+import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
+import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
+import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
+import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import ProductItem from 'components/05_quotation/ProductItem.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import ToggleButton from 'components/button/ToggleButton.vue';
@@ -30,9 +39,15 @@ import FormAbout from 'components/05_quotation/FormAbout.vue';
 import SelectZone from 'components/shared/SelectZone.vue';
 import PersonCard from 'components/shared/PersonCard.vue';
 import { AddButton, SaveButton } from 'components/button';
-import DialogForm from 'components/DialogForm.vue';
 import ProductServiceForm from './ProductServiceForm.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
+import ProfileBanner from 'components/ProfileBanner.vue';
+import DialogForm from 'components/DialogForm.vue';
+import SideMenu from 'components/SideMenu.vue';
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
 
 defineProps<{
   readonly?: boolean;
@@ -52,10 +67,12 @@ type ProductGroupId = string;
 type Id = string;
 
 const productServiceStore = useProductServiceStore();
+const employeeFormStore = useEmployeeForm();
 const customerStore = useCustomerStore();
 const quotationForm = useQuotationForm();
 const employeeStore = useEmployeeStore();
 const optionStore = useOptionStore();
+const ocrStore = useOcrStore();
 const { locale } = useI18n();
 const $q = useQuasar();
 
@@ -107,6 +124,9 @@ const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
 const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
 const productGroup = ref<ProductGroup[]>([]);
 
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+
 const product = ref<Record<Id, Product>>({});
 const service = ref<Record<Id, Service>>({});
 
@@ -114,6 +134,21 @@ const selectedGroupSub = ref<'product' | 'service' | null>(null);
 const selectedGroup = ref<ProductGroup | null>(null);
 const selectedProductServiceId = ref('');
 
+const formDataEmployee = ref<EmployeeWorker>({
+  alienReferencNumber: '',
+  documentExpireDate: new Date(),
+  lastNameEN: '',
+  lastName: '',
+  middleNameEN: '',
+  middleName: '',
+  firstNameEN: '',
+  firstName: '',
+  namePrefix: '',
+  nationality: '',
+  gender: '',
+  dateOfBirth: new Date(),
+});
+
 const productServiceList = ref<
   Required<QuotationPayload['productServiceList'][number]>[]
 >([]);
@@ -147,6 +182,13 @@ async function getAllService(
   if (ret) serviceList.value[groupId] = ret.result;
 }
 
+function triggerCreateEmployee() {
+  employeeFormStore.resetFormDataEmployee(true);
+  employeeFormState.value.dialogType = 'create';
+  employeeFormState.value.dialogModal = true;
+  employeeFormState.value.isEmployeeEdit = true;
+}
+
 async function triggerSelectEmployeeDialog() {
   pageState.employeeModal = true;
   await nextTick();
@@ -572,6 +614,351 @@ onMounted(async () => {
       "
     ></ProductServiceForm>
   </div>
+
+  <!-- NOTE: START - Employee Add Form -->
+
+  <DialogForm
+    hide-footer
+    ref="formDialogRef"
+    v-model:modal="employeeFormState.dialogModal"
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
+    :submit="
+      () => {
+        quotationForm;
+      }
+    "
+    :close="
+      () => {
+        employeeFormState.dialogModal = false;
+      }
+    "
+  >
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <ProfileBanner
+        active
+        useToggle
+        color="white"
+        icon="mdi-account-plus-outline"
+        :bg-color="
+          employeeFormState.profileUrl
+            ? 'white'
+            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+        "
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
+        :toggleTitle="$t('status.title')"
+        hideFade
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+        "
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
+      />
+    </div>
+    <div
+      class="col"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <div
+        style="overflow-y: auto"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
+      >
+        <div
+          :class="{
+            'q-py-md q-px-lg': $q.screen.gt.sm,
+            'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          }"
+          style="position: absolute; z-index: 99999; top: 0; right: 0"
+        >
+          <div
+            v-if="currentFromDataEmployee.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
+          >
+            <UndoButton
+              v-if="
+                employeeFormState.isEmployeeEdit &&
+                employeeFormState.dialogType !== 'create'
+              "
+              id="btn-info-basic-undo"
+              icon-only
+              @click="
+                () => {
+                  employeeFormStore.resetFormDataEmployee();
+                  employeeFormState.isEmployeeEdit = false;
+                  employeeFormState.dialogType = 'info';
+                }
+              "
+              type="button"
+            />
+            <SaveButton
+              v-if="employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
+            <EditButton
+              v-if="!employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-edit"
+              icon-only
+              @click="
+                () => {
+                  employeeFormState.isEmployeeEdit = true;
+                  employeeFormState.dialogType = 'edit';
+                }
+              "
+              type="button"
+            />
+            <DeleteButton
+              v-if="!employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-delete"
+              icon-only
+            />
+          </div>
+        </div>
+        <div
+          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          v-if="$q.screen.gt.sm"
+        >
+          <SideMenu
+            :menu="[
+              {
+                name: $t('form.customerInformation'),
+                anchor: 'form-information',
+              },
+              {
+                name: $t('customerBranch.tab.business'),
+                anchor: 'form-business',
+              },
+              {
+                name: $t('form.address'),
+                anchor: 'form-address',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#branch-form"
+          />
+        </div>
+
+        <div
+          class="col-12 col-md-10 full-height q-col-gutter-sm"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
+          id="branch-form"
+          style="overflow-y: auto"
+        >
+          <FormReferDocument
+            title="form.field.basicInformation"
+            prefixId="dialog"
+            dense
+            v-model:alien-reference-number="
+              formDataEmployee.alienReferencNumber
+            "
+            v-model:document-expire-date="formDataEmployee.documentExpireDate"
+          />
+
+          <FormPerson
+            id="form-personal"
+            prefix-id="form-employee"
+            dense
+            outlined
+            employee
+            separator
+            hideNameEn
+            title="personnel.form.personalInformation"
+            class="q-mb-xl"
+            v-model:prefix-name="formDataEmployee.namePrefix"
+            v-model:first-name="formDataEmployee.firstName"
+            v-model:mid-name="formDataEmployee.middleName"
+            v-model:last-name="formDataEmployee.lastName"
+            v-model:birth-date="formDataEmployee.dateOfBirth"
+            v-model:gender="formDataEmployee.gender"
+            v-model:nationality="formDataEmployee.nationality"
+          />
+
+          <UploadFileGroup
+            v-model:current-id="currentFromDataEmployee.id"
+            v-model="currentFromDataEmployee.file"
+            hide-action
+            :group-list="uploadFileListEmployee"
+            :menu="uploadFileListEmployee"
+            :columns="columnsAttachment"
+            :ocr="
+              async (group, file) => {
+                const res = await ocrStore.sendOcr({
+                  file: file,
+                  category: group,
+                });
+
+                if (res) {
+                  const tempValue = {
+                    status: true,
+                    group,
+                    meta: res.fields,
+                  };
+
+                  return tempValue;
+                }
+                return { status: false, group, meta: [] };
+              }
+            "
+            :auto-save="currentFromDataEmployee.id !== ''"
+            :download="
+              (obj) => {
+                employeeStore.getFile({
+                  parentId: currentFromDataEmployee.id || '',
+                  group: obj.group,
+                  fileId: obj._meta.id,
+                });
+              }
+            "
+            :delete-item="
+              async (obj) => {
+                const res = await employeeStore.delMeta({
+                  parentId: currentFromDataEmployee.id || '',
+                  group: obj.group,
+                  metaId: obj._meta.id,
+                });
+
+                if (res) {
+                  return true;
+                }
+                return false;
+              }
+            "
+            :save="
+              async (
+                group: 'passport' | 'visa',
+                _meta: any,
+                file: File | undefined,
+              ) => {
+                if (file !== undefined && currentFromDataEmployee.id) {
+                  const res = await employeeStore.postMeta({
+                    parentId: currentFromDataEmployee.id || '',
+                    group,
+                    meta: _meta,
+                    file,
+                  });
+
+                  if (res) {
+                    return true;
+                  }
+                } else {
+                  const { id, employeeId, createdAt, updatedAt, ...payload } =
+                    _meta;
+                  const res = await employeeStore.putMeta({
+                    parentId: currentFromDataEmployee.id || '',
+                    group,
+                    metaId: _meta.id,
+                    meta: payload,
+                    file,
+                  });
+                  if (res) {
+                    return true;
+                  }
+                }
+
+                return false;
+              }
+            "
+            :get-file-list="
+              async (group: 'passport' | 'visa') => {
+                if (!!currentFromDataEmployee.id) {
+                  const resMeta = await employeeStore.getMetaList({
+                    parentId: currentFromDataEmployee.id,
+                    group,
+                  });
+
+                  const tempValue = resMeta.map(async (i: any) => {
+                    return {
+                      _meta: { ...i },
+                      name: i.id || '',
+                      group: group,
+                      url: await employeeStore.getFile({
+                        parentId: currentFromDataEmployee.id || '',
+                        group,
+                        fileId: i.id,
+                      }),
+                      file: undefined,
+                    };
+                  });
+
+                  return await waitAll(tempValue);
+                }
+                return [];
+              }
+            "
+          >
+            <template #form="{ mode, meta, isEdit }">
+              <FormEmployeePassport
+                v-if="mode === 'passport' && meta"
+                prefix-id="drawer-info-employee"
+                id="form-passport"
+                dense
+                outlined
+                separator
+                ocr
+                :title="$t('customerEmployee.form.group.passport')"
+                :readonly="!isEdit"
+                v-model:passport-type="meta.type"
+                v-model:passport-number="meta.number"
+                v-model:passport-issue-date="meta.issueDate"
+                v-model:passport-expiry-date="meta.expireDate"
+                v-model:passport-issuing-place="meta.issuePlace"
+                v-model:passport-issuing-country="meta.issueCountry"
+              />
+              <FormEmployeeVisa
+                v-if="mode === 'visa' && meta"
+                prefix-id="drawer-info-employee"
+                id="form-visa"
+                ocr
+                dense
+                outlined
+                title="customerEmployee.form.group.visa"
+                :readonly="!isEdit"
+                v-model:visa-type="meta.type"
+                v-model:visa-number="meta.number"
+                v-model:visa-issue-date="meta.issueDate"
+                v-model:visa-expiry-date="meta.expireDate"
+                v-model:visa-issuing-place="meta.issuePlace"
+              />
+
+              <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+            </template>
+          </UploadFileGroup>
+        </div>
+      </div>
+    </div>
+  </DialogForm>
+
+  <!-- NOTE: END - Employee Add Form -->
 </template>
 
 <style scoped>