diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 651a949d..94d38c56 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -59,7 +59,9 @@ const summaryPrice = defineModel<{
   },
 });
 
-const totalDiscount4show = ref(summaryPrice.value.totalDiscount.toString());
+const currentBtnOpen = ref<boolean[]>([]);
+const finalDiscount = ref<number>(0);
+const finalDiscount4Show = ref<string>(finalDiscount.value.toString());
 
 function calcPrice(c: (typeof rows.value)[number]) {
   return precisionRound(
@@ -80,7 +82,7 @@ const summary = computed(() =>
       a.totalPrice = precisionRound(a.totalPrice + price);
       a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
       a.vat = precisionRound(a.vat + vat);
-      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
+      a.finalPrice = precisionRound(a.finalPrice + price + vat);
 
       return a;
     },
@@ -88,7 +90,7 @@ const summary = computed(() =>
       totalPrice: 0,
       totalDiscount: 0,
       vat: 0,
-      finalPrice: 0,
+      finalPrice: -(+finalDiscount.value || 0),
     },
   ),
 );
@@ -158,9 +160,23 @@ const columns = [
 
 const EngBahtText = (number: number) => {
   const [baht, satang] = number.toString().split('.');
-  return `${toWords(baht)} Baht${satang && ` and ${toWords(satang)} Satang`}`;
+  const bahtText =
+    toWords(baht).charAt(0).toUpperCase() + toWords(baht).slice(1);
+  const satangText =
+    toWords(satang).charAt(0).toUpperCase() + toWords(satang).slice(1);
+  return `${bahtText} Baht${satang ? ` and ${satangText} Satang` : ''}`;
 };
 
+function openEmployeeTable(index: number) {
+  currentBtnOpen.value.map((_, i) => {
+    if (i !== index) {
+      currentBtnOpen.value[i] = false;
+    }
+  });
+
+  currentBtnOpen.value[index] = !currentBtnOpen.value[index];
+}
+
 watch(
   () => summary.value,
   () => {
@@ -280,7 +296,22 @@ watch(
             </q-td>
           </template>
 
-          <template #button>
+          <template #button="{ props }">
+            <q-btn
+              @click.stop="openEmployeeTable(props.rowIndex)"
+              dense
+              flat
+              size="sm"
+              class="rounded q-mr-xs"
+            >
+              <div class="row items-center no-wrap">
+                <q-icon name="mdi-account-group-outline" />
+                <q-icon
+                  size="xs"
+                  :name="`mdi-chevron-${currentBtnOpen[props.rowIndex] ? 'down' : 'up'}`"
+                />
+              </div>
+            </q-btn>
             <q-btn
               icon="mdi-monitor"
               size="sm"
@@ -298,14 +329,14 @@ watch(
       </section>
     </div>
 
-    <div class="row text-weight-bold text-caption items-start">
+    <div class="row items-start">
       <span
-        class="col row items-center justify-between q-px-md q-py-xs q-mr-lg rounded bg-color-orange-light"
+        class="col row items-center justify-between q-px-md q-py-xs q-mr-lg rounded app-text-muted-2 bg-color-orange-light"
       >
-        <span class="app-text-muted-2">
+        <span class="text-weight-bold text-caption">
           {{ $t('general.totalAmount') }}
         </span>
-        <span v-if="summary.finalPrice">
+        <span v-if="summary.finalPrice + Number(finalDiscount)">
           {{
             $i18n.locale === 'eng'
               ? EngBahtText(summary.finalPrice)
@@ -325,40 +356,34 @@ watch(
             readonly
             outlined
             input-class="text-right text-bold "
-            :model-value="formatNumberDecimal(summary.totalPrice, 2)"
+            :model-value="
+              formatNumberDecimal(summary.finalPrice + Number(finalDiscount), 2)
+            "
           />
         </div>
 
         <div class="row q-py-xs q-pr-xs q-pl-md">
           <span class="col-9 app-text-muted-2">
             {{ $t('quotation.quotationDiscount') }}
-            {{ console.log(totalDiscount4show) }}
           </span>
           <q-input
             dense
             class="col price-tag"
             outlined
             input-class="text-right text-bold"
-            v-model="summary.totalDiscount"
-          />
-          <!-- <q-input
-            dense
-            class="col price-tag"
-            outlined
-            input-class="text-right text-bold"
-            :model-value="commaInput(summary.totalDiscount.toString())"
+            :model-value="commaInput(finalDiscount.toString())"
             @update:model-value="
               (v) => {
-                if (typeof v === 'string') totalDiscount4show = commaInput(v);
-                const x = parseInt(
-                  totalDiscount4show && typeof totalDiscount4show === 'string'
-                    ? totalDiscount4show.replace(/,/g, '')
+                if (typeof v === 'string') finalDiscount4Show = commaInput(v);
+                const x = parseFloat(
+                  finalDiscount4Show && typeof finalDiscount4Show === 'string'
+                    ? finalDiscount4Show.replace(/,/g, '')
                     : '',
                 );
-                summary.totalDiscount = x;
+                finalDiscount = x;
               }
             "
-          /> -->
+          />
         </div>
 
         <div
@@ -374,7 +399,9 @@ watch(
             outlined
             readonly
             input-class="text-right text-bold "
-            :model-value="formatNumberDecimal(summary.finalPrice, 2)"
+            :model-value="
+              formatNumberDecimal(Math.max(summary.finalPrice, 0), 2)
+            "
           />
         </div>
       </div>