diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index be383300..4c3d3df9 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { formatNumberDecimal, commaInput } from 'stores/utils';
-import { QTableProps } from 'quasar';
+import { QTableProps, QTableSlots } from 'quasar';
 import { calculatePrice } from 'src/utils/arithmetic';
 
 const serviceCharge = defineModel<number>('serviceCharge');
@@ -9,24 +9,48 @@ const agentPrice = defineModel<number>('agentPrice');
 const price = defineModel<number>('price');
 const vatIncluded = defineModel<boolean>('vatIncluded');
 const calcVat = defineModel<boolean>('calcVat');
+const agentPriceVatIncluded = defineModel<boolean>('agentPriceVatIncluded');
+const agentPriceCalcVat = defineModel<boolean>('agentPriceCalcVat');
+const serviceChargeVatIncluded = defineModel<boolean>(
+  'serviceChargeVatIncluded',
+);
+const serviceChargeCalcVat = defineModel<boolean>('serviceChargeCalcVat');
 
-const price4Show = ref<string>(commaInput(price.value?.toString() || '0'));
-const agentPrice4Show = ref<string>(
+const formattedPrice = ref<string>(commaInput(price.value?.toString() || '0'));
+const formattedAgentPrice = ref<string>(
   commaInput(agentPrice.value?.toString() || '0'),
 );
-const serviceCharge4Show = ref<string>(
+const formattedServiceCharge = ref<string>(
   commaInput(serviceCharge.value?.toString() || '0'),
 );
 
-const column = [
+type RowData = {
+  pricePerUnit: number;
+  calcVat: boolean;
+  vatIncluded: boolean;
+};
+
+const columns = [
   {
     name: 'label',
-    align: 'center',
+    align: 'left',
     label: 'productService.product.priceInformation',
     field: 'label',
   },
   {
-    name: 'pricePerUnit',
+    name: '#calcVat',
+    align: 'center',
+    label: 'general.calculateVat',
+    field: '#calcVat',
+  },
+  {
+    name: '#vatIncluded',
+    align: 'center',
+    label: 'productService.product.vatIncluded',
+    field: '#vatIncluded',
+  },
+  {
+    name: '#pricePerUnit',
     align: 'center',
     label: 'quotation.pricePerUnit',
     field: 'pricePerUnit',
@@ -35,54 +59,77 @@ const column = [
     name: 'beforeVat',
     align: 'right',
     label: 'quotation.priceBeforeVat',
-    field: 'beforeVat',
+    field: (data: RowData) =>
+      formatNumberDecimal(
+        calculatePrice({
+          output: 'beforeVat',
+          vatIncluded: data.vatIncluded,
+          price: data.pricePerUnit || 0,
+        }),
+        2,
+      ),
   },
   {
     name: 'vat',
     align: 'right',
     label: 'general.vat',
-    field: 'vat',
+    field: (data: RowData) =>
+      formatNumberDecimal(
+        calculatePrice({
+          output: 'vat',
+          calcVat: data.calcVat,
+          price: Number(
+            formatNumberDecimal(
+              calculatePrice({
+                output: 'beforeVat',
+                vatIncluded: data.vatIncluded,
+                price: data.pricePerUnit,
+              }),
+              2,
+            ).replaceAll(',', ''),
+          ),
+        }),
+        2,
+      ),
   },
   {
     name: 'total',
     align: 'right',
     label: 'quotation.sumPrice',
-    field: 'total',
+    field: (data: RowData) =>
+      formatNumberDecimal(
+        calculatePrice({
+          output: 'total',
+          vat: 0.07,
+          price: data.pricePerUnit,
+        }) +
+          (!data.vatIncluded
+            ? calculatePrice({
+                output: 'vat',
+                calcVat: data.calcVat,
+                price: data.pricePerUnit,
+              })
+            : 0),
+        2,
+      ),
   },
-] as const satisfies QTableProps['columns'];
+] as QTableProps['columns'];
 
-const row = [
-  {
-    label: 'productService.product.salePrice',
-    beforeVat: 0,
-    vat: 0,
-    total: 0,
-  },
-  {
-    label: 'productService.product.agentPrice',
-    beforeVat: 0,
-    vat: 0,
-    total: 0,
-  },
-  {
-    label: 'productService.product.processingPrice',
-    beforeVat: 0,
-    vat: 0,
-    total: 0,
-  },
-] as const satisfies QTableProps['rows'];
-
-watch(calcVat, () => {
-  if (calcVat.value === false) vatIncluded.value = false;
+watch([calcVat, agentPriceCalcVat, serviceChargeCalcVat], () => {
+  if (calcVat.value === false) {
+    vatIncluded.value = false;
+  }
+  if (agentPriceCalcVat.value === false) {
+    agentPriceVatIncluded.value = false;
+  }
+  if (serviceChargeCalcVat.value === false) {
+    serviceChargeVatIncluded.value = false;
+  }
 });
 
 withDefaults(
   defineProps<{
-    dense?: boolean;
-    outlined?: boolean;
     readonly?: boolean;
-    separator?: boolean;
-    isType?: boolean;
     priceDisplay?: {
       price: boolean;
       agentPrice: boolean;
@@ -115,255 +162,239 @@ withDefaults(
           {{ $t('productService.product.priceInformation') }}
         </span>
       </div>
-      <section class="q-pr-md">
-        <input
-          id="input-calc-vat"
-          type="checkbox"
-          v-model="calcVat"
-          :disabled="readonly"
-        />
-        <label
-          class="q-pl-sm"
-          for="input-calc-vat"
-          :style="{ opacity: readonly ? '.5' : undefined }"
-        >
-          {{ $t('general.calculateVat') }}
-        </label>
-      </section>
-      <div
-        class="surface-3 q-px-sm q-py-xs row text-caption app-text-muted"
-        style="border-radius: var(--radius-3)"
-        v-if="calcVat"
-      >
-        <span
-          id="btn-include-vat"
-          for="btn-include-vat"
-          class="q-px-sm q-mr-lg rounded cursor-pointer"
-          :class="{
-            dark: $q.dark.isActive,
-            'active-addr': vatIncluded,
-            'cursor-not-allowed': readonly,
-          }"
-          @click="readonly ? '' : (vatIncluded = true)"
-        >
-          {{ $t('productService.product.vatIncluded') }}
-        </span>
-        <span
-          id="btn-no-include-vat"
-          for="btn-no-include-vat"
-          class="q-px-sm rounded cursor-pointer"
-          :class="{
-            dark: $q.dark.isActive,
-            'active-addr': !vatIncluded,
-            'cursor-not-allowed': readonly,
-          }"
-          @click="readonly ? '' : (vatIncluded = false)"
-        >
-          {{ $t('productService.product.vatExcluded') }}
-        </span>
-      </div>
     </div>
 
     <div class="col-12 full-width">
       <q-table
-        :columns="column"
-        :rows="row"
         :rows-per-page-options="[0]"
+        :rows="[
+          {
+            label: $t('productService.product.salePrice'),
+            pricePerUnit: price,
+            calcVat,
+            vatIncluded,
+          },
+          {
+            label: $t('productService.product.agentPrice'),
+            calcVat: agentPriceCalcVat,
+            vatIncluded: agentPriceVatIncluded,
+            pricePerUnit: agentPrice,
+          },
+          {
+            label: $t('productService.product.processingPrice'),
+            calcVat: serviceChargeCalcVat,
+            vatIncluded: serviceChargeVatIncluded,
+            pricePerUnit: serviceCharge,
+          },
+        ]"
+        :columns
+        hide-bottom
         bordered
         flat
         hide-pagination
+        selection="multiple"
         class="full-width"
-        :no-data-label="$t('general.noDataTable')"
       >
         <template v-slot:header="props">
           <q-tr
             style="background-color: hsla(var(--info-bg) / 0.07)"
             :props="props"
           >
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              {{ col.label && $t(col.label) }}
+            <q-th v-for="col in columns" :key="col.name" :props="props">
+              <template v-if="!!col.label">
+                {{ $t(col.label) }}
+              </template>
             </q-th>
           </q-tr>
         </template>
 
-        <template v-slot:body="props">
-          <q-tr>
-            <q-td>{{ $t(props.row.label) }}</q-td>
-            <q-td class="text-right" style="width: 15%">
-              <q-input
-                v-if="priceDisplay?.price && props.rowIndex === 0"
-                id="input-price"
-                for="input-price"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                :borderless="readonly"
-                hide-bottom-space
-                input-class="text-right"
-                :model-value="price4Show"
-                @blur="
-                  () => {
-                    price = Number(price4Show.replace(/,/g, ''));
-                    if (price % 1 === 0) {
-                      const [, dec] = price4Show.split('.');
-                      if (!dec) {
-                        price4Show += '.00';
+        <template
+          v-slot:body="props: {
+            row: RowData;
+          } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+        >
+          <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+            <q-td v-for="(col, i) in columns" :align="col.align" :key="i">
+              <!-- NOTE: custom column will starts with # -->
+              <template v-if="!col.name.startsWith('#')">
+                <span
+                  v-if="col.name === 'total'"
+                  class="text-weight-bold"
+                  :class="{
+                    ['tags-color-orange']: props.rowIndex === 0,
+                    ['tags-color-purple']: props.rowIndex === 1,
+                    ['tags-color-pink']: props.rowIndex === 2,
+                    ['dark']: $q.dark.isActive,
+                  }"
+                >
+                  {{
+                    typeof col.field === 'string'
+                      ? props.row[col.field as keyof RowData]
+                      : col.field(props.row)
+                  }}
+                </span>
+                <template v-else>
+                  {{
+                    typeof col.field === 'string'
+                      ? props.row[col.field as keyof RowData]
+                      : col.field(props.row)
+                  }}
+                </template>
+              </template>
+              <template v-if="col.name === '#calcVat'">
+                <q-checkbox
+                  v-if="priceDisplay?.price && props.rowIndex === 0"
+                  v-model="calcVat"
+                  size="xs"
+                />
+                <q-checkbox
+                  v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                  v-model="agentPriceCalcVat"
+                  size="xs"
+                />
+                <q-checkbox
+                  v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                  v-model="serviceChargeCalcVat"
+                  size="xs"
+                />
+              </template>
+              <template v-if="col.name === '#vatIncluded'">
+                <q-select
+                  :options="[
+                    { label: $t('general.included'), value: true },
+                    { label: $t('general.notIncluded'), value: false },
+                  ]"
+                  v-if="priceDisplay?.price && props.rowIndex === 0"
+                  map-options
+                  emit-value
+                  flat
+                  outlined
+                  dense
+                  v-model="vatIncluded"
+                ></q-select>
+                <q-select
+                  :options="[
+                    { label: $t('general.included'), value: true },
+                    { label: $t('general.notIncluded'), value: false },
+                  ]"
+                  v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                  map-options
+                  emit-value
+                  flat
+                  outlined
+                  dense
+                  v-model="agentPriceVatIncluded"
+                ></q-select>
+                <q-select
+                  :options="[
+                    { label: $t('general.included'), value: true },
+                    { label: $t('general.notIncluded'), value: false },
+                  ]"
+                  v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                  map-options
+                  emit-value
+                  flat
+                  outlined
+                  dense
+                  v-model="serviceChargeVatIncluded"
+                ></q-select>
+              </template>
+              <template v-if="col.name === '#pricePerUnit'">
+                <q-input
+                  v-if="priceDisplay?.price && props.rowIndex === 0"
+                  id="input-price"
+                  for="input-price"
+                  dense
+                  outlined
+                  hide-bottom-space
+                  input-class="text-right"
+                  :readonly
+                  :borderless="readonly"
+                  :model-value="formattedPrice"
+                  @blur="
+                    () => {
+                      price = Number(formattedPrice.replace(/,/g, ''));
+                      if (price % 1 === 0 && !formattedPrice.split('.').at(1)) {
+                        formattedPrice += '.00';
                       }
                     }
-                  }
-                "
-                @update:model-value="
-                  (v) => {
-                    price4Show = commaInput(v?.toString() || '0', 'string');
-                  }
-                "
-              />
-              <q-input
-                v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
-                id="input-agent-price"
-                for="input-agent-price"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                :borderless="readonly"
-                hide-bottom-space
-                input-class="text-right"
-                :model-value="agentPrice4Show"
-                @blur="
-                  () => {
-                    agentPrice = Number(agentPrice4Show.replace(/,/g, ''));
-                    if (agentPrice % 1 === 0) {
-                      const [, dec] = agentPrice4Show.split('.');
-                      if (!dec) {
-                        agentPrice4Show += '.00';
+                  "
+                  @update:model-value="
+                    (v) => {
+                      formattedPrice = commaInput(
+                        v?.toString() || '0',
+                        'string',
+                      );
+                    }
+                  "
+                />
+                <q-input
+                  v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                  id="input-agent-price"
+                  for="input-agent-price"
+                  dense
+                  outlined
+                  hide-bottom-space
+                  input-class="text-right"
+                  :readonly
+                  :borderless="readonly"
+                  :model-value="formattedAgentPrice"
+                  @blur="
+                    () => {
+                      agentPrice = Number(
+                        formattedAgentPrice.replace(/,/g, ''),
+                      );
+                      if (
+                        agentPrice % 1 === 0 &&
+                        !formattedAgentPrice.split('.').at(1)
+                      ) {
+                        formattedAgentPrice += '.00';
                       }
                     }
-                  }
-                "
-                @update:model-value="
-                  (v) => {
-                    agentPrice4Show = commaInput(
-                      v?.toString() || '0',
-                      'string',
-                    );
-                  }
-                "
-              />
-              <q-input
-                v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
-                id="input-service-charge"
-                for="input-service-charge"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                :borderless="readonly"
-                input-class="text-right"
-                hide-bottom-space
-                :model-value="serviceCharge4Show"
-                @blur="
-                  () => {
-                    serviceCharge = Number(
-                      serviceCharge4Show.replace(/,/g, ''),
-                    );
-                    if (serviceCharge % 1 === 0) {
-                      const [, dec] = serviceCharge4Show.split('.');
-                      if (!dec) {
-                        serviceCharge4Show += '.00';
+                  "
+                  @update:model-value="
+                    (v) => {
+                      formattedAgentPrice = commaInput(
+                        v?.toString() || '0',
+                        'string',
+                      );
+                    }
+                  "
+                />
+                <q-input
+                  v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                  id="input-service-charge"
+                  for="input-service-charge"
+                  dense
+                  outlined
+                  input-class="text-right"
+                  hide-bottom-space
+                  :readonly
+                  :borderless="readonly"
+                  :model-value="formattedServiceCharge"
+                  @blur="
+                    () => {
+                      serviceCharge = Number(
+                        formattedServiceCharge.replace(/,/g, ''),
+                      );
+                      if (
+                        serviceCharge % 1 === 0 &&
+                        !formattedServiceCharge.split('.').at(1)
+                      ) {
+                        formattedServiceCharge += '.00';
                       }
                     }
-                  }
-                "
-                @update:model-value="
-                  (v) => {
-                    serviceCharge4Show = commaInput(
-                      v?.toString() || '0',
-                      'string',
-                    );
-                  }
-                "
-              />
-            </q-td>
-            <q-td class="text-right" style="width: 15%">
-              {{
-                formatNumberDecimal(
-                  calculatePrice({
-                    output: 'beforeVat',
-                    vatIncluded: vatIncluded,
-                    price:
-                      (props.rowIndex === 0
-                        ? price
-                        : props.rowIndex === 1
-                          ? agentPrice
-                          : serviceCharge) || 0,
-                  }),
-                  2,
-                )
-              }}
-            </q-td>
-            <q-td class="text-right" style="width: 15%">
-              {{
-                formatNumberDecimal(
-                  calculatePrice({
-                    output: 'vat',
-                    calcVat: calcVat,
-                    price: Number(
-                      formatNumberDecimal(
-                        calculatePrice({
-                          output: 'beforeVat',
-                          vatIncluded: vatIncluded,
-                          price:
-                            (props.rowIndex === 0
-                              ? price
-                              : props.rowIndex === 1
-                                ? agentPrice
-                                : serviceCharge) || 0,
-                        }),
-                        2,
-                      ).replaceAll(',', ''),
-                    ),
-                  }),
-                  2,
-                )
-              }}
-            </q-td>
-            <q-td class="text-right" style="width: 15%">
-              <span
-                class="text-weight-bold"
-                :class="{
-                  'tags-color-orange': props.rowIndex === 0,
-                  'tags-color-purple': props.rowIndex === 1,
-                  'tags-color-pink': props.rowIndex === 2,
-                  dark: $q.dark.isActive,
-                }"
-              >
-                {{
-                  formatNumberDecimal(
-                    calculatePrice({
-                      output: 'total',
-                      vat: 0.03,
-                      price:
-                        (props.rowIndex === 0
-                          ? price
-                          : props.rowIndex === 1
-                            ? agentPrice
-                            : serviceCharge) || 0,
-                    }) +
-                      (!vatIncluded
-                        ? calculatePrice({
-                            output: 'vat',
-                            calcVat: calcVat,
-                            price:
-                              (props.rowIndex === 0
-                                ? price
-                                : props.rowIndex === 1
-                                  ? agentPrice
-                                  : serviceCharge) || 0,
-                          })
-                        : 0),
-                    2,
-                  )
-                }}
-              </span>
+                  "
+                  @update:model-value="
+                    (v) => {
+                      formattedServiceCharge = commaInput(
+                        v?.toString() || '0',
+                        'string',
+                      );
+                    }
+                  "
+                />
+              </template>
             </q-td>
           </q-tr>
         </template>
@@ -373,16 +404,6 @@ withDefaults(
 </template>
 
 <style scoped>
-.active-addr {
-  color: hsl(var(--info-bg));
-  background-color: hsla(var(--info-bg) / 0.1);
-  border-radius: var(--radius-3);
-
-  &.dark {
-    background-color: var(--surface-1);
-  }
-}
-
 .tags-color-orange {
   color: var(--orange-5);
 }
diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 65abb484..a250b658 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -64,7 +64,7 @@ function calcPrice(c: (typeof rows.value)[number]) {
   const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
 
   const price = finalPriceNoVat * c.amount - c.discount;
-  const vat = c.product.calcVat
+  const vat = c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
     ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
     : 0;
   return precisionRound(price + vat);
@@ -387,7 +387,9 @@ watch(
                 {{
                   formatNumberDecimal(
                     props.row.pricePerUnit +
-                      (props.row.product.calcVat
+                      (props.row.product[
+                        agentPrice ? 'agentPriceCalcVat' : 'calcVat'
+                      ]
                         ? props.row.pricePerUnit * (config?.vat || 0.07)
                         : 0),
                     2,
@@ -443,7 +445,9 @@ watch(
               <q-td align="right">
                 {{
                   formatNumberDecimal(
-                    props.row.product.calcVat
+                    props.row.product[
+                      agentPrice ? 'agentPriceCalcVat' : 'calcVat'
+                    ]
                       ? precisionRound(
                           (props.row.pricePerUnit * props.row.amount -
                             props.row.discount) *
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index ad494148..f04526da 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -145,6 +145,8 @@ export default {
     quotationPayment: 'Used to display payment details',
     orderDetail: 'To display the list of employees in that product',
     ofPage: '{current} of {total}',
+    included: 'Included',
+    notIncluded: 'Not Included',
   },
 
   menu: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 7f5929bf..cf6037b8 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -147,6 +147,8 @@ export default {
     quotationPayment: 'ใช้แสดงรายละเอียดในการชำระเงิน',
     orderDetail: 'เพื่อแสดงรายชื่อลูกจ้างในสินค้านั้นๆ',
     ofPage: '{current} จาก {total}',
+    included: 'รวม',
+    notIncluded: 'ไม่รวม',
   },
 
   menu: {
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 75e63a9d..e6ca784d 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1014,6 +1014,10 @@ const currentNoAction = ref(false);
 const prevProduct = ref<ProductCreate>({
   expenseType: '',
   vatIncluded: true,
+  agentPriceVatIncluded: true,
+  agentPriceCalcVat: true,
+  serviceChargeVatIncluded: true,
+  serviceChargeCalcVat: true,
   productGroupId: '',
   remark: '',
   serviceCharge: 0,
@@ -1050,6 +1054,10 @@ async function assignFormDataProduct(data: Product) {
     status: data.status,
     expenseType: data.expenseType,
     vatIncluded: data.vatIncluded,
+    serviceChargeCalcVat: data.serviceChargeCalcVat,
+    serviceChargeVatIncluded: data.serviceChargeVatIncluded,
+    agentPriceCalcVat: data.agentPriceCalcVat,
+    agentPriceVatIncluded: data.agentPriceVatIncluded,
     selectedImage: data.selectedImage,
     document: data.document,
     shared: data.shared,
@@ -1086,6 +1094,10 @@ function clearFormProduct() {
     expenseType: '',
     calcVat: true,
     vatIncluded: true,
+    agentPriceCalcVat: true,
+    agentPriceVatIncluded: true,
+    serviceChargeCalcVat: true,
+    serviceChargeVatIncluded: true,
     shared: false,
   };
   imageProduct.value = undefined;
@@ -3900,7 +3912,12 @@ watch(
             v-model:service-charge="formProduct.serviceCharge"
             v-model:vat-included="formProduct.vatIncluded"
             v-model:calc-vat="formProduct.calcVat"
-            dense
+            v-model:agent-price-vat-included="formProduct.agentPriceVatIncluded"
+            v-model:agent-price-calc-vat="formProduct.agentPriceCalcVat"
+            v-model:service-charge-vat-included="
+              formProduct.serviceChargeVatIncluded
+            "
+            v-model:service-charge-calc-vat="formProduct.serviceChargeCalcVat"
           />
           <FormDocument
             v-if="productTab === 3"
@@ -4109,7 +4126,12 @@ watch(
             v-model:service-charge="formProduct.serviceCharge"
             v-model:vat-included="formProduct.vatIncluded"
             v-model:calc-vat="formProduct.calcVat"
-            dense
+            v-model:agent-price-vat-included="formProduct.agentPriceVatIncluded"
+            v-model:agent-price-calc-vat="formProduct.agentPriceCalcVat"
+            v-model:service-charge-vat-included="
+              formProduct.serviceChargeVatIncluded
+            "
+            v-model:service-charge-calc-vat="formProduct.serviceChargeCalcVat"
             :priceDisplay="priceDisplay"
           />
           <FormDocument
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index ce4fd1ba..23a6221d 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -251,10 +251,13 @@ function getPrice(
       const vat =
         (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
 
+      const calcVat =
+        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+
       a.totalPrice = precisionRound(a.totalPrice + price);
       a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
-      a.vatExcluded = c.product.calcVat
+      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
+      a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
       a.finalPrice = precisionRound(
@@ -424,6 +427,7 @@ async function fetchQuotation() {
     const id = currentQuotationId.value || quotationFormData.value.id || '';
 
     await quotationForm.assignFormData(id, quotationFormState.value.mode);
+
     tempPaySplitCount.value = quotationFormData.value.paySplitCount || 0;
     tempPaySplit.value = JSON.parse(
       JSON.stringify(quotationFormData.value.paySplit),
@@ -606,6 +610,7 @@ async function convertDataToFormSubmit() {
     status: quotationFormData.value.status,
     discount: quotationFormData.value.discount,
     remark: quotationFormData.value.remark || '',
+    agentPrice: agentPrice.value,
   };
 
   newWorkerList.value = [];
@@ -1119,6 +1124,7 @@ function storeDataLocal() {
         },
         selectedWorker: selectedWorker.value,
         createdBy: quotationFormState.value.createdBy('tha'),
+        agentPrice: agentPrice.value,
       },
     }),
   );
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index 5c599330..066f2acf 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -260,7 +260,11 @@ function mapNode() {
                 const price = prop.agentPrice
                   ? p.product.agentPrice
                   : p.product.price;
-                const pricePerUnit = p.product.vatIncluded
+                const pricePerUnit = (
+                  prop.agentPrice
+                    ? p.product.agentPriceVatIncluded
+                    : p.product.vatIncluded
+                )
                   ? precisionRound(price / (1 + (config.value?.vat || 0.07)))
                   : price;
                 productCount.value++;
@@ -303,7 +307,11 @@ function mapNode() {
                 const price = prop.agentPrice
                   ? p.product.agentPrice
                   : p.product.price;
-                const pricePerUnit = p.product.vatIncluded
+                const pricePerUnit = (
+                  prop.agentPrice
+                    ? p.product.agentPriceVatIncluded
+                    : p.product.vatIncluded
+                )
                   ? precisionRound(price / (1 + (config.value?.vat || 0.07)))
                   : price;
                 productCount.value++;
@@ -334,7 +342,9 @@ function mapNode() {
       };
     } else {
       const price = prop.agentPrice ? v.raw.agentPrice : v.raw.price;
-      const pricePerUnit = v.raw.vatIncluded
+      const pricePerUnit = (
+        prop.agentPrice ? v.raw.agentPriceVatIncluded : v.raw.vatIncluded
+      )
         ? precisionRound(price / (1 + (config.value?.vat || 0.07)))
         : price;
       productCount.value++;
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index f18997e7..5f54dc2c 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -39,6 +39,7 @@ export const DEFAULT_DATA: QuotationPayload = {
   _count: { worker: 0 },
   status: 'CREATED',
   remark: '#[quotation-labor]<br/><br/>#[quotation-payment]',
+  agentPrice: false,
 };
 
 const DEFAULT_DATA_INVOICE: InvoicePayload = {
diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index 28eff17e..dc0128f0 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -19,6 +19,7 @@ import {
   QuotationPayload,
   Details,
   QuotationFull,
+  ProductRelation,
 } from 'src/stores/quotations/types';
 
 // NOTE: Import Components
@@ -40,11 +41,12 @@ type Product = {
   code: string;
   detail: string;
   amount: number;
-  priceUnit: number;
+  pricePerUnit: number;
   discount: number;
   vat: number;
   value: number;
   calcVat: boolean;
+  product: ProductRelation;
 };
 
 type SummaryPrice = {
@@ -60,6 +62,8 @@ const branch = ref<Branch>();
 const productList = ref<Product[]>([]);
 const bankList = ref<BankBook[]>([]);
 
+const agentPrice = ref(false);
+
 const elements = ref<HTMLElement[]>([]);
 const chunks = ref<Product[][]>([[]]);
 const attachmentList = ref<
@@ -194,6 +198,8 @@ onMounted(async () => {
       customer.value = resCustomerBranch;
     }
 
+    agentPrice.value = data.value.agentPrice || parsed?.meta?.agentPrice;
+
     details.value = {
       code: parsed?.meta?.source?.code ?? data.value?.code,
       createdAt:
@@ -247,11 +253,12 @@ onMounted(async () => {
             code: v.product.code,
             detail: v.product.name,
             amount: v.amount || 0,
-            priceUnit: v.pricePerUnit || 0,
+            pricePerUnit: v.pricePerUnit || 0,
             discount: v.discount || 0,
             vat: v.vat || 0,
             value: precisionRound(price + (v.product.calcVat ? vat : 0)),
             calcVat: v.product.calcVat,
+            product: v.product,
           };
         },
       ) || [];
@@ -273,10 +280,13 @@ onMounted(async () => {
       const vat =
         (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
 
+      const calcVat =
+        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+
       a.totalPrice = precisionRound(a.totalPrice + price);
       a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
-      a.vatExcluded = c.product.calcVat
+      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
+      a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
       a.finalPrice = precisionRound(
@@ -285,7 +295,6 @@ onMounted(async () => {
           a.vat -
           Number(data.value?.discount || 0),
       );
-
       return a;
     },
     {
@@ -300,6 +309,20 @@ onMounted(async () => {
   assignData();
 });
 
+function calcPrice(c: Product) {
+  const originalPrice = c.pricePerUnit;
+  const finalPriceWithVat = precisionRound(
+    originalPrice + originalPrice * (config.value?.vat || 0.07),
+  );
+  const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
+
+  const price = finalPriceNoVat * c.amount - c.discount;
+  const vat = c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
+    ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
+    : 0;
+  return precisionRound(price + vat);
+}
+
 watch(elements, () => {});
 
 function print() {
@@ -359,7 +382,15 @@ function print() {
             <td>{{ v.detail }}</td>
             <td style="text-align: right">{{ v.amount }}</td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.priceUnit, 2) }}
+              {{
+                formatNumberDecimal(
+                  v.pricePerUnit +
+                    (v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+                      ? v.pricePerUnit * (config?.vat || 0.07)
+                      : 0),
+                  2,
+                )
+              }}
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(v.discount, 2) }}
@@ -367,9 +398,9 @@ function print() {
             <td style="text-align: right">
               {{
                 formatNumberDecimal(
-                  v.calcVat
+                  v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
                     ? precisionRound(
-                        (v.priceUnit * v.amount - v.discount) *
+                        (v.pricePerUnit * v.amount - v.discount) *
                           (config?.vat || 0.07),
                       )
                     : 0,
@@ -378,7 +409,7 @@ function print() {
               }}
             </td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.value, 2) }}
+              {{ formatNumberDecimal(calcPrice(v), 2) }}
             </td>
           </tr>
         </tbody>
diff --git a/src/pages/09_task-order/document_view/MainPage.vue b/src/pages/09_task-order/document_view/MainPage.vue
index 6fe5ed02..a9d5eb22 100644
--- a/src/pages/09_task-order/document_view/MainPage.vue
+++ b/src/pages/09_task-order/document_view/MainPage.vue
@@ -199,7 +199,7 @@ onMounted(async () => {
     })
     .reduce(
       (a, c) => {
-        const priceNoVat = c.product.vatIncluded
+        const priceNoVat = c.product.serviceChargeVatIncluded
           ? c.pricePerUnit / (1 + (config.value?.vat || 0.07))
           : c.pricePerUnit;
         const adjustedPriceWithVat = precisionRound(
@@ -219,9 +219,10 @@ onMounted(async () => {
           priceUnit: precisionRound(priceNoVat),
           amount: c.amount,
           discount: c.discount,
-          vat: c.product.calcVat ? precisionRound(rawVat) : 0,
+          vat: c.product.serviceChargeCalcVat ? precisionRound(rawVat) : 0,
           value: precisionRound(
-            priceNoVat * c.amount + (c.product.calcVat ? rawVatTotal : 0),
+            priceNoVat * c.amount +
+              (c.product.serviceChargeCalcVat ? rawVatTotal : 0),
           ),
         });
 
diff --git a/src/pages/09_task-order/expansion/ProductExpansion.vue b/src/pages/09_task-order/expansion/ProductExpansion.vue
index f38b2507..f5f059f6 100644
--- a/src/pages/09_task-order/expansion/ProductExpansion.vue
+++ b/src/pages/09_task-order/expansion/ProductExpansion.vue
@@ -56,18 +56,25 @@ function openList(index: number) {
 }
 
 function calcPricePerUnit(product: RequestWork['productService']['product']) {
-  return product.vatIncluded
-    ? (props.creditNote
+  const val = props.creditNote
+    ? props.agentPrice
+      ? product.agentPrice
+      : product.price
+    : product.serviceCharge;
+
+  if (
+    product[
+      props.creditNote
         ? props.agentPrice
-          ? product.agentPrice
-          : product.price
-        : product.serviceCharge) /
-        (1 + (config.value?.vat || 0.07))
-    : props.creditNote
-      ? props.agentPrice
-        ? product.agentPrice
-        : product.price
-      : product.serviceCharge;
+          ? 'agentPriceCalcVat'
+          : 'calcVat'
+        : 'serviceChargeCalcVat'
+    ]
+  ) {
+    return val / (1 + (config.value?.vat || 0.07));
+  } else {
+    return val;
+  }
 }
 
 function calcPrice(
@@ -81,12 +88,24 @@ function calcPrice(
     : product.serviceCharge;
   const discount =
     taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
-  const priceNoVat = product.vatIncluded
+  const priceNoVat = product[
+    props.creditNote
+      ? props.agentPrice
+        ? 'agentPriceVatIncluded'
+        : 'vatIncluded'
+      : 'serviceChargeVatIncluded'
+  ]
     ? pricePerUnit / (1 + (config.value?.vat || 0.07))
     : pricePerUnit;
   const priceDiscountNoVat = priceNoVat * amount - discount;
 
-  const rawVatTotal = product.calcVat
+  const rawVatTotal = product[
+    props.creditNote
+      ? props.agentPrice
+        ? 'agentPriceCalcVat'
+        : 'calcVat'
+      : 'serviceChargeCalcVat'
+  ]
     ? priceDiscountNoVat * (config.value?.vat || 0.07)
     : 0;
 
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index f89f3222..0451b76b 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -135,7 +135,7 @@ function getPrice(
       const discount =
         taskProduct.value.find((v) => v.productId === c.product.id)?.discount ||
         0;
-      const priceNoVat = c.product.vatIncluded
+      const priceNoVat = c.product.serviceChargeVatIncluded
         ? pricePerUnit / (1 + (config.value?.vat || 0.07))
         : pricePerUnit;
       const adjustedPriceWithVat = precisionRound(
@@ -149,8 +149,8 @@ function getPrice(
 
       a.totalPrice = a.totalPrice + priceDiscountNoVat;
       a.totalDiscount = a.totalDiscount + Number(discount);
-      a.vat = c.product.calcVat ? a.vat + rawVatTotal : a.vat;
-      a.vatExcluded = c.product.calcVat
+      a.vat = c.product.serviceChargeCalcVat ? a.vat + rawVatTotal : a.vat;
+      a.vatExcluded = c.product.serviceChargeCalcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + priceDiscountNoVat);
       a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index dc305bf5..c0485725 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -19,7 +19,7 @@ import AdditionalFileExpansion from '../09_task-order/expansion/AdditionalFileEx
 import PaymentExpansion from './expansion/PaymentExpansion.vue';
 import CreditNoteExpansion from './expansion/CreditNoteExpansion.vue';
 import StateButton from 'src/components/button/StateButton.vue';
-import ProductExpansion from '../09_task-order/expansion/ProductExpansion.vue';
+import ProductExpansion from './expansion/ProductExpansion.vue';
 import SelectReadyRequestWork from '../09_task-order/SelectReadyRequestWork.vue';
 import RefundInformation from './RefundInformation.vue';
 import QuotationFormReceipt from '../05_quotation/QuotationFormReceipt.vue';
@@ -111,7 +111,7 @@ const formTaskList = ref<
 let taskListGroup = computed(() => {
   const cacheData = formTaskList.value.reduce<
     {
-      product: RequestWork['productService']['product'];
+      product: RequestWork['productService'];
       list: RequestWork[];
     }[]
   >((acc, curr) => {
@@ -129,7 +129,7 @@ let taskListGroup = computed(() => {
         exist.list.push(task.requestWork);
       } else {
         acc.push({
-          product: task.requestWork.productService.product,
+          product: task.requestWork.productService,
           list: [record],
         });
       }
@@ -189,37 +189,28 @@ async function initStatus() {
 
 function getPrice(
   list: {
-    product: RequestWork['productService']['product'];
+    product: RequestWork['productService'];
     list: RequestWork[];
   }[],
 ) {
   return list.reduce(
     (a, c) => {
-      const pricePerUnit = quotationData.value?.agentPrice
-        ? c.product.agentPrice
-        : c.product.price;
+      const pricePerUnit =
+        c.product.pricePerUnit - c.product.discount / c.product.amount;
       const amount = c.list.length;
-      const discount = 0;
-      const priceNoVat = c.product.vatIncluded
-        ? pricePerUnit / (1 + (config.value?.vat || 0.07))
-        : pricePerUnit;
-      const priceDiscountNoVat = priceNoVat * amount - discount;
+      const priceNoVat = pricePerUnit;
+      const priceDiscountNoVat = priceNoVat * amount;
 
       const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
-      // const rawVat = rawVatTotal / amount;
 
       a.totalPrice = a.totalPrice + priceDiscountNoVat;
-      a.totalDiscount = a.totalDiscount + Number(discount);
-      a.vat = c.product.calcVat ? a.vat + rawVatTotal : a.vat;
-      a.vatExcluded = c.product.calcVat ? a.vatExcluded : a.vat + rawVatTotal;
-      a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
+      a.vat = c.product.vat !== 0 ? a.vat + rawVatTotal : a.vat;
+      a.finalPrice = a.totalPrice + a.vat;
       return a;
     },
     {
       totalPrice: 0,
-      totalDiscount: 0,
       vat: 0,
-      vatExcluded: 0,
       finalPrice: 0,
     },
   );
@@ -749,12 +740,12 @@ onMounted(async () => {
             "
           />
 
-          <!-- TODO: bind remark -->
           <RemarkExpansion
             v-if="view !== CreditNoteStatus.Success"
-            :readonly="readonly"
             v-model:remark="formData.remark"
             :default-remark="defaultRemark"
+            :items="[]"
+            :readonly
           >
             <template #hint>
               {{ $t('general.hintRemark') }}
diff --git a/src/pages/11_credit-note/constants.ts b/src/pages/11_credit-note/constants.ts
index 70328499..e69f5e6c 100644
--- a/src/pages/11_credit-note/constants.ts
+++ b/src/pages/11_credit-note/constants.ts
@@ -76,3 +76,60 @@ export const hslaColors: Record<string, string> = {
   Pending: '--orange-5-hsl',
   Success: '--blue-6-hsl',
 };
+
+export const productColumn = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  {
+    name: 'code',
+    align: 'center',
+    label: 'productService.product.code',
+    field: 'code',
+  },
+  {
+    name: 'productList',
+    align: 'center',
+    label: 'taskOrder.productList',
+    field: 'productList',
+  },
+  {
+    name: 'amountOfEmployee',
+    align: 'center',
+    label: 'taskOrder.amountOfEmployee',
+    field: 'amountOfEmployee',
+  },
+  {
+    name: 'pricePerUnit',
+    align: 'center',
+    label: 'quotation.pricePerUnit',
+    field: 'pricePerUnit',
+  },
+  {
+    name: 'discount',
+    align: 'center',
+    label: 'general.discount',
+    field: 'discount',
+  },
+  {
+    name: 'priceBeforeVat',
+    align: 'center',
+    label: 'quotation.priceBeforeVat',
+    field: 'priceBeforeVat',
+  },
+  {
+    name: 'vat',
+    align: 'center',
+    label: 'general.vat',
+    field: 'vat',
+  },
+  {
+    name: 'totalPriceBaht',
+    align: 'center',
+    label: 'quotation.totalPriceBaht',
+    field: 'totalPriceBaht',
+  },
+] as const satisfies QTableProps['columns'];
diff --git a/src/pages/11_credit-note/expansion/ProductExpansion.vue b/src/pages/11_credit-note/expansion/ProductExpansion.vue
new file mode 100644
index 00000000..af4e6ea3
--- /dev/null
+++ b/src/pages/11_credit-note/expansion/ProductExpansion.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { QTableSlots } from 'quasar';
+import { storeToRefs } from 'pinia';
+
+import { AddButton } from 'src/components/button';
+import TableEmployee from '../../09_task-order/TableEmployee.vue';
+
+import { useConfigStore } from 'stores/config';
+import { RequestWork } from 'src/stores/request-list';
+import { baseUrl, formatNumberDecimal } from 'src/stores/utils';
+import { precisionRound } from 'src/utils/arithmetic';
+import { productColumn } from '../constants';
+
+const configStore = useConfigStore();
+const { data: config } = storeToRefs(configStore);
+
+const currentExpanded = ref<boolean[]>([]);
+
+defineProps<{
+  readonly?: boolean;
+  taskList: {
+    product: RequestWork['productService'];
+    list: RequestWork[];
+  }[];
+}>();
+
+defineEmits<{
+  (e: 'addProduct'): void;
+}>();
+
+defineExpose({ calcPricePerUnit });
+
+function openList(index: number) {
+  if (!currentExpanded.value[index]) {
+    currentExpanded.value.map((_, i) => {
+      if (i !== index) currentExpanded.value[i] = false;
+    });
+  }
+  currentExpanded.value[index] = !currentExpanded.value[index];
+}
+
+function calcPricePerUnit(product: RequestWork['productService']) {
+  return product.pricePerUnit - product.discount / product.amount;
+}
+
+function calcPrice(c: RequestWork['productService'], amount: number) {
+  const pricePerUnit = c.pricePerUnit - c.discount / c.amount;
+  const priceNoVat = pricePerUnit;
+  const priceDiscountNoVat = priceNoVat * amount;
+
+  const rawVatTotal =
+    c.vat === 0 ? 0 : priceDiscountNoVat * (config.value?.vat || 0.07);
+
+  return precisionRound(priceNoVat * amount + rawVatTotal);
+}
+</script>
+<template>
+  <q-expansion-item
+    dense
+    class="overflow-hidden bordered full-width"
+    switch-toggle-side
+    style="border-radius: var(--radius-2)"
+    expand-icon="mdi-chevron-down-circle"
+    header-class="surface-1 q-py-sm text-medium text-body1"
+    default-opened
+  >
+    <template #header>
+      <span
+        class="row items-center justify-between full-width"
+        style="min-height: 31.01px"
+      >
+        {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
+        <AddButton
+          icon-only
+          @click.stop="$emit('addProduct')"
+          v-if="!readonly"
+        />
+      </span>
+    </template>
+
+    <main class="q-px-md q-py-sm surface-1">
+      <q-table
+        :columns="
+          productColumn.filter(
+            (v) =>
+              v.name !== 'discount' &&
+              v.name !== 'priceBeforeVat' &&
+              v.name !== 'vat',
+          )
+        "
+        :rows="taskList"
+        bordered
+        flat
+        hide-pagination
+        card-container-class="q-col-gutter-sm"
+        class="full-width"
+        :rows-per-page-options="[0]"
+        :no-data-label="$t('general.noDataTable')"
+      >
+        <template v-slot:header="props">
+          <q-tr
+            style="background-color: hsla(var(--info-bg) / 0.07)"
+            :props="props"
+          >
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.label && $t(col.label) }}
+              {{ col.label === 'quotation.vat' ? '%' : '' }}
+            </q-th>
+            <q-th></q-th>
+          </q-tr>
+        </template>
+
+        <template
+          v-slot:body="props: {
+            row: {
+              product: RequestWork['productService'];
+              list: RequestWork[];
+            };
+          } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+        >
+          <q-tr class="text-center">
+            <q-td>
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td>
+              {{ props.row.product.product.code }}
+            </q-td>
+            <q-td style="width: 100%" class="text-left">
+              <q-avatar class="q-mr-sm" size="md">
+                <q-img
+                  class="text-center"
+                  :ratio="1"
+                  :src="`${baseUrl}/product/${props.row.product.id}/image/${props.row.product.product.selectedImage}`"
+                >
+                  <template #error>
+                    <q-icon
+                      class="full-width full-height"
+                      name="mdi-shopping-outline"
+                      :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+                    />
+                  </template>
+                </q-img>
+              </q-avatar>
+              {{ props.row.product.product.name }}
+            </q-td>
+            <q-td>
+              {{ props.row.list.length }}
+            </q-td>
+            <q-td class="text-right">
+              {{
+                formatNumberDecimal(
+                  calcPricePerUnit(props.row.product) +
+                    (props.row.product.vat > 0
+                      ? calcPricePerUnit(props.row.product) *
+                        (config?.vat || 0.07)
+                      : 0),
+                  2,
+                )
+              }}
+            </q-td>
+
+            <!-- total -->
+            <q-td class="text-right">
+              {{
+                formatNumberDecimal(
+                  calcPrice(props.row.product, props.row.list.length),
+                  2,
+                )
+              }}
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                flat
+                class="rounded"
+                @click.stop="openList(props.rowIndex)"
+              >
+                <div class="row items-center no-wrap">
+                  <q-icon name="mdi-account-group-outline" />
+                  <q-icon
+                    class="btn-arrow-right"
+                    :class="{
+                      active: currentExpanded[props.rowIndex],
+                    }"
+                    size="xs"
+                    :name="`mdi-chevron-${currentExpanded[props.rowIndex] ? 'down' : 'up'}`"
+                  />
+                </div>
+              </q-btn>
+            </q-td>
+          </q-tr>
+
+          <q-tr v-show="currentExpanded[props.rowIndex]" :props="props">
+            <q-td colspan="100%" style="padding: 16px">
+              <TableEmployee :rows="props.row.list" />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+
+      <div class="q-pt-md row items-center">
+        <span class="q-ml-auto q-mr-sm">
+          {{
+            $t('general.numberOf', {
+              msg: $t('productService.product.product'),
+            })
+          }}
+        </span>
+        <div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
+      </div>
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped>
+.product-status {
+  padding-left: 8px;
+  border-radius: 20px;
+  color: hsl(var(--_color));
+  background: hsla(var(--_color) / 0.15);
+
+  &.warning {
+    --_color: var(--warning-bg);
+  }
+  &.positive {
+    --_color: var(--positive-bg);
+  }
+  &.negative {
+    --_color: var(--negative-bg);
+  }
+}
+</style>
diff --git a/src/stores/product-service/types.ts b/src/stores/product-service/types.ts
index c2d1531e..6a6a11df 100644
--- a/src/stores/product-service/types.ts
+++ b/src/stores/product-service/types.ts
@@ -160,6 +160,10 @@ export interface Product {
   calcVat: boolean;
   expenseType: string;
   vatIncluded: boolean;
+  agentPriceVatIncluded: boolean;
+  agentPriceCalcVat: boolean;
+  serviceChargeVatIncluded: boolean;
+  serviceChargeCalcVat: boolean;
   remark: string;
   updatedAt: string;
   updatedBy: UpdatedBy;
@@ -189,8 +193,12 @@ export interface ProductCreate {
   productGroupId: string;
   remark: string;
   serviceCharge: number;
+  serviceChargeCalcVat: boolean;
+  serviceChargeVatIncluded: boolean;
   calcVat?: boolean;
   agentPrice: number;
+  agentPriceCalcVat: boolean;
+  agentPriceVatIncluded: boolean;
   price: number;
   process: number;
   detail: string;
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index cb32cb6a..4331ba2c 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -120,7 +120,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
   }
 
   async function editQuotation(data: QuotationPayload & { id: string }) {
-    const { _count, ...payload } = data;
+    const { _count, agentPrice, ...payload } = data;
     const res = await api.put(`/quotation/${data.id}`, {
       ...payload,
       quotationStatus:
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index d8a10a58..be855586 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -143,6 +143,10 @@ export type ProductRelation = {
   serviceCharge: number;
   vatIncluded: boolean;
   calcVat: boolean;
+  agentPriceVatIncluded: boolean;
+  agentPriceCalcVat: boolean;
+  serviceChargeVatIncluded: boolean;
+  serviceChargeCalcVat: boolean;
   expenseType: string;
   status: Status;
   statusOrder: number;
@@ -367,6 +371,7 @@ export type QuotationPayload = {
   status?: Status;
   remark?: string;
   quotationStatus?: QuotationStatus;
+  agentPrice?: boolean;
 };
 
 export type EmployeeWorker = {