refactor: employer branch card

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

@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from 'vue';
 
 import useCustomerStore from 'src/stores/customer';
 import useFlowStore from 'src/stores/flow';
+import useOptionStore from 'src/stores/options';
 
 import { Status } from 'src/stores/types';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
@@ -45,7 +46,7 @@ const prop = withDefaults(
   },
 );
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'back'): void;
   (e: 'viewDetail', branch: CustomerBranch, index: number): void;
   (e: 'dialog'): void;
@@ -185,31 +186,29 @@ watch(currentStatus, async () => {
       </div>
     </div>
     <div
-      class="row q-pa-lg q-col-gutter-xl"
+      class="row q-pa-md q-col-gutter-md"
       :class="{ 'justify-center': totalBranch === 0 }"
       style="min-height: 350px"
     >
       <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
-      <div
-        v-for="(br, i) in branch?.sort((a, b) => a.branchNo - b.branchNo)"
-        :key="i"
-        class="col-4"
-      >
+      <div v-for="(br, i) in branch" :key="i" class="col-4">
         <BranchCardCustomer
           :inactive="br.status === 'INACTIVE'"
-          :color="customerType"
+          :color="customerType === 'CORP' ? 'corp' : 'pers'"
           :badgeField="['status']"
           :data="{
             customerBranchFormTab: br.branchNo,
             branchName: br.name,
-            address: br.address,
+            address:
+              $i18n.locale === 'en-US'
+                ? `${br.addressEN || ''} ${br.subDistrict?.nameEN || ''} ${br.district?.nameEN || ''} ${br.province?.nameEN || ''}`
+                : `${br.address || ''} ${br.subDistrict?.name || ''} ${br.district?.name || ''} ${br.province?.name || ''}`,
             telephone: br.telephoneNo,
-            businessTypePure: br.bussinessType,
-            status: 'ดำเนินการอยู่',
+            businessTypePure: useOptionStore().mapOption(br.bussinessType),
             totalEmployee: br._count?.employee,
           }"
-          @view-detail="emit('viewDetail', br, i)"
+          @view-detail="$emit('viewDetail', br, i)"
         />
       </div>
     </div>