diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index d374f5be..55e8ac89 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -6,13 +6,17 @@ import { dateFormat } from 'src/utils/datetime';
 
 const addedProduct = ref<boolean>(false);
 
-import { ProductList, Service } from 'src/stores/product-service/types';
+import {
+  ServiceAndProduct,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
 
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 withDefaults(
   defineProps<{
-    data?: ProductList;
+    data?: ServiceAndProduct;
     title?: string;
 
     dense?: boolean;
@@ -24,11 +28,6 @@ withDefaults(
     isAddProduct?: boolean;
     isSelected?: boolean;
 
-    code?: string;
-    price?: number;
-    id?: string;
-    process?: number;
-    createdAt?: string;
     index?: number;
     isDisabled?: boolean;
   }>(),
@@ -111,7 +110,7 @@ withDefaults(
                       <q-toggle
                         dense
                         size="sm"
-                        @click="$emit('toggleStatus', id)"
+                        @click="$emit('toggleStatus', data?.id)"
                         :model-value="!isDisabled"
                         val="xs"
                         padding="none"
@@ -134,7 +133,7 @@ withDefaults(
 
         <q-avatar
           v-if="isAddProduct"
-          :style="`background-color: var(${typeProduct === 'product' ? '--green-10' : '--orange-8'})`"
+          :style="`background-color: var(${data?.type === 'product' ? '--green-10' : '--orange-8'})`"
           size="18px"
           text-color="white"
         >
@@ -143,10 +142,10 @@ withDefaults(
       </div>
 
       <div :class="{ inactive: isDisabled }">
-        <div class="app-text-muted">{{ code ?? 'code' }}</div>
+        <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
         <div class="flex justify-start text-bold">
           <div
-            v-if="typeProduct === 'service'"
+            v-if="data?.type === 'service'"
             class="bordered q-pa-xs row surface-0"
             style="font-size: 12px; border-radius: 5px; width: 80px"
           >
@@ -157,27 +156,27 @@ withDefaults(
         </div>
 
         <div
-          v-if="typeProduct === 'product'"
+          v-if="data?.type === 'product'"
           class="flex justify-end text-bold"
           style="color: var(--green-10)"
         >
-          ฿ {{ price }}
+          ฿ {{ data?.price }}
         </div>
 
         <div
           class="flex justify-center rounded items-center q-my-md q-py-lg"
-          :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
+          :style="`background-color: var(${data?.type === 'product' ? '--green-0' : '--orange-0'})`"
         >
           <q-img
             loading="lazy"
-            :src="`${baseUrl}/${typeProduct === 'service' ? 'service' : 'product'}/${id}/image`"
+            :src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
             style="height: 86px; max-width: 100px"
           >
             <template #error>
               <q-img
                 style="background: none; height: 86px; max-width: 100px"
                 :src="
-                  typeProduct === 'product'
+                  data?.type === 'product'
                     ? '/shop-image.png'
                     : '/service-image.png'
                 "
@@ -187,22 +186,22 @@ withDefaults(
           </q-img>
         </div>
         <div class="row justify-between items-center q-mb-xs">
-          <div class="q-pr-md" v-if="typeProduct === 'service'">
+          <div class="q-pr-md" v-if="data?.type === 'service'">
             <q-icon
               name="mdi-calendar-month"
               class="surface-0 rounded q-pa-xs app-text-muted"
               size="20px"
             />
-            {{ dateFormat(createdAt) }}
+            {{ dateFormat(data?.createdAt) }}
           </div>
 
-          <div class="q-pr-md" v-if="typeProduct === 'product'">
+          <div class="q-pr-md" v-if="data?.type === 'product'">
             <q-icon
               name="mdi-clock-outline"
               class="surface-0 rounded q-pa-xs app-text-muted"
               size="20px"
             />
-            {{ process }} วัน
+            {{ data?.process }} วัน
           </div>
         </div>
       </div>