feat: count product type, service, product

src/components/04_product-service/ProductCardComponent.vue

@@ -12,6 +12,9 @@ withDefaults(
     isType?: boolean;
     id?: string;
     isDisabled?: boolean;
+    countType?: number;
+    countProduct?: number;
+    countService?: number;
   }>(),
   {
     color: 'var(--brand-1)',
@@ -159,21 +162,21 @@ withDefaults(
             style="border-radius: 5px"
           >
             <div><q-icon name="mdi-folder-table" /></div>
-            <div>10</div>
+            <div>{{ countType }}</div>
           </div>
           <div
             class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
             style="border-radius: 5px"
           >
             <div><q-icon name="mdi-server-network" /></div>
-            <div>10</div>
+            <div>{{ countService }}</div>
           </div>
           <div
             class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
             style="border-radius: 5px"
           >
             <div><q-icon name="mdi-shopping" /></div>
-            <div>10</div>
+            <div>{{ countProduct }}</div>
           </div>
         </div>
       </div>

src/pages/04_product-service/MainPage.vue

@@ -1250,8 +1250,11 @@ watch(inputSearchProductAndService, async () => {
           >
             <ProductCardComponent
               v-if="productMode === 'type'"
-              :title="v.name"
               isType
+              :count-product="v._count.product"
+              :count-type="v._count.type"
+              :count-service="999"
+              :title="v.name"
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
@@ -1304,6 +1307,9 @@ watch(inputSearchProductAndService, async () => {
               v-else-if="productMode === 'group'"
               :title="v.name"
               :subtitle="v.code"
+              :count-product="v._count.product"
+              :count-type="v._count.type"
+              :count-service="999"
               :date="new Date(v.updatedAt)"
               :status="v.status"
               color="var(--pink-6-hsl)"

src/stores/product-service/types.ts

@@ -158,6 +158,7 @@ export type ProductGroup = {
   createdAt: string;
   updatedBy: string;
   updatedAt: string;
+  _count: { product: number; type: number };
 };
 
 export interface ProductGroupCreate {