feat: create customer dialog on empty

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

@@ -16,6 +16,7 @@ import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
 
 import { AddressForm } from 'components/form';
+import ItemCard from 'src/components/ItemCard.vue';
 import DrawerInfo from 'components/DrawerInfo.vue';
 import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import PersonCard from 'components/shared/PersonCard.vue';
@@ -134,6 +135,18 @@ const maxPageEmployee = ref<number>(1);
 const pageSize = ref<number>(10);
 const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
+const dialogCreateCustomerItem = [
+  {
+    icon: 'mdi:office-building',
+    text: 'customerLegalEntity',
+    color: 'var(--purple-8)',
+  },
+  {
+    icon: 'heroicons:user-solid',
+    text: 'customerNaturalPerson',
+    color: 'var(--green-9)',
+  },
+];
 
 watch(() => route.name, init);
 watch(
@@ -561,6 +574,8 @@ watch(
     employeeFormState.value.isEmployeeEdit = false;
   },
 );
+
+const emptyCreateDialog = ref(false);
 </script>
 
 <template>
@@ -650,8 +665,8 @@ watch(
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? (statsCustomerType?.CORP ?? 0)
-                            : (statsCustomerType?.PERS ?? 0),
+                            ? statsCustomerType?.CORP ?? 0
+                            : statsCustomerType?.PERS ?? 0,
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -1686,7 +1701,7 @@ watch(
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
+                                  ? calculateAge(props.row.dateOfBirth) ?? ''
                                   : '',
                               },
                             ],
@@ -1810,7 +1825,7 @@ watch(
                         ? 'customerEmployerAdd'
                         : 'customerEmployeeAdd'
                     "
-                    @trigger="() => {}"
+                    @trigger="() => (emptyCreateDialog = true)"
                   />
                 </div>
               </template>
@@ -1838,6 +1853,35 @@ watch(
     </div>
   </div>
 
+  <DialogForm
+    v-model:modal="emptyCreateDialog"
+    :title="$t('customerCardUserType')"
+    hide-footer
+    no-app-box
+    width="60vw"
+    height="300px"
+    :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"
+        @trigger="
+          () => {
+            createCustomerForm(
+              i.text === 'customerLegalEntity' ? 'CORP' : 'PERS',
+            );
+            emptyCreateDialog = false;
+          }
+        "
+      />
+    </div>
+  </DialogForm>
+
   <DialogContainer
     :model-value="customerFormState.dialogModal"
     :on-open="