diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index d48c7fb7..46726096 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -8,7 +8,7 @@ const codeSubBranch = defineModel<string>('codeSubBranch');
 const taxNo = defineModel<string>('taxNo');
 const name = defineModel<string>('name');
 const abbreviation = defineModel<string>('abbreviation');
-const nameEN = defineModel<string>('nameEN');
+const nameEN = defineModel<string>('nameEn');
 const typeBranch = defineModel<string>('typeBranch');
 const virtual = defineModel<boolean>('virtual');
 
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 4385e950..0f0c3fd6 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -32,7 +32,7 @@ const importNationality = defineModel<string | null | undefined>(
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
 const checkpoint = defineModel<string | null | undefined>('checkPoint');
-const checkpointEN = defineModel<string | null | undefined>('checkPointEN');
+const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
   defineModel<{ name: string; url: string }[]>('agencyFileList');
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index def966e4..6b94a36f 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -11,15 +11,15 @@ const optionStore = useOptionStore();
 const prefixName = defineModel<string | null>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
-const firstNameEN = defineModel<string>('firstNameEN');
-const lastNameEN = defineModel<string>('lastNameEN');
+const firstNameEN = defineModel<string>('firstNameEn');
+const lastNameEN = defineModel<string>('lastNameEn');
 const telephoneNo = defineModel<string>('telephoneNo');
 const email = defineModel<string>('email');
 const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 const nationality = defineModel<string>('nationality');
 const midName = defineModel<string | null>('midName');
-const midNameEN = defineModel<string | null>('midNameEN');
+const midNameEN = defineModel<string | null>('midNameEn');
 const citizenId = defineModel<string>('citizenId');
 const citizenIssue = defineModel<Date | null>('citizenIssue');
 const citizenExpire = defineModel<Date | null>('citizenExpire');
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index de871d8a..21ebc2bc 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -216,6 +216,7 @@ defineEmits<{
 
         <q-td>
           <q-btn
+            :id="`btn-eye-${props.row.firstName}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -223,9 +224,8 @@ defineEmits<{
             flat
             @click.stop="$emit('view', props.row)"
           />
-
           <KebabAction
-            :id-name="props.row.code"
+            :id-name="props.row.firstName"
             :status="props.row.status"
             @view="$emit('view', props.row)"
             @edit="$emit('edit', props.row)"
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 14b47ea3..645b585f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1507,7 +1507,7 @@ watch(currentHq, () => {
                               }
                             "
                             @delete="triggerDelete(props.row.id)"
-                            @changeStatus="
+                            @change-status="
                               async () => {
                                 const res = await triggerChangeStatus(
                                   props.row.id,
@@ -1692,9 +1692,9 @@ watch(currentHq, () => {
     >
       <ProfileBanner
         active
-        useToggle
+        use-toggle
         :title="formData.name"
-        :toggleTitle="$t('status.title')"
+        :toggle-title="$t('status.title')"
         :caption="
           formTypeBranch === 'headOffice'
             ? `${formData.code}`
@@ -1702,7 +1702,7 @@ watch(currentHq, () => {
         "
         v-model:toggle-status="formData.status"
         v-model:cover-url="imageUrl"
-        :hideFade="imageUrl === '' || imageUrl === null"
+        :hide-fade="imageUrl === '' || imageUrl === null"
         :img="imageUrl || null"
         icon="mdi-office-building-outline"
         :color="`hsla(var(${
@@ -1862,13 +1862,13 @@ watch(currentHq, () => {
         >
           <FormBranchInformation
             id="form-information"
-            v-model:branchCount="formLastSubBranch"
+            v-model:branch-count="formLastSubBranch"
             v-model:abbreviation="formData.code"
             v-model:code="formData.codeHeadOffice"
             v-model:code-sub-branch="currentEdit.code"
-            v-model:taxNo="formData.taxNo"
+            v-model:tax-no="formData.taxNo"
             v-model:name="formData.name"
-            v-model:nameEN="formData.nameEN"
+            v-model:name-en="formData.nameEN"
             v-model:type-branch="formTypeBranch"
             v-model:permit-no="formData.permitNo"
             v-model:permit-issue-date="formData.permitIssueDate"
@@ -2219,9 +2219,9 @@ watch(currentHq, () => {
               v-model:abbreviation="formData.code"
               v-model:code="formData.codeHeadOffice"
               v-model:code-sub-branch="currentEdit.code"
-              v-model:taxNo="formData.taxNo"
+              v-model:tax-no="formData.taxNo"
               v-model:name="formData.name"
-              v-model:nameEN="formData.nameEN"
+              v-model:name-en="formData.nameEN"
               v-model:type-branch="formTypeBranch"
               v-model:permit-no="formData.permitNo"
               v-model:permit-issue-date="formData.permitIssueDate"
@@ -2355,7 +2355,7 @@ watch(currentHq, () => {
                   }
                 }
               "
-              @deleteFile="
+              @delete-file="
                 async (filename) => {
                   const res = await branchStore.deleteByIdAttachment(
                     currentId,
@@ -2523,7 +2523,7 @@ watch(currentHq, () => {
 
   <QrCodeUploadDialog
     ref="refQrCodeUpload"
-    v-model:dialogState="qrCodeDialog"
+    v-model:dialog-state="qrCodeDialog"
     v-model:file="statusQrCodeFile as File"
     v-model:image-url="statusQrCodeUrl"
     @save="
@@ -2552,13 +2552,13 @@ watch(currentHq, () => {
 
   <ImageUploadDialog
     ref="refImageUpload"
-    v-model:dialogState="imageDialog"
+    v-model:dialog-state="imageDialog"
     v-model:file="profileFile"
     v-model:image-url="imageUrl"
     v-model:data-list="imageList"
     v-model:on-create-data-list="onCreateImageList"
     :on-create="modal"
-    :hiddenFooter="!isImageEdit"
+    :hidden-footer="!isImageEdit"
     @add-image="
       async (v) => {
         if (!v) return;
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b13e7097..2bb9359a 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -800,7 +800,7 @@ watch(
         <div style="display: inline-block">
           <StatCardComponent
             v-if="typeStats && userData?.result"
-            labelI18n
+            label-i18n
             :branch="
               currentTab === 'ALL'
                 ? Object.entries(typeStats).map(([key, val]) => ({
@@ -1509,7 +1509,7 @@ watch(
     :category="$t('personnel.personnel')"
     bg-on
     hide-action
-    :isEdit="infoDrawerEdit"
+    :is-edit="infoDrawerEdit"
     :title="
       locale === 'eng'
         ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
@@ -1544,7 +1544,7 @@ watch(
           v-model:toggle-status="formData.status"
           hideFade
           :menu="formMenuIcon"
-          :toggleTitle="$t('status.title')"
+          :toggle-title="$t('status.title')"
           :title="`${locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
           :caption="userCode"
           :img="
@@ -1556,7 +1556,7 @@ watch(
               female: '/no-img-female.png',
             }[formData.gender]
           "
-          :fallbackImg="
+          :fallback-img="
             {
               male: '/no-img-man.png',
               female: '/no-img-female.png',
@@ -1709,20 +1709,20 @@ watch(
               separator
               :title="'form.field.basicInformation'"
               :readonly="!infoDrawerEdit"
-              :usernameReadonly="isEdit"
+              :username-readonly="isEdit"
               class="q-mb-xl"
             />
 
             <FormPerson
               id="info-personal"
-              v-model:firstName="formData.firstName"
-              v-model:lastName="formData.lastName"
-              v-model:midName="formData.middleName"
-              v-model:midNameEN="formData.middleNameEN"
-              v-model:prefixName="formData.namePrefix"
-              v-model:prefixNameEN="formData.namePrefix"
-              v-model:firstNameEN="formData.firstNameEN"
-              v-model:lastNameEN="formData.lastNameEN"
+              v-model:first-name="formData.firstName"
+              v-model:last-name="formData.lastName"
+              v-model:mid-name="formData.middleName"
+              v-model:mid-name-en="formData.middleNameEN"
+              v-model:prefix-name="formData.namePrefix"
+              v-model:prefix-name-en="formData.namePrefix"
+              v-model:first-name-en="formData.firstNameEN"
+              v-model:last-name-en="formData.lastNameEN"
               v-model:telephone-no="formData.telephoneNo"
               v-model:email="formData.email"
               v-model:gender="formData.gender"
@@ -1765,20 +1765,20 @@ watch(
               separator
               id="info-work"
               :readonly="!infoDrawerEdit"
-              v-model:userType="formData.userType"
-              v-model:registrationNo="formData.registrationNo"
-              v-model:startDate="formData.startDate"
-              v-model:retireDate="formData.retireDate"
-              v-model:responsibleArea="formData.responsibleArea"
-              v-model:discountCondition="formData.discountCondition"
-              v-model:sourceNationality="formData.sourceNationality"
-              v-model:importNationality="formData.importNationality"
-              v-model:trainingPlace="formData.trainingPlace"
+              v-model:user-type="formData.userType"
+              v-model:registration-no="formData.registrationNo"
+              v-model:start-date="formData.startDate"
+              v-model:retire-date="formData.retireDate"
+              v-model:responsible-area="formData.responsibleArea"
+              v-model:discount-condition="formData.discountCondition"
+              v-model:source-nationality="formData.sourceNationality"
+              v-model:import-nationality="formData.importNationality"
+              v-model:training-place="formData.trainingPlace"
               v-model:checkpoint="formData.checkpoint"
-              v-model:checkpointEN="formData.checkpointEN"
-              v-model:agencyFile="agencyFile"
-              v-model:agencyFileList="agencyFileList"
-              v-model:userId="currentUser.id"
+              v-model:checkpoint-en="formData.checkpointEN"
+              v-model:agency-file="agencyFile"
+              v-model:agency-file-list="agencyFileList"
+              v-model:user-id="currentUser.id"
             />
           </div>
         </div>
@@ -1924,12 +1924,12 @@ watch(
             separator
             :title="'form.field.basicInformation'"
             :usernameReadonly="isEdit"
-            v-model:hqId="hqId"
-            v-model:brId="brId"
-            v-model:userType="formData.userType"
-            v-model:userRole="formData.userRole"
+            v-model:hq-id="hqId"
+            v-model:br-id="brId"
+            v-model:user-type="formData.userType"
+            v-model:user-role="formData.userRole"
             v-model:username="formData.username"
-            v-model:userCode="userCode"
+            v-model:user-code="userCode"
             class="q-mb-xl"
           />
           <FormPerson
@@ -1939,14 +1939,14 @@ watch(
             outlined
             separator
             :title="'personnel.form.personalInformation'"
-            v-model:firstName="formData.firstName"
-            v-model:lastName="formData.lastName"
-            v-model:midName="formData.middleName"
-            v-model:midNameEN="formData.middleNameEN"
-            v-model:prefixName="formData.namePrefix"
-            v-model:prefixNameEN="formData.namePrefix"
-            v-model:firstNameEN="formData.firstNameEN"
-            v-model:lastNameEN="formData.lastNameEN"
+            v-model:first-name="formData.firstName"
+            v-model:last-name="formData.lastName"
+            v-model:mid-name="formData.middleName"
+            v-model:mid-name-en="formData.middleNameEN"
+            v-model:prefix-name="formData.namePrefix"
+            v-model:prefix-name-en="formData.namePrefix"
+            v-model:first-name-en="formData.firstNameEN"
+            v-model:last-name-en="formData.lastNameEN"
             v-model:telephone-no="formData.telephoneNo"
             v-model:email="formData.email"
             v-model:gender="formData.gender"
@@ -1979,18 +1979,18 @@ watch(
             dense
             outlined
             separator
-            v-model:userType="formData.userType"
-            v-model:registrationNo="formData.registrationNo"
-            v-model:startDate="formData.startDate"
-            v-model:retireDate="formData.retireDate"
-            v-model:responsibleArea="formData.responsibleArea"
-            v-model:discountCondition="formData.discountCondition"
-            v-model:sourceNationality="formData.sourceNationality"
-            v-model:importNationality="formData.importNationality"
-            v-model:trainingPlace="formData.trainingPlace"
+            v-model:user-type="formData.userType"
+            v-model:registration-no="formData.registrationNo"
+            v-model:start-date="formData.startDate"
+            v-model:retire-date="formData.retireDate"
+            v-model:responsible-area="formData.responsibleArea"
+            v-model:discount-condition="formData.discountCondition"
+            v-model:source-nationality="formData.sourceNationality"
+            v-model:import-nationality="formData.importNationality"
+            v-model:training-place="formData.trainingPlace"
             v-model:checkpoint="formData.checkpoint"
-            v-model:checkpointEN="formData.checkpointEN"
-            v-model:agencyFile="agencyFile"
+            v-model:checkpoint-en="formData.checkpointEN"
+            v-model:agency-file="agencyFile"
           />
         </div>
       </div>
@@ -1998,7 +1998,7 @@ watch(
   </DialogForm>
 
   <ImageUploadDialog
-    v-model:dialogState="imageDialog"
+    v-model:dialog-state="imageDialog"
     v-model:file="profileFileImg"
     v-model:image-url="urlProfile"
     v-model:data-list="imageList"
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index 1e514dca..ec44e11a 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -735,22 +735,24 @@ watch([customerId, inputSearch, currentStatus], async () => {
             "
             :customer-type="customerType"
             v-model:citizen-id="customerBranchFormData.citizenId"
-            v-model:prefixName="customerBranchFormData.namePrefix"
-            v-model:firstName="customerBranchFormData.firstName"
-            v-model:lastName="customerBranchFormData.lastName"
-            v-model:firstNameEN="customerBranchFormData.firstNameEN"
-            v-model:lastNameEN="customerBranchFormData.lastNameEN"
+            v-model:prefix-name="customerBranchFormData.namePrefix"
+            v-model:first-name="customerBranchFormData.firstName"
+            v-model:last-name="customerBranchFormData.lastName"
+            v-model:first-name-en="customerBranchFormData.firstNameEN"
+            v-model:last-name-en="customerBranchFormData.lastNameEN"
             v-model:gender="customerBranchFormData.gender"
-            v-model:birthDate="customerBranchFormData.birthDate"
-            v-model:customerName="customerBranchFormData.customerName"
-            v-model:legalPersonNo="customerBranchFormData.legalPersonNo"
-            v-model:branchCode="customerBranchFormData.code"
-            v-model:registerName="customerBranchFormData.registerName"
-            v-model:registerNameEN="customerBranchFormData.registerNameEN"
-            v-model:registerDate="customerBranchFormData.registerDate"
-            v-model:authorizedCapital="customerBranchFormData.authorizedCapital"
-            v-model:telephoneNo="customerBranchFormData.telephoneNo"
-            v-model:codeCustomer="customerBranchFormData.codeCustomer"
+            v-model:birth-date="customerBranchFormData.birthDate"
+            v-model:customer-name="customerBranchFormData.customerName"
+            v-model:legal-person-no="customerBranchFormData.legalPersonNo"
+            v-model:branch-code="customerBranchFormData.code"
+            v-model:register-name="customerBranchFormData.registerName"
+            v-model:register-name-en="customerBranchFormData.registerNameEN"
+            v-model:register-date="customerBranchFormData.registerDate"
+            v-model:authorized-capital="
+              customerBranchFormData.authorizedCapital
+            "
+            v-model:telephone-no="customerBranchFormData.telephoneNo"
+            v-model:code-customer="customerBranchFormData.codeCustomer"
           />
           <div
             class="row q-col-gutter-sm q-mb-sm"
@@ -800,9 +802,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
             v-model:authorized-name="customerBranchFormData.authorizedName"
-            v-model:authorized-name-e-n="
-              customerBranchFormData.authorizedNameEN
-            "
+            v-model:authorized-name-en="customerBranchFormData.authorizedNameEN"
           />
           <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
             <div class="col-12 text-weight-bold text-body1 row items-center">
@@ -861,10 +861,10 @@ watch([customerId, inputSearch, currentStatus], async () => {
           <EmployerFormContact
             class="q-mb-lg"
             :readonly="customerBranchFormState.dialogType === 'info'"
-            v-model:contactName="customerBranchFormData.contactName"
+            v-model:contact-name="customerBranchFormData.contactName"
             v-model:email="customerBranchFormData.email"
-            v-model:contactTel="customerBranchFormData.contactTel"
-            v-model:officeTel="customerBranchFormData.officeTel"
+            v-model:contact-tel="customerBranchFormData.contactTel"
+            v-model:office-tel="customerBranchFormData.officeTel"
             v-model:agent="customerBranchFormData.agent"
           />
         </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index fe0b301c..6c8d926b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -807,7 +807,7 @@ const emptyCreateDialog = ref(false);
             <div class="scroll">
               <StatCardComponent
                 v-if="customerStats"
-                labelI18n
+                label-i18n
                 :branch="
                   customerStats &&
                   (currentTab === 'employer'
@@ -1284,25 +1284,6 @@ const emptyCreateDialog = ref(false);
                           </q-tooltip>
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('address')">
-                          {{
-                            locale === 'eng'
-                              ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                '-'
-                              : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                '-'
-                          }}
-                          <q-tooltip>
-                            {{
-                              locale === 'eng'
-                                ? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                  '-'
-                                : `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
-                                  '-'
-                            }}
-                          </q-tooltip>
-                        </q-td>
-
                         <q-td v-if="fieldSelected.includes('contactName')">
                           {{ props.row.branch[0]?.contactName || '-' }}
                         </q-td>
@@ -1444,7 +1425,7 @@ const emptyCreateDialog = ref(false);
                     <template v-slot:item="props">
                       <div class="col-12 col-md-6">
                         <BranchCard
-                          i18nKey="customer.table"
+                          i18n-key="customer.table"
                           class="surface-1"
                           :virtual-branch="props.row.virtual"
                           :id="`branch-card-${props.row.name}`"
@@ -1575,7 +1556,7 @@ const emptyCreateDialog = ref(false);
                           <template v-slot:action>
                             <KebabAction
                               :status="props.row.status"
-                              :idName="props.row.name"
+                              :id-name="props.row.name"
                               @view="
                                 () => {
                                   const { branch, ...payload } = props.row;
@@ -2082,19 +2063,23 @@ const emptyCreateDialog = ref(false);
             "
             :customer-type="customerFormData.customerType"
             v-model:registered-branch-id="customerFormData.registeredBranchId"
-            v-model:customerName="customerNameInfo"
-            v-model:registerName="
+            v-model:customer-name="customerNameInfo"
+            v-model:register-name="
               customerFormData.customerBranch[0].registerName
             "
-            v-model:citizenId="customerFormData.customerBranch[0].citizenId"
-            v-model:legalPersonNo="
+            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+            v-model:legal-person-no="
               customerFormData.customerBranch[0].legalPersonNo
             "
-            v-model:businessType="
+            v-model:business-type="
               customerFormData.customerBranch[0].businessType
             "
-            v-model:jobPosition="customerFormData.customerBranch[0].jobPosition"
-            v-model:telephoneNo="customerFormData.customerBranch[0].telephoneNo"
+            v-model:job-position="
+              customerFormData.customerBranch[0].jobPosition
+            "
+            v-model:telephone-no="
+              customerFormData.customerBranch[0].telephoneNo
+            "
             v-model:branch-options="registerAbleBranchOption"
           />
           <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
@@ -2554,15 +2539,15 @@ const emptyCreateDialog = ref(false);
               title="customerEmployee.form.group.personalInfo"
               :readonly="!employeeFormState.isEmployeeEdit"
               v-model:open="employeeFormState.dialogModal"
-              v-model:prefixName="currentFromDataEmployee.namePrefix"
-              v-model:firstName="currentFromDataEmployee.firstName"
-              v-model:lastName="currentFromDataEmployee.lastName"
-              v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
-              v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
-              v-model:midName="currentFromDataEmployee.middleName"
-              v-model:midNameEN="currentFromDataEmployee.middleNameEN"
+              v-model:prefix-name="currentFromDataEmployee.namePrefix"
+              v-model:first-name="currentFromDataEmployee.firstName"
+              v-model:last-name="currentFromDataEmployee.lastName"
+              v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+              v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+              v-model:mid-name="currentFromDataEmployee.middleName"
+              v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
               v-model:gender="currentFromDataEmployee.gender"
-              v-model:birthDate="currentFromDataEmployee.dateOfBirth"
+              v-model:birth-date="currentFromDataEmployee.dateOfBirth"
               v-model:nationality="currentFromDataEmployee.nationality"
               class="q-mb-xl"
             />
@@ -2782,14 +2767,14 @@ const emptyCreateDialog = ref(false);
               dense
               outlined
               v-model:current-index="employeeFormState.currentIndex"
-              v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
-              v-model:checkupTypeOption="
+              v-model:employee-checkup="currentFromDataEmployee.employeeCheckup"
+              v-model:checkup-type-option="
                 optionStore.globalOption.insurancePlace
               "
-              v-model:medicalBenefitOption="
+              v-model:medical-benefit-option="
                 optionStore.globalOption.typeInsurance
               "
-              v-model:insuranceCompanyOption="
+              v-model:insurance-company-option="
                 optionStore.globalOption.insurancePlace
               "
               @delete="
@@ -2917,7 +2902,7 @@ const emptyCreateDialog = ref(false);
     v-model:on-create-data-list="onCreateImageList"
     :on-create="customerFormState.dialogModal"
     :default-url="customerFormState.defaultCustomerImageUrl"
-    :hiddenFooter="!customerFormState.isImageEdit"
+    :hidden-footer="!customerFormState.isImageEdit"
     @add-image="
       async (v) => {
         if (!v) return;
@@ -3027,7 +3012,7 @@ const emptyCreateDialog = ref(false);
     v-model:data-list="imageList"
     v-model:on-create-data-list="onCreateImageList"
     :on-create="employeeFormState.dialogModal"
-    :hiddenFooter="!employeeFormState.isImageEdit"
+    :hidden-footer="!employeeFormState.isImageEdit"
     @add-image="
       async (v) => {
         if (!v) return;
@@ -3116,12 +3101,12 @@ const emptyCreateDialog = ref(false);
         ? customerFormData.customerBranch[0]?.registerName
         : customerNameInfo
     "
-    :badgeLabel="
+    :badge-label="
       customerFormData.customerType === 'CORP'
         ? $t('customer.employerLegalEntity')
         : $t('customer.employerNaturalPerson')
     "
-    :badgeStyle="
+    :badge-style="
       customerFormData.customerType === 'CORP'
         ? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
         : `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
@@ -3171,17 +3156,17 @@ const emptyCreateDialog = ref(false);
           v-if="customerFormData.customerBranch !== undefined"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
-          useToggle
+          use-toggle
           v-model:toggle-status="customerFormData.status"
           :menu="formMenuIcon"
-          :toggleTitle="$t('status.title')"
+          :toggle-title="$t('status.title')"
           :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
           :img="
             `${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
               refreshImageState ? `?ts=${Date.now()}` : '',
             ) || null
           "
-          :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+          :fallback-img="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
           :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
           :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
           :icon="
@@ -3315,39 +3300,26 @@ const emptyCreateDialog = ref(false);
               "
               :customer-type="customerFormData.customerType"
               v-model:registered-branch-id="customerFormData.registeredBranchId"
-              v-model:customerName="customerNameInfo"
-              v-model:registerName="
+              v-model:customer-name="customerNameInfo"
+              v-model:register-name="
                 customerFormData.customerBranch[0].registerName
               "
-              v-model:citizenId="customerFormData.customerBranch[0].citizenId"
-              v-model:legalPersonNo="
+              v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+              v-model:legal-person-no="
                 customerFormData.customerBranch[0].legalPersonNo
               "
-              v-model:businessType="
+              v-model:business-type="
                 customerFormData.customerBranch[0].businessType
               "
-              v-model:jobPosition="
+              v-model:job-position="
                 customerFormData.customerBranch[0].jobPosition
               "
-              v-model:telephoneNo="
+              v-model:telephone-no="
                 customerFormData.customerBranch[0].telephoneNo
               "
               v-model:branch-options="registerAbleBranchOption"
             />
 
-            <!-- <div class="row q-col-gutter-sm q-mb-xl">
-              <UploadFile
-                id="form-upload-file-customer"
-                class="q-mb-xl"
-                hide-action
-                :dropdown-list="uploadFileList"
-                v-model:file="customerFormState.file"
-                @send-ocr="
-                  (group: any, file: any) => ocrStore.sendOcr({ file })
-                "
-              />
-            </div> -->
-
             <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
               <div
                 class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
@@ -3465,7 +3437,7 @@ const emptyCreateDialog = ref(false);
                   "
                 >
                   <EmployerFormBranch
-                    prefixId="info"
+                    prefix-id="info"
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
                     :hide-action="customerFormData.status === 'INACTIVE'"
@@ -3528,7 +3500,7 @@ const emptyCreateDialog = ref(false);
           : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
         : '-'
     "
-    :badgeClass="
+    :badge-class="
       currentFromDataEmployee.gender === 'male'
         ? 'app-bg-male text-white'
         : currentFromDataEmployee.gender === 'female'
@@ -3794,15 +3766,15 @@ const emptyCreateDialog = ref(false);
                 separator
                 title="customerEmployee.form.group.personalInfo"
                 :readonly="!employeeFormState.isEmployeeEdit"
-                v-model:prefixName="currentFromDataEmployee.namePrefix"
-                v-model:firstName="currentFromDataEmployee.firstName"
-                v-model:lastName="currentFromDataEmployee.lastName"
-                v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
-                v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
-                v-model:midName="currentFromDataEmployee.middleName"
-                v-model:midNameEN="currentFromDataEmployee.middleNameEN"
+                v-model:prefix-name="currentFromDataEmployee.namePrefix"
+                v-model:first-ืame="currentFromDataEmployee.firstName"
+                v-model:last-name="currentFromDataEmployee.lastName"
+                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+                v-model:mid-name="currentFromDataEmployee.middleName"
+                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
                 v-model:gender="currentFromDataEmployee.gender"
-                v-model:birthDate="currentFromDataEmployee.dateOfBirth"
+                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
                 v-model:nationality="currentFromDataEmployee.nationality"
                 class="q-mb-xl"
               />
@@ -4034,7 +4006,7 @@ const emptyCreateDialog = ref(false);
                 v-model:medical-benefit-option="
                   optionStore.globalOption.typeInsurance
                 "
-                v-model:insuranceCompanyOption="
+                v-model:insurance-company-option="
                   optionStore.globalOption.insurancePlace
                 "
                 @save="
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index f836dc5d..93d0b6d7 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -23,8 +23,8 @@ const citizenId = defineModel<string | undefined>('citizenId', {});
 const prefixName = defineModel<string | null>('prefixName');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
-const firstNameEN = defineModel<string>('firstNameEN');
-const lastNameEN = defineModel<string>('lastNameEN');
+const firstNameEN = defineModel<string>('firstNameEn');
+const lastNameEN = defineModel<string>('lastNameEn');
 const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | string | null>('birthDate');
 
@@ -33,7 +33,7 @@ const customerName = defineModel<string>('customerName');
 const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {});
 const branchCode = defineModel<string | undefined>('branchCode', {});
 const registerName = defineModel<string | undefined>('registerName', {});
-const registerNameEN = defineModel<string | undefined>('registerNameEN', {});
+const registerNameEN = defineModel<string | undefined>('registerNameEn', {});
 const registerDate = defineModel<string | Date | null>('registerDate');
 const authorizedCapital = defineModel<string>('authorizedCapital', {
   default: '0',
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue b/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
index bc2f33b8..2618bda1 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAuthorized.vue
@@ -4,7 +4,7 @@ defineProps<{
   prefixId?: string;
 }>();
 const authorizedName = defineModel<string>('authorizedName');
-const authorizedNameEN = defineModel<string>('authorizedNameEN');
+const authorizedNameEN = defineModel<string>('authorizedNameEn');
 </script>
 
 <template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index dea3023b..114cedf5 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -6,7 +6,6 @@ import EmployerFormContact from './EmployerFormContact.vue';
 import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
-import { useCustomerForm } from 'src/pages/03_customer-management/form';
 import { waitAll } from 'src/stores/utils';
 import {
   FormCitizen,
@@ -25,7 +24,6 @@ import {
 } from 'components/button';
 import { UploadFileGroup } from 'src/components/upload-file/';
 import { uploadFileListCustomer, columnsAttachment } from '../../constant';
-import { group } from 'node:console';
 
 const ocrStore = useOcrStore();
 const customerStore = useCustomerStore();
@@ -135,22 +133,22 @@ withDefaults(
             :readonly="readonly"
             :customer-type="customerType"
             v-model:citizen-id="item.citizenId"
-            v-model:prefixName="item.namePrefix"
-            v-model:firstName="item.firstName"
-            v-model:lastName="item.lastName"
-            v-model:firstNameEN="item.firstNameEN"
-            v-model:lastNameEN="item.lastNameEN"
+            v-model:prefix-name="item.namePrefix"
+            v-model:first-name="item.firstName"
+            v-model:last-name="item.lastName"
+            v-model:first-name-en="item.firstNameEN"
+            v-model:last-name-en="item.lastNameEN"
             v-model:gender="item.gender"
-            v-model:birthDate="item.birthDate"
-            v-model:customerName="item.customerName"
-            v-model:legalPersonNo="item.legalPersonNo"
-            v-model:branchCode="item.code"
-            v-model:registerName="item.registerName"
-            v-model:registerNameEN="item.registerNameEN"
-            v-model:registerDate="item.registerDate"
-            v-model:authorizedCapital="item.authorizedCapital"
-            v-model:telephoneNo="item.telephoneNo"
-            v-model:codeCustomer="item.codeCustomer"
+            v-model:birth-date="item.birthDate"
+            v-model:customer-name="item.customerName"
+            v-model:legal-person-no="item.legalPersonNo"
+            v-model:branch-code="item.code"
+            v-model:register-name="item.registerName"
+            v-model:register-name-en="item.registerNameEN"
+            v-model:register-date="item.registerDate"
+            v-model:authorized-capital="item.authorizedCapital"
+            v-model:telephone-no="item.telephoneNo"
+            v-model:code-customer="item.codeCustomer"
           />
         </q-tab-panel>
         <q-tab-panel name="business">
@@ -163,7 +161,7 @@ withDefaults(
             v-model:job-position="item.jobPosition"
             v-model:job-description="item.jobDescription"
             v-model:pay-date="item.payDate"
-            v-model:pay-date-e-n="item.payDateEN"
+            v-model:pay-date-en="item.payDateEN"
             v-model:wage-rate="item.wageRate"
             v-model:wage-rate-text="item.wageRateText"
           />
@@ -173,7 +171,7 @@ withDefaults(
             :prefix-id="prefixId || 'employer'"
             :readonly="readonly"
             v-model:authorized-name="item.authorizedName"
-            v-model:authorized-name-e-n="item.authorizedNameEN"
+            v-model:authorized-name-en="item.authorizedNameEN"
           />
         </q-tab-panel>
         <q-tab-panel name="address">
@@ -207,10 +205,10 @@ withDefaults(
           <EmployerFormContact
             :readonly="readonly"
             :prefixId="prefixId"
-            v-model:contactName="item.contactName"
+            v-model:contact-name="item.contactName"
             v-model:email="item.email"
-            v-model:contactTel="item.contactTel"
-            v-model:officeTel="item.officeTel"
+            v-model:contact-tel="item.contactTel"
+            v-model:office-tel="item.officeTel"
             v-model:agent="item.agent"
           />
         </q-tab-panel>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index bdcf3aa2..64d40fad 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -12,7 +12,7 @@ const bussinessType = defineModel<string>('bussinessType');
 const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
-const payDateEN = defineModel<string>('payDateEN');
+const payDateEN = defineModel<string>('payDateEn');
 const wageRate = defineModel<number | string>('wageRate');
 const wageRateText = defineModel<string>('wageRateText');
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ccaa8c32..7ef99916 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2029,7 +2029,7 @@ watch(
                           <KebabAction
                             :disable-delete="props.row.status !== 'CREATED'"
                             :status="props.row.status"
-                            :idName="props.row.name"
+                            :id-name="props.row.name"
                             @view="
                               async () => {
                                 if (productMode === 'group') {
@@ -2064,7 +2064,7 @@ watch(
                                 }
                               }
                             "
-                            @changeStatus="
+                            @change-status="
                               async () => {
                                 triggerChangeStatus(
                                   props.row.id,
@@ -2099,10 +2099,10 @@ watch(
                             }[productMode] || 'var(--pink-6-hsl)'
                           "
                           :action="actionDisplay"
-                          @toggleStatus="
+                          @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)
                           "
-                          @viewCard="
+                          @view-card="
                             async () => {
                               if (productMode === 'group') {
                                 editByTree = 'group';
@@ -2116,7 +2116,7 @@ watch(
                               }
                             }
                           "
-                          @updateCard="
+                          @update-card="
                             async () => {
                               if (productMode === 'group') {
                                 clearFormGroup();
@@ -2128,7 +2128,7 @@ watch(
                               }
                             }
                           "
-                          @deleteCard="
+                          @delete-card="
                             () => {
                               if (productMode === 'group') {
                                 deleteProductById(props.row.id);
@@ -2711,7 +2711,7 @@ watch(
                           />
                           <KebabAction
                             :status="props.row.status"
-                            :idName="props.row.name"
+                            :id-name="props.row.name"
                             @view="
                               async () => {
                                 await fetchListOfOptionBranch();
@@ -2755,7 +2755,7 @@ watch(
                                 }
                               }
                             "
-                            @changeStatus="
+                            @change-status="
                               () => {
                                 triggerChangeStatus(
                                   props.row.id,
@@ -2775,15 +2775,17 @@ watch(
                           :data="row"
                           :key="row.id"
                           :title="row.name"
-                          :isDisabled="row.status === 'INACTIVE' ? true : false"
+                          :is-disabled="
+                            row.status === 'INACTIVE' ? true : false
+                          "
                           :action="actionDisplay"
-                          :priceDisplay="priceDisplay"
-                          @toggleStatus="
+                          :price-display="priceDisplay"
+                          @toggle-status="
                             () => {
                               triggerChangeStatus(row.id, row.status, row.type);
                             }
                           "
-                          @menuViewDetail="
+                          @menu-view-detail="
                             async () => {
                               await fetchListOfOptionBranch();
                               if (row.type === 'product') {
@@ -2799,7 +2801,7 @@ watch(
                               }
                             }
                           "
-                          @menuEdit="
+                          @menu-edit="
                             async () => {
                               await fetchListOfOptionBranch();
                               if (row.type === 'product') {
@@ -2816,7 +2818,7 @@ watch(
                               }
                             }
                           "
-                          @menuDelete="
+                          @menu-delete="
                             () => {
                               if (row.type === 'product') {
                                 deleteProductConfirm(row.id);
@@ -2924,13 +2926,13 @@ watch(
     >
       <ProfileBanner
         readonly
-        noImageAction
+        no-image-action
         active
-        hideFade
-        hideActive
-        useToggle
+        hide-fade
+        hide-active
+        use-toggle
         :img="`/images/product-service-${productMode}-avatar-add.png`"
-        :toggleTitle="$t('status.title')"
+        :toggle-title="$t('status.title')"
         :icon="
           productMode === 'group'
             ? 'mdi-folder-plus-outline'
@@ -2945,7 +2947,7 @@ watch(
             bgColor: 'var(--surface-1)',
           },
         ]"
-        :fallbackCover="`/images/product-service-${productMode}-banner.png`"
+        :fallback-cover="`/images/product-service-${productMode}-banner.png`"
         :color="`hsla(var(${
           productMode === 'group'
             ? '--pink-6'
@@ -3025,7 +3027,7 @@ watch(
   <!-- edit group, edit type -->
   <DrawerInfo
     ref="formDialogRef"
-    v-model:drawerOpen="drawerInfo"
+    v-model:drawer-open="drawerInfo"
     :title="
       $t(
         editByTree === 'group'
@@ -3071,17 +3073,17 @@ watch(
         }"
       >
         <ProfileBanner
-          noImageAction
+          no-image-action
           :active="currentStatusGroupType !== 'INACTIVE'"
-          hideFade
-          :useToggle="actionDisplay"
+          hide-fade
+          :use-toggle="actionDisplay"
           :readonly="!isEdit"
           :icon="
             editByTree === 'group'
               ? 'mdi-folder-outline'
               : 'mdi-folder-table-outline'
           "
-          :fallbackCover="`/images/product-service-${editByTree}-banner.png`"
+          :fallback-cover="`/images/product-service-${editByTree}-banner.png`"
           v-model:toggle-status="currentStatusGroupType"
           :color="`hsla(var(${
             editByTree === 'group'
@@ -3099,7 +3101,7 @@ watch(
           }-hsl)/0.1)`"
           :title="formDataGroup.name"
           :caption="formDataGroup.code"
-          :toggleTitle="$t('status.title')"
+          :toggle-title="$t('status.title')"
           :menu="[
             {
               icon: 'mdi-office-building-outline',
@@ -3198,7 +3200,7 @@ watch(
               id="info-group"
               dense
               :readonly="!isEdit"
-              :readOnlybranchOption="!readOnlybranchOption"
+              :read-onlybranch-option="!readOnlybranchOption"
               v-model:options-branch="branchOption"
               v-model:registered-branch-id="formDataGroup.registeredBranchId"
               v-model:remark="formDataGroup.remark"
@@ -3215,11 +3217,11 @@ watch(
   <!-- work product, product work -->
   <DialogForm
     v-model:modal="dialogTotalProduct"
-    :submitLabel="$t('general.select')"
-    noAddress
-    noAppBox
+    :submit-label="$t('general.select')"
+    no-address
+    no-appBox
     :title="$t('productService.product.allProduct')"
-    :saveAmount="selectProduct.length"
+    :save-amount="selectProduct.length"
     :submit="
       () => {
         selectProduct.forEach((i) => {
@@ -3331,7 +3333,7 @@ watch(
         v-if="resultSearchProduct?.length === 0 || productIsAdd?.length === 0"
       >
         <NoData
-          :notFound="resultSearchProduct?.length === 0"
+          :not-found="resultSearchProduct?.length === 0"
           :text="
             productIsAdd?.length === 0
               ? $t('productService.product.noProduct')
@@ -3356,20 +3358,20 @@ watch(
           <TotalProductCardComponent
             no-time-img
             :index="selectProduct.findIndex((v) => v.id === i.id)"
-            :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
+            :is-add-product="!!selectProduct.find((v) => v.id === i.id)"
             :action="false"
             :data="{ ...i, type: 'product' }"
             :title="i.name"
             :status="i.status === 'INACTIVE' ? true : false"
-            :priceDisplay="priceDisplay"
-            @menuViewDetail="
+            :price-display="priceDisplay"
+            @menu-view-detail="
               () => {
                 currentIdProduct = i.id;
                 assignFormDataProduct(i);
                 dialogProductEdit = true;
               }
             "
-            @menuEdit="
+            @menu-edit="
               () => {
                 currentIdProduct = i.id;
                 infoProductEdit = true;
@@ -3377,7 +3379,7 @@ watch(
                 dialogProductEdit = true;
               }
             "
-            @viewDetail="
+            @view-detail="
               () => {
                 currentIdProduct = i.id;
                 infoProductEdit = false;
@@ -3426,13 +3428,13 @@ watch(
       }"
     >
       <ProfileBanner
-        hideFade
-        useToggle
-        hideActive
-        :toggleTitle="$t('status.title')"
+        hide-fade
+        use-toggle
+        hide-active
+        :toggle-title="$t('status.title')"
         :img="profileUrl || '/images/product-avatar-add.png'"
-        fallbackCover="/images/product-banner.png"
-        :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+        fallback-cover="/images/product-banner.png"
+        :bg-color="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -3454,7 +3456,7 @@ watch(
               formDataProduct.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
           }
         "
-        :tabsList="
+        :tabs-list="
           $q.screen.gt.sm
             ? false
             : [
@@ -3468,7 +3470,7 @@ watch(
                 },
               ]
         "
-        v-model:currentTab="productTab"
+        v-model:current-tab="productTab"
       />
     </div>
 
@@ -3563,21 +3565,21 @@ watch(
     >
       <ProfileBanner
         hideFade
-        :useToggle="actionDisplay"
+        :use-toggle="actionDisplay"
         :active="formDataProduct.status !== 'INACTIVE'"
         :title="formDataProduct.name"
         :caption="formDataProduct.code"
         icon="mdi-shopping-outline"
-        fallbackImg="/images/product-avatar.png"
+        fallback-img="/images/product-avatar.png"
         color="var(--teal-10)"
-        :toggleTitle="$t('status.title')"
+        :toggle-title="$t('status.title')"
         :img="
           `${baseUrl}/product/${currentIdProduct}/image/${formDataProduct.selectedImage}`.concat(
             refreshImageState ? `?ts=${Date.now()}` : '',
           ) || '/images/product-avatar.png'
         "
-        fallbackCover="/images/product-banner.png"
-        :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+        fallback-cover="/images/product-banner.png"
+        :bg-color="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -3603,7 +3605,7 @@ watch(
               );
           }
         "
-        :tabsList="
+        :tabs-list="
           $q.screen.gt.sm
             ? false
             : [
@@ -3759,13 +3761,13 @@ watch(
       }"
     >
       <ProfileBanner
-        hideFade
-        useToggle
-        hideActive
-        :toggleTitle="$t('status.title')"
+        hide-fade
+        use-toggle
+        hide-active
+        :toggle-title="$t('status.title')"
         :img="profileUrl || '/images/service-avatar-add.png'"
-        fallbackCover="/images/service-banner.png"
-        :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
+        fallback-cover="/images/service-banner.png"
+        :bg-color="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -3794,7 +3796,7 @@ watch(
                 : 'CREATED';
           }
         "
-        :tabsList="
+        :tabs-list="
           $q.screen.gt.sm
             ? false
             : [
@@ -3808,7 +3810,7 @@ watch(
                 },
               ]
         "
-        v-model:currentTab="serviceTab"
+        v-model:current-tab="serviceTab"
       />
     </div>
 
@@ -3915,7 +3917,7 @@ watch(
           :tree-view="serviceTreeView"
           :service="formDataProductService"
           dense
-          @addProduct="
+          @add-product="
             async (index) => {
               await fetchListOfProductIsAdd(currentIdGrop);
               currentWorkIndex = index;
@@ -4027,7 +4029,7 @@ watch(
     <div class="q-pa-lg full-height">
       <WorkNameManagement
         ref="workNameRef"
-        v-model:nameList="workNameItems"
+        v-model:name-list="workNameItems"
         @delete="confirmDeleteWork"
         @edit="editWork"
         @add="createWork"
@@ -4064,20 +4066,20 @@ watch(
       }"
     >
       <ProfileBanner
-        hideFade
-        :useToggle="actionDisplay"
+        hide-fade
+        :use-toggle="actionDisplay"
         :title="formDataProductService.name"
         :caption="formDataProductService.code"
         :active="formDataProductService.status !== 'INACTIVE'"
-        :toggleTitle="$t('status.title')"
+        :toggle-title="$t('status.title')"
         :img="
           `${baseUrl}/service/${currentIdService}/image/${formDataProductService.selectedImage}`.concat(
             refreshImageState ? `?ts=${Date.now()}` : '',
           ) || '/images/service-avatar.png'
         "
-        fallbackImg="/images/service-avatar.png"
-        fallbackCover="/images/service-banner.png"
-        :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
+        fallback-img="/images/service-avatar.png"
+        fallback-cover="/images/service-banner.png"
+        :bg-color="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -4108,7 +4110,7 @@ watch(
               );
           }
         "
-        :tabsList="
+        :tabs-list="
           $q.screen.gt.sm
             ? false
             : [
@@ -4267,8 +4269,8 @@ watch(
           :readonly="!infoServiceEdit"
           v-model:work-items="workItems"
           dense
-          :priceDisplay="priceDisplay"
-          @addProduct="
+          :price-display="priceDisplay"
+          @add-product="
             async (index) => {
               await fetchListOfProductIsAdd(currentIdGrop);
               currentWorkIndex = index;
@@ -4451,7 +4453,7 @@ watch(
 
   <ImageUploadDialog
     ref="refImageUpload"
-    v-model:dialogState="imageDialog"
+    v-model:dialog-state="imageDialog"
     v-model:file="profileFileImg"
     v-model:image-url="profileUrl as string"
     v-model:data-list="imageList"