refactor: color, data structure

src/components/01_branch-management/DeatailsBranchDrawerComponent.vue

@@ -11,6 +11,7 @@ const open = defineModel('open', { type: Boolean, default: false });
 <template>
   <q-drawer
     overlay
+    behavior="mobile"
     bordered
     class="q-pa-md"
     side="right"

src/components/01_branch-management/TableCardComponent.vue

@@ -8,6 +8,7 @@ const color: string[] = ['pink', 'violet'];
 const props = defineProps<{
   subBranch?: boolean;
   rows: {
+    id: string;
     name: string;
     branchName: string;
     address: string;
@@ -65,8 +66,7 @@ const filter = ref('');
               class="bordered"
               :class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''}    ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
               :key="i"
-              v-for="([k, v], i) in Object.entries(prop.row)"
-              :style="` `"
+              v-for="([k, v], i) in Object.entries(prop.row).slice(1)"
             >
               <q-item-section
                 avatar
@@ -126,9 +126,9 @@ const filter = ref('');
 }
 
 .table-card-color-violet {
-  --bg-table-card-header: var(--violet-4-hsl);
+  --bg-table-card-header: var(--purple-11-hsl);
   --color-table-card-header: var(--violet-0-hsl);
-  --bg-table-card-row: hsla(var(--violet-4-hsl) / 0.08);
+  --bg-table-card-row: hsla(var(--purple-11-hsl) / 0.08);
   &.dark-table-card {
     --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
   }

src/components/StatCardComponent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   }[];
 }>();
 
-const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
+const color = ['pink', 'purple'];
 </script>
 
 <template>
@@ -21,7 +21,7 @@ const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
       v-for="(v, i) in props.branch"
       :key="v.label"
       class="bordered wave col-12"
-      :class="`color-${color[i % 5]}`"
+      :class="`color-${color[i % 2]}`"
       style="
         width: 200px;
         min-width: 150px;
@@ -71,23 +71,11 @@ svg {
   width: 200px;
 }
 
-.color-blue {
-  --_color-stat-card: var(--blue-5);
-}
-
 .color-purple {
-  --_color-stat-card: var(--purple-8);
+  --_color-stat-card: var(--violet-11);
 }
 
 .color-pink {
-  --_color-stat-card: var(--pink-8);
-}
-
-.color-yellow {
-  --_color-stat-card: var(--yellow-8);
-}
-
-.color-green {
-  --_color-stat-card: var(--green-8);
+  --_color-stat-card: var(--pink-6);
 }
 </style>

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

@@ -116,6 +116,7 @@ const treeData = ref<BranchWithChildren[]>([]);
 const subBranch = ref<boolean>(false);
 const rowsBranch = ref<
   {
+    id: string;
     name: string;
     branchName: string;
     address: string;
@@ -164,7 +165,8 @@ async function getTree() {
     rowsBranch.value = treeData.value
       .filter((v) => v.isHeadOffice)
       .map((v) => ({
-        name: v.id,
+        id: v.id,
+        name: v.code,
         branchName: v.name,
         address: v.address,
         telephoneNo: v.telephoneNo,
@@ -362,7 +364,8 @@ async function fetchSubBranch(id: string) {
 
   if (result) {
     rowsBranch.value = result.branch.map((v) => ({
-      name: v.id,
+      id: v.id,
+      name: v.code,
       branchName: v.name,
       address: v.address,
       telephoneNo: v.telephoneNo,
@@ -666,7 +669,7 @@ onMounted(async () => {
 
           <AppBox>
             <TableCardComponent
-              @navigate="(v) => fetchSubBranch(v.name)"
+              @navigate="(v) => fetchSubBranch(v.id)"
               @showCard="(v) => fetchCard(v.name)"
               :sub-branch="subBranch"
               :rows="rowsBranch"