refactor: add prefix id

src/components/ProfileBanner.vue

@@ -13,6 +13,7 @@ defineProps<{
   toggleTitle?: string;
   fallbackImg?: string;
   fallbackCover?: string;
+  prefix: string;
 
   hideFade?: boolean;
   hideActive?: boolean;
@@ -258,7 +259,7 @@ const smallBanner = ref(false);
             >
               <q-tab
                 v-for="tab in tabsList"
-                :id="`tab-${tab.label}`"
+                :id="`${prefix}-tab-${tab.label}`"
                 v-bind:key="tab.name"
                 class="content-tab text-capitalize"
                 :name="tab.name"

src/pages/01_branch-management/MainPage.vue

@@ -1733,6 +1733,7 @@ watch(currentHq, () => {
             ? `${formData.code}`
             : `${formData.code?.slice(0, -5)}${(formLastSubBranch + 1).toString().padStart(5, '0')}`
         "
+        :prefix="formData.name"
         v-model:toggle-status="formData.status"
         v-model:cover-url="imageUrl"
         :hide-fade="imageUrl === '' || imageUrl === null"

src/pages/02_personnel-management/MainPage.vue

@@ -1470,6 +1470,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="currentUser.firstName"
           :active="formData.status !== 'INACTIVE'"
           useToggle
           color="white"

src/pages/03_customer-management/MainPage.vue

@@ -1936,6 +1936,7 @@ const emptyCreateDialog = ref(false);
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
+        prefix="dialog"
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
         :img="
           customerFormState.customerImageUrl ||
@@ -2330,6 +2331,7 @@ const emptyCreateDialog = ref(false);
       <ProfileBanner
         active
         useToggle
+        prefix="dialog"
         color="white"
         icon="mdi-account-plus-outline"
         :bg-color="
@@ -2440,11 +2442,6 @@ const emptyCreateDialog = ref(false);
                     anchor: 'drawer-info-file-upload',
                     tab: 'personalInfo',
                   },
-                  {
-                    name: $t('customerEmployee.form.group.personalInfo'),
-                    anchor: 'drawer-form-personal',
-                    tab: 'personalInfo',
-                  },
 
                   {
                     name: $t('customerEmployee.form.group.passport'),
@@ -3813,6 +3810,7 @@ const emptyCreateDialog = ref(false);
       >
         <ProfileBanner
           v-if="customerFormData.customerBranch !== undefined"
+          :prefix="customerFormData.registeredBranchId"
           :active="customerFormData.status !== 'INACTIVE'"
           hide-fade
           use-toggle
@@ -4213,6 +4211,7 @@ const emptyCreateDialog = ref(false);
         }"
       >
         <ProfileBanner
+          :prefix="employeeFormState.currentEmployee.firstName"
           hideFade
           @view="
             () => {

src/pages/04_product-service/MainPage.vue

@@ -3016,6 +3016,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         readonly
         no-image-action
         active
@@ -3165,6 +3166,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="formDataGroup.name"
           no-image-action
           :active="currentStatusGroupType !== 'INACTIVE'"
           hide-fade
@@ -3492,6 +3494,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         use-toggle
         hide-active
@@ -3639,6 +3642,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hideFade
         :use-toggle="actionDisplay"
         :active="formDataProduct.status !== 'INACTIVE'"
@@ -3842,6 +3846,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         use-toggle
         hide-active
@@ -4176,6 +4181,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         hide-fade
         :use-toggle="actionDisplay"
         :title="formDataProductService.name"

src/pages/05_quotation/MainPage.vue

@@ -753,6 +753,7 @@ async function storeDataLocal(id: string) {
   >
     <header class="q-mx-lg q-mt-lg">
       <ProfileBanner
+        prefix="dialog"
         img="/images/quotation-bg-avatar.png"
         fallback-cover="/images/quotation-banner.png"
         bg-color="var(--surface-1)"
@@ -856,6 +857,7 @@ async function storeDataLocal(id: string) {
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade

src/pages/05_quotation/QuotationForm.vue

@@ -2080,6 +2080,7 @@ async function getWorkerFromCriteria(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         active
         useToggle
         color="white"

src/pages/07_agencies-management/AgenciesDialog.vue

@@ -197,6 +197,7 @@ watch(
       }"
     >
       <ProfileBanner
+        prefix="dialog"
         active
         hide-fade
         hide-active
@@ -311,6 +312,7 @@ watch(
         }"
       >
         <ProfileBanner
+          :prefix="data.name"
           active
           hide-fade
           hide-active