feat: customer card on main

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
+import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
@@ -17,11 +18,14 @@ import AboutComponent from 'src/components/03_customer-management/AboutComponent
 import ContactComponent from 'src/components/03_customer-management/ContactInformation.vue';
 import OtherInformation from 'src/components/03_customer-management/OtherInformation.vue';
 import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
 const profileFile = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
+const infoDrawer = ref(false);
 
 const inputFile = (() => {
   const element = document.createElement('input');
@@ -60,15 +64,13 @@ const customerStats = [
   {
     id: 1,
     count: 2,
-    name: 'นายจ้าง 1',
-    nameEN: 'Employer 1',
+    name: 'customerLegalEntity',
   },
 
   {
     id: 2,
     count: 3,
-    name: 'นายจ้าง 2',
-    nameEN: 'Employer 2',
+    name: 'customerNaturalPerson',
   },
 ];
 
@@ -95,8 +97,18 @@ function openDialogCustomerType() {
   dialogCustomerType.value = true;
 }
 
-function openDialogInputForm() {
-  dialogInputForm.value = true;
+function openDialogInputForm(action: 'FORM' | 'INFO' = 'FORM', id?: string) {
+  if (action === 'INFO') {
+    if (!id) return;
+    infoDrawer.value = true;
+  } else {
+    dialogInputForm.value = true;
+  }
+}
+
+function onClose() {
+  infoDrawer.value = false;
+  dialogInputForm.value = false;
 }
 </script>
 
@@ -121,10 +133,12 @@ function openDialogInputForm() {
         <div class="row full-width q-py-md" style="overflow-x: auto">
           <StatCardComponent
             v-if="customerStats"
+            labelI18n
             :branch="
               customerStats.map((v) => ({
                 count: v.count,
-                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                label: v.name,
+                color: v.name === 'customerLegalEntity' ? 'purple' : 'green',
               }))
             "
             :dark="$q.dark.isActive"
@@ -136,24 +150,74 @@ function openDialogInputForm() {
 
     <!-- main -->
     <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
-      <div class="col-1 self-end">
-        <div class="row">
-          <TooltipComponent
-            title="customerTooltipTitle"
-            caption="customerTooltipCaption"
-            imgSrc="personnel-table-"
+      <div v-if="false" class="row q-mb-md justify-between">
+        <div class="col-1 self-end">
+          <div class="row">
+            <TooltipComponent
+              title="customerTooltipTitle"
+              caption="customerTooltipCaption"
+              imgSrc="personnel-table-"
+            />
+          </div>
+        </div>
+
+        <div
+          class="col self-center"
+          style="display: flex; flex-grow: 1; align-items: center"
+        >
+          <AddButton
+            :label="'customerAdd'"
+            :cyanOn="true"
+            @trigger="openDialogCustomerType()"
           />
         </div>
       </div>
 
       <div
-        class="col self-center"
-        style="display: flex; flex-grow: 1; align-items: center"
+        class="row full-width customer-row"
+        :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : '4'}, 1fr)`"
       >
-        <AddButton
-          :label="'customerAdd'"
-          :cyanOn="true"
-          @trigger="openDialogCustomerType()"
+        <UsersDetailCardComponent
+          color="purple"
+          :metadata="{ id: '1', disabled: false }"
+          :list="{
+            id: '1',
+            type: 'customerLegalEntity',
+            name: 'เจมส์ บอน',
+            code: 'HQ007',
+            detail: [
+              {
+                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                value: 'บริษัทลับ',
+              },
+              {
+                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                value: 'บริษัทลับ',
+              },
+            ],
+          }"
+          @enter-card="openDialogInputForm"
+        />
+        <UsersDetailCardComponent
+          color="green"
+          :metadata="{ id: '1', disabled: false }"
+          :list="{
+            id: '2',
+            type: 'customerNaturalPerson',
+            name: 'ขอบใจ ขอบใจ',
+            code: 'HQ006',
+            detail: [
+              {
+                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                value: 'บริษัทเฟรบเป้',
+              },
+              {
+                label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                value: 'บริษัทเฟรบเป้',
+              },
+            ],
+          }"
+          @enter-card="openDialogInputForm"
         />
       </div>
     </AppBox>
@@ -233,6 +297,54 @@ function openDialogInputForm() {
       </div>
     </template>
   </FormDialog>
+
+  <DrawerInfo
+    :close="() => onClose()"
+    title="test"
+    v-model:drawer-open="infoDrawer"
+    badgeLabel="HQ006"
+    badgeClass="app-bg-pers"
+  >
+    <template #info>
+      <InfoForm no-address>
+        <template #person-card>
+          <div class="q-ma-md">
+            <AppBox class="surface-1" style="padding: 0">
+              <UsersDetailCardComponent
+                no-bg
+                no-detail
+                no-hover
+                color="purple"
+                :metadata="{ id: '1', disabled: false }"
+                :list="{
+                  id: '2',
+                  type: 'customerNaturalPerson',
+                  name: 'เจมส์ บอน',
+                  code: 'HQ006',
+                  detail: [
+                    {
+                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                      value: 'บริษัทเฟรบเป้',
+                    },
+                    {
+                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                      value: 'บริษัทเฟรบเป้',
+                    },
+                  ],
+                }"
+                @enter-card="openDialogInputForm"
+              />
+            </AppBox>
+          </div>
+        </template>
+      </InfoForm>
+    </template>
+  </DrawerInfo>
 </template>
 
-<style scoped></style>
+<style scoped>
+.customer-row {
+  display: grid;
+  gap: var(--size-6);
+}
+</style>