diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 572d66a1..8b912492 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -37,11 +37,13 @@ const expireDate = defineModel<Date>('expireDate');
 const remark = defineModel<string>('remark');
 const workerType = defineModel<string>('workerType');
 const number = defineModel<string>('number');
+const reportDate = defineModel<Date | null | string>('reportDate');
 
-const calculatedVisaDate = computed(() => {
-  if (!issueDate.value) return undefined;
-  return calculate90DayNext(issueDate.value);
-});
+//
+// const calculatedVisaDate = computed(() => {
+//   if (!issueDate.value) return undefined;
+//   return calculate90DayNext(issueDate.value);
+// });
 
 defineProps<{
   title?: string;
@@ -138,6 +140,10 @@ watch(
     );
   },
 );
+//
+// watch([() => issueDate.value], () => {
+//   reportDate.value = calculate90DayNext(issueDate.value);
+// });
 </script>
 
 <template>
@@ -371,10 +377,12 @@ watch(
             <DatePicker
               :id="`${prefixId}-date-picker-visa-issuance`"
               :readonly
-              :disabled="!readonly"
               :label="$t('customerEmployee.form.visa90Day')"
-              :model-value="calculatedVisaDate"
+              v-model="reportDate"
               clearable
+              :rules="[
+                (val) => (val && val.length > 0) || $t('form.error.required'),
+              ]"
             />
           </div>
         </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a9e001cc..88e8a730 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3301,6 +3301,7 @@ const emptyCreateDialog = ref(false);
                     v-model:remark="meta.remark"
                     v-model:worker-type="meta.workerType"
                     v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -3545,6 +3546,7 @@ const emptyCreateDialog = ref(false);
                 v-model:remark="value.remark"
                 v-model:worker-type="value.workerType"
                 v-model:number="value.number"
+                v-model:report-date="value.reportDate"
               >
                 <template v-slot:expiryDate>
                   {{ $t('general.expirationDate') }} :
@@ -5400,6 +5402,7 @@ const emptyCreateDialog = ref(false);
                     v-model:remark="meta.remark"
                     v-model:worker-type="meta.workerType"
                     v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -5665,7 +5668,6 @@ const emptyCreateDialog = ref(false);
                   >
                     <NoData />
                   </div>
-
                   <FormEmployeeVisa
                     v-for="(
                       value, index
@@ -5693,6 +5695,7 @@ const emptyCreateDialog = ref(false);
                     v-model:remark="value.remark"
                     v-model:worker-type="value.workerType"
                     v-model:number="value.number"
+                    v-model:report-date="value.reportDate"
                   >
                     <template v-slot:expiryDate>
                       {{ $t('general.expirationDate') }} :
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index afc6efe2..e3cefea9 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -887,6 +887,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         expireDate: new Date(),
         remark: undefined,
         workerType: '',
+        reportDate: null,
         number: '',
       },
     ],
@@ -1536,6 +1537,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       expireDate: new Date(),
       remark: undefined,
       workerType: '',
+      reportDate: null,
       number: '',
     });
 
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index edee9f41..7e973c23 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -604,11 +604,11 @@ watch(
           solid
           id="btn-success"
           @click="
-            emits('success', {
+            (emits('success', {
               worker: workerSelected,
               newWorker: newWorkerList,
             }),
-              (open = false)
+            (open = false))
           "
         >
           {{ $t('general.select', { msg: $t('quotation.employeeList') }) }}
@@ -1455,6 +1455,7 @@ watch(
                     v-model:remark="meta.remark"
                     v-model:worker-type="meta.workerType"
                     v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -1681,6 +1682,7 @@ watch(
                 v-model:remark="value.remark"
                 v-model:worker-type="value.workerType"
                 v-model:number="value.number"
+                v-model:report-date="value.reportDate"
               >
                 <template v-slot:expiryDate>
                   {{ $t('general.expirationDate') }} :
@@ -1991,8 +1993,8 @@ watch(
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
@@ -2009,9 +2011,9 @@ watch(
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/pages/08_request-list/DocumentExpansion.vue b/src/pages/08_request-list/DocumentExpansion.vue
index 47a69eb2..d262d953 100644
--- a/src/pages/08_request-list/DocumentExpansion.vue
+++ b/src/pages/08_request-list/DocumentExpansion.vue
@@ -582,6 +582,7 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
                             v-model:remark="metadata.remark"
                             v-model:worker-type="metadata.workerType"
                             v-model:visa-number="metadata.doc_number"
+                            v-model:report-date="metadata.reportDate"
                           />
                           <div
                             v-if="isRunning"
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index c479f179..55050a69 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -304,6 +304,7 @@ export type EmployeeVisaPayload = {
   remark?: string;
   workerType: string;
   number: string;
+  reportDate: Date | null;
   id?: string;
 };