refactor: by data to itemCard

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;
           }