diff --git a/src/components/upload-file/UploadFileCard.vue b/src/components/upload-file/UploadFileCard.vue
index 2e269d8b..b299c51d 100644
--- a/src/components/upload-file/UploadFileCard.vue
+++ b/src/components/upload-file/UploadFileCard.vue
@@ -54,10 +54,11 @@ onMounted(() => {
     @click="$emit('click')"
   >
     <q-icon :name="icon" size="lg" :style="`color: ${color}`" />
-    <article class="col column q-pl-md">
-      <span class="ellipsis full-width">
+    <div class="col column q-pl-md">
+      <div class="ellipsis full-width" style="max-width: 65vw !important">
         {{ name }}
-      </span>
+      </div>
+
       <span class="text-caption app-text-muted-2">
         {{
           uploading.loaded
@@ -79,7 +80,7 @@ onMounted(() => {
         />
         {{ idle ? `Pending` : progress !== 1 ? `Uploading...` : 'Completed' }}
       </span>
-    </article>
+    </div>
     <q-btn
       v-if="closeable"
       icon="mdi-close"
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 5546d0b8..dc7f840c 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -777,6 +777,8 @@ export default {
     seller: 'Seller',
     paymentChannels: 'Payment Channels',
     channelsThat: 'Channels That',
+    refNo: 'Reference Number',
+    bankAccount: 'Bank Account',
     bankAccountNumber: 'Bank Account Number',
     bankAccountName: 'Bank Account Name',
     inTheNameOf: 'In The Name Of',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 64411146..7a4a4165 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -775,6 +775,8 @@ export default {
     seller: 'ผู้ขาย',
     paymentChannels: 'ช่องทางชำระเงิน',
     channelsThat: 'ช่องทางที่',
+    refNo: 'เลขที่อ้างอิง',
+    bankAccount: 'บัญชีธนาคาร',
     bankAccountNumber: 'เลขบัญชีธนาคาร',
     bankAccountName: 'ชื่อบัญชี',
     inTheNameOf: 'ในนาม',
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 64f57560..2d5f1579 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -3,7 +3,8 @@ import { baseUrl, dialog } from 'stores/utils';
 import { storeToRefs } from 'pinia';
 import { useConfigStore } from 'stores/config';
 import { formatNumberDecimal } from 'stores/utils';
-import { MainButton } from 'components/button';
+import { SaveButton, EditButton, UndoButton } from 'components/button';
+import SelectInput from 'src/components/shared/SelectInput.vue';
 
 import { useI18n } from 'vue-i18n';
 
@@ -38,8 +39,15 @@ const firstCodePayment = defineModel<string>('firstCodePayment');
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
-const submitPaymentData = ref<QuotationPaymentData[]>([]);
-const payAll = ref<boolean>(false);
+const formPaymentMethod = ref<
+  {
+    id: string;
+    channel: string | null;
+    reference: string | null;
+    account: string | null;
+    isEdit?: boolean;
+  }[]
+>([]);
 const paymentStatusOpts = [
   {
     status: 'PaymentInProcess',
@@ -188,18 +196,29 @@ async function selectStatus(
   refQMenu.value[index].hide();
 }
 
-async function triggerSubmit() {
-  submitPaymentData.value.forEach(async (p) => {
-    const payload: PaymentPayload = {
-      paymentStatus: p.paymentStatus,
-      date: new Date(p.date),
-      amount: p.amount,
-    };
-    await quotationPayment.updateQuotationPayment(p.id, payload);
-  });
+async function triggerSubmit(id: string) {
+  const index = paymentData.value.findIndex((p) => p.id === id);
+  if (index === -1) return;
+
+  const p = paymentData.value[index];
+
+  const payload: PaymentPayload = {
+    paymentStatus: p.paymentStatus,
+    date: new Date(p.date),
+    amount: p.amount,
+    account: formPaymentMethod.value[index].account,
+    channel: formPaymentMethod.value[index].channel,
+    reference: formPaymentMethod.value[index].reference,
+  };
+
+  await quotationPayment.updateQuotationPayment(p.id, payload);
+  formPaymentMethod.value[index].isEdit = false;
+  setTimeout(async () => {
+    await fetchData();
+  }, 300);
 }
 
-onMounted(async () => {
+async function fetchData() {
   if (!prop.data) return;
   const ret = await quotationPayment.getQuotationPayment({
     quotationId: prop.isDebitNote === true ? undefined : prop.data.id,
@@ -209,6 +228,13 @@ onMounted(async () => {
   });
   if (ret) {
     paymentData.value = ret.result;
+    formPaymentMethod.value = ret.result.map((p, i) => ({
+      id: p.id,
+      channel: p.channel,
+      reference: p.reference,
+      account: p.account,
+      isEdit: formPaymentMethod.value[i]?.isEdit || false,
+    }));
     slipFile.value = paymentData.value.map((v, i) => {
       if (i === 0) {
         firstCodePayment.value = v.code;
@@ -219,474 +245,564 @@ onMounted(async () => {
       };
     });
   }
+}
+
+onMounted(async () => {
+  await fetchData();
 });
 </script>
 <template>
-  <q-form
-    greedy
-    @submit.prevent
-    @validation-success="triggerSubmit"
-    class="column full-height"
-    v-if="data"
-  >
-    <div class="col column no-wrap">
-      <!-- PRICE DETAIL -->
-      <section class="bordered rounded surface-1" style="overflow: hidden">
-        <q-expansion-item
-          hide-expand-icon
-          v-model="state.waitExpansion"
-          header-style="padding:0px"
-        >
-          <template v-slot:header>
-            <div class="column full-width bordered-b">
-              <header class="bg-color-orange text-bold text-body1 q-pa-sm">
-                <q-avatar class="surface-1 q-mr-sm" size="10px" />
-                {{ $t('quotation.receiptDialog.paymentWait') }}
-              </header>
-              <span class="q-pa-md row items-center">
-                <q-img
-                  src="/images/quotation-avatar.png"
-                  width="3rem"
-                  class="q-mr-lg"
-                />
-                <div class="column col">
-                  <span class="text-bold text-body1">
-                    {{ data.workName }}
+  <div class="column no-wrap">
+    <!-- PRICE DETAIL -->
+    <section class="bordered rounded surface-1" style="overflow: hidden">
+      <q-expansion-item
+        hide-expand-icon
+        v-model="state.waitExpansion"
+        header-style="padding:0px"
+      >
+        <template v-slot:header>
+          <div class="column full-width bordered-b">
+            <header class="bg-color-orange text-bold text-body1 q-pa-sm">
+              <q-avatar class="surface-1 q-mr-sm" size="10px" />
+              {{ $t('quotation.receiptDialog.paymentWait') }}
+            </header>
+            <span class="q-pa-md row items-center">
+              <q-img
+                src="/images/quotation-avatar.png"
+                width="3rem"
+                class="q-mr-lg"
+              />
+              <div class="column col">
+                <span class="text-bold text-body1">
+                  {{ data.workName }}
+                </span>
+                <span
+                  class="row items-center"
+                  :class="data.urgent ? 'urgent' : 'app-text-muted'"
+                >
+                  {{ data.code }}
+                  <q-icon
+                    v-if="data.urgent"
+                    class="q-pl-sm"
+                    name="mdi-fire"
+                    size="xs"
+                  />
+                  <span class="q-ml-auto" style="color: var(--foreground)">
+                    ฿ {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
                   </span>
-                  <span
-                    class="row items-center"
-                    :class="data.urgent ? 'urgent' : 'app-text-muted'"
-                  >
-                    {{ data.code }}
-                    <q-icon
-                      v-if="data.urgent"
-                      class="q-pl-sm"
-                      name="mdi-fire"
-                      size="xs"
-                    />
-                    <span class="q-ml-auto" style="color: var(--foreground)">
-                      ฿ {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
-                    </span>
-                  </span>
-                </div>
-              </span>
-            </div>
-          </template>
+                </span>
+              </div>
+            </span>
+          </div>
+        </template>
 
-          <span class="app-text-muted-2 q-px-md q-py-sm column">
-            <span class="row">
-              {{ $t('general.total') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{ formatNumberDecimal(data.totalPrice, 2) || '0.00' }}
-              </span>
+        <span class="app-text-muted-2 q-px-md q-py-sm column">
+          <span class="row">
+            {{ $t('general.total') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{ formatNumberDecimal(data.totalPrice, 2) || '0.00' }}
             </span>
-            <span class="row">
-              {{ $t('quotation.discountList') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{ formatNumberDecimal(data.totalDiscount, 2) || '0.00' }}
-              </span>
+          </span>
+          <span class="row">
+            {{ $t('quotation.discountList') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{ formatNumberDecimal(data.totalDiscount, 2) || '0.00' }}
             </span>
-            <span class="row">
-              {{ $t('general.totalAfterDiscount') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{
-                  formatNumberDecimal(
-                    data.totalPrice - data.totalDiscount,
-                    2,
-                  ) || '0.00'
-                }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.totalVatExcluded') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.vatExcluded, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
+          </span>
+          <span class="row">
+            {{ $t('general.totalAfterDiscount') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
               {{
-                $t('general.vat', {
-                  msg: `${config && Math.round(config.vat * 100)}%`,
+                formatNumberDecimal(data.totalPrice - data.totalDiscount, 2) ||
+                '0.00'
+              }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.totalVatExcluded') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.vatExcluded, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{
+              $t('general.vat', {
+                msg: `${config && Math.round(config.vat * 100)}%`,
+              })
+            }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.vat, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.totalVatIncluded') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{
+                formatNumberDecimal(
+                  data.totalPrice - data.totalDiscount + data.vat,
+                  2,
+                ) || '0.00'
+              }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.discountAfterVat') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.discount, 2) || '0.00' }}
+            </span>
+          </span>
+        </span>
+      </q-expansion-item>
+      <q-separator inset v-if="state.waitExpansion" />
+      <div
+        class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
+      >
+        {{ $t('quotation.totalPriceBaht') }}:
+        <span class="q-px-sm" style="color: var(--foreground)">
+          {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
+        </span>
+        <q-btn
+          dense
+          flat
+          rounded
+          padding="0"
+          :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
+          @click.stop="state.waitExpansion = !state.waitExpansion"
+        />
+      </div>
+    </section>
+
+    <!-- PAYMENT DETAIL -->
+    <section
+      class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
+    >
+      <span class="text-weight-bold text-body1">
+        {{ $t('general.payment') }}
+      </span>
+      <div class="row items-center q-pb-md">
+        <span class="app-text-muted-2">{{ $t('quotation.payType') }}</span>
+        <div
+          class="badge-card q-ml-auto rounded"
+          :class="`badge-card__${data.payCondition}`"
+        >
+          {{ $t(`quotation.type.${data.payCondition}`) }}
+        </div>
+      </div>
+
+      <!-- split summary -->
+      <div
+        v-if="
+          data.payCondition === 'BillSplit' || data.payCondition === 'Split'
+        "
+        class="row items-center q-pb-sm"
+      >
+        <span class="app-text-muted-2 col-12 col-md">
+          {{ $t('quotation.paySplitCount') }}
+        </span>
+
+        <span>
+          {{ $t('quotation.receiptDialog.total') }}
+        </span>
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{ data.paySplitCount }}
+        </span>
+        {{ $t('quotation.receiptDialog.installments') }}
+        {{ $i18n.locale === 'eng' ? ',' : '' }}
+        {{ $t('quotation.receiptDialog.paid') }}
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{
+            paymentData.reduce(
+              (c, i) => (i.paymentStatus === 'PaymentSuccess' ? c + 1 : c),
+              0,
+            )
+          }}
+        </span>
+        {{
+          $i18n.locale === 'tha'
+            ? $t('quotation.receiptDialog.installments')
+            : ','
+        }}
+        {{ $t('quotation.receiptDialog.remain') }}
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{
+            paymentData.reduce(
+              (c, i) => (i.paymentStatus !== 'PaymentSuccess' ? c + 1 : c),
+              0,
+            )
+          }}
+        </span>
+        {{
+          $i18n.locale === 'tha'
+            ? $t('quotation.receiptDialog.installments')
+            : ''
+        }}
+      </div>
+
+      <!-- summary total, paid, remain -->
+      <div class="row items-center">
+        <span
+          class="row col rounded q-px-sm q-py-md justify-end"
+          style="border: 1px solid hsl(var(--info-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
+          >
+            {{ $t('quotation.receiptDialog.totalAmount') }}
+          </span>
+          {{ formatNumberDecimal(data.finalPrice, 2) }}
+        </span>
+        <span
+          class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
+          style="border: 1px solid hsl(var(--positive-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
+          >
+            {{ $t('quotation.receiptDialog.paid') }}
+          </span>
+          {{
+            formatNumberDecimal(
+              paymentData.reduce(
+                (c, i) =>
+                  i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
+                0,
+              ),
+              2,
+            )
+          }}
+        </span>
+        <span
+          class="row col rounded q-px-sm q-py-md justify-end"
+          style="border: 1px solid hsl(var(--warning-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
+          >
+            {{ $t('quotation.receiptDialog.remain') }}
+          </span>
+          {{
+            formatNumberDecimal(
+              paymentData.reduce(
+                (c, i) =>
+                  i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
+                0,
+              ),
+              2,
+            )
+          }}
+        </span>
+      </div>
+
+      <!-- bill -->
+      <span class="app-text-muted-2 q-pt-md" v-if="paymentData.length > 0">
+        {{ $t('quotation.receiptDialog.billOfPayment') }}
+      </span>
+
+      <!-- payment item -->
+      <section class="row">
+        <div
+          v-for="(payment, i) in paymentData"
+          :key="i"
+          class="bordered rounded surface-1 q-mb-md col-12"
+          style="overflow: hidden"
+        >
+          <q-expansion-item
+            hide-expand-icon
+            v-model="state.payExpansion[i]"
+            header-style="padding:0px"
+            @before-show="getSlipList(payment, i)"
+          >
+            <template v-slot:header>
+              <div class="column full-width">
+                <section
+                  class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
+                >
+                  <span class="text-weight-medium column">
+                    {{ $t('quotation.periodNo') }} {{ i + 1 }}
+                    {{ monthDisplay(payment.createdAt) }}
+                    <!-- {{ monthDisplay(p.date) }} -->
+                    <!-- <span -->
+                    <!--   class="text-caption app-text-muted-2" -->
+                    <!--   v-if="data.payCondition !== 'Full'" -->
+                    <!-- > -->
+                    <!--   {{ $t('quotation.receiptDialog.paymentDueDate') }} -->
+                    <!--   {{ -->
+                    <!--     data.payCondition !== 'BillFull' -->
+                    <!--       ? dateFormat(p.date, true) -->
+                    <!--       : dateFormat(data.payBillDate) -->
+                    <!--   }} -->
+                    <!-- </span> -->
+                  </span>
+
+                  <div class="q-ml-auto row" style="gap: 10px">
+                    <q-btn
+                      :disable="readonly"
+                      id="btn-payment"
+                      @click.stop
+                      unelevated
+                      padding="4px 8px"
+                      class="rounded text-capitalize text-weight-regular payment-wait row items-center"
+                      :class="{
+                        'payment-pending':
+                          payment.paymentStatus === 'PaymentWait',
+                        'payment-process':
+                          payment.paymentStatus === 'PaymentInProcess',
+                        'payment-retry':
+                          payment.paymentStatus === 'PaymentRetry',
+                        'payment-success':
+                          payment.paymentStatus === 'PaymentSuccess',
+                      }"
+                    >
+                      <q-icon
+                        size="xs"
+                        :name="
+                          paymentStatusOpts.find(
+                            (s) => s.status === payment.paymentStatus,
+                          )?.icon || 'mdi-hand-coin-outline'
+                        "
+                        class="q-pr-sm"
+                      />
+                      <span>
+                        {{
+                          $t(`quotation.receiptDialog.${payment.paymentStatus}`)
+                        }}
+                      </span>
+                      <q-icon
+                        v-if="!readonly"
+                        name="mdi-chevron-down"
+                        class="q-pl-xs"
+                      />
+                      <q-menu
+                        ref="refQMenu"
+                        fit
+                        :offset="[0, 8]"
+                        class="rounded"
+                      >
+                        <q-list dense>
+                          <template
+                            v-for="opts in paymentStatusOpts"
+                            :key="opts.status"
+                          >
+                            <q-item
+                              :id="`btn-payment-${opts.status}`"
+                              v-if="
+                                (payment.paymentStatus === 'PaymentWait' &&
+                                  opts.status !== 'PaymentRetry') ||
+                                (payment.paymentStatus === 'PaymentInProcess' &&
+                                  opts.status !== 'PaymentInProcess') ||
+                                (payment.paymentStatus === 'PaymentRetry' &&
+                                  opts.status !== 'PaymentRetry')
+                              "
+                              clickable
+                              class="row items-center"
+                              @click="selectStatus(payment, opts.status, i)"
+                            >
+                              <q-icon
+                                :name="opts.icon"
+                                :color="opts.color"
+                                class="q-pr-sm"
+                                size="xs"
+                              />
+                              {{ $t(opts.name) }}
+                            </q-item>
+                          </template>
+                        </q-list>
+                      </q-menu>
+                    </q-btn>
+                  </div>
+                </section>
+                <section class="row items-center q-px-md q-py-sm">
+                  {{ $t('quotation.receiptDialog.amountToBePaid') }}
+                  <span
+                    class="q-px-sm q-ml-auto"
+                    style="color: var(--foreground)"
+                  >
+                    {{ formatNumberDecimal(payment.amount, 2) }}
+                  </span>
+                  <q-btn
+                    dense
+                    flat
+                    rounded
+                    padding="0"
+                    id="btn-show-file"
+                    :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
+                    @click.stop="state.payExpansion[i] = !state.payExpansion[i]"
+                  />
+                </section>
+              </div>
+            </template>
+
+            <!-- วิธีการรับชำระ -->
+            <section
+              class="q-px-md q-py-xs text-weight-medium row items-center"
+              style="background-color: hsla(var(--info-bg) / 0.1)"
+            >
+              {{ $t('quotation.receiptDialog.paymentMethod') }}
+            </section>
+            <div
+              class="surface-2 q-px-md q-py-sm row q-col-gutter-sm items-center"
+            >
+              <SelectInput
+                id="input-payment-channel"
+                for="input-payment-channel"
+                :readonly="
+                  readonly ||
+                  (!formPaymentMethod[i].isEdit && !!payment.channel)
+                "
+                v-model="formPaymentMethod[i].channel"
+                class="col-md-2 col-6"
+                :option="[
+                  {
+                    label: $t('creditNote.label.Cash'),
+                    value: 'Cash',
+                  },
+                  {
+                    label: $t('creditNote.label.BankTransfer'),
+                    value: 'BankTransfer',
+                  },
+                ]"
+                :label="$t('quotation.receiptDialog.paymentMethod')"
+                @update:model-value="
+                  () => {
+                    if (formPaymentMethod[i].channel === 'Cash') {
+                      formPaymentMethod[i].reference = null;
+                      formPaymentMethod[i].account = null;
+                    }
+                  }
+                "
+              />
+              <q-input
+                v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                dense
+                outlined
+                class="col-md-3 col-6"
+                v-model="formPaymentMethod[i].reference"
+                :readonly="
+                  readonly ||
+                  (!formPaymentMethod[i].isEdit && !!payment.channel)
+                "
+                :label="$t('quotation.refNo')"
+              />
+              <q-input
+                v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                dense
+                outlined
+                class="col"
+                v-model="formPaymentMethod[i].account"
+                :readonly="
+                  readonly ||
+                  (!formPaymentMethod[i].isEdit && !!payment.channel)
+                "
+                :label="$t('quotation.bankAccount')"
+              />
+              <div class="q-ml-auto">
+                <UndoButton
+                  v-if="formPaymentMethod[i].isEdit"
+                  icon-only
+                  @click="
+                    () => {
+                      formPaymentMethod[i].isEdit = false;
+                      formPaymentMethod[i].channel = payment.channel;
+                      formPaymentMethod[i].reference = payment.reference;
+                      formPaymentMethod[i].account = payment.account;
+                    }
+                  "
+                />
+                <SaveButton
+                  v-if="!payment.channel || formPaymentMethod[i].isEdit"
+                  icon-only
+                  @click="triggerSubmit(payment.id)"
+                />
+                <EditButton
+                  v-if="
+                    payment.channel && formPaymentMethod[i].isEdit === false
+                  "
+                  icon-only
+                  @click="formPaymentMethod[i].isEdit = true"
+                />
+              </div>
+            </div>
+
+            <!-- อัปโหลดใบเสร็จ -->
+            <section
+              class="q-px-md q-py-xs text-weight-medium row items-center"
+              style="background-color: hsla(var(--info-bg) / 0.1)"
+            >
+              {{
+                $t('general.upload', {
+                  msg: $t('quotation.receiptDialog.slip'),
                 })
               }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.vat, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.totalVatIncluded') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{
-                  formatNumberDecimal(
-                    data.totalPrice - data.totalDiscount + data.vat,
-                    2,
-                  ) || '0.00'
-                }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.discountAfterVat') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.discount, 2) || '0.00' }}
-              </span>
-            </span>
-          </span>
-        </q-expansion-item>
-        <q-separator inset v-if="state.waitExpansion" />
-        <div
-          class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
-        >
-          {{ $t('quotation.totalPriceBaht') }}:
-          <span class="q-px-sm" style="color: var(--foreground)">
-            {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
-          </span>
-          <q-btn
-            dense
-            flat
-            rounded
-            padding="0"
-            :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
-            @click.stop="state.waitExpansion = !state.waitExpansion"
-          />
-        </div>
-      </section>
-
-      <!-- PAYMENT DETAIL -->
-      <section
-        class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
-      >
-        <span class="text-weight-bold text-body1">
-          {{ $t('general.payment') }}
-        </span>
-        <div class="row items-center q-pb-md">
-          <span class="app-text-muted-2">{{ $t('quotation.payType') }}</span>
-          <div
-            class="badge-card q-ml-auto rounded"
-            :class="`badge-card__${data.payCondition}`"
-          >
-            {{ $t(`quotation.type.${data.payCondition}`) }}
-          </div>
-        </div>
-
-        <!-- split summary -->
-        <div
-          v-if="
-            data.payCondition === 'BillSplit' || data.payCondition === 'Split'
-          "
-          class="row items-center q-pb-sm"
-        >
-          <span class="app-text-muted-2 col-12 col-md">
-            {{ $t('quotation.paySplitCount') }}
-          </span>
-
-          <span>
-            {{ $t('quotation.receiptDialog.total') }}
-          </span>
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{ data.paySplitCount }}
-          </span>
-          {{ $t('quotation.receiptDialog.installments') }}
-          {{ $i18n.locale === 'eng' ? ',' : '' }}
-          {{ $t('quotation.receiptDialog.paid') }}
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{
-              paymentData.reduce(
-                (c, i) => (i.paymentStatus === 'PaymentSuccess' ? c + 1 : c),
-                0,
-              )
-            }}
-          </span>
-          {{
-            $i18n.locale === 'tha'
-              ? $t('quotation.receiptDialog.installments')
-              : ','
-          }}
-          {{ $t('quotation.receiptDialog.remain') }}
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{
-              paymentData.reduce(
-                (c, i) => (i.paymentStatus !== 'PaymentSuccess' ? c + 1 : c),
-                0,
-              )
-            }}
-          </span>
-          {{
-            $i18n.locale === 'tha'
-              ? $t('quotation.receiptDialog.installments')
-              : ''
-          }}
-        </div>
-
-        <!-- summary total, paid, remain -->
-        <div class="row items-center">
-          <span
-            class="row col rounded q-px-sm q-py-md justify-end"
-            style="border: 1px solid hsl(var(--info-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.totalAmount') }}
-            </span>
-            {{ formatNumberDecimal(data.finalPrice, 2) }}
-          </span>
-          <span
-            class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
-            style="border: 1px solid hsl(var(--positive-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.paid') }}
-            </span>
-            {{
-              formatNumberDecimal(
-                paymentData.reduce(
-                  (c, i) =>
-                    i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
-                  0,
-                ),
-                2,
-              )
-            }}
-          </span>
-          <span
-            class="row col rounded q-px-sm q-py-md justify-end"
-            style="border: 1px solid hsl(var(--warning-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.remain') }}
-            </span>
-            {{
-              formatNumberDecimal(
-                paymentData.reduce(
-                  (c, i) =>
-                    i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
-                  0,
-                ),
-                2,
-              )
-            }}
-          </span>
-        </div>
-
-        <!-- bill -->
-        <span class="app-text-muted-2 q-pt-md" v-if="paymentData.length > 0">
-          {{ $t('quotation.receiptDialog.billOfPayment') }}
-        </span>
-
-        <!-- payment item -->
-        <section class="row">
-          <div
-            v-for="(p, i) in paymentData"
-            :key="i"
-            class="bordered rounded surface-1 q-mb-md col-12"
-            style="overflow: hidden"
-          >
-            <q-expansion-item
-              hide-expand-icon
-              v-model="state.payExpansion[i]"
-              header-style="padding:0px"
-              @before-show="getSlipList(p, i)"
-            >
-              <template v-slot:header>
-                <div class="column full-width">
-                  <section
-                    class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
-                  >
-                    <span class="text-weight-medium column">
-                      {{ $t('quotation.periodNo') }} {{ i + 1 }}
-                      {{ monthDisplay(p.createdAt) }}
-                      <!-- {{ monthDisplay(p.date) }} -->
-                      <!-- <span -->
-                      <!--   class="text-caption app-text-muted-2" -->
-                      <!--   v-if="data.payCondition !== 'Full'" -->
-                      <!-- > -->
-                      <!--   {{ $t('quotation.receiptDialog.paymentDueDate') }} -->
-                      <!--   {{ -->
-                      <!--     data.payCondition !== 'BillFull' -->
-                      <!--       ? dateFormat(p.date, true) -->
-                      <!--       : dateFormat(data.payBillDate) -->
-                      <!--   }} -->
-                      <!-- </span> -->
-                    </span>
-
-                    <div class="q-ml-auto row" style="gap: 10px">
-                      <q-btn
-                        :disable="readonly"
-                        id="btn-payment"
-                        @click.stop
-                        unelevated
-                        padding="4px 8px"
-                        class="rounded text-capitalize text-weight-regular payment-wait row items-center"
-                        :class="{
-                          'payment-pending': p.paymentStatus === 'PaymentWait',
-                          'payment-process':
-                            p.paymentStatus === 'PaymentInProcess',
-                          'payment-retry': p.paymentStatus === 'PaymentRetry',
-                          'payment-success':
-                            p.paymentStatus === 'PaymentSuccess',
-                        }"
-                      >
-                        <q-icon
-                          size="xs"
-                          :name="
-                            paymentStatusOpts.find(
-                              (s) => s.status === p.paymentStatus,
-                            )?.icon || 'mdi-hand-coin-outline'
-                          "
-                          class="q-pr-sm"
-                        />
-                        <span>
-                          {{ $t(`quotation.receiptDialog.${p.paymentStatus}`) }}
-                        </span>
-                        <q-icon
-                          v-if="!readonly"
-                          name="mdi-chevron-down"
-                          class="q-pl-xs"
-                        />
-                        <q-menu
-                          ref="refQMenu"
-                          fit
-                          :offset="[0, 8]"
-                          class="rounded"
-                        >
-                          <q-list dense>
-                            <template
-                              v-for="opts in paymentStatusOpts"
-                              :key="opts.status"
-                            >
-                              <q-item
-                                :id="`btn-payment-${opts.status}`"
-                                v-if="
-                                  (p.paymentStatus === 'PaymentWait' &&
-                                    opts.status !== 'PaymentRetry') ||
-                                  (p.paymentStatus === 'PaymentInProcess' &&
-                                    opts.status !== 'PaymentInProcess') ||
-                                  (p.paymentStatus === 'PaymentRetry' &&
-                                    opts.status !== 'PaymentRetry')
-                                "
-                                clickable
-                                class="row items-center"
-                                @click="selectStatus(p, opts.status, i)"
-                              >
-                                <q-icon
-                                  :name="opts.icon"
-                                  :color="opts.color"
-                                  class="q-pr-sm"
-                                  size="xs"
-                                />
-                                {{ $t(opts.name) }}
-                              </q-item>
-                            </template>
-                          </q-list>
-                        </q-menu>
-                      </q-btn>
-                    </div>
-                  </section>
-                  <section class="row items-center q-px-md q-py-sm">
-                    {{ $t('quotation.receiptDialog.amountToBePaid') }}
-                    <span
-                      class="q-px-sm q-ml-auto"
-                      style="color: var(--foreground)"
-                    >
-                      {{ formatNumberDecimal(p.amount, 2) }}
-                    </span>
-                    <q-btn
-                      dense
-                      flat
-                      rounded
-                      padding="0"
-                      id="btn-show-file"
-                      :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
-                      @click.stop="
-                        state.payExpansion[i] = !state.payExpansion[i]
-                      "
-                    />
-                  </section>
-                </div>
-              </template>
-
+            </section>
+            <div class="surface-2 q-pa-md">
               <div
-                class="q-px-md q-py-xs text-weight-medium row items-center"
-                style="background-color: hsla(var(--info-bg) / 0.1)"
+                class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
               >
+                <q-img src="/images/upload.png" width="150px" />
+                {{ $t('general.upload', { msg: ' E-slip' }) }}
                 {{
-                  $t('general.upload', {
-                    msg: $t('quotation.receiptDialog.slip'),
+                  $t('general.or', {
+                    msg: $t('general.upload', {
+                      msg: $t('quotation.receiptDialog.paymentDocs'),
+                    }),
                   })
                 }}
+                <q-btn
+                  v-if="!readonly"
+                  unelevated
+                  id="btn-upload-file"
+                  :label="$t('general.upload')"
+                  rounded
+                  class="app-bg-info q-mt-sm"
+                  @click.stop="() => pickFile(i)"
+                />
+                <q-file
+                  ref="refQFile"
+                  v-show="false"
+                  v-model="slipFile[i].file"
+                  @update:model-value="
+                    triggerUpload(payment, i, slipFile[i].file)
+                  "
+                />
               </div>
-              <div class="surface-2 q-pa-md">
-                <div
-                  class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
-                >
-                  <q-img src="/images/upload.png" width="150px" />
-                  {{ $t('general.upload', { msg: ' E-slip' }) }}
-                  {{
-                    $t('general.or', {
-                      msg: $t('general.upload', {
-                        msg: $t('quotation.receiptDialog.paymentDocs'),
-                      }),
-                    })
-                  }}
-                  <q-btn
-                    v-if="!readonly"
-                    unelevated
-                    id="btn-upload-file"
-                    :label="$t('general.upload')"
-                    rounded
-                    class="app-bg-info q-mt-sm"
-                    @click.stop="() => pickFile(i)"
-                  />
-                  <q-file
-                    ref="refQFile"
-                    v-show="false"
-                    v-model="slipFile[i].file"
-                    @update:model-value="triggerUpload(p, i, slipFile[i].file)"
-                  />
-                </div>
-              </div>
+            </div>
 
-              <section class="surface-2 row q-px-md">
-                <!-- upload card -->
-                <div
-                  v-for="(d, j) in slipFile[i].data"
-                  :key="j"
-                  class="col-12"
-                  :class="{
-                    'q-pb-md': j === slipFile[i].data.length - 1,
-                    'q-pb-sm': j < slipFile[i].data.length,
-                  }"
-                >
-                  <UploadFileCard
-                    :name="d.name"
-                    :progress="d.progress"
-                    :uploading="{ loaded: d.loaded, total: d.total }"
-                    :url="`/quotation/${data.id}/payment/${p.id}/attachment/${d.name}`"
-                    icon="mdi-file-image-outline"
-                    color="hsl(var(--text-mute))"
-                    clickable
-                    @click="triggerViewSlip(p, d.name)"
-                    @close="triggerDelete(p, d.name, i)"
-                  />
-                </div>
-              </section>
-            </q-expansion-item>
-          </div>
-        </section>
+            <section class="surface-2 row q-px-md">
+              <!-- upload card -->
+              <div
+                v-for="(d, j) in slipFile[i].data"
+                :key="j"
+                class="col-12"
+                :class="{
+                  'q-pb-md': j === slipFile[i].data.length - 1,
+                  'q-pb-sm': j < slipFile[i].data.length,
+                }"
+              >
+                <UploadFileCard
+                  :name="d.name"
+                  :progress="d.progress"
+                  :uploading="{ loaded: d.loaded, total: d.total }"
+                  :url="`/payment/${payment.id}/attachment/${d.name}`"
+                  icon="mdi-file-image-outline"
+                  color="hsl(var(--text-mute))"
+                  clickable
+                  @click="triggerViewSlip(payment, d.name)"
+                  @close="triggerDelete(payment, d.name, i)"
+                />
+              </div>
+            </section>
+          </q-expansion-item>
+        </div>
       </section>
-    </div>
-  </q-form>
+    </section>
+  </div>
 </template>
 <style scoped>
 .bg-color-orange {
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index c40faf07..ac3740de 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -417,6 +417,9 @@ export type QuotationPaymentData = {
   date: string;
   id: string;
   code: string;
+  account?: string;
+  channel?: string;
+  reference?: string;
 };
 
 export type Details = {
@@ -435,6 +438,9 @@ export type PaymentPayload = {
   paymentStatus: string;
   date: Date;
   amount: number;
+  account?: string;
+  channel?: string;
+  reference?: string;
 };
 
 export type ProductServiceList = {