refactor: by value form employee and customer

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,
+  uploadFileListEmployee,
-  pageTabs,
+  columnsAttachment,
-  fieldSelectedOption,
+  dialogCreateCustomerItem,
-} from './constants';
+} 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 {
+import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
-  UploadFileGroup,
-  FormTm6,
-  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,9 +1060,48 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </section>
   </DialogForm>
 
-  <DialogContainer v-model="test1" :on-open="() => {}">
+  <!-- add customer -->
-    <template #header>
+  <DialogForm
-      <DialogHeader
+    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;
+          }
+        "
+      />
+    </div>
+  </DialogForm>
+
+  <!-- form add นายจ้าง -->
+  <DialogForm
+    hide-footer
+    ref="formDialogRef"
+    v-model:modal="customerFormState.dialogModal"
     :title="
       customerFormState.dialogType === 'create'
         ? $t(`general.add`, {
@@ -913,23 +1109,19 @@ watch(() => pageState.currentTab, fetchQuotationList);
           })
         : `${$t('customer.employer')} `
     "
+    :submit="() => {}"
+    :close="
+      () => {
+        customerFormState.dialogModal = false;
+      }
+    "
   >
-        <template #title-after>
+    <div
-          <span
+      :class="{
-            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
     >
-            :
-            {{
-              customerFormData.customerType === 'CORP'
-                ? $t('customer.employerLegalEntity')
-                : $t('customer.employerNaturalPerson')
-            }}
-          </span>
-        </template>
-      </DialogHeader>
-    </template>
-
-    <div class="q-px-lg q-pt-lg surface-2">
       <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]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
-            : customerFormData.customerBranch[0]?.registerName
+            : customerFormData.customerBranch[0]?.registerName || ''
         "
         :caption="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
-            : customerFormData.customerBranch[0]?.registerNameEN
+            : customerFormData.customerBranch[0]?.registerNameEN || ''
         "
         @view="
           () => {
@@ -968,128 +1160,195 @@ 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 surface-1 full-height rounded bordered scroll row">
     <div
-          class="col-12 q-py-md q-pr-md q-pl-sm"
+      class="col"
-          id="customer-form-content"
+      :class="{
-          style="height: 100%; max-height: 100%; overflow-y: auto"
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
     >
       <div
-            class="surface-1 rounded q-pt-sm row"
+        style="overflow-y: auto"
-            style="position: absolute; z-index: 999; right: 4%"
+        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 &&
+                customerFormState.dialogType === 'edit' &&
-                employeeFormState.dialogType !== 'create'
+                currentCustomerId !== undefined
               "
-              id="btn-info-basic-undo"
               icon-only
-              @click="
+              @click="() => {}"
-                () => {
-                  employeeFormStore.resetFormDataEmployee();
-                  employeeFormState.isEmployeeEdit = false;
-                  employeeFormState.dialogType = 'info';
-                }
-              "
               type="button"
             />
             <SaveButton
-              v-if="employeeFormState.isEmployeeEdit"
+              v-if="
+                customerFormState.dialogType === 'edit' ||
+                customerFormState.dialogType === 'create'
+              "
               id="btn-info-basic-save"
               icon-only
               type="submit"
             />
+
             <EditButton
-              v-if="!employeeFormState.isEmployeeEdit"
+              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="
                 () => {
-                  employeeFormState.isEmployeeEdit = true;
+                  //triggerDelete
-                  employeeFormState.dialogType = 'edit';
                 }
               "
               type="button"
             />
-            <DeleteButton
+          </div>
-              v-if="!employeeFormState.isEmployeeEdit"
+        </div>
-              id="btn-info-basic-delete"
+        <div
-              icon-only
+          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="row full-width q-col-gutter-sm"
+          class="col-12 col-md-10 full-height q-col-gutter-sm"
-            id="form-branch-customer-branch"
+          :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"
         >
-            <!-- v-if="customerFormData.customerBranch" -->
+          <EmployerFormAbout
-            <!-- v-if="!!customerFormState.editCustomerId" -->
+            id="form-information"
-
+            show-title
-            <div class="col-12 text-weight-bold text-body1 row items-center">
+            :index="(0).toString()"
-              <q-icon
+            :customerType="customerFormData.customerType"
-                flat
+            v-model:citizen-id="formDataCustomerBranch.citizenId"
-                size="xs"
+            v-model:prefix-name="formDataCustomerBranch.namePrefix"
-                class="q-pa-sm rounded q-mr-xs"
+            v-model:first-name="formDataCustomerBranch.firstName"
-                color="info"
+            v-model:last-name="formDataCustomerBranch.lastName"
-                name="mdi-briefcase-outline"
+            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
-                style="background-color: var(--surface-3)"
+            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
+            "
           />
-              <span>{{ $t('customer.form.group.branch') }}</span>
-            </div>
 
-            <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
+          <EmployerFormBusiness
-
+            id="form-business"
-            <div class="col-12 text-weight-bold text-body1 row items-center">
+            show-title
-              <q-icon
+            prefixId="dialog"
-                flat
+            dense
-                size="xs"
+            outlined
-                class="q-pa-sm rounded q-mr-xs"
+            v-model:bussiness-type="formDataCustomerBranch.businessType"
-                color="info"
+            v-model:job-position="formDataCustomerBranch.jobPosition"
-                name="mdi-briefcase-outline"
+            v-model:job-description="formDataCustomerBranch.jobDescription"
-                style="background-color: var(--surface-3)"
+            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"
           />
-              <span>{{ $t('customerBranch.tab.business') }}</span>
-            </div>
-
-            <EmployerFormBusiness prefixId="dialog" dense outlined />
 
           <AddressForm
+            id="form-address"
             prefix-id="employer"
-              hide-title
             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>
-    </q-form>
+  </DialogForm>
-  </DialogContainer>
+
+  <!-- form add employee -->
 
   <DialogForm
-    hideFooter
+    hide-footer
+    ref="formDialogRef"
+    v-model:modal="employeeFormState.dialogModal"
     :title="$t('form.title.create', { name: $t('customer.employee') })"
-    v-model:modal="test2"
+    :submit="() => {}"
-    :undo="() => {}"
+    :close="
-    :submit="async () => {}"
+      () => {
-    :show="() => {}"
+        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,
+      }"
     >
-    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         useToggle
@@ -1125,22 +1384,27 @@ watch(() => pageState.currentTab, fetchQuotationList);
         "
       />
     </div>
-
     <div
-      style="flex: 1; width: 100%; overflow-y: auto"
+      class="col"
-      class="surface-2 q-pa-lg"
+      :class="{
-      id="drawer-employee-form"
+        '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
-          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm q-col-gutter-sm"
+        style="overflow-y: auto"
-          id="employee-form-content"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
-          style="height: 100%; max-height: 100; overflow-y: auto"
       >
-          <template v-if="employeeFormState.currentTab === 'personalInfo'">
         <div
-              class="surface-1 rounded q-pt-sm row"
+          :class="{
-              style="position: absolute; z-index: 999; right: 4%"
+            '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="
@@ -1182,11 +1446,52 @@ watch(() => pageState.currentTab, fetchQuotationList);
               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
@@ -1199,6 +1504,13 @@ watch(() => pageState.currentTab, fetchQuotationList);
             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
@@ -1364,7 +1676,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
               <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
             </template>
           </UploadFileGroup>
-          </template>
         </div>
       </div>
     </div>

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;
+};