Merge branch 'develop'

2025-04-08 16:00:10 +07:00 · 2025-04-08 16:00:10 +07:00 · bc5097a0a8
commit bc5097a0a8
parent 88cabff86e 79abde8629
29 changed files with 2748 additions and 1199 deletions
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@ -36,6 +36,7 @@ defineProps<{
  outlined?: boolean;
  readonly?: boolean;
  view?: boolean;
+  single?: boolean;
 }>();

 defineEmits<{
@ -121,7 +122,7 @@ watch(
      />
      {{ $t(`${title}`) }}
      <AddButton
-        v-if="!readonly"
+        v-if="!readonly && !single"
        id="btn-add-bank"
        icon-only
        class="q-ml-sm"
@ -141,7 +142,10 @@ watch(
        style="padding-block: 0.01px"
        spaced="lg"
      />
-      <span class="col-12 app-text-muted-2 flex justify-between items-center">
+      <span
+        v-if="!single"
+        class="col-12 app-text-muted-2 flex justify-between items-center"
+      >
        {{ `${$t('branch.form.bankAccountNo')} ${i + 1}` }}
        <div class="row items-center">
          <div style="height: 30.8px" />
@ -172,6 +176,7 @@ watch(
      </span>

      <div
+        v-if="!single"
        class="bordered q-mr-sm rounded col text-center overflow-hidden"
        :class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
      >
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@ -1,13 +1,13 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
 import useOptionStore from 'stores/options';
-import { UserAttachmentDelete } from 'stores/user/types';
-import { dialog, selectFilterOptionRefMod } from 'stores/utils';
-import { onMounted, ref, watch } from 'vue';
+import { UserAttachmentDelete, AgencyStatus } from 'stores/user/types';
+import { dialog } from 'stores/utils';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
-import { QSelect } from 'quasar';
 import DatePicker from '../shared/DatePicker.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';

 import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';

@ -33,13 +33,15 @@ const importNationality = defineModel<string | null | undefined>(
  'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkpoint = defineModel<string | null | undefined>('checkPoint');
-const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
+const checkpoint = defineModel<string | null | undefined>('checkpoint');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
  defineModel<{ name: string; url: string }[]>('agencyFileList');
+const remark = defineModel<string | null | undefined>('remark');
+const agencyStatus = defineModel<string | null | undefined>('agencyStatus');

 const attachmentRef = ref();
+const checkpointENOption = ref([]);

 defineProps<{
  dense?: boolean;
@ -76,59 +78,11 @@ function deleteFile(name: string) {
  });
 }

-const nationalityOptions = ref<Record<string, unknown>[]>([]);
-let nationalityFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
-let trainingPlaceFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
-let responsibleAreaFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-onMounted(() => {
-  if (optionStore.globalOption?.nationality) {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-    responsibleAreaFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.area),
-      responsibleAreaOptions,
-      'label',
-    );
-  }
+onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  const rawOption = await resultOption.json();
+  checkpointENOption.value = rawOption.eng.border;
 });
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-  },
-);
 </script>
 <template>
  <div class="row col-12">
@ -218,136 +172,108 @@ watch(
        class="row col-12 q-col-gutter-sm"
        style="margin-left: 0px; padding-left: 0px"
      >
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
+        <SelectInput
+          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
          id="input-source-nationality"
          for="input-source-nationality"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.nationality"
+          class="col-md-3 col-6"
+          :readonly
+          clearable
          :label="$t('personnel.form.sourceNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
          @update:model-value="
            (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
          "
-          @clear="sourceNationality = ''"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
+        />
+        <SelectInput
+          :model-value="readonly ? importNationality || '-' : importNationality"
          id="input-import-nationality"
          for="input-import-nationality"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.nationality"
+          class="col-md-3 col-6"
+          :readonly
+          clearable
          :label="$t('personnel.form.importNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? importNationality || '-' : importNationality"
          @update:model-value="
            (v) => (typeof v === 'string' ? (importNationality = v) : '')
          "
-          @clear="importNationality = ''"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="label"
-          class="col-md-6 col-12"
+        />
+        <SelectInput
+          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
          id="select-trainig-place"
          for="select-trainig-place"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.training"
+          class="col-md-6 col-12"
+          :readonly
          :label="$t('personnel.form.trainingPlace')"
-          :options="trainingPlaceOptions"
-          @filter="trainingPlaceFilter"
-          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
+          clearable
          @update:model-value="
            (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
          "
-          @clear="trainingPlace = ''"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-input
-          for="input-checkpoint"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          :label="$t('personnel.form.checkpoint')"
-          class="col-6"
+        />
+        <SelectInput
          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint"
+          for="select-checkpoint"
+          :option="optionStore.globalOption.border"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpoint')"
+          clearable
          @update:model-value="
            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
          "
-          @clear="checkpoint = ''"
+        />
+        <SelectInput
+          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="checkpointENOption"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpointEN')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
+          "
+        />
+
+        <SelectInput
+          :model-value="readonly ? agencyStatus || '-' : agencyStatus"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="[
+            { label: $t('personnel.form.normal'), value: AgencyStatus.Normal },
+            {
+              label: $t('personnel.form.canceled'),
+              value: AgencyStatus.Canceled,
+            },
+            {
+              label: $t('personnel.form.blacklist'),
+              value: AgencyStatus.Blacklist,
+            },
+          ]"
+          class="col-md-6 col-12"
+          :readonly
+          :label="$t('personnel.form.agencyStatus')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (agencyStatus = v) : '')
+          "
        />
        <q-input
-          for="input-checkpoint-en"
+          for="input-discount-condition"
          :dense="dense"
          outlined
-          :readonly="readonly"
-          :label="$t('personnel.form.checkpointEN')"
-          class="col-6"
-          :model-value="readonly ? checkpointEN || '-' : checkpointEN"
+          :readonly
+          :label="$t('general.remark')"
+          class="col-12"
+          type="textarea"
+          :model-value="readonly ? remark || '-' : remark"
          @update:model-value="
-            (v) => (typeof v === 'string' ? (checkpointEN = v) : '')
+            (v) => (typeof v === 'string' ? (remark = v) : '')
          "
-          @clear="checkpointEN = ''"
+          @clear="remark = ''"
        />
        <q-file
          ref="attachmentRef"
@ -358,7 +284,7 @@ watch(
          multiple
          append
          :label="$t('personnel.form.attachment')"
-          class="col-12"
+          class="col"
          v-model="agencyFile"
        >
          <template v-slot:prepend>
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@ -41,6 +41,12 @@ let prefixNameFilter: (
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;

+const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
+let prefixNameFilterEn: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 let genderFilter: (
  value: string,
@ -55,7 +61,9 @@ let nationalityFilter: (

 function matPreFixName() {
  if (gender.value === 'male') prefixName.value = 'mr';
-  if (gender.value === 'female') prefixName.value = 'mrs';
+  if (gender.value === 'female' && prefixName.value === 'mr') {
+    prefixName.value = 'mrs';
+  }
 }

 onMounted(() => {
@ -64,6 +72,13 @@ onMounted(() => {
    prefixNameOptions,
    'label',
  );
+
+  prefixNameFilterEn = selectFilterOptionRefMod(
+    ref(optionStore.rawOption?.eng.prefix),
+    prefixNameOptionsEn,
+    'label',
+  );
+
  genderFilter = selectFilterOptionRefMod(
    ref(optionStore.globalOption?.gender),
    genderOptions,
@ -94,6 +109,12 @@ watch(
      nationalityOptions,
      'label',
    );
+
+    prefixNameFilterEn = selectFilterOptionRefMod(
+      ref(optionStore.rawOption?.eng.prefix),
+      prefixNameOptionsEn,
+      'label',
+    );
  },
 );

@ -175,6 +196,7 @@ watch(
            (v) => (typeof v === 'string' ? (prefixName = v) : '')
          "
          @clear="prefixName = ''"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
        >
          <template v-slot:no-option>
            <q-item>
@ -194,7 +216,11 @@ watch(
          class="col"
          :label="$t('personnel.form.firstName')"
          v-model="firstName"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
+          :rules="
+            employee
+              ? []
+              : [(val: string) => !!val || $t('form.error.required')]
+          "
        />

        <q-input
@ -229,25 +255,41 @@ watch(
        class="col-12 row"
        style="display: flex; gap: var(--size-2)"
      >
-        <q-input
-          :for="`${prefixId}-input-first-name`"
-          :dense="dense"
+        <q-select
          outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
          hide-bottom-space
-          :readonly="readonly"
-          :disable="!readonly"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          hide-dropdown-icon
+          autocomplete="off"
          class="col-md-1 col-6"
-          label="Title"
-          :model-value="
-            readonly
-              ? capitalize(prefixName || '') || '-'
-              : capitalize(prefixName || '')
-          "
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptionsEn"
+          :for="`${prefixId}-select-prefix-name-en`"
+          label="Prefix"
+          @filter="prefixNameFilter"
+          :model-value="readonly ? prefixName || '-' : prefixName"
          @update:model-value="
            (v) => (typeof v === 'string' ? (prefixName = v) : '')
          "
          @clear="prefixName = ''"
-        />
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>

        <q-input
          :for="`${prefixId}-input-first-name-en`"
@ -287,10 +329,22 @@ watch(
          class="col"
          label="Surname"
          v-model="lastNameEN"
-          :rules="[
-            (val: string) =>
-              !val || /^[A-Za-z\s]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
+          :rules="
+            employee
+              ? [
+                  (val: string) => !!val || $t('form.error.required'),
+                  (val: string) =>
+                    !val ||
+                    /^[A-Za-z\s]+$/.test(val) ||
+                    $t('form.error.letterOnly'),
+                ]
+              : [
+                  (val: string) =>
+                    !val ||
+                    /^[A-Za-z\s]+$/.test(val) ||
+                    $t('form.error.letterOnly'),
+                ]
+          "
        />
      </div>

@ -392,11 +446,15 @@ watch(
        :readonly="readonly"
        :label="$t('form.birthDate')"
        :disabled-dates="disabledAfterToday"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', { field: $t('form.birthDate') }),
-        ]"
+        :rules="
+          employee
+            ? []
+            : [
+                (val: string) =>
+                  !!val ||
+                  $t('form.error.selectField', { field: $t('form.birthDate') }),
+              ]
+        "
      />

      <q-input
@ -478,7 +536,6 @@ watch(
        :hide-dropdown-icon="readonly"
        :for="`${prefixId}-select-gender`"
        :label="$t('form.gender')"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
        @filter="genderFilter"
      >
        <template v-slot:no-option>
@ -511,7 +568,6 @@ watch(
        :hide-dropdown-icon="readonly"
        :for="`${prefixId}-select-nationality`"
        :label="$t('general.nationality')"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
        @filter="nationalityFilter"
      >
        <template v-slot:no-option>
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@ -106,7 +106,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
          :readonly="readonly || employeeOther.statusSave"
          hide-bottom-space
          class="col-md-3 col-6"
-          :label="$t('form.firstName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
          :model-value="employeeOther.fatherFirstName"
          @update:model-value="
            (v) =>
@ -122,7 +122,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
          :readonly="readonly || employeeOther.statusSave"
          hide-bottom-space
          class="col-md-3 col-6"
-          :label="$t('form.lastName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
          :model-value="employeeOther.fatherLastName"
          @update:model-value="
            (v) =>
@ -177,7 +177,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
          :readonly="readonly || employeeOther.statusSave"
          hide-bottom-space
          class="col-md-3 col-6"
-          :label="$t('form.firstName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
          :model-value="employeeOther.motherFirstName"
          @update:model-value="
            (v) =>
@ -193,7 +193,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
          :readonly="readonly || employeeOther.statusSave"
          hide-bottom-space
          class="col-md-3 col-6"
-          :label="$t('form.lastName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
          :model-value="employeeOther.motherLastName"
          @update:model-value="
            (v) =>
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@ -103,7 +103,7 @@ onMounted(() => {
      'label',
    );
    passportIssuingCountryFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
      passportIssuingCountryOptions,
      'label',
    );
@ -121,13 +121,13 @@ onMounted(() => {
    );

    genderFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.gender),
+      ref(optionStore.rawOption?.eng.gender),
      genderOptions,
      'label',
    );

    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
      nationalityOptions,
      'label',
    );
@ -152,7 +152,7 @@ watch(
    );

    passportIssuingCountryFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
      passportIssuingCountryOptions,
      'label',
    );
@ -164,13 +164,13 @@ watch(
    );

    genderFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.gender),
+      ref(optionStore.rawOption?.eng.gender),
      genderOptions,
      'label',
    );

    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
      nationalityOptions,
      'label',
    );
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@ -92,7 +92,7 @@ let workerTypeFilter: (

 onMounted(() => {
  visaTypeFilter = selectFilterOptionRefMod(
-    ref(optionStore.globalOption?.nationality),
+    ref(optionStore.globalOption?.visaType),
    visaTypeOptions,
    'label',
  );
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@ -3,6 +3,7 @@ import { QSelect } from 'quasar';
 import { CustomerBranch } from 'stores/customer/types';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { onMounted, ref, watch } from 'vue';
+import SelectCustomer from 'components/shared/select/SelectCustomer.vue';
 import {
  EditButton,
  DeleteButton,
@ -11,6 +12,7 @@ import {
 } from 'components/button';
 import { useI18n } from 'vue-i18n';
 import useOptionStore from 'stores/options';
+import { formatAddress } from 'src/utils/address';

 const { locale } = useI18n();

@ -21,6 +23,13 @@ const optionsBranch = defineModel<{ id: string; name: string }[]>(
 );

 // employee
+
+const customerBranchId = defineModel<string>('customerBranchId');
+
+const currentCustomerBranch = defineModel<CustomerBranch>(
+  'currentCustomerBranch',
+);
+
 const customerBranch = defineModel<{
  id: string;
  address: string;
@ -107,180 +116,14 @@ defineEmits<{
    </div>

    <div class="col-12 row" style="gap: var(--size-2)">
-      <q-select
-        :id="`${prefixId}-select-employer-branch`"
-        :for="`${prefixId}-select-employer-branch`"
-        :use-input="!customerBranch"
-        autocomplete="off"
-        input-debounce="0"
-        :hide-dropdown-icon="readonly"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12"
+      <SelectCustomer
+        v-model:value="customerBranchId"
+        v-model:value-option="currentCustomerBranch"
        :label="$t('customer.form.branchCode')"
-        v-model="customerBranch"
-        :option-value="
-          (v) => ({
-            id: v.id,
-            address: v.address,
-            addressEN: v.addressEN,
-            provinceId: v.provinceId,
-            districtId: v.districtId,
-            subDistrictId: v.subDistrictId,
-            zipCode: v.zipCode,
-          })
-        "
-        emit-value
-        map-options
-        :options="employeeOwnerOption"
-        @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.branch'),
-            }),
-        ]"
-      >
-        <template v-slot:option="scope">
-          <q-item
-            v-if="scope.opt"
-            v-bind="scope.itemProps"
-            class="row items-start col-12 no-padding"
-          >
-            <div class="q-ma-sm">
-              <i class="isax isax-frame5" style="color: var(--brand-1)" />
-            </div>
-            <div class="q-mt-sm">
-              <div>
-                <span v-if="scope.opt.customer.customerType">
-                  <span style="font-weight: 600">
-                    {{
-                      scope.opt.customer.customerType === 'CORP'
-                        ? $t('customer.form.registerName')
-                        : $t('customer.form.ownerName')
-                    }}:
-                  </span>
-                  {{
-                    scope.opt.customer.customerType === 'CORP'
-                      ? $i18n.locale === 'eng'
-                        ? scope.opt.registerNameEN
-                        : scope.opt.registerName
-                      : $i18n.locale === 'eng'
-                        ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                          '-'
-                        : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                          '-'
-                  }}
-                  ({{ scope.opt.code }})
-                </span>
-              </div>
-
-              <div class="text-caption app-text-muted-2 q-mb-xs">
-                <span v-if="scope.opt.customer" class="col column">
-                  {{
-                    $t(
-                      `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                    )
-                  }}
-
-                  {{
-                    !scope.opt.code.endsWith('-00')
-                      ? +scope.opt.code.split('-')[1]
-                      : ''
-                  }}
-                </span>
-                <span v-if="scope.opt.province" class="col">
-                  {{ $t('general.address') }}
-                  {{
-                    $i18n.locale === 'eng'
-                      ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-                  }}
-                  {{ scope.opt.subDistrict?.zipCode || '' }}
-                </span>
-              </div>
-            </div>
-          </q-item>
-          <q-separator class="q-mx-sm" />
-        </template>
-
-        <template v-slot:selected-item="scope">
-          <div
-            v-if="scope.opt"
-            class="row items-center no-wrap"
-            style="width: 1px"
-          >
-            <div class="q-mr-sm">
-              <span style="font-weight: 600">
-                {{
-                  scope.opt.customer.customerType === 'CORP'
-                    ? $t('customer.form.registerName')
-                    : $t('customer.form.ownerName')
-                }}:
-              </span>
-              {{
-                scope.opt.customer.customerType === 'CORP'
-                  ? $i18n.locale === 'eng'
-                    ? scope.opt.registerNameEN
-                    : scope.opt.registerName
-                  : $i18n.locale === 'eng'
-                    ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                      '-'
-                    : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                      '-'
-              }}
-              ({{ scope.opt.code }})
-            </div>
-            <div
-              class="text-caption app-text-muted-2"
-              v-if="scope.opt.customer && scope.opt.province"
-            >
-              {{
-                $t(
-                  `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                )
-              }}
-
-              {{
-                !scope.opt.code.endsWith('-00')
-                  ? +scope.opt.code.split('-')[1]
-                  : ''
-              }}
-
-              {{ $t('general.address') }}
-              {{
-                $i18n.locale === 'eng'
-                  ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                  : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-              }}
-              {{ scope.opt.subDistrict?.zipCode || '' }}
-              <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerBranch.form.title') }}:
-
-                {{ $t('general.address') }}
-                {{
-                  $i18n.locale === 'eng'
-                    ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                    : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-                }}
-                {{ scope.opt.subDistrict?.zipCode || '' }}
-              </q-tooltip>
-            </div>
-          </div>
-        </template>
-
-        <template v-slot:append>
-          <q-icon
-            v-if="!readonly && customerBranch"
-            name="mdi-close-circle"
-            @click.stop="customerBranch = undefined"
-            class="cursor-pointer clear-btn"
-          />
-        </template>
-      </q-select>
+        class="col-12 field-two"
+        required
+        :readonly
+      />

      <q-input
        :for="`${prefixId}-input-code`"
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@ -14,6 +14,9 @@ defineProps<{
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
 const nameEn = defineModel('nameEn', { default: '' });
+const contactName = defineModel('contactName', { default: '' });
+const email = defineModel('email', { default: '' });
+const contactTel = defineModel('contactTel', { default: '' });

 type Options = { label: string; value: string };
 </script>
@ -35,7 +38,7 @@ type Options = { label: string; value: string };

    <div class="col-12 row q-col-gutter-sm">
      <SelectInput
-        :class="{ col: $q.screen.lt.md }"
+        class="col"
        :disable="!readonly && onDrawer"
        :readonly="readonly"
        for="input-agencies-code"
@ -62,7 +65,7 @@ type Options = { label: string; value: string };
        outlined
        :readonly="readonly"
        hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
        :label="$t('agencies.name')"
        v-model="name"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
@ -73,10 +76,78 @@ type Options = { label: string; value: string };
        outlined
        :readonly="readonly"
        hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
        :label="'Agencies Name'"
        v-model="nameEn"
      />
+
+      <q-input
+        for="input-agencies-contact-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('agencies.contactName')"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
+      <q-input
+        for="input-agencies-email"
+        dense
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        :label="$t('form.email')"
+        :rules="
+          readonly
+            ? undefined
+            : [
+                (v: string) =>
+                  !v ||
+                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
+                  $t('form.error.invalid'),
+              ]
+        "
+        class="col-md-4 col-12"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
+        @clear="email = ''"
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-email-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
+      <q-input
+        for="input-agencies-contact-tel"
+        id="input-agencies-contact-tel"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('form.telephone')"
+        :model-value="readonly ? contactTel || '-' : contactTel"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactTel = v) : '')
+        "
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-phone-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
    </div>
  </div>
 </template>
--- a/src/components/CanvasComponent.vue
+++ b/src/components/CanvasComponent.vue
@ -93,13 +93,6 @@ function clearUpload() {
  imgUrl.value = '';
 }

-watch(
-  () => tab.value,
-  async () => {
-    await initializeSignaturePad();
-  },
-);
-
 onMounted(async () => {
  await initializeSignaturePad();
 });
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@ -158,7 +158,7 @@ onMounted(async () => {
    </template>

    <template #option="{ opt, scope }">
-      <q-item v-bind="scope.itemProps">
+      <q-item @click="valueOption = opt" v-bind="scope.itemProps">
        <SelectCustomerItem :data="opt" :simple :simple-branch-no />
      </q-item>

--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@ -54,7 +54,9 @@ const columns = [
    field: (v: Employee) =>
      locale.value === Lang.English
        ? `${v.firstNameEN} ${v.lastNameEN}`
-        : `${v.firstName} ${v.lastName}`,
+        : v.firstName
+          ? `${v.firstName} ${v.lastName}`
+          : `${v.firstNameEN} ${v.lastNameEN}`,
  },
  {
    name: 'birthDate',