refactor: by data to itemCard

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

@@ -53,14 +53,17 @@ const utilsStore = useUtilsStore();
 const modelCreateTypeBranch = ref<boolean>(false);
 const typeBranchItem = [
   {
-    icon: 'mdi-home-group',
-    text: 'Virtual Branch',
-    color: 'var(--blue-6)',
+    icon: 'material-symbols:home-work-outline',
+    text: t('branch.card.branchLabel'),
+    iconColor: '--purple-8',
+    color: 'var(--purple-6-hsl)',
   },
+
   {
     icon: 'mdi-home-group',
-    text: 'Branch',
-    color: 'var(--purple-6)',
+    text: t('branch.card.branchVirtual'),
+    iconColor: '--blue-8',
+    color: 'var(--blue-6-hsl)',
   },
 ];
 const holdDialog = ref(false);
@@ -2064,22 +2067,24 @@ watch(currentHq, () => {
     hide-footer
     no-app-box
     width="40vw"
-    height="300px"
+    height="250px"
     :close="() => (modelCreateTypeBranch = false)"
   >
-    <div class="full-height row q-pa-md">
+    <div class="full-height row q-pa-md" style="gap: 16px">
       <ItemCard
-        v-for="i in typeBranchItem"
-        class="col q-mx-sm -full-height"
-        :key="i.text"
-        :icon="i.icon"
-        :text="i.text"
-        :color="i.color"
+        v-for="(value, index) in typeBranchItem"
+        class="col full-height"
+        :key="value.text"
+        :icon="value.icon"
+        :text="value.text"
+        :icon-color="value.iconColor"
+        :bg-color="value.color"
+        :index="index"
         @trigger="
           () => {
             modelCreateTypeBranch = false;
 
-            if (i.text === 'Virtual Branch') {
+            if (value.text === 'Virtual Branch') {
               formData.virtual = true;
             } else {
               formData.virtual = false;

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

@@ -167,12 +167,14 @@ const dialogCreateCustomerItem = [
   {
     icon: 'mdi:office-building',
     text: 'customer.employerLegalEntity',
-    color: 'var(--purple-8)',
+    iconColor: '--purple-10',
+    color: 'var(--purple-8-hsl)',
   },
   {
     icon: 'heroicons:user-solid',
     text: 'customer.employerNaturalPerson',
-    color: 'var(--green-9)',
+    iconColor: '--green-11',
+    color: 'var(--green-9-hsl)',
   },
 ];
 
@@ -703,7 +705,7 @@ watch(
   },
 );
 
-const emptyCreateDialog = ref(false);
+const emptyCreateDialog = ref(true);
 </script>
 
 <template>
@@ -1672,22 +1674,23 @@ const emptyCreateDialog = ref(false);
     :title="$t('customer.employerType')"
     hide-footer
     no-app-box
-    width="60vw"
-    height="300px"
+    width="40vw"
+    height="250px"
     :close="() => (emptyCreateDialog = false)"
   >
     <div class="full-height row q-pa-md">
       <ItemCard
         class="col q-mx-sm full-height"
-        v-for="i in dialogCreateCustomerItem"
-        :key="i.text"
-        :icon="i.icon"
-        :text="i.text"
-        :color="i.color"
+        v-for="value in dialogCreateCustomerItem"
+        :key="value.text"
+        :icon="value.icon"
+        :text="value.text"
+        :icon-color="value.iconColor"
+        :bg-color="value.color"
         @trigger="
           () => {
             createCustomerForm(
-              i.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
+              value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
             );
             emptyCreateDialog = false;
           }