fix: customer => branch card customer & table

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

@@ -167,6 +167,28 @@ const branchFieldSelected = ref<
   )[]
 >(fieldDisplay.value);
 
+function getCustomerName(
+  record: CustomerBranch,
+  opts?: {
+    locale?: string;
+  },
+) {
+  const customer = record;
+
+  return (
+    {
+      ['CORP']: {
+        ['eng']: customer.registerNameEN,
+        ['tha']: customer.registerName,
+      }[opts?.locale || 'eng'],
+      ['PERS']: {
+        ['eng']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstNameEN} ${customer?.lastNameEN}`,
+        ['tha']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstName} ${customer?.lastName}`,
+      }[opts?.locale || 'eng'],
+    }[customer.customer.customerType] || '-'
+  );
+}
+
 async function deleteBranchById(id: string) {
   return await new Promise((resolve) => {
     dialog({
@@ -229,8 +251,6 @@ async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
     visa: true,
   });
 
-  console.log(res);
-
   if (res) {
     listEmployee.value = res.data.result;
   }
@@ -407,7 +427,6 @@ watch(
     <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
     <div style="width: 100%" v-else>
-      {{ console.log(branch) }}
       <q-table
         v-if="branch"
         flat
@@ -454,7 +473,13 @@ watch(
                 >
                   <div
                     class="branch-card__icon"
-                    :class="{ 'branch-card__dark': $q.dark.isActive }"
+                    :class="{
+                      dark: $q.dark.isActive,
+                      'branch-card__pers':
+                        props.row.customer.customerType === 'PERS',
+                      'branch-card__corp':
+                        props.row.customer.customerType === 'CORP',
+                    }"
                   >
                     <q-icon
                       size="md"
@@ -617,7 +642,10 @@ watch(
               :badgeField="['status']"
               :data="{
                 customerBranchFormTab: props.row.branchNo,
-                branchName: props.row.name,
+                code: props.row.code,
+                branchName: getCustomerName(props.row, {
+                  locale: $i18n.locale,
+                }),
                 address:
                   $i18n.locale === 'eng'
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
@@ -950,8 +978,14 @@ watch(
   position: relative;
   transform: rotate(45deg);
 
-  &.branch-card__dark {
-    --_branch-card-bg: var(--pink-5-hsl);
+  &.branch-card__pers {
+    --_branch-card-bg: var(--teal-10-hsl);
+  }
+  &.branch-card__corp {
+    --_branch-card-bg: var(--violet-11-hsl);
+    &.dark {
+      --_branch-card-bg: var(--violet-10-hsl);
+    }
   }
 
   &::after {