refactor: add id

src/components/03_customer-management/BranchCardCustomer.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 defineProps<{
+  prefixId?: string;
   inactive?: boolean;
   color?: 'none' | 'pers' | 'corp';
   data: {
@@ -52,6 +53,7 @@ defineProps<{
 
       <div class="branch-card__action">
         <q-btn
+          :id="`${prefixId}-btn-view-detail`"
           icon="mdi-eye-outline"
           size="sm"
           dense

src/components/03_customer-management/TableEmpoloyee.vue

@@ -21,6 +21,7 @@ const prop = withDefaults(
     fieldSelected?: string[];
     inTable?: boolean;
     addButton?: boolean;
+    prefixId?: string;
   }>(),
   {
     gridView: false,
@@ -74,7 +75,7 @@ defineEmits<{
           </span>
           <span v-if="col.label === '' && !!addButton">
             <AddButton
-              id="btn-add-employee"
+              :id="`${prefixId || 'default'}-btn-add-employee`"
               icon-only
               @click.stop="() => $emit('add')"
             />

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

@@ -516,6 +516,7 @@ watch(
               <q-btn
                 dense
                 flat
+                :id="`btn-show-employee-${currentCustomerName}`"
                 @click.stop="
                   async () => {
                     currentBranchEmployee = props.row.id;
@@ -551,7 +552,7 @@ watch(
               </q-btn>
               <q-btn
                 icon="mdi-eye-outline"
-                :id="`btn-eye-${props.row.customerName}`"
+                :id="`btn-eye-${currentCustomerName}`"
                 size="sm"
                 dense
                 round
@@ -570,6 +571,7 @@ watch(
             <q-td colspan="100%" style="padding: 16px">
               <div class="text-center">
                 <TableEmpoloyee
+                  :prefix-id="props.row.registerName || props.row.firstName"
                   add-button
                   in-table
                   :list-employee="listEmployee"
@@ -607,6 +609,7 @@ watch(
         <template #item="props">
           <div class="col-12 col-md-6">
             <BranchCardCustomer
+              :prefix-id="props.row.registerName || props.row.firstName"
               class="surface-1"
               :inactive="props.row.status === 'INACTIVE'"
               :color="customerType === 'CORP' ? 'corp' : 'pers'"
@@ -775,7 +778,7 @@ watch(
             </div>
           </div>
           <EmployerFormAbout
-            prefixId="dialog"
+            prefix-id="dialog"
             :readonly="customerBranchFormState.dialogType === 'info'"
             class="q-mb-xl"
             :index="