diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 7f6d24fe..45e7f3b6 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -143,7 +143,7 @@ function deleteFile(name: string) {
                   name="mdi-close-circle"
                   class="cursor-pointer app-text-muted"
                   size="sm"
-                  @click="startDate = undefined"
+                  @click.stop="startDate = undefined"
                 />
               </template>
             </q-input>
@@ -205,7 +205,7 @@ function deleteFile(name: string) {
                   name="mdi-close-circle"
                   class="cursor-pointer app-text-muted"
                   size="sm"
-                  @click="retireDate = undefined"
+                  @click.stop="retireDate = undefined"
                 />
               </template>
             </q-input>
diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index e257f4aa..b59d6558 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -206,7 +206,7 @@ const branchNo = defineModel<number>('branchNo');
                 ? readonly
                   ? dateFormat(registerDate)
                   : dateFormat(registerDate, false, false, true)
-                : ''
+                : undefined
             "
             @update:model-value="
               (v) => {
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 91a951cf..2bb8f88d 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -165,7 +165,7 @@ onMounted(async () => {
                 ? readonly
                   ? dateFormat(payDate)
                   : dateFormat(payDate, false, false, true)
-                : ''
+                : undefined
             "
             @update:model-value="
               (v) => {
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 7e5d4e47..7a11c727 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -268,9 +268,16 @@ onMounted(async () => {
                 placeholder="DD/MM/YYYY"
                 :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  checkup.coverageStartDate && readonly
-                    ? dateFormat(checkup.coverageStartDate)
-                    : dateFormat(checkup.coverageStartDate, false, false, true)
+                  checkup.coverageStartDate
+                    ? readonly
+                      ? dateFormat(checkup.coverageStartDate)
+                      : dateFormat(
+                          checkup.coverageStartDate,
+                          false,
+                          false,
+                          true,
+                        )
+                    : undefined
                 "
                 @update:model-value="
                   (v) => {
@@ -291,10 +298,10 @@ onMounted(async () => {
                 <template v-slot:append>
                   <q-icon
                     v-if="checkup.coverageStartDate && !readonly"
-                    name="mdi-close"
-                    class="cursor-pointer"
-                    size="xs"
-                    @click="checkup.coverageStartDate = undefined"
+                    name="mdi-close-circle"
+                    class="cursor-pointer app-text-muted"
+                    size="sm"
+                    @click.stop="checkup.coverageStartDate = undefined"
                   />
                 </template>
               </q-input>
@@ -327,9 +334,16 @@ onMounted(async () => {
                 placeholder="DD/MM/YYYY"
                 :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  checkup.coverageExpireDate && readonly
-                    ? dateFormat(checkup.coverageExpireDate)
-                    : dateFormat(checkup.coverageExpireDate, false, false, true)
+                  checkup.coverageExpireDate
+                    ? readonly
+                      ? dateFormat(checkup.coverageExpireDate)
+                      : dateFormat(
+                          checkup.coverageExpireDate,
+                          false,
+                          false,
+                          true,
+                        )
+                    : undefined
                 "
                 @update:model-value="
                   (v) => {
@@ -353,10 +367,10 @@ onMounted(async () => {
                 <template v-slot:append>
                   <q-icon
                     v-if="checkup.coverageExpireDate && !readonly"
-                    name="mdi-close"
-                    class="cursor-pointer"
-                    size="xs"
-                    @click="checkup.coverageExpireDate = undefined"
+                    name="mdi-close-circle"
+                    class="cursor-pointer app-text-muted"
+                    size="sm"
+                    @click.stop="checkup.coverageExpireDate = undefined"
                   />
                 </template>
               </q-input>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 7b0cd91c..fd8c0fa7 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -23,12 +23,14 @@ const addrOptions = reactive<{
 
 const visaType = defineModel<string>('visaType');
 const visaNumber = defineModel<string>('visaNumber');
-const visaIssueDate = defineModel<Date | null>('visaIssueDate');
-const visaExpiryDate = defineModel<Date | null>('visaExpiryDate');
+const visaIssueDate = defineModel<Date | null | string>('visaIssueDate');
+const visaExpiryDate = defineModel<Date | null | string>('visaExpiryDate');
 const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
-const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
+const visaStayUntilDate = defineModel<Date | null | string>(
+  'visaStayUntilDate',
+);
 const tm6Number = defineModel<string>('tm6Number');
-const entryDate = defineModel<Date | null>('entryDate');
+const entryDate = defineModel<Date | null | string>('entryDate');
 
 const visaTypeOption =
   defineModel<{ label: string; value: string }[]>('visaTypeOption');
@@ -123,9 +125,11 @@ onMounted(async () => {
           placeholder="DD/MM/YYYY"
           :mask="readonly ? '' : '##/##/####'"
           :model-value="
-            visaIssueDate && readonly
-              ? dateFormat(visaIssueDate)
-              : dateFormat(visaIssueDate, false, false, true)
+            visaIssueDate
+              ? readonly
+                ? dateFormat(visaIssueDate)
+                : dateFormat(visaIssueDate, false, false, true)
+              : undefined
           "
           @update:model-value="
             (v) => {
@@ -150,9 +154,9 @@ onMounted(async () => {
           <template v-slot:append>
             <q-icon
               v-if="visaIssueDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
               @click="visaIssueDate = undefined"
             />
           </template>
@@ -188,9 +192,11 @@ onMounted(async () => {
           placeholder="DD/MM/YYYY"
           :mask="readonly ? '' : '##/##/####'"
           :model-value="
-            visaExpiryDate && readonly
-              ? dateFormat(visaExpiryDate)
-              : dateFormat(visaExpiryDate, false, false, true)
+            visaExpiryDate
+              ? readonly
+                ? dateFormat(visaExpiryDate)
+                : dateFormat(visaExpiryDate, false, false, true)
+              : undefined
           "
           @update:model-value="
             (v) => {
@@ -215,9 +221,9 @@ onMounted(async () => {
           <template v-slot:append>
             <q-icon
               v-if="visaExpiryDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
               @click="visaExpiryDate = undefined"
             />
           </template>
@@ -267,9 +273,11 @@ onMounted(async () => {
           placeholder="DD/MM/YYYY"
           :mask="readonly ? '' : '##/##/####'"
           :model-value="
-            visaStayUntilDate && readonly
-              ? dateFormat(visaStayUntilDate)
-              : dateFormat(visaStayUntilDate, false, false, true)
+            visaStayUntilDate
+              ? readonly
+                ? dateFormat(visaStayUntilDate)
+                : dateFormat(visaStayUntilDate, false, false, true)
+              : undefined
           "
           @update:model-value="
             (v) => {
@@ -295,9 +303,9 @@ onMounted(async () => {
           <template v-slot:append>
             <q-icon
               v-if="visaStayUntilDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
               @click="visaStayUntilDate = undefined"
             />
           </template>
@@ -346,9 +354,11 @@ onMounted(async () => {
           placeholder="DD/MM/YYYY"
           :mask="readonly ? '' : '##/##/####'"
           :model-value="
-            entryDate && readonly
-              ? dateFormat(entryDate)
-              : dateFormat(entryDate, false, false, true)
+            entryDate
+              ? readonly
+                ? dateFormat(entryDate)
+                : dateFormat(entryDate, false, false, true)
+              : undefined
           "
           @update:model-value="
             (v) => {
@@ -373,10 +383,10 @@ onMounted(async () => {
           <template v-slot:append>
             <q-icon
               v-if="entryDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="entryDate = undefined"
+              name="mdi-close-circle"
+              class="cursor-pointer app-text-muted"
+              size="sm"
+              @click.stop="entryDate = undefined"
             />
           </template>
         </q-input>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index f4416502..db0757e4 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -218,9 +218,11 @@ onMounted(async () => {
                 placeholder="DD/MM/YYYY"
                 :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workEndDate && readonly
-                    ? dateFormat(work.workEndDate)
-                    : dateFormat(work.workEndDate, false, false, true)
+                  work.workEndDate
+                    ? readonly
+                      ? dateFormat(work.workEndDate)
+                      : dateFormat(work.workEndDate, false, false, true)
+                    : undefined
                 "
                 @update:model-value="
                   (v) => {
@@ -241,10 +243,10 @@ onMounted(async () => {
                 <template v-slot:append>
                   <q-icon
                     v-if="work.workEndDate && !readonly"
-                    name="mdi-close"
-                    class="cursor-pointer"
-                    size="xs"
-                    @click="work.workEndDate = undefined"
+                    name="mdi-close-circle"
+                    class="cursor-pointer app-text-muted"
+                    size="sm"
+                    @click.stop="work.workEndDate = undefined"
                   />
                 </template>
               </q-input>
@@ -288,9 +290,11 @@ onMounted(async () => {
                 placeholder="DD/MM/YYYY"
                 :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workPermitIssuDate && readonly
-                    ? dateFormat(work.workPermitIssuDate)
-                    : dateFormat(work.workPermitIssuDate, false, false, true)
+                  work.workPermitIssuDate
+                    ? readonly
+                      ? dateFormat(work.workPermitIssuDate)
+                      : dateFormat(work.workPermitIssuDate, false, false, true)
+                    : undefined
                 "
                 @update:model-value="
                   (v) => {
@@ -311,10 +315,10 @@ onMounted(async () => {
                 <template v-slot:append>
                   <q-icon
                     v-if="work.workPermitIssuDate && !readonly"
-                    name="mdi-close"
-                    class="cursor-pointer"
-                    size="xs"
-                    @click="work.workPermitIssuDate = undefined"
+                    name="mdi-close-circle"
+                    class="cursor-pointer app-text-muted"
+                    size="sm"
+                    @click.stop="work.workPermitIssuDate = undefined"
                   />
                 </template>
               </q-input>
@@ -348,9 +352,16 @@ onMounted(async () => {
                 placeholder="DD/MM/YYYY"
                 :mask="readonly ? '' : '##/##/####'"
                 :model-value="
-                  work.workPermitExpireDate && readonly
-                    ? dateFormat(work.workPermitExpireDate)
-                    : dateFormat(work.workPermitExpireDate, false, false, true)
+                  work.workPermitExpireDate
+                    ? readonly
+                      ? dateFormat(work.workPermitExpireDate)
+                      : dateFormat(
+                          work.workPermitExpireDate,
+                          false,
+                          false,
+                          true,
+                        )
+                    : undefined
                 "
                 @update:model-value="
                   (v) => {
@@ -371,10 +382,10 @@ onMounted(async () => {
                 <template v-slot:append>
                   <q-icon
                     v-if="work.workPermitExpireDate && !readonly"
-                    name="mdi-close"
-                    class="cursor-pointer"
-                    size="xs"
-                    @click="work.workPermitExpireDate = undefined"
+                    name="mdi-close-circle"
+                    class="cursor-pointer app-text-muted"
+                    size="sm"
+                    @click.stop="work.workPermitExpireDate = undefined"
                   />
                 </template>
               </q-input>