From d44dfa48ab12b88b9fc9199714a82c6b5a94ae8d Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 1 Oct 2024 14:27:42 +0700
Subject: [PATCH] refactor: by value form employee and customer

---
 src/pages/05_quotation/MainPage.vue | 1065 +++++++++++++++++----------
 src/stores/quotations/types.ts      |   15 +
 2 files changed, 703 insertions(+), 377 deletions(-)

diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 345d2e9e..0f22f55c 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,28 +1,33 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 import { storeToRefs } from 'pinia';
+import { pageTabs, fieldSelectedOption } from './constants';
+import { baseUrl, waitAll } from 'src/stores/utils';
+import useOcrStore from 'stores/ocr';
+import useEmployeeStore from 'stores/employee';
+
 import {
-  productTreeDecoration,
-  pageTabs,
-  fieldSelectedOption,
-} from './constants';
+  uploadFileListEmployee,
+  columnsAttachment,
+  dialogCreateCustomerItem,
+} from 'src/pages/03_customer-management/constant';
+import SideMenu from 'components/SideMenu.vue';
 import useProductServiceStore from 'src/stores/product-service';
 import {
   ProductGroup,
   ProductList,
   Service,
 } from 'src/stores/product-service/types';
+
+import { EmployeeWorker } from 'src/stores/quotations/types';
+
 import {
   EditButton,
   DeleteButton,
   SaveButton,
   UndoButton,
 } from 'components/button';
-import {
-  UploadFileGroup,
-  FormTm6,
-  noticeJobEmployment,
-} from 'components/upload-file';
+import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
 
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
 import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
@@ -31,20 +36,16 @@ import { DialogContainer, DialogHeader } from 'components/dialog';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import { AddressForm } from 'components/form';
 import {
-  EmployerFormBasicInfo,
   EmployerFormBusiness,
   EmployerFormContact,
   EmployerFormAbout,
 } from 'src/pages/03_customer-management/components';
-
+import ItemCard from 'src/components/ItemCard.vue';
 import { CustomerBranchCreate } from 'stores/customer/types';
 import DialogForm from 'components/DialogForm.vue';
 import useFlowStore from 'src/stores/flow';
 import { Employee } from 'src/stores/employee/types';
 
-import QuotationForm from './QuotationForm.vue';
-import TreeView from 'src/components/shared/TreeView.vue';
-import MainButton from 'src/components/button/MainButton.vue';
 import { AddButton } from 'src/components/button';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import CreateButton from 'src/components/AddButton.vue';
@@ -93,18 +94,24 @@ const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   },
 );
 
+const employeeStore = useEmployeeStore();
+const ocrStore = useOcrStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
 const customerStore = useCustomerStore();
+const currentCustomerId = ref<string | undefined>();
 
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
+const refreshImageState = ref(false);
+const onCreateImageList = ref<{
+  selectedImage: string;
+  list: { url: string; imgFile: File | null; name: string }[];
+}>({ selectedImage: '', list: [] });
 
-const test1 = ref(false);
 const test2 = ref(false);
-const dialog = ref(true);
 const nodes = ref<Node[]>([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
@@ -272,6 +279,143 @@ 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>({
+  customerCode: '',
+  customerId: '',
+  legalPersonNo: '',
+  citizenId: '',
+  namePrefix: '',
+  firstName: '',
+  lastName: '',
+  firstNameEN: '',
+  lastNameEN: '',
+  telephoneNo: '',
+  gender: '',
+  birthDate: '',
+  businessType: '',
+  jobPosition: '',
+  jobDescription: '',
+  payDate: '',
+  payDateEN: '',
+  wageRate: 0,
+  wageRateText: '',
+  homeCode: '',
+  employmentOffice: '',
+  employmentOfficeEN: '',
+  address: '',
+  addressEN: '',
+  street: '',
+  streetEN: '',
+  moo: '',
+  mooEN: '',
+  soi: '',
+  soiEN: '',
+  provinceId: '',
+  districtId: '',
+  subDistrictId: '',
+  contactName: '',
+  email: '',
+  contactTel: '',
+  officeTel: '',
+  agent: '',
+  status: 'CREATED',
+  customerName: '',
+  registerName: '',
+  registerNameEN: '',
+  registerDate: new Date(),
+  authorizedCapital: '',
+  authorizedName: '',
+  authorizedNameEN: '',
+  code: '',
+});
+
+function setDefaultCustomerd() {
+  customerFormData.value.customerBranch = [
+    {
+      customerCode: '',
+      customerId: '',
+      legalPersonNo: '',
+      citizenId: '',
+      namePrefix: '',
+      firstName: '',
+      lastName: '',
+      firstNameEN: '',
+      lastNameEN: '',
+      telephoneNo: '',
+      gender: '',
+      birthDate: '',
+      businessType: '',
+      jobPosition: '',
+      jobDescription: '',
+      payDate: '',
+      payDateEN: '',
+      wageRate: 0,
+      wageRateText: '',
+      homeCode: '',
+      employmentOffice: '',
+      employmentOfficeEN: '',
+      address: '',
+      addressEN: '',
+      street: '',
+      streetEN: '',
+      moo: '',
+      mooEN: '',
+      soi: '',
+      soiEN: '',
+      provinceId: '',
+      districtId: '',
+      subDistrictId: '',
+      contactName: '',
+      email: '',
+      contactTel: '',
+      officeTel: '',
+      agent: '',
+      status: 'CREATED',
+      customerName: '',
+      registerName: '',
+      registerNameEN: '',
+      registerDate: new Date(),
+      authorizedCapital: '',
+      authorizedName: '',
+      authorizedNameEN: '',
+      code: '',
+    },
+  ];
+}
+
+function triggerCreateEmployee() {
+  employeeFormStore.resetFormDataEmployee(true);
+  employeeFormState.value.dialogType = 'create';
+  employeeFormState.value.dialogModal = true;
+  employeeFormState.value.isEmployeeEdit = true;
+}
+
+function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
+  setDefaultCustomerd();
+  customerFormState.value.dialogType = 'create';
+  customerFormData.value.customerType = opts?.type;
+  customerFormState.value.dialogModal = true;
+}
+
+function triggerSelectTypeCustomerd() {
+  emptyCreateDialog.value = true;
+}
+
 function triggerAddQuotationDialog() {
   pageState.addModal = true;
   // TODO: form and state controll
@@ -840,7 +984,10 @@ watch(() => pageState.currentTab, fetchQuotationList);
         id="customer-form-content"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
-        <FormAbout prefixId="zxc" @add-customer="console.log('asdasd')" />
+        <FormAbout
+          prefixId="zxc"
+          @add-customer="triggerSelectTypeCustomerd()"
+        />
       </div>
     </section>
   </DialogForm>
@@ -880,7 +1027,17 @@ watch(() => pageState.currentTab, fetchQuotationList);
           },
         ]"
       >
-        <template #top><AddButton icon-only /></template>
+        <template #top>
+          <AddButton
+            icon-only
+            @click="
+              () => {
+                triggerCreateEmployee();
+                console.log('asdassdasd');
+              }
+            "
+          />
+        </template>
         <template #data="{ item }">
           <PersonCard
             noAction
@@ -903,33 +1060,68 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </section>
   </DialogForm>
 
-  <DialogContainer v-model="test1" :on-open="() => {}">
-    <template #header>
-      <DialogHeader
-        :title="
-          customerFormState.dialogType === 'create'
-            ? $t(`general.add`, {
-                text: `${$t('customer.employer')} `,
-              })
-            : `${$t('customer.employer')} `
+  <!-- add customer -->
+  <DialogForm
+    v-model:modal="emptyCreateDialog"
+    :title="$t('customer.employerType')"
+    hide-footer
+    no-app-box
+    width="40vw"
+    height="250px"
+    :close="
+      () => {
+        emptyCreateDialog = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
+  >
+    <div class="full-height row q-pa-md">
+      <ItemCard
+        class="col q-mx-sm full-height"
+        v-for="value in dialogCreateCustomerItem"
+        :key="value.text"
+        :icon="value.icon"
+        :text="value.text"
+        :icon-color="value.iconColor"
+        :bg-color="value.color"
+        @trigger="
+          () => {
+            triggerCreateCustomerd({
+              type:
+                value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
+            });
+            emptyCreateDialog = false;
+          }
         "
-      >
-        <template #title-after>
-          <span
-            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          >
-            :
-            {{
-              customerFormData.customerType === 'CORP'
-                ? $t('customer.employerLegalEntity')
-                : $t('customer.employerNaturalPerson')
-            }}
-          </span>
-        </template>
-      </DialogHeader>
-    </template>
+      />
+    </div>
+  </DialogForm>
 
-    <div class="q-px-lg q-pt-lg surface-2">
+  <!-- form add นายจ้าง -->
+  <DialogForm
+    hide-footer
+    ref="formDialogRef"
+    v-model:modal="customerFormState.dialogModal"
+    :title="
+      customerFormState.dialogType === 'create'
+        ? $t(`general.add`, {
+            text: `${$t('customer.employer')} `,
+          })
+        : `${$t('customer.employer')} `
+    "
+    :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
         v-if="customerFormData.customerBranch !== undefined"
         active
@@ -949,13 +1141,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
         "
         :title="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
-            : customerFormData.customerBranch[0]?.registerName
+            ? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
+            : customerFormData.customerBranch[0]?.registerName || ''
         "
         :caption="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-            : customerFormData.customerBranch[0]?.registerNameEN
+            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
+            : customerFormData.customerBranch[0]?.registerNameEN || ''
         "
         @view="
           () => {
@@ -968,26 +1160,251 @@ watch(() => pageState.currentTab, fetchQuotationList);
         "
       />
     </div>
-    <q-form
-      style="flex: 1; width: 100%; overflow-y: auto"
-      class="surface-2 q-pa-lg"
-      id="customer-form"
-      greedy
-      @submit.prevent="
-        async () => {
-          console.log('test');
-        }
-      "
+    <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 class="col surface-1 full-height rounded bordered scroll row">
+      <div
+        style="overflow-y: auto"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
+      >
         <div
-          class="col-12 q-py-md q-pr-md q-pl-sm"
-          id="customer-form-content"
-          style="height: 100%; max-height: 100%; overflow-y: auto"
+          :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
-            class="surface-1 rounded q-pt-sm row"
-            style="position: absolute; z-index: 999; right: 4%"
+            v-if="customerFormData.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
+          >
+            <UndoButton
+              v-if="
+                customerFormState.dialogType === 'edit' &&
+                currentCustomerId !== undefined
+              "
+              icon-only
+              @click="() => {}"
+              type="button"
+            />
+            <SaveButton
+              v-if="
+                customerFormState.dialogType === 'edit' ||
+                customerFormState.dialogType === 'create'
+              "
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
+
+            <EditButton
+              v-if="
+                customerFormState.dialogType !== 'edit' &&
+                currentCustomerId !== undefined
+              "
+              id="btn-info-basic-edit"
+              icon-only
+              @click="() => {}"
+              type="button"
+            />
+
+            <DeleteButton
+              v-if="
+                customerFormState.dialogType !== 'edit' &&
+                currentCustomerId !== undefined
+              "
+              id="btn-info-basic-delete"
+              icon-only
+              @click="
+                () => {
+                  //triggerDelete
+                }
+              "
+              type="button"
+            />
+          </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"
+        >
+          <EmployerFormAbout
+            id="form-information"
+            show-title
+            :index="(0).toString()"
+            :customerType="customerFormData.customerType"
+            v-model:citizen-id="formDataCustomerBranch.citizenId"
+            v-model:prefix-name="formDataCustomerBranch.namePrefix"
+            v-model:first-name="formDataCustomerBranch.firstName"
+            v-model:last-name="formDataCustomerBranch.lastName"
+            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
+            v-model:last-name-en="formDataCustomerBranch.lastNameEN"
+            v-model:gender="formDataCustomerBranch.gender"
+            v-model:birth-date="formDataCustomerBranch.birthDate"
+            v-model:customer-name="formDataCustomerBranch.customerName"
+            v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
+            v-model:register-name="formDataCustomerBranch.registerName"
+            v-model:register-name-en="formDataCustomerBranch.registerNameEN"
+            v-model:register-date="formDataCustomerBranch.registerDate"
+            v-model:authorized-capital="
+              formDataCustomerBranch.authorizedCapital
+            "
+          />
+
+          <EmployerFormBusiness
+            id="form-business"
+            show-title
+            prefixId="dialog"
+            dense
+            outlined
+            v-model:bussiness-type="formDataCustomerBranch.businessType"
+            v-model:job-position="formDataCustomerBranch.jobPosition"
+            v-model:job-description="formDataCustomerBranch.jobDescription"
+            v-model:pay-date="formDataCustomerBranch.payDate"
+            v-model:pay-date-en="formDataCustomerBranch.payDateEN"
+            v-model:wage-rate="formDataCustomerBranch.wageRate"
+            v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
+          />
+
+          <AddressForm
+            id="form-address"
+            prefix-id="employer"
+            dense
+            outlined
+            use-employment
+            :title="$t('form.address')"
+            :addressTitle="$t('form.address')"
+            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+            v-model:address="formDataCustomerBranch.address"
+            v-model:addres-e-n="formDataCustomerBranch.addressEN"
+            v-model:street="formDataCustomerBranch.street"
+            v-model:street-e-n="formDataCustomerBranch.streetEN"
+            v-model:moo="formDataCustomerBranch.moo"
+            v-model:moo-e-n="formDataCustomerBranch.mooEN"
+            v-model:soi="formDataCustomerBranch.soi"
+            v-model:soi-e-nn="formDataCustomerBranch.soiEN"
+            v-model:province-id="formDataCustomerBranch.provinceId"
+            v-model:district-id="formDataCustomerBranch.districtId"
+            v-model:home-code="formDataCustomerBranch.homeCode"
+          />
+        </div>
+      </div>
+    </div>
+  </DialogForm>
+
+  <!-- form add employee -->
+
+  <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="
@@ -1029,342 +1446,236 @@ watch(() => pageState.currentTab, fetchQuotationList);
               icon-only
             />
           </div>
-
-          <div
-            class="row full-width q-col-gutter-sm"
-            id="form-branch-customer-branch"
-          >
-            <!-- v-if="customerFormData.customerBranch" -->
-            <!-- v-if="!!customerFormState.editCustomerId" -->
-
-            <div class="col-12 text-weight-bold text-body1 row items-center">
-              <q-icon
-                flat
-                size="xs"
-                class="q-pa-sm rounded q-mr-xs"
-                color="info"
-                name="mdi-briefcase-outline"
-                style="background-color: var(--surface-3)"
-              />
-              <span>{{ $t('customer.form.group.branch') }}</span>
-            </div>
-
-            <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
-
-            <div class="col-12 text-weight-bold text-body1 row items-center">
-              <q-icon
-                flat
-                size="xs"
-                class="q-pa-sm rounded q-mr-xs"
-                color="info"
-                name="mdi-briefcase-outline"
-                style="background-color: var(--surface-3)"
-              />
-              <span>{{ $t('customerBranch.tab.business') }}</span>
-            </div>
-
-            <EmployerFormBusiness prefixId="dialog" dense outlined />
-
-            <AddressForm
-              prefix-id="employer"
-              hide-title
-              dense
-              outlined
-              use-employment
-              :title="$t('form.address')"
-              :addressTitle="$t('form.address')"
-              :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
-            />
-          </div>
         </div>
-      </div>
-    </q-form>
-  </DialogContainer>
-
-  <DialogForm
-    hideFooter
-    :title="$t('form.title.create', { name: $t('customer.employee') })"
-    v-model:modal="test2"
-    :undo="() => {}"
-    :submit="async () => {}"
-    :show="() => {}"
-  >
-    <div class="q-px-lg q-pt-lg surface-2">
-      <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
-      style="flex: 1; width: 100%; overflow-y: auto"
-      class="surface-2 q-pa-lg"
-      id="drawer-employee-form"
-    >
-      <div class="col surface-1 full-height rounded bordered scroll row">
         <div
-          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm q-col-gutter-sm"
-          id="employee-form-content"
-          style="height: 100%; max-height: 100; overflow-y: auto"
+          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
+          v-if="$q.screen.gt.sm"
         >
-          <template v-if="employeeFormState.currentTab === 'personalInfo'">
-            <div
-              class="surface-1 rounded q-pt-sm row"
-              style="position: absolute; z-index: 999; right: 4%"
-            >
-              <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>
+          <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>
 
-            <FormReferDocument
-              title="form.field.basicInformation"
-              prefixId="dialog"
-              dense
-            />
+        <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"
-            />
+          <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,
-                  });
+          <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,
-                    };
+                if (res) {
+                  const tempValue = {
+                    status: true,
+                    group,
+                    meta: res.fields,
+                  };
 
-                    return tempValue;
-                  }
-                  return { status: false, group, meta: [] };
+                  return tempValue;
                 }
-              "
-              :auto-save="currentFromDataEmployee.id !== ''"
-              :download="
-                (obj) => {
-                  employeeStore.getFile({
-                    parentId: currentFromDataEmployee.id || '',
-                    group: obj.group,
-                    fileId: obj._meta.id,
-                  });
+                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;
                 }
-              "
-              :delete-item="
-                async (obj) => {
-                  const res = await employeeStore.delMeta({
+                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: obj.group,
-                    metaId: obj._meta.id,
+                    group,
+                    meta: _meta,
+                    file,
                   });
 
                   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;
-                    }
+                } 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 false;
+              }
+            "
+            :get-file-list="
+              async (group: 'passport' | 'visa') => {
+                if (!!currentFromDataEmployee.id) {
+                  const resMeta = await employeeStore.getMetaList({
+                    parentId: currentFromDataEmployee.id,
+                    group,
+                  });
 
-                    return await waitAll(tempValue);
-                  }
-                  return [];
+                  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);
                 }
-              "
-            >
-              <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"
-                />
+                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>
-          </template>
+              <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+            </template>
+          </UploadFileGroup>
         </div>
       </div>
     </div>
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index 185bfd47..9ee463ff 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -300,3 +300,18 @@ export type QuotationPayload = {
   actorName: string;
   status: Status;
 };
+
+export type EmployeeWorker = {
+  alienReferencNumber: string;
+  documentExpireDate: Date | undefined;
+  lastNameEN: string;
+  lastName: string;
+  middleNameEN: string;
+  middleName: string;
+  firstNameEN: string;
+  firstName: string;
+  namePrefix: string;
+  nationality: string;
+  gender: string;
+  dateOfBirth: Date;
+};