diff --git a/public/option/option.json b/public/option/option.json
index 79d36b0d..6e050cbb 100644
--- a/public/option/option.json
+++ b/public/option/option.json
@@ -1,5 +1,51 @@
 {
   "eng": {
+    "workerStatus": [
+      {
+        "label": "Normal",
+        "value": "normal"
+      },
+      {
+        "label": "Service Canceled",
+        "value": "canceled"
+      },
+      {
+        "label": "Resigned",
+        "value": "resigned"
+      },
+      {
+        "label": "Absconded",
+        "value": "absconded"
+      },
+      {
+        "label": "Deceased",
+        "value": "deceased"
+      },
+      {
+        "label": "Repatriated to Home Country",
+        "value": "repatriated"
+      },
+      {
+        "label": "Did Not Enter Thailand",
+        "value": "not_entered"
+      }
+    ],
+
+    "workerType": [
+      {
+        "label": "Bangkok Bank",
+        "value": "mou"
+      },
+      {
+        "label": "Nationality Verification Group",
+        "value": "ืืnvg"
+      },
+      {
+        "label": "Border Pass Group",
+        "value": "bp"
+      }
+    ],
+
     "bankBook": [
       {
         "label": "Bangkok Bank",
@@ -1001,6 +1047,52 @@
   },
 
   "tha": {
+    "workerStatus": [
+      {
+        "label": "ปกติ",
+        "value": "normal"
+      },
+      {
+        "label": "ยกเลิกบริการ",
+        "value": "canceled"
+      },
+      {
+        "label": "ลาออก",
+        "value": "resigned"
+      },
+      {
+        "label": "หลบหนี",
+        "value": "absconded"
+      },
+      {
+        "label": "เสียชีวิต",
+        "value": "deceased"
+      },
+      {
+        "label": "ส่งกลับประเทศต้นทาง",
+        "value": "repatriated"
+      },
+      {
+        "label": "ไม่ได้เดินทางเข้าประเทศไทย",
+        "value": "not_entered"
+      }
+    ],
+
+    "workerType": [
+      {
+        "label": "กลุ่ม MOU",
+        "value": "mou"
+      },
+      {
+        "label": "กลุ่ม พิสูจน์สัญชาติ",
+        "value": "ืืnvg"
+      },
+      {
+        "label": "กลุ่ม Border pass ",
+        "value": "bp"
+      }
+    ],
+
     "bankBook": [
       {
         "label": "ธนาคารกรุงเทพ",
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 02bf9a5f..bd7df57b 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
 import { QSelect } from 'quasar';
-import { selectFilterOptionRefMod } from 'stores/utils';
-import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import { selectFilterOptionRefMod } from 'stores/utils';
+import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
 import useOptionStore from 'stores/options';
-import { watch } from 'vue';
-import { onMounted } from 'vue';
+
 import DatePicker from '../shared/DatePicker.vue';
 
 const optionStore = useOptionStore();
@@ -32,6 +32,29 @@ const previousPassportReference = defineModel<string>(
   'previousPassportReference',
 );
 
+const workerStatus = defineModel<string>('workerStatus');
+const previousPassportNo = defineModel<string>('previousPassportNo');
+const birthDate = defineModel<Date>('birthDate');
+const nationality = defineModel<string>('nationality');
+const placeOfBirth = defineModel<string>('placeOfBirth');
+const countryOfBirth = defineModel<string>('countryOfBirth');
+const firstNameEN = defineModel<string>('firstNameEn');
+const middleNameEN = defineModel<string>('middleNameEn');
+const lastNameEN = defineModel<string>('lastNameEn');
+const middleName = defineModel<string>('middleName');
+
+const genderOptions = ref<Record<string, unknown>[]>([]);
+let genderFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+const nationalityOptions = ref<Record<string, unknown>[]>([]);
+let nationalityFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const props = defineProps<{
   title?: string;
   dense?: boolean;
@@ -64,6 +87,12 @@ let prefixNameFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const workerStatusOptions = ref<Record<string, unknown>[]>([]);
+let workerStatusFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 function matPreFixName() {
   if (!gender.value) return;
 
@@ -93,6 +122,24 @@ onMounted(() => {
       prefixNameOptions,
       'label',
     );
+
+    workerStatusFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.workerStatus),
+      workerStatusOptions,
+      'label',
+    );
+
+    genderFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.gender),
+      genderOptions,
+      'label',
+    );
+
+    nationalityFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.nationality),
+      nationalityOptions,
+      'label',
+    );
   }
 
   matPreFixName();
@@ -118,6 +165,24 @@ watch(
       passportIssuingCountryOptions,
       'label',
     );
+
+    workerStatusFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.workerStatus),
+      workerStatusOptions,
+      'label',
+    );
+
+    genderFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.gender),
+      genderOptions,
+      'label',
+    );
+
+    nationalityFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.nationality),
+      nationalityOptions,
+      'label',
+    );
   },
 );
 
@@ -139,43 +204,277 @@ watch(
 </script>
 
 <template>
-  <div class="row col-12">
-    <div
-      v-if="!ocr && !hideTitle"
-      class="col-12 q-pb-sm text-weight-bold text-body1"
-    >
-      <q-icon
-        flat
-        size="xs"
-        class="q-pa-sm rounded q-mr-xs"
-        color="info"
-        name="mdi-passport"
-        style="background-color: var(--surface-3)"
-      />
-      {{ title }}
-    </div>
-
-    <div
-      v-if="!ocr"
-      class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
-    >
-      <div class="app-text-muted">
-        <slot name="expiryDate" />
+  <template v-if="!!ocr">
+    <div class="row col-12">
+      <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
+        <q-icon
+          flat
+          size="xs"
+          class="q-pa-sm rounded q-mr-xs"
+          color="info"
+          name="mdi-passport"
+          style="background-color: var(--surface-3)"
+        />
+        {{ title }}
       </div>
 
-      <div>
-        <slot name="button"></slot>
+      <div class="row q-col-gutter-sm">
+        <div class="row q-col-gutter-sm col-12">
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-value="value"
+            option-label="label"
+            v-model="passportType"
+            class="col-12"
+            :dense="dense"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            :options="passportTypeOptions"
+            :for="`${prefixId}-select-passport-type`"
+            :label="$t('customerEmployee.form.passportType')"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportType'),
+                }),
+            ]"
+            @filter="passportTypeFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-input
+            :for="`${prefixId}-input-passport-no`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :label="$t('customerEmployee.form.passportNo')"
+            v-model="passportNumber"
+            :rules="[
+              (val) => (val && val.length > 0) || $t('form.error.required'),
+            ]"
+          />
+
+          <q-input
+            v-if="fullName && prefixNameOptions.length !== 0"
+            :for="`${prefixId}-input-last-name`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="`${$t('personnel.form.firstName')}- ${$t('personnel.form.lastName')}`"
+            :model-value="`${prefixNameOptions.filter((v) => v.value === prefixName)[0].label || ''} ${firstName || ''} ${lastName || ''}`"
+          />
+
+          <template v-if="!fullName">
+            <q-select
+              outlined
+              use-input
+              fill-input
+              emit-value
+              map-options
+              hide-selected
+              hide-bottom-space
+              input-debounce="0"
+              option-label="label"
+              option-value="value"
+              hide-dropdown-icon
+              class="col-2"
+              :dense="dense"
+              :readonly="readonly"
+              :options="prefixNameOptions"
+              :for="`${prefixId}-select-prefix-name`"
+              :label="$t('personnel.form.prefixName')"
+              @filter="prefixNameFilter"
+              :model-value="readonly ? prefixName || '-' : prefixName"
+              @update:model-value="
+                (v) => (typeof v === 'string' ? (prefixName = v) : '')
+              "
+              @clear="prefixName = ''"
+            >
+              <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`"
+              :dense="dense"
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              class="col"
+              :label="$t('personnel.form.firstName')"
+              v-model="firstName"
+            />
+
+            <q-input
+              :for="`${prefixId}-input-last-name`"
+              :dense="dense"
+              outlined
+              :readonly="readonly"
+              hide-bottom-space
+              class="col"
+              :label="$t('personnel.form.lastName')"
+              v-model="lastName"
+            />
+          </template>
+          <q-input
+            :for="`${prefixId}-input-passport-ref`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-2"
+            :label="$t('customerEmployee.form.passportRef')"
+            :model-value="
+              readonly
+                ? previousPassportReference || '-'
+                : previousPassportReference
+            "
+            @update:model-value="
+              (v) =>
+                typeof v === 'string' ? (previousPassportReference = v) : ''
+            "
+          />
+          <q-input
+            :for="`${prefixId}-input-passport-place`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :label="$t('customerEmployee.form.passportPlace')"
+            v-model="passportIssuingPlace"
+            :rules="[
+              (val) => (val && val.length > 0) || $t('form.error.required'),
+            ]"
+          />
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-value="value"
+            option-label="label"
+            class="col-12"
+            v-model="passportIssuingCountry"
+            :dense="dense"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            :options="passportIssuingCountryOptions"
+            :for="`${prefixId}-select-passport-country`"
+            :label="$t('customerEmployee.form.passportIssuer')"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportIssuer'),
+                }),
+            ]"
+            @filter="passportIssuingCountryFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <DatePicker
+            :id="`${prefixId}-date-picker-passport-issueance`"
+            :label="$t('customerEmployee.form.passportIssueDate')"
+            v-model="passportIssueDate"
+            class="col-6"
+            :readonly="readonly"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportIssueDate'),
+                }),
+            ]"
+          />
+          <DatePicker
+            :id="`${prefixId}-date-picker-passport-expire`"
+            :label="$t('customerEmployee.form.passportExpireDate')"
+            v-model="passportExpiryDate"
+            class="col-6"
+            :readonly="readonly"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportExpireDate'),
+                }),
+            ]"
+          />
+        </div>
       </div>
     </div>
+  </template>
+
+  <template v-if="!ocr">
+    <div class="row col-12">
+      <div v-if="!hideTitle" class="col-12 q-pb-sm text-weight-bold text-body1">
+        <q-icon
+          flat
+          size="xs"
+          class="q-pa-sm rounded q-mr-xs"
+          color="info"
+          name="mdi-passport"
+          style="background-color: var(--surface-3)"
+        />
+        {{ title }}
+      </div>
 
-    <div class="row q-col-gutter-sm">
       <div
-        v-if="!ocr"
-        class="col row justify-center q-col-gutter-sml"
-        style="max-height: 50%"
+        class="col-12 row justify-between items-center q-pb-sm text-weight-bold"
       >
-        <div style="border: 1px dashed">
+        <div class="app-text-muted">
+          <slot name="expiryDate" />
+        </div>
+
+        <div>
+          <slot name="button"></slot>
+        </div>
+      </div>
+
+      <div class="row q-col-gutter-sm">
+        <div
+          class="col row justify-center q-col-gutter-sml"
+          style="max-height: 50%"
+        >
           <q-avatar
+            style="border: 1px dashed; border-color: black"
             square
             size="100px"
             font-size="50px"
@@ -184,76 +483,53 @@ watch(
             icon="mdi-image-outline"
           />
         </div>
-      </div>
-      <div
-        class="row q-col-gutter-sm"
-        :class="{ 'col-10': !ocr, 'col-12': ocr }"
-      >
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          v-model="passportType"
-          :class="{ 'col-12': ocr, 'col-md-3': !ocr }"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
-          :options="passportTypeOptions"
-          :for="`${prefixId}-select-passport-type`"
-          :label="$t('customerEmployee.form.passportType')"
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('form.error.selectField', {
-                field: $t('customerEmployee.form.passportType'),
-              }),
-          ]"
-          @filter="passportTypeFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
+        <div class="row q-col-gutter-sm col-10">
+          <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-6"
+            :dense="dense"
+            :readonly="readonly"
+            :options="workerStatusOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-visa-type`"
+            :label="$t('customerEmployee.form.workerType')"
+            @filter="workerStatusFilter"
+            :model-value="readonly ? workerStatus || '-' : workerStatus"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (workerStatus = v) : '')
+            "
+            @clear="workerStatus = ''"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
 
-        <q-input
-          :for="`${prefixId}-input-passport-no`"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-          :label="$t('customerEmployee.form.passportNo')"
-          v-model="passportNumber"
-          :rules="[
-            (val) => (val && val.length > 0) || $t('form.error.required'),
-          ]"
-        />
+          <q-input
+            :for="`${prefixId}-input-previous-passport-Number`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-6"
+            :label="$t('customerEmployee.form.previousPassportNumber')"
+            v-model="previousPassportNo"
+          />
 
-        <q-input
-          v-if="fullName && prefixNameOptions.length !== 0"
-          :for="`${prefixId}-input-last-name`"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col"
-          :label="`${$t('personnel.form.firstName')}- ${$t('personnel.form.lastName')}`"
-          :model-value="`${prefixNameOptions.filter((v) => v.value === prefixName)[0].label || ''} ${firstName || ''} ${lastName || ''}`"
-        />
-
-        <template v-if="!fullName">
           <q-select
             outlined
             use-input
@@ -266,7 +542,7 @@ watch(
             option-label="label"
             option-value="value"
             hide-dropdown-icon
-            :class="{ 'col-2': ocr, 'col-1': !ocr }"
+            class="col-2"
             :dense="dense"
             :readonly="readonly"
             :options="prefixNameOptions"
@@ -295,8 +571,25 @@ watch(
             :readonly="readonly"
             hide-bottom-space
             class="col"
-            :label="$t('personnel.form.firstName')"
-            v-model="firstName"
+            :label="$t('form.firstName')"
+            :model-value="readonly ? firstName || '-' : firstName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (firstName = v) : '')
+            "
+          />
+
+          <q-input
+            :for="`${prefixId}-input-middle-name`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col"
+            :label="$t('form.middleName')"
+            :model-value="readonly ? middleName || '-' : middleName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (middleName = v) : '')
+            "
           />
 
           <q-input
@@ -306,111 +599,308 @@ watch(
             :readonly="readonly"
             hide-bottom-space
             class="col"
-            :label="$t('personnel.form.lastName')"
-            v-model="lastName"
+            :label="$t('form.lastName')"
+            :model-value="readonly ? lastName || '-' : lastName"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (lastName = v) : '')
+            "
           />
-        </template>
-        <q-input
-          :for="`${prefixId}-input-passport-ref`"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          :class="{ 'col-12': ocr, 'col-6': !ocr }"
-          :label="$t('customerEmployee.form.passportRef')"
-          :model-value="
+
+          <q-input
+            :for="`${prefixId}-input-full-name`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :disable="!readonly"
+            :label="$t('customer.table.fullname')"
+            :model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).label || ''} ${firstName || ''} ${lastName || ''}`"
+          />
+
+          <q-input
+            :for="`${prefixId}-input-first-name-en`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('form.firstNameEN')"
+            :model-value="readonly ? firstNameEN || '-' : firstNameEN"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (firstNameEN = v) : '')
+            "
+          />
+
+          <q-input
+            :for="`${prefixId}-input-middle-name-en`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('form.middleNameEN')"
+            :model-value="readonly ? middleNameEN || '-' : middleNameEN"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (middleNameEN = v) : '')
+            "
+          />
+
+          <q-input
+            :for="`${prefixId}-input-last-name-en`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('form.lastNameEN')"
+            :model-value="readonly ? lastNameEN || '-' : lastNameEN"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (lastNameEN = v) : '')
+            "
+          />
+
+          <q-input
+            :for="`${prefixId}-input-full-name-en`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-12"
+            :label="$t('customer.table.fullnameEN')"
+            :disable="!readonly"
+            :model-value="`${(prefixNameOptions.find((v) => v.value === prefixName) || {}).value || ''} ${firstName || ''} ${lastName || ''}`"
+          />
+
+          <q-select
+            outlined
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-label="label"
+            option-value="value"
+            class="col-2"
+            dense
+            :readonly="readonly"
+            :options="genderOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-gender`"
+            :label="$t('form.gender')"
+            @filter="genderFilter"
+            :model-value="readonly ? gender || '-' : gender"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (gender = v) : '')
+            "
+            @clear="gender = ''"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-input
+            :for="`${prefixId}-input-passport-no`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-6 col-md-3"
+            :label="$t('customerEmployee.form.passportNo')"
+            v-model="passportNumber"
+            :rules="[
+              (val) => (val && val.length > 0) || $t('form.error.required'),
+            ]"
+          />
+
+          <DatePicker
+            v-model="birthDate"
+            class="col-2"
+            :id="`${prefixId}-input-birth-date`"
+            :readonly="readonly"
+            :label="$t('form.birthDate')"
+            :disabled-dates="disabledAfterToday"
+            :rules="[
+              (val: string) =>
+                !!val ||
+                $t('form.error.selectField', { field: $t('form.birthDate') }),
+            ]"
+          />
+
+          <q-input
+            :for="`${prefixId}-input-age`"
+            :id="`${prefixId}-input-age`"
+            dense
+            outlined
             readonly
-              ? previousPassportReference || '-'
-              : previousPassportReference
-          "
-          @update:model-value="
-            (v) =>
-              typeof v === 'string' ? (previousPassportReference = v) : ''
-          "
-        />
-        <q-input
-          :for="`${prefixId}-input-passport-place`"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-          :label="$t('customerEmployee.form.passportPlace')"
-          v-model="passportIssuingPlace"
-          :rules="[
-            (val) => (val && val.length > 0) || $t('form.error.required'),
-          ]"
-        />
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
-          v-model="passportIssuingCountry"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
-          :options="passportIssuingCountryOptions"
-          :for="`${prefixId}-select-passport-country`"
-          :label="$t('customerEmployee.form.passportIssuer')"
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('form.error.selectField', {
-                field: $t('customerEmployee.form.passportIssuer'),
-              }),
-          ]"
-          @filter="passportIssuingCountryFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <DatePicker
-          :id="`${prefixId}-date-picker-passport-issueance`"
-          :label="$t('customerEmployee.form.passportIssueDate')"
-          v-model="passportIssueDate"
-          class="col-6"
-          :class="{ 'col-md-3': !ocr }"
-          :readonly="readonly"
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('form.error.selectField', {
-                field: $t('customerEmployee.form.passportIssueDate'),
-              }),
-          ]"
-        />
-        <DatePicker
-          :id="`${prefixId}-date-picker-passport-expire`"
-          :label="$t('customerEmployee.form.passportExpireDate')"
-          v-model="passportExpiryDate"
-          class="col-6"
-          :class="{ 'col-md-3': !ocr }"
-          :readonly="readonly"
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('form.error.selectField', {
-                field: $t('customerEmployee.form.passportExpireDate'),
-              }),
-          ]"
-        />
+            :label="$t('personnel.age')"
+            class="col-2"
+            :model-value="
+              birthDate?.toString() === 'Invalid Date' ||
+              birthDate?.toString() === undefined
+                ? ''
+                : calculateAge(birthDate)
+            "
+          />
+
+          <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"
+            :dense="dense"
+            :readonly="readonly"
+            :options="nationalityOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-visa-type`"
+            :label="$t('general.nationality')"
+            @filter="nationalityFilter"
+            :model-value="readonly ? nationality || '-' : nationality"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (nationality = v) : '')
+            "
+            @clear="nationality = ''"
+          >
+            <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-place-of-birth`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.placeOfBirth')"
+            v-model="placeOfBirth"
+          />
+
+          <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-4"
+            :dense="dense"
+            :readonly="readonly"
+            :options="nationalityOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-visa-type`"
+            :label="$t('customerEmployee.form.countryOfbirth')"
+            @filter="nationalityFilter"
+            :model-value="readonly ? countryOfBirth || '-' : countryOfBirth"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (countryOfBirth = v) : '')
+            "
+            @clear="countryOfBirth = ''"
+          >
+            <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-6 col-md-4"
+            v-model="passportIssuingCountry"
+            :dense="dense"
+            :readonly="readonly"
+            :hide-dropdown-icon="readonly"
+            :options="passportIssuingCountryOptions"
+            :for="`${prefixId}-select-passport-country`"
+            :label="$t('customerEmployee.form.passportIssuer')"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportIssuer'),
+                }),
+            ]"
+            @filter="passportIssuingCountryFilter"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  {{ $t('general.noData') }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <DatePicker
+            :id="`${prefixId}-date-picker-passport-issueance`"
+            :label="$t('customerEmployee.form.passportIssueDate')"
+            v-model="passportIssueDate"
+            class="col-6 col-md-3"
+            :readonly="readonly"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportIssueDate'),
+                }),
+            ]"
+          />
+          <DatePicker
+            :id="`${prefixId}-date-picker-passport-expire`"
+            :label="$t('customerEmployee.form.passportExpireDate')"
+            v-model="passportExpiryDate"
+            class="col-6 col-md-3"
+            :readonly="readonly"
+            :rules="[
+              (val) =>
+                (val && val.length > 0) ||
+                $t('form.error.selectField', {
+                  field: $t('customerEmployee.form.passportExpireDate'),
+                }),
+            ]"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </template>
 </template>
 
 <style scoped></style>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 1d49374e..eb571911 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -32,9 +32,17 @@ const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
 const visaStayUntilDate = defineModel<Date | null | string>(
   'visaStayUntilDate',
 );
+const entryCount = defineModel<number>('entryCount');
+const issueCountry = defineModel<string>('issueCountry');
+
 const tm6Number = defineModel<string>('tm6Number');
 const entryDate = defineModel<Date | null | string>('entryDate');
 
+const workerType = defineModel<string>('workerType');
+const dayNext = defineModel<Date>('dayNext');
+const tmNo = defineModel<string>('tmNo');
+const enteredCheckpoint = defineModel<string>('enteredCheckpoint');
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -47,6 +55,14 @@ defineProps<{
   ocr?: boolean;
 }>();
 
+async function calculate90DayNext(currentDate: Date) {
+  const futureDate = new Date(currentDate);
+
+  // Add 90 days to the current date
+  futureDate.setDate(currentDate.getDate() + 90);
+
+  return futureDate;
+}
 async function fetchProvince() {
   const result = await addressStore.fetchProvince();
 
@@ -63,12 +79,24 @@ let visaTypeFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const workerTypeOptions = ref<Record<string, unknown>[]>([]);
+let workerTypeFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 onMounted(() => {
   visaTypeFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.nationality),
     visaTypeOptions,
     'label',
   );
+
+  workerTypeFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.workerType),
+    workerTypeOptions,
+    'label',
+  );
 });
 
 watch(
@@ -79,150 +107,442 @@ watch(
       visaTypeOptions,
       'label',
     );
+
+    workerTypeFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.workerType),
+      workerTypeOptions,
+      'label',
+    );
   },
 );
 </script>
 
 <template>
-  <div class="row">
-    <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
-      <q-icon
-        flat
-        size="xs"
-        class="q-pa-sm rounded q-mr-xs"
-        color="info"
-        name="mdi-notebook-outline"
-        style="background-color: var(--surface-3)"
-      />
-      {{ $t(`${title}`) }}
-    </div>
-    <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-value="value"
-        option-label="label"
-        :class="{ 'col-4': !ocr, 'col-6': ocr }"
-        :dense="dense"
-        :readonly="readonly"
-        :options="visaTypeOptions"
-        :hide-dropdown-icon="readonly"
-        :for="`${prefixId}-select-visa-type`"
-        :label="$t('customerEmployee.form.visaType')"
-        @filter="visaTypeFilter"
-        :model-value="readonly ? visaType || '-' : visaType"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (visaType = v) : '')
-        "
-        @clear="visaType = ''"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <!-- :rules="[
+  <template v-if="!!ocr">
+    <div class="row">
+      <div class="col-12 row q-col-gutter-sm">
+        <q-select
+          outlined
+          clearable
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
+          option-label="label"
+          class="col-6"
+          :dense="dense"
+          :readonly="readonly"
+          :options="visaTypeOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-visa-type`"
+          :label="$t('customerEmployee.form.visaType')"
+          @filter="visaTypeFilter"
+          :model-value="readonly ? visaType || '-' : visaType"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (visaType = v) : '')
+          "
+          @clear="visaType = ''"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+        <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
       ]" -->
-      <q-input
-        :for="`${prefixId}-input-visa-no`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-4': !ocr, 'col-6': ocr }"
-        :label="$t('customerEmployee.form.visaNo')"
-        :model-value="readonly ? visaNumber || '-' : visaNumber"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (visaNumber = v) : '')
-        "
-      />
-      <!-- :rules="[
+        <q-input
+          :for="`${prefixId}-input-visa-no`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('customerEmployee.form.visaNo')"
+          :model-value="readonly ? visaNumber || '-' : visaNumber"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (visaNumber = v) : '')
+          "
+        />
+        <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
       ]" -->
-      <DatePicker
-        :class="{ 'col-2': !ocr, 'col-6': ocr }"
-        :id="`${prefixId}-date-picker-visa-issuance`"
-        :readonly="readonly"
-        :label="$t('customerEmployee.form.visaIssuance')"
-        v-model="visaIssueDate"
-        clearable
-      />
-      <DatePicker
-        :class="{ 'col-2': !ocr, 'col-6': ocr }"
-        :id="`${prefixId}-date-picker-visa-expire`"
-        :readonly="readonly"
-        :label="$t('customerEmployee.form.visaExpire')"
-        v-model="visaExpiryDate"
-        clearable
-      />
+        <DatePicker
+          class="col-6"
+          :id="`${prefixId}-date-picker-visa-issuance`"
+          :readonly="readonly"
+          :label="$t('customerEmployee.form.visaIssuance')"
+          v-model="visaIssueDate"
+          clearable
+        />
+        <DatePicker
+          class="col-6"
+          :id="`${prefixId}-date-picker-visa-expire`"
+          :readonly="readonly"
+          :label="$t('customerEmployee.form.visaExpire')"
+          v-model="visaExpiryDate"
+          clearable
+        />
 
-      <q-input
-        :for="`${prefixId}-input-visa-place`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-5': !ocr, 'col-6': ocr }"
-        :label="$t('customerEmployee.form.visaPlace')"
-        :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
-        "
-      />
-      <!-- :rules="[
+        <q-input
+          :for="`${prefixId}-input-visa-place`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('customerEmployee.form.visaPlace')"
+          :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
+          "
+        />
+        <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
       ]" -->
-      <DatePicker
-        :class="{ 'col-4': !ocr, 'col-6': ocr }"
-        :id="`${prefixId}-date-picker-visa-until`"
-        :readonly="readonly"
-        :label="$t('customerEmployee.form.visaStayUntil')"
-        v-model="visaStayUntilDate"
-        clearable
-      />
+        <DatePicker
+          class="col-6"
+          :id="`${prefixId}-date-picker-visa-until`"
+          :readonly="readonly"
+          :label="$t('customerEmployee.form.visaStayUntil')"
+          v-model="visaStayUntilDate"
+          clearable
+        />
 
-      <q-input
-        :for="`${prefixId}-input-tm6`"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        :class="{ 'col-5': !ocr, 'col-6': ocr }"
-        :label="$t('customerEmployee.form.visaTM6')"
-        :model-value="readonly ? tm6Number || '-' : tm6Number"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (tm6Number = v) : '')
-        "
-        @clear="tm6Number = ''"
-      />
-      <!-- :rules="[
+        <q-input
+          :for="`${prefixId}-input-tm6`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('customerEmployee.form.visaTM6')"
+          :model-value="readonly ? tm6Number || '-' : tm6Number"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (tm6Number = v) : '')
+          "
+          @clear="tm6Number = ''"
+        />
+        <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
       ]" -->
-      <DatePicker
-        :class="{ 'col-4': !ocr, 'col-6': ocr }"
-        :id="`${prefixId}-date-picker-visa-enter`"
-        :readonly="readonly"
-        :label="$t('customerEmployee.form.visaEnter')"
-        v-model="entryDate"
-        clearable
-      />
+        <DatePicker
+          class="col-6"
+          :id="`${prefixId}-date-picker-visa-enter`"
+          :readonly="readonly"
+          :label="$t('customerEmployee.form.visaEnter')"
+          v-model="entryDate"
+          clearable
+        />
+
+        <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-6"
+          :dense="dense"
+          :readonly="readonly"
+          :options="visaTypeOptions"
+          :hide-dropdown-icon="readonly"
+          :for="`${prefixId}-select-issue-country`"
+          :label="$t('customerEmployee.form.issueCountry')"
+          @filter="visaTypeFilter"
+          :model-value="readonly ? issueCountry || '-' : issueCountry"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (issueCountry = v) : '')
+          "
+          @clear="visaType = ''"
+        >
+          <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
+          style="height: 60px"
+          :for="`${prefixId}-input-entry-count`"
+          :dense="dense"
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('customerEmployee.form.entryCount')"
+          v-model="entryCount"
+          type="number"
+          min="0"
+        />
+      </div>
     </div>
-  </div>
+  </template>
+
+  <template v-if="!ocr">
+    <div class="column full-width" style="height: 150px; margin-bottom: 80px">
+      <div
+        class="col-3 row item-center justify-between text-weight-bold app-text-muted"
+      >
+        <div>
+          <slot name="expiryDate" />
+        </div>
+
+        <div>
+          <slot name="button"></slot>
+        </div>
+      </div>
+      <div class="col row">
+        <div class="col row justify-center" style="max-height: 50%">
+          <div style="border: 1px dashed">
+            <q-avatar
+              square
+              size="100px"
+              font-size="50px"
+              color="grey-4"
+              text-color="grey"
+              icon="mdi-image-outline"
+            />
+          </div>
+        </div>
+        <div class="col-10 row q-col-gutter-sm">
+          <q-select
+            outlined
+            clearable
+            use-input
+            fill-input
+            emit-value
+            map-options
+            hide-selected
+            hide-bottom-space
+            input-debounce="0"
+            option-value="value"
+            option-label="label"
+            class="col-4"
+            :dense="dense"
+            :readonly="readonly"
+            :options="workerTypeOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-visa-type`"
+            :label="$t('customerEmployee.form.workerType')"
+            @filter="workerTypeFilter"
+            :model-value="readonly ? workerType || '-' : workerType"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (workerType = v) : '')
+            "
+            @clear="workerType = ''"
+          >
+            <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-visa-no`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.visaNo')"
+            :model-value="readonly ? visaNumber || '-' : visaNumber"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (visaNumber = v) : '')
+            "
+          />
+
+          <q-input
+            :for="`${prefixId}-input-visa-place`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.visaPlace')"
+            :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
+            "
+          />
+
+          <div class="row q-col-gutter-sm">
+            <q-select
+              outlined
+              clearable
+              use-input
+              fill-input
+              emit-value
+              map-options
+              hide-selected
+              hide-bottom-space
+              input-debounce="0"
+              option-value="value"
+              option-label="label"
+              class="col-4"
+              :dense="dense"
+              :readonly="readonly"
+              :options="visaTypeOptions"
+              :hide-dropdown-icon="readonly"
+              :for="`${prefixId}-select-visa-type`"
+              :label="$t('customerEmployee.form.visaType')"
+              @filter="visaTypeFilter"
+              :model-value="readonly ? visaType || '-' : visaType"
+              @update:model-value="
+                (v) => (typeof v === 'string' ? (visaType = v) : '')
+              "
+              @clear="visaType = ''"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    {{ $t('general.noData') }}
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+
+            <div class="col">
+              <DatePicker
+                :id="`${prefixId}-date-picker-visa-issuance`"
+                :readonly="readonly"
+                :label="$t('customerEmployee.form.visaIssuance')"
+                v-model="visaIssueDate"
+                clearable
+              />
+            </div>
+
+            <div class="col">
+              <DatePicker
+                :id="`${prefixId}-date-picker-visa-expire`"
+                :readonly="readonly"
+                :label="$t('customerEmployee.form.visaExpire')"
+                v-model="visaExpiryDate"
+                clearable
+              />
+            </div>
+            <DatePicker
+              class="col-3"
+              :id="`${prefixId}-date-picker-visa-issuance`"
+              :readonly="readonly"
+              :label="$t('customerEmployee.form.visa90Day')"
+              v-model="dayNext"
+              clearable
+            />
+          </div>
+
+          <q-input
+            :for="`${prefixId}-input-visa-no`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.arrivalCardNo')"
+            :model-value="readonly ? tmNo || '-' : tmNo"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (tmNo = v) : '')
+            "
+          />
+
+          <DatePicker
+            class="col-4"
+            :id="`${prefixId}-date-picker-visa-enter`"
+            :readonly="readonly"
+            :label="$t('customerEmployee.form.visaEnter')"
+            v-model="entryDate"
+            clearable
+          />
+
+          <q-input
+            :for="`${prefixId}-input-visa-no`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.visaCheckpoint')"
+            :model-value="
+              readonly ? enteredCheckpoint || '-' : enteredCheckpoint
+            "
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (enteredCheckpoint = v) : '')
+            "
+          />
+
+          <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-4"
+            :dense="dense"
+            :readonly="readonly"
+            :options="visaTypeOptions"
+            :hide-dropdown-icon="readonly"
+            :for="`${prefixId}-select-issue-country`"
+            :label="$t('customerEmployee.form.issueCountry')"
+            @filter="visaTypeFilter"
+            :model-value="readonly ? issueCountry || '-' : issueCountry"
+            @update:model-value="
+              (v) => (typeof v === 'string' ? (issueCountry = v) : '')
+            "
+            @clear="visaType = ''"
+          >
+            <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-entry-count`"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            hide-bottom-space
+            class="col-4"
+            :label="$t('customerEmployee.form.entryCount')"
+            v-model="entryCount"
+            type="number"
+            min="0"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
 </template>
 
 <style scoped></style>
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 4e99594a..94405c88 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -491,6 +491,7 @@ export default {
     table: {
       orderNumber: 'No.',
       fullname: 'Full Name',
+      fullnameEN: 'Full Name',
       titleName: 'Name',
       businessTypePure: 'Business Type',
       jobPosition: 'Job Position',
@@ -516,6 +517,8 @@ export default {
         other: 'Other',
         family: 'Family',
       },
+      workerStatus: 'Worker Status',
+      previousPassportNumber: 'Previous Passport Number',
       employerBranch: 'Employer Branch',
       employeeCode: 'Employee Code',
       nrcNo: 'Non-Thai Identification Number (N.R.C No.)',
@@ -541,7 +544,14 @@ export default {
       visaTM6: 'TM.6 Number (Arrival)',
       visaEnter: 'Date of Entry into the Country',
       visaExpireDate: 'Visa Expiry Date',
-
+      visa90Day: '90-day report next time',
+      arrivalCardNo: 'Arrival Card, Number TM',
+      visaCheckpoint: 'Entered through the checkpoint',
+      workerType: 'Type of worker',
+      placeOfBirth: 'Place of Birth',
+      countryOfbirth: 'Country of Birth',
+      issueCountry: 'Issue Country',
+      entryCount: 'Entry Count',
       employerSelect: {
         branchName: 'Branch Name',
         customerName: 'Employer Name',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index c7e55c8d..6bcfd50b 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -487,6 +487,7 @@ export default {
     table: {
       orderNumber: 'ลําดับ',
       fullname: 'ชื่อ-นามสกุล',
+      fullnameEN: 'ชื่อ-นามสกุล ภาษาอังกฤษ',
       titleName: 'ชื่อ บริษัท/นิติบุคคล',
       businessTypePure: 'ประเภทกิจการ',
       jobPosition: 'ตำแหน่งงาน',
@@ -512,6 +513,8 @@ export default {
         other: 'ข้อมูลอื่นๆ',
         family: 'ข้อมูลครอบครัว',
       },
+      workerStatus: 'สถานะคนงาน',
+      previousPassportNumber: 'หมายเลขอันเก่าหนังสือเดินทาง',
       employerBranch: 'สาขานายจ้าง',
       employeeCode: 'รหัสลูกจ้าง',
       nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)',
@@ -537,7 +540,14 @@ export default {
       visaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
       visaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
       visaExpireDate: 'วันหมดอายุ visa',
-
+      visa90Day: 'รายงานตัว 90 วัน ครั้งต่อไป',
+      arrivalCardNo: 'บัตรขาเข้า หมายเลข TM',
+      visaCheckpoint: 'เดินทางเข้ามาทางด่าน',
+      workerType: 'ประเภทคนงาน',
+      placeOfBirth: 'สถานที่เกิด',
+      countryOfbirth: 'ประเทศที่เกิด',
+      issueCountry: 'ประเทศที่ออก',
+      entryCount: 'จำนวนที่เข้าประเทศ',
       employerSelect: {
         branchName: 'ชื่อสาขา',
         customerName: 'ชื่อนายจ้าง',
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 24d44fd8..e41e98b5 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -46,7 +46,6 @@ import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import BranchPage from './BranchPage.vue';
 import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'components/SideMenu.vue';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
@@ -77,6 +76,7 @@ import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import { nextTick } from 'vue';
+import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -464,7 +464,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
 
 async function deleteEmployeeById(opts: {
   id?: string;
-  type?: 'passport' | 'healthCheck' | 'work';
+  type?: 'passport' | 'visa' | 'healthCheck' | 'work';
 }) {
   dialog({
     color: 'negative',
@@ -478,6 +478,10 @@ async function deleteEmployeeById(opts: {
         await employeeFormStore.deletePassport();
       }
 
+      if (opts.type === 'visa') {
+        await employeeFormStore.deleteVisa();
+      }
+
       if (opts.type === 'healthCheck') {
         await employeeFormStore.deleteHealthCheck();
       }
@@ -2300,6 +2304,10 @@ const emptyCreateDialog = ref(false);
           await employeeFormStore.submitPassport();
         }
 
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
         }
@@ -2370,6 +2378,11 @@ const emptyCreateDialog = ref(false);
               name: 'passport',
               label: 'customerEmployee.fileType.passport',
             },
+            {
+              name: 'visa',
+              label: 'customerEmployee.form.group.visa',
+            },
+
             {
               name: 'healthCheck',
               label: 'customerEmployee.form.group.healthCheck',
@@ -2479,6 +2492,20 @@ const emptyCreateDialog = ref(false);
                     sub: true,
                   })) || []),
 
+                  {
+                    name: $t('customerEmployee.form.group.visa'),
+                    anchor: 'drawer-visa',
+                    tab: 'visa',
+                    useBtn: true,
+                  },
+
+                  ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `drawer-employee-visa-${i}`,
+                    tab: 'visa',
+                    sub: true,
+                  })) || []),
+
                   ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
                     name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-checkup-${i}`,
@@ -2953,6 +2980,8 @@ const emptyCreateDialog = ref(false);
                     v-model:visa-issue-date="meta.issueDate"
                     v-model:visa-expiry-date="meta.expireDate"
                     v-model:visa-issuing-place="meta.issuePlace"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-country="meta.issueCountry"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -3091,6 +3120,114 @@ const emptyCreateDialog = ref(false);
             </div>
           </template>
 
+          <template v-if="employeeFormState.currentTab === 'visa'">
+            <FormEmployeeVisa
+              v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+              prefix-id="drawer-info-employee"
+              id="form-visa"
+              dense
+              outlined
+              title="customerEmployee.form.group.visa"
+              :readonly="employeeFormState.currentIndexVisa !== index"
+              v-model:visa-type="value.type"
+              v-model:visa-number="value.number"
+              v-model:visa-issue-date="value.issueDate"
+              v-model:visa-expiry-date="value.expireDate"
+              v-model:visa-issuing-place="value.issuePlace"
+              v-model:entry-count="value.entryCount"
+              v-model:issue-country="value.issueCountry"
+            >
+              <template v-slot:expiryDate>
+                {{ $t('general.expirationDate') }} :
+                {{ dateFormat(value.expireDate) }}
+                <ExpirationDate
+                  v-if="value.id !== undefined"
+                  :expiration-date="value.expireDate"
+                />
+              </template>
+
+              <template v-slot:button>
+                <div class="surface-1 row rounded" style="min-height: 35px">
+                  <UndoButton
+                    v-if="
+                      employeeFormState.isEmployeeEdit &&
+                      !(employeeFormState.currentIndexVisa === -1) &&
+                      employeeFormState.currentIndexVisa === index
+                    "
+                    id="btn-info-basic-undo"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormStore.resetFormDataEmployee();
+                        employeeFormState.isEmployeeEdit = false;
+                        employeeFormState.dialogType = 'info';
+                        employeeFormState.currentIndexVisa = -1;
+                      }
+                    "
+                    type="button"
+                  />
+                  <SaveButton
+                    v-if="
+                      (employeeFormState.isEmployeeEdit ||
+                        value.id === undefined) &&
+                      !(employeeFormState.currentIndexVisa === -1) &&
+                      employeeFormState.currentIndexVisa === index
+                    "
+                    id="btn-info-basic-save"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormState.currentIndexVisa = index;
+                      }
+                    "
+                    type="submit"
+                  />
+
+                  <EditButton
+                    v-if="
+                      employeeFormState.currentIndexVisa === -1 ||
+                      (!employeeFormState.isEmployeeEdit &&
+                        value.id !== undefined &&
+                        employeeFormState.currentIndexVisa === index)
+                    "
+                    id="btn-info-basic-edit"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormState.currentIndexVisa = index;
+                        employeeFormState.isEmployeeEdit = true;
+                        employeeFormState.dialogType = 'edit';
+                      }
+                    "
+                    type="button"
+                  />
+                  <DeleteButton
+                    v-if="
+                      employeeFormState.currentIndexVisa === -1 ||
+                      (!employeeFormState.isEmployeeEdit &&
+                        value.id !== undefined &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index)
+                    "
+                    id="btn-info-basic-delete"
+                    icon-only
+                    @click.stop="
+                      () => {
+                        employeeFormState.currentIndexVisa = index;
+                        deleteEmployeeById({ type: 'visa' });
+                      }
+                    "
+                    type="button"
+                    :disabled="
+                      !(employeeFormState.currentIndex === -1) &&
+                      !(employeeFormState.currentIndex === index)
+                    "
+                  />
+                </div>
+              </template>
+            </FormEmployeeVisa>
+          </template>
+
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"
@@ -3848,6 +3985,10 @@ const emptyCreateDialog = ref(false);
           await employeeFormStore.submitPassport();
         }
 
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
         }
@@ -3934,6 +4075,10 @@ const emptyCreateDialog = ref(false);
               name: 'passport',
               label: 'customerEmployee.fileType.passport',
             },
+            {
+              name: 'visa',
+              label: 'customerEmployee.form.group.visa',
+            },
             {
               name: 'healthCheck',
               label: 'customerEmployee.form.group.healthCheck',
@@ -3983,6 +4128,7 @@ const emptyCreateDialog = ref(false);
                       anchor: 'drawer-upload-file',
                       tab: 'personalInfo',
                     },
+
                     {
                       name: $t('customerEmployee.form.group.passport'),
                       anchor: 'drawer-passport',
@@ -4009,14 +4155,28 @@ const emptyCreateDialog = ref(false);
                       }),
                     ) || []),
 
+                    {
+                      name: $t('customerEmployee.form.group.visa'),
+                      anchor: 'drawer-visa',
+                      tab: 'visa',
+                      useBtn: true,
+                    },
+
+                    ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                      name: dateFormat(v.expireDate),
+                      anchor: `drawer-employee-visa-${i}`,
+                      tab: 'visa',
+                      sub: true,
+                    })) || []),
+
                     ...(currentFromDataEmployee.employeeCheckup?.map(
-                      (v, i) => ({
+                      (_v, i) => ({
                         name: $t('general.times', { number: i + 1 }),
                         anchor: `drawer-employee-checkup-${i}`,
                         tab: 'healthCheck',
                       }),
                     ) || []),
-                    ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                    ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
                       name: $t('general.times', { number: i + 1 }),
                       anchor: `drawer-employee-work-history-${i}`,
                       tab: 'workHistory',
@@ -4047,6 +4207,18 @@ const emptyCreateDialog = ref(false);
                     @click.stop="employeeFormStore.addPassport()"
                   />
                 </template>
+
+                <template v-slot:btn-drawer-visa>
+                  <q-btn
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
+                </template>
               </SideMenu>
             </div>
           </div>
@@ -4483,6 +4655,8 @@ const emptyCreateDialog = ref(false);
                     v-model:visa-issue-date="meta.issueDate"
                     v-model:visa-expiry-date="meta.expireDate"
                     v-model:visa-issuing-place="meta.issuePlace"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-country="meta.issueCountry"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -4619,6 +4793,115 @@ const emptyCreateDialog = ref(false);
                 </FormEmployeePassport>
               </div>
             </template>
+
+            <template v-if="employeeFormState.currentTab === 'visa'">
+              <FormEmployeeVisa
+                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                prefix-id="drawer-info-employee"
+                id="form-visa"
+                dense
+                outlined
+                title="customerEmployee.form.group.visa"
+                :readonly="employeeFormState.currentIndexVisa !== index"
+                v-model:visa-type="value.type"
+                v-model:visa-number="value.number"
+                v-model:visa-issue-date="value.issueDate"
+                v-model:visa-expiry-date="value.expireDate"
+                v-model:visa-issuing-place="value.issuePlace"
+                v-model:entry-count="value.entryCount"
+                v-model:issue-country="value.issueCountry"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                  <ExpirationDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
+                </template>
+
+                <template v-slot:button>
+                  <div class="surface-1 row rounded" style="min-height: 35px">
+                    <UndoButton
+                      v-if="
+                        employeeFormState.isEmployeeEdit &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-undo"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormStore.resetFormDataEmployee();
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormState.dialogType = 'info';
+                          employeeFormState.currentIndexVisa = -1;
+                        }
+                      "
+                      type="button"
+                    />
+                    <SaveButton
+                      v-if="
+                        (employeeFormState.isEmployeeEdit ||
+                          value.id === undefined) &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-save"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                        }
+                      "
+                      type="submit"
+                    />
+
+                    <EditButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-edit"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          employeeFormState.isEmployeeEdit = true;
+                          employeeFormState.dialogType = 'edit';
+                        }
+                      "
+                      type="button"
+                    />
+                    <DeleteButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          !(employeeFormState.currentIndexVisa === -1) &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          deleteEmployeeById({ type: 'visa' });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndex === -1) &&
+                        !(employeeFormState.currentIndex === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeeVisa>
+            </template>
+
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck
                 v-if="employeeFormState.currentTab === 'healthCheck'"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index ff106575..12b1e298 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -589,6 +589,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentEmployee: Employee | null;
     currentIndex: number;
     currentIndexPassport: number;
+    currentIndexVisa: number;
     profileUrl: string;
     isEmployeeEdit: boolean;
     profileSubmit: boolean;
@@ -619,6 +620,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     isImageEdit: false,
     currentIndexPassport: -1,
     currentIndex: -1,
+    currentIndexVisa: -1,
     statusSavePersonal: false,
     drawerModal: false,
     imageDialog: false,
@@ -771,6 +773,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
 
   function resetFormDataEmployee(clean = false) {
     state.value.currentIndexPassport = -1;
+    state.value.currentIndexVisa = -1;
     if (clean) {
       state.value.currentTab = 'personalInfo';
       state.value.formDataEmployeeOwner = undefined;
@@ -836,6 +839,56 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state.value.currentIndexPassport = -1;
   }
 
+  async function submitVisa() {
+    if (
+      currentFromDataEmployee.value.employeeVisa?.[
+        state.value.currentIndexVisa
+      ] === undefined
+    )
+      return;
+
+    if (
+      currentFromDataEmployee.value.employeeVisa?.[state.value.currentIndexVisa]
+        .id === undefined
+    ) {
+      const res = await employeeStore.postMeta({
+        parentId: currentFromDataEmployee.value.id || '',
+        group: 'visa',
+        meta: currentFromDataEmployee.value.employeeVisa?.[
+          state.value.currentIndexVisa
+        ],
+      });
+
+      if (res) {
+        currentFromDataEmployee.value.employeeVisa[
+          state.value.currentIndexVisa
+        ].id = res.id;
+      }
+    }
+    if (
+      currentFromDataEmployee.value.employeeVisa?.[state.value.currentIndexVisa]
+        .id !== undefined
+    ) {
+      const { id, ...payload } =
+        currentFromDataEmployee.value.employeeVisa?.[
+          state.value.currentIndexVisa
+        ];
+
+      await employeeStore.putMeta({
+        parentId: currentFromDataEmployee.value.id || '',
+        group: 'visa',
+        metaId:
+          currentFromDataEmployee.value.employeeVisa?.[
+            state.value.currentIndexVisa
+          ].id || '',
+        meta: payload,
+      });
+    }
+
+    await assignFormDataEmployee(currentFromDataEmployee.value.id);
+    state.value.currentIndexPassport = -1;
+  }
+
   async function submitOther() {
     if (!currentFromDataEmployee.value.employeeOtherInfo) return;
 
@@ -881,6 +934,25 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     }
   }
 
+  async function deleteVisa() {
+    const res = await employeeStore.delMeta({
+      parentId: currentFromDataEmployee.value.id || '',
+      group: 'visa',
+      metaId:
+        currentFromDataEmployee.value.employeeVisa?.[
+          state.value.currentIndexVisa
+        ].id || '',
+    });
+
+    if (res) {
+      currentFromDataEmployee.value.employeeVisa?.splice(
+        state.value.currentIndexVisa,
+        1,
+      );
+      await assignFormDataEmployee(currentFromDataEmployee.value.id);
+    }
+  }
+
   async function deleteWorkHistory() {
     if (!currentFromDataEmployee.value.employeeWork) return;
 
@@ -1085,6 +1157,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
               })),
         ),
 
+        employeeVisa: structuredClone(
+          payload.employeeVisa?.length === 0
+            ? defaultFormData.employeeVisa
+            : payload.employeeVisa?.map((item) => ({
+                id: item.id,
+                number: item.number,
+                type: item.type,
+                entryCount: item.entryCount,
+                issueCountry: item.issueCountry,
+                issuePlace: item.issuePlace,
+                issueDate: item.issueDate,
+                expireDate: item.expireDate,
+                mrz: item.mrz || undefined,
+                remark: item.remark || undefined,
+              })),
+        ),
         employeeCheckup: structuredClone(
           payload.employeeCheckup?.length === 0
             ? defaultFormData.employeeCheckup
@@ -1128,6 +1216,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       state.value.currentIndexPassport =
         (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
 
+      state.value.currentIndexVisa =
+        (currentFromDataEmployee.value.employeeVisa?.length || 0) - 1;
+
       if (
         currentFromDataEmployee.value.employeePassport?.[
           state.value.currentIndexPassport
@@ -1135,6 +1226,15 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       ) {
         state.value.currentIndexPassport = -1;
       }
+
+      if (
+        currentFromDataEmployee.value.employeeVisa?.[
+          state.value.currentIndexVisa
+        ].id !== undefined
+      ) {
+        state.value.currentIndexVisa = -1;
+      }
+
       const foundBranch = await customerStore.fetchListCustomerBranchById(
         payload.customerBranchId,
       );
@@ -1197,20 +1297,40 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       (currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
   }
 
+  function addVisa() {
+    currentFromDataEmployee.value.employeeVisa?.push({
+      number: '',
+      type: '',
+      entryCount: 0,
+      issueCountry: '',
+      issuePlace: '',
+      issueDate: new Date(),
+      expireDate: new Date(),
+      mrz: undefined,
+      remark: undefined,
+    });
+
+    state.value.currentIndexVisa =
+      (currentFromDataEmployee.value.employeeVisa?.length || 0) - 1;
+  }
+
   return {
     state,
     currentFromDataEmployee,
     resetEmployeeData,
 
     addPassport,
+    addVisa,
 
     submitPassport,
+    submitVisa,
     submitOther,
     submitWorkHistory,
     submitPersonal,
     submitHealthCheck,
 
     deletePassport,
+    deleteVisa,
     deleteWorkHistory,
     deleteHealthCheck,
 
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 9bf07aba..1e33a36b 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2325,6 +2325,8 @@ async function getInvoiceCodeFullPay() {
                 v-model:visa-issue-date="meta.issueDate"
                 v-model:visa-expiry-date="meta.expireDate"
                 v-model:visa-issuing-place="meta.issuePlace"
+                v-model:entry-count="meta.entryCount"
+                v-model:issue-country="meta.issueCountry"
               />
 
               <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index bb225cfd..68c7d9f8 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -284,6 +284,7 @@ export type NewEmployeeHistory = {
 };
 
 export type EmployeeVisaPayload = {
+  id?: string;
   number: string;
   type: string;
   entryCount: number;