diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 16fe0cc0..768da600 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -2,13 +2,25 @@
 import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
+
+defineProps<{
+  title?: string;
+  code?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  typeProduct?: string;
+  price?: number;
+  process?: number;
+}>();
 </script>
 
 <template>
   <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
     <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
-        <div class="col-9">ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า</div>
+        <div class="col-9">{{ title ?? 'title' }}</div>
         <div class="col-3 relative-position" style="left: 10px; bottom: 10px">
           <q-btn
             flat
@@ -61,28 +73,54 @@ const addedProduct = ref<boolean>(false);
           </q-btn>
         </div>
       </div>
-      <div class="app-text-muted">AC102</div>
-      <div class="flex justify-end text-bold" style="color: var(--green-10)">
-        ฿ 1,200.00
+      <div class="app-text-muted">{{ code ?? 'code' }}</div>
+      <div class="flex justify-start text-bold">
+        <div
+          v-if="typeProduct === 'work'"
+          class="bordered q-pa-xs row surface-0"
+          style="font-size: 12px; border-radius: 5px; width: 80px"
+        >
+          <div class="col">งาน</div>
+          <q-space />
+          <div class="col text-center">0</div>
+        </div>
+      </div>
+
+      <div
+        v-if="typeProduct === 'product'"
+        class="flex justify-end text-bold"
+        style="color: var(--green-10)"
+      >
+        ฿ {{ price }}
       </div>
       <div
         class="flex justify-center rounded items-center q-my-md q-py-lg"
-        style="background-color: var(--stone-3)"
+        :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          src="shop-image.png"
+          :src="typeProduct === 'product' ? 'shop-image.png' : 'work-image.png'"
           style="height: 86px; max-width: 100px"
         ></q-img>
       </div>
       <div class="row justify-between items-center q-mb-xs">
-        <div>
+        <div class="q-pr-md" v-if="typeProduct === 'work'">
+          <q-icon
+            name="mdi-calendar-month"
+            class="surface-0 rounded q-pa-xs app-text-muted"
+            size="20px"
+          />
+          10 ม.ค 2024
+        </div>
+
+        <div class="q-pr-md" v-if="typeProduct === 'product'">
           <q-icon
             name="mdi-clock-outline"
             class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
-          14 วัน
+          {{ process }} วัน
         </div>
+
         <div>
           <q-btn
             v-if="addedProduct"
@@ -95,10 +133,15 @@ const addedProduct = ref<boolean>(false);
           <q-btn
             v-else
             unelevated
-            class="surface-0 q-mr-sm"
-            label="เพิ่มสินค้า"
-            @click="addedProduct = true"
-            style="color: var(--blue-5)"
+            dense
+            class="q-mr-sm app-text-info"
+            label="รายละเอียด"
+            @click="$emit('viewDetail')"
+            style="
+              background-color: hsl(var(--blue-5-hsl) / 0.2);
+              max-width: 150px;
+            "
+            icon-right="mdi-chevron-right"
           />
         </div>
       </div>