refactor: add prefixId

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),
         )"