From 1bbb5007d3ada5ed053da832fc7593e39ca709a3 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Thu, 25 Jul 2024 14:44:32 +0700
Subject: [PATCH] refactor: add prefixId

---
 .../02_personnel-management/FormAddress.vue   | 25 ++++-----
 .../02_personnel-management/FormPerson.vue    | 27 +++++-----
 .../03_customer-management/AboutComponent.vue | 51 ++++++++++---------
 .../BasicInformation.vue                      | 30 +++++------
 .../ContactInformation.vue                    |  9 ++--
 .../03_customer-management/FormBusiness.vue   | 36 ++++++-------
 .../FormEmployeeHealthCheck.vue               | 13 ++---
 .../FormEmployeeOther.vue                     | 23 +++++----
 .../FormEmployeePassport.vue                  | 19 +++----
 .../FormEmployeeVisa.vue                      | 25 ++++-----
 .../FormEmployeeWorkHistory.vue               | 27 +++++-----
 .../OtherInformation.vue                      |  3 +-
 .../04_product-service/ServiceProperties.vue  | 50 +++++++++---------
 src/components/ProfileUpload.vue              | 14 +++--
 src/components/TabComponent.vue               |  9 ++--
 src/pages/03_customer-management/MainPage.vue | 49 ++++++++++++++++++
 src/pages/04_product-service/MainPage.vue     |  6 ++-
 17 files changed, 241 insertions(+), 175 deletions(-)

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index ae65a00a..a27ad77c 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -17,6 +17,7 @@ defineProps<{
   employee?: boolean;
   disabledRule?: boolean;
   id?: number;
+  prefixId: string;
 }>();
 
 const adrressStore = useAddressStore();
@@ -88,7 +89,7 @@ watch(districtId, fetchSubDistrict);
         style="border-radius: var(--radius-3)"
       >
         <span
-          id="same"
+          :id="`${prefixId}-same`"
           class="q-px-sm q-mr-lg rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,
@@ -100,7 +101,7 @@ watch(districtId, fetchSubDistrict);
           {{ $t('formDialogToggleSameAddress') }}
         </span>
         <span
-          id="custom"
+          :id="`${prefixId}-custom`"
           class="q-px-sm rounded cursor-pointer"
           :class="{
             dark: $q.dark.isActive,
@@ -123,7 +124,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
-          :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
+          :for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
           outlined
           :readonly="readonly || sameWithEmployer"
@@ -142,7 +143,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          :id="`${id !== undefined ? `select-province-${id}` : 'select-province'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           outlined
@@ -169,7 +170,7 @@ watch(districtId, fetchSubDistrict);
         />
 
         <q-select
-          :id="`${id !== undefined ? `select-district-${id}` : 'select-district'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           outlined
@@ -195,7 +196,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          :id="`${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           outlined
@@ -221,7 +222,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
-          :for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
+          :for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
           readonly
@@ -238,7 +239,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
-          :for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
+          :for="`${prefixId}-${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
           outlined
@@ -257,7 +258,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
-          :id="`${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -283,7 +284,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
-          :id="`${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -309,7 +310,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
-          :id="`${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
+          :id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           hide-bottom-space
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -336,7 +337,7 @@ watch(districtId, fetchSubDistrict);
         />
         <q-input
           hide-bottom-space
-          :for="`${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
+          :for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
           readonly
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 877ada8b..52a089f0 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -28,6 +28,7 @@ defineProps<{
   separator?: boolean;
   employee?: boolean;
   title?: string;
+  prefixId: string;
 }>();
 </script>
 <template>
@@ -36,7 +37,7 @@ defineProps<{
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-input
-      for="input-first-name"
+      :for="`${prefixId}-input-first-name`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -49,7 +50,7 @@ defineProps<{
       ]"
     />
     <q-input
-      for="input-last-name"
+      :for="`${prefixId}-input-last-name`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -60,7 +61,7 @@ defineProps<{
       :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
     />
     <q-input
-      for="input-first-name-en"
+      :for="`${prefixId}-input-first-name-en`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -73,7 +74,7 @@ defineProps<{
       ]"
     />
     <q-input
-      for="input-last-name-en"
+      :for="`${prefixId}-input-last-name-en`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -87,7 +88,7 @@ defineProps<{
     />
     <q-input
       v-if="!employee"
-      for="input-telephone"
+      :for="`${prefixId}-input-telephone`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -98,7 +99,7 @@ defineProps<{
     />
     <q-input
       v-if="!employee"
-      for="input-email"
+      :for="`${prefixId}-input-email`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -108,7 +109,7 @@ defineProps<{
     />
     <q-select
       v-if="!employee"
-      id="select-gender"
+      :id="`${prefixId}-select-gender`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -124,8 +125,8 @@ defineProps<{
     />
 
     <VueDatePicker
-      id="input-birth-date"
-      for="input-birth-date"
+      :id="`${prefixId}-input-birth-date`"
+      :for="`${prefixId}-input-birth-date`"
       utc
       autoApply
       v-model="birthDate"
@@ -145,7 +146,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
-          for="input-birth-date"
+          :for="`${prefixId}-input-birth-date`"
           hide-bottom-space
           placeholder="DD/MM/YYYY"
           :label="$t('formDialogInputBirthDate')"
@@ -185,7 +186,7 @@ defineProps<{
       </template>
     </VueDatePicker>
     <q-input
-      for="input-age"
+      :for="`${prefixId}-input-age`"
       :dense="dense"
       outlined
       readonly
@@ -200,7 +201,7 @@ defineProps<{
     />
     <q-select
       v-if="employee"
-      id="select-gender"
+      :id="`${prefixId}-select-gender`"
       hide-bottom-space
       :dense="dense"
       outlined
@@ -221,7 +222,7 @@ defineProps<{
     />
     <q-select
       v-if="employee"
-      id="select-nationality"
+      :id="`${prefixId}-select-nationality`"
       hide-bottom-space
       :dense="dense"
       outlined
diff --git a/src/components/03_customer-management/AboutComponent.vue b/src/components/03_customer-management/AboutComponent.vue
index 801b97ec..f72c08da 100644
--- a/src/components/03_customer-management/AboutComponent.vue
+++ b/src/components/03_customer-management/AboutComponent.vue
@@ -9,6 +9,7 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   typeCustomer?: string;
+  prefixId: string;
 }>();
 const { locale } = useI18n();
 const branchCode = defineModel<string>('branchCode');
@@ -27,8 +28,8 @@ const branchNo = defineModel<number>('branchNo');
     <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        for="input-branchCode"
-        id="input-branchCode"
+        :for="`${prefixId}-input-branch-code`"
+        :id="`${prefixId}-input-branch-code`"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
         outlined
@@ -40,8 +41,8 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
-        for="input-branchCode"
-        id="input-branchCode"
+        :for="`${prefixId}-input-branch-code`"
+        :id="`${prefixId}-input-branch-code`"
         :dense="dense"
         outlined
         :readonly="!!branchCode"
@@ -52,8 +53,8 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
-        for="input-customerName"
-        id="input-customerName"
+        :for="`${prefixId}-input-customer-name`"
+        :id="`${prefixId}-input-customer-name`"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
         outlined
@@ -65,8 +66,8 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
-        for="input-customerEnglishName"
-        id="input-customerEnglishName"
+        :for="`${prefixId}-input-customer-english-name`"
+        :id="`${prefixId}-input-customer-english-name`"
         v-if="typeCustomer === 'PERS'"
         :dense="dense"
         outlined
@@ -79,8 +80,8 @@ const branchNo = defineModel<number>('branchNo');
 
       <div class="row q-col-gutter-md">
         <q-input
-          for="input-branchCode"
-          id="input-branchCode"
+          :for="`${prefixId}-input-branch-code`"
+          :id="`${prefixId}-input-branch-code`"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           outlined
@@ -91,8 +92,8 @@ const branchNo = defineModel<number>('branchNo');
           v-model="branchCode"
         />
         <q-input
-          for="input-legalEntityCode"
-          id="input-legalEntityCode"
+          :for="`${prefixId}-input-legal-entity-code`"
+          :id="`${prefixId}-input-legal-entity-code`"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           outlined
@@ -104,8 +105,8 @@ const branchNo = defineModel<number>('branchNo');
         />
 
         <q-input
-          for="input-customerEnglishName"
-          id="input-customerEnglishName"
+          :for="`${prefixId}-input-customer-english-name`"
+          :id="`${prefixId}-input-customer-english-name`"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           outlined
@@ -117,8 +118,8 @@ const branchNo = defineModel<number>('branchNo');
         />
 
         <q-input
-          for="input-customerName"
-          id="input-customerName"
+          :for="`${prefixId}-input-customer-name`"
+          :id="`${prefixId}-input-customer-name`"
           v-if="typeCustomer === 'CORP'"
           :dense="dense"
           outlined
@@ -131,8 +132,8 @@ const branchNo = defineModel<number>('branchNo');
       </div>
 
       <q-input
-        for="input-taxNo"
-        id="input-taxNo"
+        :for="`${prefixId}-input-tax-no`"
+        :id="`${prefixId}-input-tax-no`"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         outlined
@@ -148,8 +149,8 @@ const branchNo = defineModel<number>('branchNo');
         ]"
       />
       <q-input
-        for="input-registerName"
-        id="input-registerName"
+        :for="`${prefixId}-input-register-name`"
+        :id="`${prefixId}-input-register-name`"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         outlined
@@ -160,8 +161,8 @@ const branchNo = defineModel<number>('branchNo');
         v-model="registerName"
       />
       <q-input
-        for="input-authorizedCapital"
-        id="input-authorizedCapital"
+        :for="`${prefixId}-input-authorized-capital`"
+        :id="`${prefixId}-input-authorized-capital`"
         v-if="typeCustomer === 'CORP'"
         :dense="dense"
         outlined
@@ -172,7 +173,7 @@ const branchNo = defineModel<number>('branchNo');
         v-model="authorizedCapital"
       />
       <VueDatePicker
-        id="date-picker-date"
+        :id="`${prefixId}-date-picker-date`"
         v-if="typeCustomer === 'CORP'"
         :teleport="true"
         utc
@@ -192,8 +193,8 @@ const branchNo = defineModel<number>('branchNo');
         </template>
         <template #trigger>
           <q-input
-            for="input-start-date"
-            id="input-start-date"
+            :for="`${prefixId}-input-start-date`"
+            :id="`${prefixId}-input-start-date`"
             :label="$t('registerDate')"
             :dense="dense"
             outlined
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 357dc1de..df1f1be5 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -32,8 +32,8 @@ const props = defineProps<{
   typeCustomer?: string;
   employee?: boolean;
   optionsBranch?: { id: string; name: string }[];
-
   employeeOwnerOption?: CustomerBranch[];
+  prefixId: string;
 }>();
 
 defineEmits<{
@@ -47,7 +47,7 @@ defineEmits<{
   </div>
   <div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      id="input-source-nationality"
+      :id="`${prefixId}-input-source-nationality`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -75,8 +75,8 @@ defineEmits<{
     />
 
     <q-input
-      for="input-employer-id"
-      id="input-employer-id"
+      :for="`${prefixId}-input-employer-id`"
+      :id="`${prefixId}-input-employer-id`"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
       outlined
@@ -87,8 +87,8 @@ defineEmits<{
       v-model="personName"
     />
     <q-input
-      for="input-tax-no"
-      id="input-tax-no"
+      :for="`${prefixId}-input-tax-no`"
+      :id="`${prefixId}-input-tax-no`"
       v-if="typeCustomer === 'PERS'"
       :dense="dense"
       outlined
@@ -105,8 +105,8 @@ defineEmits<{
     />
 
     <q-input
-      for="input-customer-name"
-      id="input-customer-name"
+      :for="`${prefixId}-input-customer-name`"
+      :id="`${prefixId}-input-customer-name`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -118,8 +118,8 @@ defineEmits<{
       v-model="customerName"
     />
     <q-input
-      for="input-customer-name-en"
-      id="input-customer-name-en"
+      :for="`${prefixId}-input-customer-name-en`"
+      :id="`${prefixId}-input-customer-name-en`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -137,7 +137,7 @@ defineEmits<{
 
     <q-input
       v-if="typeCustomer !== 'PERS'"
-      for="input-owner-name"
+      :for="`${prefixId}-input-owner-name`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -150,7 +150,7 @@ defineEmits<{
 
   <div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      for="select-employer-branch"
+      :for="`${prefixId}-select-employer-branch`"
       :use-input="!customerBranch"
       input-debounce="0"
       :hide-dropdown-icon="readonly"
@@ -354,7 +354,7 @@ defineEmits<{
       </template>
     </q-select>
     <q-input
-      for="input-employeeID"
+      :for="`${prefixId}-input-employee-id`"
       :dense="dense"
       outlined
       :readonly="true"
@@ -366,7 +366,7 @@ defineEmits<{
 
     <q-input
       v-if="readonly && !nrcNo"
-      for="input-nrcNo"
+      :for="`${prefixId}-input-nrc-no`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -378,7 +378,7 @@ defineEmits<{
     <q-input
       v-else
       mask="## #### ###### #"
-      for="input-nrcNo"
+      :for="`${prefixId}-input-nrc-no`"
       :dense="dense"
       outlined
       hide-bottom-space
diff --git a/src/components/03_customer-management/ContactInformation.vue b/src/components/03_customer-management/ContactInformation.vue
index 605acc64..75a72859 100644
--- a/src/components/03_customer-management/ContactInformation.vue
+++ b/src/components/03_customer-management/ContactInformation.vue
@@ -5,6 +5,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  prefixId: string;
 }>();
 
 const mail = defineModel<string>('mail');
@@ -16,8 +17,8 @@ const telephone = defineModel<string>('telephone');
     <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleContact`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        for="input-mail"
-        id="input-mail"
+        :for="`${prefixId}-input-mail`"
+        :id="`${prefixId}-input-mail`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -27,8 +28,8 @@ const telephone = defineModel<string>('telephone');
         v-model="mail"
       />
       <q-input
-        for="input-telephone"
-        id="input-telephone"
+        :for="`${prefixId}-input-telephone`"
+        :id="`${prefixId}-input-telephone`"
         :dense="dense"
         outlined
         :readonly="readonly"
diff --git a/src/components/03_customer-management/FormBusiness.vue b/src/components/03_customer-management/FormBusiness.vue
index 62f909fc..9439f8d6 100644
--- a/src/components/03_customer-management/FormBusiness.vue
+++ b/src/components/03_customer-management/FormBusiness.vue
@@ -30,6 +30,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  prefixId: string;
 }>();
 
 onMounted(async () => {
@@ -51,8 +52,8 @@ onMounted(async () => {
     <div class="col-3 app-text-muted">• {{ $t('businessInformation') }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-input
-        for="input-employment-office"
-        id="input-employment-office"
+        :for="`${prefixId}-input-employment-office`"
+        :id="`${prefixId}-input-employment-office`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -63,7 +64,7 @@ onMounted(async () => {
       />
 
       <q-select
-        id="select-business-type"
+        :id="`${prefixId}-select-business-type`"
         emit-value
         option-value="value"
         option-label="label"
@@ -78,8 +79,8 @@ onMounted(async () => {
       />
 
       <q-input
-        for="input-bussiness-type-en"
-        id="input-bussiness-type-en"
+        :for="`${prefixId}-input-bussiness-type-en`"
+        :id="`${prefixId}-input-bussiness-type-en`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -90,7 +91,8 @@ onMounted(async () => {
       />
 
       <q-select
-        id="select-job-position"
+        :for="`${prefixId}-select-job-position`"
+        :id="`${prefixId}-select-job-position`"
         emit-value
         option-value="value"
         option-label="label"
@@ -105,8 +107,8 @@ onMounted(async () => {
       />
 
       <q-input
-        for="input-job-position-en"
-        id="input-job-position-en"
+        :for="`${prefixId}-input-job-position-en`"
+        :id="`${prefixId}-input-job-position-en`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -117,8 +119,8 @@ onMounted(async () => {
       />
 
       <q-input
-        for="input-job-description"
-        id="input-job-description"
+        :for="`${prefixId}-input-job-description`"
+        :id="`${prefixId}-input-job-description`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -129,7 +131,7 @@ onMounted(async () => {
       />
 
       <VueDatePicker
-        id="date-picker-start-date"
+        :id="`${prefixId}-date-picker-start-date`"
         :teleport="true"
         utc
         autoApply
@@ -148,8 +150,8 @@ onMounted(async () => {
         </template>
         <template #trigger>
           <q-input
-            for="input-start-date"
-            id="input-start-date"
+            :for="`${prefixId}-input-start-date`"
+            :id="`${prefixId}-input-start-date`"
             :label="$t('payDay')"
             :dense="dense"
             outlined
@@ -191,8 +193,8 @@ onMounted(async () => {
       </VueDatePicker>
 
       <q-input
-        for="input-pay-rate"
-        id="input-pay-rate"
+        :for="`${prefixId}-input-pay-rate`"
+        :id="`${prefixId}-input-pay-rate`"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -203,8 +205,8 @@ onMounted(async () => {
       />
 
       <q-input
-        for="input-sales-person"
-        id="input-sales-person"
+        :for="`${prefixId}-input-sales-person`"
+        :id="`${prefixId}-input-sales-person`"
         :dense="dense"
         outlined
         :readonly="readonly"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 1ab47bbb..f3ef864f 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -41,6 +41,7 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   typeCustomer?: string;
+  prefixId: string;
 }>();
 
 async function fetchProvince() {
@@ -120,7 +121,7 @@ onMounted(async () => {
               v-if="!readonly && employeeCheckup?.length !== 1"
               round
               flat
-              id="closeDialog"
+              :id="`${prefixId}-closeDialog`"
               size="sm"
               icon="mdi-close"
               padding="xs"
@@ -155,7 +156,7 @@ onMounted(async () => {
             v-model="checkup.checkupResult"
           />
           <q-select
-            id="select-province"
+            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -172,7 +173,7 @@ onMounted(async () => {
             lazy-rules
           />
           <q-select
-            id="select-province"
+            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -208,7 +209,7 @@ onMounted(async () => {
             type="textarea"
           />
           <q-select
-            id="select-province"
+            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -225,7 +226,7 @@ onMounted(async () => {
             lazy-rules
           />
           <q-select
-            id="select-province"
+            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -260,7 +261,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
-                id="input-birth-date"
+                :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputCoverageStartDate')"
                 :dense="dense"
                 outlined
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 9f70d5ad..b0982fa1 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -7,6 +7,7 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   employee?: boolean;
+  prefixId: string;
 }>();
 const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
 </script>
@@ -20,7 +21,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       <div class="col-3 q-pl-xl"></div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-citizenId"
+          :for="`${prefixId}-input-citizen-id`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -36,7 +37,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-father-first-name"
+          :for="`${prefixId}-input-father-first-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -46,7 +47,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherFirstName"
         />
         <q-input
-          for="input-father-last-name"
+          :for="`${prefixId}-input-father-last-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -56,7 +57,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherLastName"
         />
         <q-input
-          for="input-father-first-name-en"
+          :for="`${prefixId}-input-father-first-name-en`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -66,7 +67,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherFirstNameEN"
         />
         <q-input
-          for="input-father-last-name-en"
+          :for="`${prefixId}-input-father-last-name-en`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -76,7 +77,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherLastNameEN"
         />
         <q-input
-          for="input-father-birthplace"
+          :for="`${prefixId}-input-father-birthplace`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -92,7 +93,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       </div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
-          for="input-mother-first-name"
+          :for="`${prefixId}-input-mother-first-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -102,7 +103,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherFirstName"
         />
         <q-input
-          for="input-mother-last-name"
+          :for="`${prefixId}-input-mother-last-name`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -112,7 +113,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherLastName"
         />
         <q-input
-          for="input-mother-first-name-en"
+          :for="`${prefixId}-input-mother-first-name-en`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -122,7 +123,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherFirstNameEN"
         />
         <q-input
-          for="input-mother-last-name-en"
+          :for="`${prefixId}-input-mother-last-name-en`"
           :dense="dense"
           outlined
           :readonly="readonly"
@@ -132,7 +133,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherLastNameEN"
         />
         <q-input
-          for="input-mother-birthplace"
+          :for="`${prefixId}-input-mother-birthplace`"
           :dense="dense"
           outlined
           :readonly="readonly"
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 004dc2ca..dc387595 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -25,6 +25,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  prefixId: string;
 }>();
 </script>
 
@@ -34,7 +35,7 @@ defineProps<{
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      id="select-passport-type"
+      :id="`${prefixId}-select-passport-type`"
       :dense="dense"
       :readonly="readonly"
       outlined
@@ -55,7 +56,7 @@ defineProps<{
       ]"
     />
     <q-input
-      for="input-passport-no"
+      :for="`${prefixId}-input-passport-no`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -69,7 +70,7 @@ defineProps<{
       ]"
     />
     <q-input
-      for="input-passport-ref"
+      :for="`${prefixId}-input-passport-ref`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -79,7 +80,7 @@ defineProps<{
       v-model="previousPassportReference"
     />
     <q-input
-      for="input-passport-place"
+      :for="`${prefixId}-input-passport-place`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -93,7 +94,7 @@ defineProps<{
       ]"
     />
     <q-select
-      id="select-passport-country"
+      :id="`${prefixId}-select-passport-country`"
       :dense="dense"
       :readonly="readonly"
       outlined
@@ -114,7 +115,7 @@ defineProps<{
       ]"
     />
     <VueDatePicker
-      id="date-picker-passport-issueance"
+      :id="`${prefixId}-date-picker-passport-issueance`"
       utc
       autoApply
       v-model="passportIssueDate"
@@ -133,7 +134,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputPassportIssuance')"
           :dense="dense"
@@ -171,7 +172,7 @@ defineProps<{
       </template>
     </VueDatePicker>
     <VueDatePicker
-      id="date-picker-passport-expire"
+      :id="`${prefixId}-date-picker-passport-expire`"
       utc
       autoApply
       v-model="passportExpiryDate"
@@ -190,7 +191,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputPassportExpire')"
           :dense="dense"
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 3c6fff16..7b0cd91c 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -40,6 +40,7 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   typeCustomer?: string;
+  prefixId: string;
 }>();
 
 async function fetchProvince() {
@@ -59,7 +60,7 @@ onMounted(async () => {
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
-      id="select-visa-type"
+      :id="`${prefixId}-select-visa-type`"
       :dense="dense"
       :readonly="readonly"
       outlined
@@ -80,7 +81,7 @@ onMounted(async () => {
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
       ]" -->
     <q-input
-      for="input-visa-no"
+      :for="`${prefixId}-input-visa-no`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -94,7 +95,7 @@ onMounted(async () => {
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
       ]" -->
     <VueDatePicker
-      id="date-picker-visa-issuance"
+      :id="`${prefixId}-date-picker-visa-issuance`"
       utc
       autoApply
       v-model="visaIssueDate"
@@ -113,7 +114,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaIssuance')"
           :dense="dense"
@@ -159,7 +160,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <VueDatePicker
-      id="date-picker-visa-expire"
+      :id="`${prefixId}-date-picker-visa-expire`"
       utc
       autoApply
       v-model="visaExpiryDate"
@@ -178,7 +179,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaExpire')"
           :dense="dense"
@@ -224,7 +225,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <q-input
-      for="input-visa-place"
+      :for="`${prefixId}-input-visa-place`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -238,7 +239,7 @@ onMounted(async () => {
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
       ]" -->
     <VueDatePicker
-      id="date-picker-visa-until"
+      :id="`${prefixId}-date-picker-visa-until`"
       utc
       autoApply
       v-model="visaStayUntilDate"
@@ -257,7 +258,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaStayUntil')"
           :dense="dense"
@@ -304,7 +305,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <q-input
-      for="input-tm6"
+      :for="`${prefixId}-input-tm6`"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -318,7 +319,7 @@ onMounted(async () => {
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
       ]" -->
     <VueDatePicker
-      id="date-picker-visa-enter"
+      :id="`${prefixId}-date-picker-visa-enter`"
       utc
       autoApply
       v-model="entryDate"
@@ -337,7 +338,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
-          id="input-birth-date"
+          :id="`${prefixId}-input-birth-date`"
           :label="$t('formDialogInputVisaEnter')"
           :dense="dense"
           outlined
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 080f78e9..e8ca0dbe 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -22,6 +22,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  prefixId: string;
 }>();
 
 function addData() {
@@ -91,7 +92,7 @@ onMounted(async () => {
               v-if="!readonly && employeeWork?.length !== 1"
               round
               flat
-              id="closeDialog"
+              :id="`${prefixId}-close-dialog`"
               size="sm"
               icon="mdi-close"
               padding="xs"
@@ -115,7 +116,7 @@ onMounted(async () => {
         <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
         <div class="col-9 row q-col-gutter-md">
           <q-input
-            for="input-ownerName"
+            :for="`${prefixId}-input-owner-name`"
             :dense="dense"
             outlined
             :readonly="readonly"
@@ -125,7 +126,7 @@ onMounted(async () => {
             v-model="work.ownerName"
           />
           <q-select
-            id="select-positionName"
+            :id="`${prefixId}-select-position-name`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -142,7 +143,7 @@ onMounted(async () => {
             lazy-rules
           />
           <q-select
-            id="select-jobType"
+            :id="`${prefixId}-select-job-type`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -159,7 +160,7 @@ onMounted(async () => {
             lazy-rules
           />
           <q-select
-            id="select-province"
+            :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
             outlined
@@ -176,7 +177,7 @@ onMounted(async () => {
             lazy-rules
           />
           <q-input
-            for="input-workEndDate"
+            :for="`${prefixId}-input-work-end-date`"
             :label="$t('formDialogInputRemark')"
             :dense="dense"
             outlined
@@ -187,7 +188,7 @@ onMounted(async () => {
             type="textarea"
           />
           <VueDatePicker
-            id="date-picker-workEndDate"
+            :id="`${prefixId}-date-picker-work-end-date`"
             utc
             autoApply
             v-model="work.workEndDate"
@@ -206,7 +207,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
-                id="input-birth-date"
+                :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkUntil')"
                 :dense="dense"
                 outlined
@@ -247,7 +248,7 @@ onMounted(async () => {
             </template>
           </VueDatePicker>
           <q-input
-            for="input-workPermitNo"
+            :for="`${prefixId}-input-work-permit-no`"
             :dense="dense"
             outlined
             :readonly="readonly"
@@ -257,7 +258,7 @@ onMounted(async () => {
             v-model="work.workPermitNo"
           />
           <VueDatePicker
-            id="date-picker-workPermitIssuDate"
+            :id="`${prefixId}-date-picker-work-permit-issu-date`"
             utc
             autoApply
             v-model="work.workPermitIssuDate"
@@ -276,7 +277,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
-                id="input-birth-date"
+                :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkPermitIssueDate')"
                 :dense="dense"
                 outlined
@@ -317,7 +318,7 @@ onMounted(async () => {
             </template>
           </VueDatePicker>
           <VueDatePicker
-            id="date-picker-workPermitExpireDate"
+            :id="`${prefixId}-date-picker-work-permit-expire-date`"
             utc
             autoApply
             v-model="work.workPermitExpireDate"
@@ -336,7 +337,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
-                id="input-birth-date"
+                :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkPermitExpireDate')"
                 :dense="dense"
                 outlined
diff --git a/src/components/03_customer-management/OtherInformation.vue b/src/components/03_customer-management/OtherInformation.vue
index 6a1d78e3..1e3b1773 100644
--- a/src/components/03_customer-management/OtherInformation.vue
+++ b/src/components/03_customer-management/OtherInformation.vue
@@ -6,6 +6,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  prefixId: string;
 }>();
 
 const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
@@ -16,7 +17,7 @@ const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
     <div class="col-3 app-text-muted">• {{ $t(`otherDocument`) }}</div>
     <div class="col-9 row q-col-gutter-md">
       <q-file
-        id="input-attchment"
+        :id="`${prefixId}-input-attchment`"
         :dense="dense"
         outlined
         :readonly="readonly"
diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index c663a918..cf144068 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -16,6 +16,22 @@ const { t } = useI18n();
 const propertiesOption = defineModel<Option[]>('propertiesOption');
 const formServiceProperties = defineModel<Attributes>('formServiceProperties');
 
+// const abilitys = ref<Record<AdditionalType, Ability[AdditionalType]>>({
+//   string: { phoneNumber: { length: 10 } },
+//   number: { comma: true, decimal: { point: 2 } },
+//   date: '2024-07-25',
+//   array: ['item1', 'item2'],
+// });
+
+const abilitys = ref<Ability[]>([
+  {
+    string: { phoneNumber: { length: 10 } },
+    number: { comma: true, decimal: { point: 2 } },
+    date: '2024-07-25',
+    array: ['item1', 'item2'],
+  },
+]);
+
 const telMax = ref();
 const pointNum = ref();
 
@@ -51,13 +67,6 @@ const typeOption = ref([
   },
 ]);
 
-const abilitys = ref<Record<AdditionalType, Ability[AdditionalType]>>({
-  string: { phoneNumber: { length: 10 } },
-  number: { comma: true, decimal: { point: 2 } },
-  date: '2024-07-25',
-  array: ['item1', 'item2'],
-});
-
 function manageProperties(properties?: string, type?: string | AdditionalType) {
   if (properties === 'all' && propertiesOption.value) {
     if (
@@ -75,17 +84,7 @@ function manageProperties(properties?: string, type?: string | AdditionalType) {
         formServiceProperties.value?.additional.push({
           fieldName: ops.value,
           type: ops.type as AdditionalType,
-          ability: {
-            string:
-              ops.type === 'string' ? abilitys.value['string'] : undefined,
-            number:
-              ops.type === 'number' ? abilitys.value['number'] : undefined,
-            date: ops.type === 'date' ? abilitys.value['date'] : undefined,
-            array: ops.type === 'array' ? abilitys.value['array'] : undefined,
-          },
         });
-
-        console.log(abilitys.value['number']);
       }
     });
     return;
@@ -102,12 +101,6 @@ function manageProperties(properties?: string, type?: string | AdditionalType) {
       formServiceProperties.value.additional.push({
         fieldName: properties ?? null,
         type: type as AdditionalType,
-        ability: {
-          string: type === 'string' ? abilitys.value['string'] : undefined,
-          number: type === 'number' ? abilitys.value['number'] : undefined,
-          date: type === 'date' ? abilitys.value['date'] : undefined,
-          array: type === 'array' ? abilitys.value['array'] : undefined,
-        },
       });
     }
   }
@@ -149,6 +142,17 @@ function confirmDelete(items: unknown[], index: number) {
     cancel: () => {},
   });
 }
+
+// function addProperties() {
+//   formServiceProperties.value?.additional.forEach((item, i) => {
+//     if (!!formServiceProperties.value?.additional) {
+//       formServiceProperties.value.additional[i] = {
+//         ...item,
+//         ability: abilitys.value[i],
+//       };
+//     }
+//   });
+// }
 </script>
 <template>
   <div class="full-width column no-wrap">
diff --git a/src/components/ProfileUpload.vue b/src/components/ProfileUpload.vue
index bf686f01..c6f29de6 100644
--- a/src/components/ProfileUpload.vue
+++ b/src/components/ProfileUpload.vue
@@ -12,6 +12,7 @@ withDefaults(
     labelStatusToggle?: string;
     hideToggle?: boolean;
     readonly?: boolean;
+    prefixId: string;
   }>(),
   {
     hideToggle: true,
@@ -26,10 +27,7 @@ defineEmits<{
 
 <template>
   <div class="text-center">
-    <div
-      class="upload-img-preview"
-      :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vw'"
-    >
+    <div :style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vw'">
       <q-img
         v-if="urlProfile"
         :src="urlProfile"
@@ -70,7 +68,7 @@ defineEmits<{
       </div>
       <div class="col-6">
         <q-btn
-          id="btn-profile-save"
+          :id="`${prefixId}-btn-profile-save`"
           dense
           unelevated
           outlined
@@ -82,7 +80,7 @@ defineEmits<{
       </div>
     </div>
     <q-btn
-      id="btn-profile-edit"
+      :id="`${prefixId}-btn-profile-edit`"
       v-else-if="urlProfile && profileSubmit && !readonly"
       dense
       unelevated
@@ -95,7 +93,7 @@ defineEmits<{
     />
 
     <q-btn
-      id="btn-profile-upload"
+      :id="`${prefixId}-btn-profile-upload`"
       v-if="!urlProfile && !readonly"
       dense
       unelevated
@@ -109,7 +107,7 @@ defineEmits<{
     <q-separator class="col-12 q-my-lg" />
     <div class="text-left q-pb-md" v-if="hideToggle">
       <q-toggle
-        id="toggle-status"
+        :id="`${prefixId}-toggle-status`"
         dense
         size="md"
         v-model="statusToggle"
diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
index f4f74557..5c423f98 100644
--- a/src/components/TabComponent.vue
+++ b/src/components/TabComponent.vue
@@ -5,6 +5,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 defineProps<{
   readonly?: boolean;
   edit?: boolean;
+  prefixId: string;
 }>();
 
 const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
@@ -69,7 +70,7 @@ function close(index: number) {
 <template>
   <div class="row no-wrap">
     <q-btn
-      id="btn-add"
+      :id="`${prefixId}-btn-add`"
       class="q-px-lg bordered-b bordered-r app-text-muted"
       flat
       :color="$q.dark.isActive ? 'primary' : ''"
@@ -90,7 +91,7 @@ function close(index: number) {
       style="background-color: var(--_body-bg); max-width: 55vw"
     >
       <q-tab
-        :id="`tab-branch-${index}`"
+        :id="`${prefixId}-tab-branch-${index}`"
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
@@ -103,7 +104,7 @@ function close(index: number) {
         <q-btn
           round
           flat
-          :id="`close-tab-${index}`"
+          :id="`${prefixId}-close-tab-${index}`"
           icon="mdi-close"
           padding="xs"
           color="red"
@@ -117,7 +118,7 @@ function close(index: number) {
   <div class="column seprarator-fix">
     <q-tab-panels v-model="tab" class="rounded-borders">
       <q-tab-panel
-        :id="`tab-branch-${index}`"
+        :id="`${prefixId}-tab-branch-${index}`"
         v-for="(v, index) in customerBranch.sort(
           (a, b) => (a.branchNo ?? 0) - (b.branchNo ?? 0),
         )"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index eff2573a..d1df57a7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2952,6 +2952,7 @@ watch(isMainPage, () => {
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog"
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"
@@ -2965,6 +2966,7 @@ watch(isMainPage, () => {
         dense
         outlined
         separator
+        prefix-id="form-dialog"
         :type-customer="customerType"
         :options-branch="branchOption"
         v-model:registered-branch-id="formData.registeredBranchId"
@@ -2984,11 +2986,13 @@ watch(isMainPage, () => {
 
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
+          prefix-id="form-dialog"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
           <template #address>
             <FormAddress
+              prefix-id="form-dialog"
               :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
@@ -3010,6 +3014,7 @@ watch(isMainPage, () => {
 
           <template #businessInformation>
             <FormBusiness
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3046,6 +3051,7 @@ watch(isMainPage, () => {
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
+              prefix-id="form-dialog"
               :type-customer="customerType"
               v-model:branch-no="formData.customerBranch[indexTab].branchNo"
               v-model:tax-no="formData.customerBranch[indexTab].taxNo"
@@ -3069,6 +3075,7 @@ watch(isMainPage, () => {
           </template>
           <template #contactInformation>
             <ContactComponent
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3081,6 +3088,7 @@ watch(isMainPage, () => {
           </template>
           <template #otherDocuments>
             <OtherInformation
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3129,6 +3137,7 @@ watch(isMainPage, () => {
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog"
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
         v-model:profile-submit="profileSubmit"
@@ -3139,6 +3148,7 @@ watch(isMainPage, () => {
 
     <template #information>
       <BasicInformation
+        prefix-id="form-dialog"
         v-if="formDataEmployeeTab === 'personalInfo'"
         employee
         dense
@@ -3155,6 +3165,7 @@ watch(isMainPage, () => {
 
     <template #person>
       <FormPerson
+        prefix-id="form-dialog"
         v-if="formDataEmployeeTab === 'personalInfo'"
         dense
         outlined
@@ -3171,6 +3182,7 @@ watch(isMainPage, () => {
       />
 
       <FormEmployeeHealthCheck
+        prefix-id="form-dialog"
         v-if="
           formDataEmployeeTab === 'healthCheck' &&
           formDataEmployee.employeeCheckup
@@ -3185,6 +3197,7 @@ watch(isMainPage, () => {
         "
       />
       <FormEmployeeWorkHistory
+        prefix-id="form-dialog"
         v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
@@ -3194,6 +3207,7 @@ watch(isMainPage, () => {
         v-model:workplace-option="optionStore.globalOption.area"
       />
       <FormEmployeeOther
+        prefix-id="form-dialog"
         v-if="
           formDataEmployeeTab === 'other' && formDataEmployee.employeeOtherInfo
         "
@@ -3204,6 +3218,7 @@ watch(isMainPage, () => {
     </template>
     <template #by-type>
       <FormEmployeePassport
+        prefix-id="form-dialog"
         v-if="formDataEmployeeTab === 'personalInfo'"
         dense
         outlined
@@ -3225,6 +3240,7 @@ watch(isMainPage, () => {
         "
       />
       <FormEmployeeVisa
+        prefix-id="form-dialog"
         v-if="formDataEmployeeTab === 'personalInfo'"
         dense
         outlined
@@ -3260,11 +3276,13 @@ watch(isMainPage, () => {
 
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
+          prefix-id="form-dialog-branch"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
           <template #address>
             <FormAddress
+              prefix-id="form-dialog-branch"
               :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
@@ -3285,6 +3303,7 @@ watch(isMainPage, () => {
 
           <template #businessInformation>
             <FormBusiness
+              prefix-id="form-dialog-branch"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3318,6 +3337,7 @@ watch(isMainPage, () => {
           </template>
           <template #about>
             <AboutComponent
+              prefix-id="form-dialog-branch"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3343,6 +3363,7 @@ watch(isMainPage, () => {
           </template>
           <template #contactInformation>
             <ContactComponent
+              prefix-id="form-dialog-branch"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3355,6 +3376,7 @@ watch(isMainPage, () => {
           </template>
           <template #otherDocuments>
             <OtherInformation
+              prefix-id="form-dialog-branch"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3391,11 +3413,13 @@ watch(isMainPage, () => {
 
       <div class="col-12 row bordered q-pt-none rounded">
         <TabComponent
+          prefix-id="form-dialog"
           v-model:customer-branch="formData.customerBranch"
           v-model:tab-index="indexTab"
         >
           <template #address>
             <FormAddress
+              prefix-id="form-dialog"
               :id="indexTab"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
@@ -3416,6 +3440,7 @@ watch(isMainPage, () => {
 
           <template #businessInformation>
             <FormBusiness
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3449,6 +3474,7 @@ watch(isMainPage, () => {
           </template>
           <template #about>
             <AboutComponent
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3478,6 +3504,7 @@ watch(isMainPage, () => {
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
+              prefix-id="form-dialog"
               v-model:mail="formData.customerBranch[indexTab].email"
               v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
               dense
@@ -3487,6 +3514,7 @@ watch(isMainPage, () => {
           </template>
           <template #otherDocuments>
             <OtherInformation
+              prefix-id="form-dialog"
               v-if="
                 indexTab !== undefined && formData.customerBranch?.[indexTab]
               "
@@ -3559,6 +3587,7 @@ watch(isMainPage, () => {
         </template>
         <template #information>
           <BasicInformation
+            prefix-id="drawer-info-customer"
             dense
             outlined
             separator
@@ -3580,12 +3609,14 @@ watch(isMainPage, () => {
 
           <div class="col-12 row bordered q-pt-none rounded">
             <TabComponent
+              prefix-id="drawer-info-customer"
               :readonly="!infoDrawerEdit"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"
             >
               <template #address>
                 <FormAddress
+                  prefix-id="drawer-info-customer"
                   :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
@@ -3614,6 +3645,7 @@ watch(isMainPage, () => {
 
               <template #businessInformation>
                 <FormBusiness
+                  prefix-id="drawer-info-customer"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3649,6 +3681,7 @@ watch(isMainPage, () => {
               </template>
               <template #about>
                 <AboutComponent
+                  prefix-id="drawer-info-customer"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3681,6 +3714,7 @@ watch(isMainPage, () => {
               </template>
               <template #contactInformation>
                 <ContactComponent
+                  prefix-id="drawer-info-customer"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3697,6 +3731,7 @@ watch(isMainPage, () => {
               </template>
               <template #otherDocuments>
                 <OtherInformation
+                  prefix-id="drawer-info-customer"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3782,6 +3817,7 @@ watch(isMainPage, () => {
         </template>
         <template #information>
           <BasicInformation
+            prefix-id="drawer-info-customer-branch"
             dense
             outlined
             separator
@@ -3803,6 +3839,7 @@ watch(isMainPage, () => {
 
           <div class="col-12 row bordered q-pt-none rounded">
             <TabComponent
+              prefix-id="drawer-info-customer-branch"
               :edit="true"
               :readonly="true"
               v-model:customer-branch="formData.customerBranch"
@@ -3810,6 +3847,7 @@ watch(isMainPage, () => {
             >
               <template #address>
                 <FormAddress
+                  prefix-id="drawer-info-customer-branch"
                   :id="indexTab"
                   v-if="
                     indexTab !== undefined &&
@@ -3838,6 +3876,7 @@ watch(isMainPage, () => {
 
               <template #businessInformation>
                 <FormBusiness
+                  prefix-id="drawer-info-customer-branch"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3873,6 +3912,7 @@ watch(isMainPage, () => {
               </template>
               <template #about>
                 <AboutComponent
+                  prefix-id="drawer-info-customer-branch"
                   v-if="formData.customerBranch?.[0]"
                   :type-customer="customerType"
                   v-model:branch-code="formData.customerBranch[indexTab].code"
@@ -3898,6 +3938,7 @@ watch(isMainPage, () => {
               </template>
               <template #contactInformation>
                 <ContactComponent
+                  prefix-id="drawer-info-customer-branch"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -3914,6 +3955,7 @@ watch(isMainPage, () => {
               </template>
               <template #otherDocuments>
                 <OtherInformation
+                  prefix-id="drawer-info-customer-branch"
                   v-if="
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
@@ -4005,6 +4047,7 @@ watch(isMainPage, () => {
       </template>
       <template #information>
         <BasicInformation
+          prefix-id="drawer-info-employee"
           v-if="formDataEmployeeTab === 'personalInfo'"
           employee
           dense
@@ -4022,6 +4065,7 @@ watch(isMainPage, () => {
 
       <template #person>
         <FormPerson
+          prefix-id="drawer-info-employee"
           v-if="formDataEmployeeTab === 'personalInfo'"
           dense
           outlined
@@ -4039,6 +4083,7 @@ watch(isMainPage, () => {
         />
 
         <FormEmployeeHealthCheck
+          prefix-id="drawer-info-employee"
           v-if="
             formDataEmployeeTab === 'healthCheck' &&
             formDataEmployee.employeeCheckup
@@ -4056,6 +4101,7 @@ watch(isMainPage, () => {
           "
         />
         <FormEmployeeWorkHistory
+          prefix-id="drawer-info-employee"
           v-if="formDataEmployeeTab === 'workHistory'"
           dense
           outlined
@@ -4066,6 +4112,7 @@ watch(isMainPage, () => {
           v-model:workplace-option="optionStore.globalOption.area"
         />
         <FormEmployeeOther
+          prefix-id="drawer-info-employee"
           v-if="
             formDataEmployeeTab === 'other' &&
             formDataEmployee.employeeOtherInfo
@@ -4078,6 +4125,7 @@ watch(isMainPage, () => {
       </template>
       <template #by-type>
         <FormEmployeePassport
+          prefix-id="drawer-info-employee"
           v-if="formDataEmployeeTab === 'personalInfo'"
           dense
           outlined
@@ -4100,6 +4148,7 @@ watch(isMainPage, () => {
           "
         />
         <FormEmployeeVisa
+          prefix-id="drawer-info-employee"
           v-if="formDataEmployeeTab === 'personalInfo'"
           dense
           outlined
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 96514d6b..26ff6a50 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3412,6 +3412,7 @@ watch(
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog-product"
         isProduct
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
@@ -3478,6 +3479,7 @@ watch(
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog-product"
         isProduct
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
@@ -3537,6 +3539,7 @@ watch(
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog-service"
         isService
         v-model:url-profile="profileUrl"
         v-model:status-toggle="statusToggle"
@@ -3623,8 +3626,6 @@ watch(
           workItems[currentWorkIndex].attributes = tempValueProperties;
         }
 
-        console.log('dasdasd');
-
         propertiesDialog = false;
       }
     "
@@ -3700,6 +3701,7 @@ watch(
   >
     <template #prepend>
       <ProfileUpload
+        prefix-id="form-dialog-service"
         isService
         :readonly="!infoServiceEdit"
         v-model:url-profile="profileUrl"