diff --git a/src/components/12_debit-note/FormDebit.vue b/src/components/12_debit-note/FormDebit.vue
new file mode 100644
index 00000000..1aa8e421
--- /dev/null
+++ b/src/components/12_debit-note/FormDebit.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import SelectQuotation from 'components/shared/select/SelectQuotation.vue';
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const quotationId = defineModel<string>('quotationId', {
+  required: true,
+});
+</script>
+<template>
+  <div class="row col-12">
+    <section
+      :id="`form-credit`"
+      class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+    >
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-file-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`general.document`) }}
+    </section>
+
+    <section class="col-12 row q-col-gutter-sm">
+      <SelectQuotation
+        for="select-quotation"
+        class="col"
+        v-model:value="quotationId"
+        :label="$t('general.select', { msg: $t('quotation.title') })"
+      />
+    </section>
+  </div>
+</template>
+<style scoped></style>
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 6c06fd9f..fdef5fe2 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -1125,6 +1125,8 @@ export default {
   },
 
   preview: {
+    dateAt: 'Date {msg}',
+    seller: 'Seller',
     taskOrder: 'Work Order',
     doc: 'View Document',
     productList: 'Product List',
@@ -1135,15 +1137,17 @@ export default {
     vat: 'VAT',
     value: 'Value',
     netValue: 'Net Value',
+    dueDate: 'Due Date',
+    paymentMethods: 'Payment Methods',
     title: {
       creditNote: 'Credit Note',
       quotation: 'Quotation',
       invoice: 'Invoice',
       payment: 'Payment',
       receipt: 'Receipt',
+      debitNote: 'Debit Note',
     },
   },
-
   address: {
     subDistrict: 'Sub District',
     subArea: 'Sub Area',
@@ -1225,4 +1229,49 @@ export default {
     dataSum: 'Summary of all receipts/tax invoices',
     workSheetName: 'Worksheet name',
   },
+
+  debitNote: {
+    title: 'Debit Note',
+    caption: 'All Debit Notes',
+    expire: 'Expired',
+    payment: 'Payment',
+    receipt: 'Receipt',
+    succeed: 'Completed',
+    downloadReceipt: 'Download Receipt',
+    downloadTaxInvoice: 'Download Tax Invoice',
+
+    label: {
+      additionalDetail: 'Additional Details',
+      specifyReasonForDebit: 'Specify Reason for Debit',
+      debitNoteInformation: 'Debit Note Information',
+      codeDebit: 'Debit Note Number',
+      codeQuotation: 'Quotation Number',
+      quotationWorkName: 'Work Name',
+      quotationPayment: 'Payment Method',
+      value: 'Net Value',
+      submit: 'Approve Debit Note',
+    },
+
+    stats: {
+      Pending: 'Debit Note',
+      Expire: 'Expired',
+      Payment: 'Payment',
+      Receipt: 'Receipt',
+      Succeed: 'Completed',
+    },
+
+    viewMode: {
+      payment: 'Payment',
+      receipt: 'Receipt/Tax Invoice',
+      processComplete: 'Completed',
+    },
+
+    status: {
+      Pending: 'Debit Note',
+      Expire: 'Expired',
+      Payment: 'Payment',
+      Receipt: 'Receipt',
+      Succeed: 'Completed',
+    },
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 4654979d..b610bcb5 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -1106,6 +1106,8 @@ export default {
   },
 
   preview: {
+    dateAt: 'วันที่{msg}',
+    seller: 'ผู้ขาย',
     taskOrder: 'ใบสั่งงาน',
     doc: 'ดูเอกสาร',
     productList: 'รายการสินค้า',
@@ -1116,12 +1118,15 @@ export default {
     vat: 'ภาษี',
     value: 'มูลค่า',
     netValue: 'มูลค่าสุทธิ',
+    dueDate: 'วันครบกำหนดชำระ',
+    paymentMethods: 'ช่องทางชำระเงิน',
     title: {
       creditNote: 'ใบลดหนี้',
       quotation: 'ใบเสนอราคา',
       invoice: 'ใบแจ้งหนี้',
       payment: 'ชำระหนี้',
       receipt: 'ใบเสร็จรับเงิน',
+      debitNote: 'ใบเพิ่มหนี้',
     },
   },
 
@@ -1206,4 +1211,48 @@ export default {
     dataSum: 'สรุปใบเสร็จรับเงิน/กำกับภาษีทั้งหมด',
     workSheetName: 'ชื่อใบงาน',
   },
+  debitNote: {
+    title: 'ใบเพิ่มหนี้',
+    caption: 'ใบเพิ่มหนี้ทั้งหมด',
+    expire: 'พ้นกำหนด',
+    payment: 'ชำระเงิน',
+    receipt: 'ใบเสร็จรับเงิน',
+    succeed: 'เสร็จสิ้น',
+    downloadReceipt: 'ดาวน์โหลดใบเสร็จรับเงิน',
+    downloadTaxInvoice: 'ดาวน์โหลดใบกำกับภาษี',
+
+    label: {
+      additionalDetail: 'อธิบายเพิ่มเติม',
+      specifyReasonForDebit: 'ระบุสาเหตุการเพิ่มหนี้',
+      debitNoteInformation: 'ข้อมูลการเพิ่มหนี้',
+      codeDebit: 'เลขที่ใบเพิ่มหนี้',
+      codeQuotation: 'เลขที่ใบเสนอราคา',
+      quotationWorkName: 'ชื่อใบงาน',
+      quotationPayment: 'วิธีการชำระ',
+      value: 'มูลค่าสุทธิ',
+      submit: 'อนุมัติใบเพิ่มหนี้',
+    },
+
+    stats: {
+      Pending: 'ใบเพิ่มหนี้',
+      Expire: 'พ้นกำหนด',
+      Payment: 'ชำระเงิน',
+      Receipt: 'ใบเสร็จรับเงิน',
+      Succeed: 'เสร็จสิ้น',
+    },
+
+    viewMode: {
+      payment: 'ชำระเงิน',
+      receipt: 'ใบเสร็จรับเงิน/ใบกำกับภาษี',
+      processComplete: 'เสร็จสิ้น',
+    },
+
+    status: {
+      Pending: 'ใบเพิ่มหนี้',
+      Expire: 'พ้นกำหนด',
+      Payment: 'ชำระเงิน',
+      Receipt: 'ใบเสร็จรับเงิน',
+      Succeed: 'เสร็จสิ้น',
+    },
+  },
 };
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index bcdd4cc7..a5012b7d 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -159,7 +159,7 @@ onMounted(async () => {
       children: [
         { label: 'receipt', route: '/receipt' },
         { label: 'creditNote', route: '/credit-note', disabled: true },
-        { label: 'debitNote', route: '', disabled: true },
+        { label: 'debitNote', route: '/debit-note' },
       ],
     },
 
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 4dd6cdd3..9258678c 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -21,12 +21,16 @@ import { dateFormatJS } from 'src/utils/datetime';
 import { QFile, QMenu } from 'quasar';
 import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
 import { onMounted } from 'vue';
+import { DebitNote } from 'src/stores/debit-note';
 
 const configStore = useConfigStore();
 const quotationPayment = useQuotationPayment();
 const { data: config } = storeToRefs(configStore);
 
-const prop = defineProps<{ data?: Quotation | QuotationFull }>();
+const prop = defineProps<{
+  data?: Quotation | QuotationFull | DebitNote;
+  isDebitNote?: boolean;
+}>();
 
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
@@ -194,7 +198,12 @@ async function triggerSubmit() {
 
 onMounted(async () => {
   if (!prop.data) return;
-  const ret = await quotationPayment.getQuotationPayment(prop.data.id);
+  const ret = await quotationPayment.getQuotationPayment({
+    quotationId: prop.isDebitNote === true ? undefined : prop.data.id,
+    debitNoteId: prop.isDebitNote === true ? prop.data.id : undefined,
+    quotationOnly: !!prop.isDebitNote ? false : true,
+    debitNoteOnly: !!prop.isDebitNote ? true : false,
+  });
   if (ret) {
     paymentData.value = ret.result;
     slipFile.value = paymentData.value.map((v) => ({
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 5a180905..6af0ee0b 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -443,6 +443,8 @@ async function fetchQuotation() {
 async function fetchReceipt() {
   const res = await useReceiptStore.getReceiptList({
     quotationId: quotationFormData.value.id,
+    quotationOnly: true,
+    debitNoteOnly: false,
   });
 
   if (res) {
@@ -856,7 +858,7 @@ function convertToTable(nodes: Node[]) {
   } else {
     quotationFormData.value.paySplit = [];
     quotationFormData.value.paySplitCount = 0;
-    quotationFormData.value.payCondition = 'Full';
+    quotationFormData.value.payCondition = PayCondition.Full;
   }
 
   tempPaySplit.value = JSON.parse(
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index d0ae7e2e..08c7266e 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -36,6 +36,7 @@ defineProps<{
   };
   taskOrder?: boolean;
   taskOrderComplete?: boolean;
+  debitNote?: boolean;
 }>();
 
 const { t } = useI18n();
@@ -216,6 +217,7 @@ watch(
       'invoice-color': view === View.Invoice,
       'receipt-color': view === View.Receipt,
       'task-order-color': taskOrder && !taskOrderComplete,
+      'debit-note-color': debitNote,
     }"
   >
     <div class="col bordered-r" v-if="!taskOrder">
@@ -530,6 +532,10 @@ watch(
   --_color: var(--pink-7-hsl);
 }
 
+.debit-note-color {
+  --_color: var(--cyan-7-hsl);
+}
+
 .bg-color {
   color: white;
   background: hsla(var(--_color));
diff --git a/src/pages/05_quotation/QuotationFormReceipt.vue b/src/pages/05_quotation/QuotationFormReceipt.vue
index 093661f6..e02d847e 100644
--- a/src/pages/05_quotation/QuotationFormReceipt.vue
+++ b/src/pages/05_quotation/QuotationFormReceipt.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { formatNumberDecimal } from 'stores/utils';
 import { dateFormatJS } from 'src/utils/datetime';
+import { Icon } from '@iconify/vue';
 
 import { MainButton, ViewButton } from 'components/button';
 
@@ -12,8 +13,10 @@ defineEmits<{
 withDefaults(
   defineProps<{
     title?: string;
-    hideExampleBtn?: boolean;
     successLabel?: string;
+    useBtnDownload?: boolean;
+    hideViewBtn?: boolean;
+    hideExampleBtn?: boolean;
 
     payType?: string;
     amount?: number;
@@ -52,7 +55,7 @@ withDefaults(
     </aside>
 
     <aside class="column col q-py-md text-right self-center q-px-md">
-      <div class="q-gutter-x-xs">
+      <div class="q-gutter-x-xs row justify-end">
         <MainButton
           v-if="!hideExampleBtn"
           icon="mdi-play-box-outline"
@@ -60,7 +63,40 @@ withDefaults(
           @click="() => $emit('example', index)"
         />
 
-        <ViewButton icon-only @click="() => $emit('view', index)" />
+        <ViewButton
+          v-if="!hideViewBtn"
+          icon-only
+          @click="() => $emit('view', index)"
+        />
+
+        <q-btn-dropdown
+          v-if="!!useBtnDownload"
+          flat
+          outline
+          dropdown-icon="mdi-download"
+          no-icon-animation
+          padding="0 0"
+        >
+          <q-list>
+            <q-item clickable>
+              <q-item-section side>
+                <Icon
+                  icon="fluent:receipt-money-24-regular"
+                  width="24px"
+                  height="24px"
+                />
+              </q-item-section>
+              {{ $t('debitNote.downloadReceipt') }}
+            </q-item>
+
+            <q-item clickable>
+              <q-item-section side>
+                <Icon icon="hugeicons:invoice-03" width="24px" height="24px" />
+              </q-item-section>
+              {{ $t('debitNote.downloadTaxInvoice') }}
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
       </div>
       <span class="app-text-positive text-weight-bold text-body1">
         {{ successLabel || $t('quotation.receiptDialog.receiptIssued') }}
diff --git a/src/pages/05_quotation/TableRequest.vue b/src/pages/05_quotation/TableRequest.vue
index 73d25d46..4457c763 100644
--- a/src/pages/05_quotation/TableRequest.vue
+++ b/src/pages/05_quotation/TableRequest.vue
@@ -64,12 +64,11 @@ function goToRequestList(id: string) {
       }))
     "
     :columns
-    hide-bottom
     bordered
     flat
-    hide-pagination
     selection="multiple"
     card-container-class="q-col-gutter-sm"
+    :no-data-label="$t('general.noDataTable')"
     class="full-width"
   >
     <template v-slot:header="props">
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
new file mode 100644
index 00000000..4d89f7ef
--- /dev/null
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -0,0 +1,1322 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { ref, onMounted, reactive, computed } from 'vue';
+import { api } from 'src/boot/axios';
+import { useRoute, useRouter } from 'vue-router';
+import { dateFormatJS, calculateAge } from 'src/utils/datetime';
+import { initLang, initTheme, Lang } from 'src/utils/ui';
+import { useQuotationStore } from 'src/stores/quotations';
+import { useQuotationForm } from 'src/pages/05_quotation/form';
+import { useReceipt, usePayment } from 'stores/payment';
+import useProductServiceStore from 'stores/product-service';
+import {
+  DebitNote,
+  DebitNoteStatus,
+  DebitNotePayload,
+  useDebitNote,
+} from 'src/stores/debit-note';
+import {
+  QuotationStatus,
+  PayCondition,
+  QuotationPayload,
+  ProductRelation,
+  ProductServiceList,
+} from 'src/stores/quotations/types';
+import { useConfigStore } from 'src/stores/config';
+import DocumentExpansion from './expansion/DocumentExpansion.vue';
+import RemarkExpansion from '../12_debit-note/expansion/RemarkExpansion.vue';
+import AdditionalFileExpansion from '../09_task-order/expansion/AdditionalFileExpansion.vue';
+import PaymentExpansion from './expansion/PaymentExpansion.vue';
+import DebitNoteExpansion from './expansion/DebitNoteExpansion.vue';
+import StateButton from 'src/components/button/StateButton.vue';
+import ProductExpansion from '../12_debit-note/expansion/ProductExpansion.vue';
+import SelectReadyRequestWork from '../09_task-order/SelectReadyRequestWork.vue';
+import QuotationFormReceipt from '../05_quotation/QuotationFormReceipt.vue';
+import DialogViewFile from 'src/components/dialog/DialogViewFile.vue';
+import WorkerItemExpansion from './expansion/WorkerItemExpansion.vue';
+import PaymentForm from '../05_quotation/PaymentForm.vue';
+import {
+  MainButton,
+  SaveButton,
+  UndoButton,
+  EditButton,
+} from 'src/components/button';
+import { RequestWork } from 'src/stores/request-list/types';
+import { storeToRefs } from 'pinia';
+import useOptionStore from 'src/stores/options';
+import { deleteItem, dialogWarningClose } from 'src/stores/utils';
+import { useI18n } from 'vue-i18n';
+import { Employee } from 'src/stores/employee/types';
+import QuotationFormWorkerSelect from '../05_quotation/QuotationFormWorkerSelect.vue';
+import { watch } from 'vue';
+import { ProductTree } from '../05_quotation/utils';
+import TableRequest from '../05_quotation/TableRequest.vue';
+import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
+import { useRequestList } from 'src/stores/request-list';
+import { Receipt } from 'src/stores/payment/types';
+import {
+  Product,
+  ProductGroup,
+  Service,
+} from 'src/stores/product-service/types';
+import { precisionRound } from 'src/utils/arithmetic';
+import QuotationFormProductSelect from '../05_quotation/QuotationFormProductSelect.vue';
+import { getName } from 'src/services/keycloak';
+
+const route = useRoute();
+const router = useRouter();
+const debitNote = useDebitNote();
+const configStore = useConfigStore();
+const quotationStore = useQuotationStore();
+const optionStore = useOptionStore();
+const quotationForm = useQuotationForm();
+const useReceiptStore = useReceipt();
+const productServiceStore = useProductServiceStore();
+const $q = useQuasar();
+const paymentStore = usePayment();
+const { data: config } = storeToRefs(configStore);
+const { newWorkerList } = storeToRefs(quotationForm);
+const { t, locale } = useI18n();
+const requestStore = useRequestList();
+
+type ProductGroupId = string;
+
+type Node = {
+  [key: string]: any;
+  opened?: boolean;
+  checked?: boolean;
+  bg?: string;
+  fg?: string;
+  icon?: string;
+  children?: Node[];
+};
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+const tempTableProduct = ref<ProductServiceList[]>([]);
+const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
+const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});
+const selectedProductGroup = ref<string>('');
+const selectedGroupSub = ref<'product' | 'service' | null>(null);
+const productGroup = ref<ProductGroup[]>([]);
+const agentPrice = ref(false);
+const debitNoteData = ref<DebitNote>();
+const quotationData = ref<DebitNote['debitNoteQuotation']>();
+const view = ref<QuotationStatus | null>(null);
+const fileList = ref<FileList>();
+const receiptList = ref<Receipt[]>([]);
+
+const rowsRequestList = ref<RequestData[]>([]);
+
+const productServiceList = ref<
+  Required<QuotationPayload['productServiceList'][number]>[]
+>([]);
+const productServiceNodes = ref<ProductTree>([]);
+
+const currentFormData = ref<DebitNotePayload>({
+  productServiceList: [],
+  debitNoteQuotationId: '',
+  worker: [],
+  payBillDate: new Date(),
+  paySplitCount: 0,
+  payCondition: PayCondition.Full,
+  dueDate: new Date(),
+  discount: 0,
+  status: 'CREATED',
+  remark: '#[quotation-labor]<br/><br/>#[quotation-payment]',
+  quotationId: '',
+  agentPrice: false,
+});
+const tempPaySplitCount = ref(0);
+const tempPaySplit = ref<
+  { no: number; amount: number; name?: string; invoice?: boolean }[]
+>([]);
+
+const formTaskList = ref<
+  {
+    requestWorkId: string;
+    requestWorkStep?: { requestWork: RequestWork };
+  }[]
+>([]);
+
+const attachmentList = ref<FileList>();
+const fileData = ref<
+  {
+    name: string;
+    progress: number;
+    loaded: number;
+    total: number;
+    url?: string;
+  }[]
+>([]);
+const attachmentData = ref<
+  {
+    name: string;
+    progress: number;
+    loaded: number;
+    total: number;
+    url?: string;
+    placeholder?: boolean;
+  }[]
+>([]);
+
+const statusTabForm = ref<
+  {
+    title: string;
+    status: 'done' | 'doing' | 'waiting';
+    handler: () => void;
+    active?: () => boolean;
+  }[]
+>([]);
+
+const productService = computed(() => {
+  return selectedInstallmentNo.value.length > 0
+    ? productServiceList.value.filter((v) => {
+        return (
+          v.installmentNo &&
+          selectedInstallmentNo.value.includes(v.installmentNo)
+        );
+      })
+    : productServiceList.value;
+});
+
+const summaryPrice = computed(() => getPrice(productServiceList.value));
+
+const readonly = computed(
+  () =>
+    debitNoteData.value?.quotationStatus === QuotationStatus.PaymentSuccess ||
+    debitNoteData.value?.quotationStatus === QuotationStatus.ProcessComplete ||
+    pageState.mode === 'info',
+);
+
+const pageState = reactive({
+  mode: 'create' as 'create' | 'edit' | 'info',
+  employeeModal: false,
+  productDialog: false,
+  fileDialog: false,
+  productServiceModal: false,
+  inputSearchRequest: '',
+  statusFilterRequest: 'All' as 'All' | RequestDataStatus,
+  imageDialog: false,
+  imageDialogTitle: '',
+  imageDialogUrl: '',
+});
+
+const selectedWorker = ref<
+  (Employee & {
+    attachment?: {
+      name?: string;
+      group?: string;
+      url?: string;
+      file?: File;
+      _meta?: Record<string, any>;
+    }[];
+  })[]
+>([]);
+const selectedWorkerItem = computed(() => {
+  return [
+    ...selectedWorker.value.map((e) => ({
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : `${e.firstName} ${e.lastName}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+      status: e.status,
+    })),
+
+    ...newWorkerList.value.map((v: any) => ({
+      foreignRefNo: v.passportNo,
+      employeeName:
+        locale.value === Lang.English
+          ? `${v.firstNameEN} ${v.lastNameEN}`
+          : `${v.firstName} ${v.lastName}`,
+      birthDate: dateFormatJS({ date: v.dateOfBirth }),
+      gender: v.gender,
+      age: calculateAge(v.dateOfBirth),
+      nationality: optionStore.mapOption(v.nationality),
+      documentExpireDate: '-',
+      imgUrl: '',
+      status: 'CREATED',
+    })),
+  ];
+});
+
+const selectedInstallmentNo = ref<number[]>([]);
+const installmentAmount = ref<number>(0);
+
+const QUOTATION_STATUS = [
+  'PaymentPending',
+  'PaymentSuccess',
+  'ProcessComplete',
+];
+
+function toggleDeleteProduct(index: number) {
+  // product display
+  productServiceList.value.splice(index, 1);
+  productServiceList.value = [...productServiceList.value];
+
+  // find split count
+  tempPaySplitCount.value = Math.max(
+    ...productServiceList.value.map((v) => v.installmentNo || 0),
+  );
+  currentFormData.value.paySplitCount = tempPaySplitCount.value;
+
+  // make split.length === split count
+  tempPaySplit.value.splice(currentFormData.value.paySplitCount);
+}
+
+async function getAllProduct(
+  groupId: string,
+  opts?: { force?: boolean; page?: number; pageSize?: number; query?: string },
+) {
+  selectedGroupSub.value = 'product';
+  if (!opts?.force && productList.value[groupId] !== undefined) return;
+  const ret = await productServiceStore.fetchListProduct({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+    query: opts?.query,
+    productGroupId: groupId,
+    activeOnly: true,
+  });
+  if (ret) productList.value[groupId] = ret.result;
+}
+
+async function getAllService(
+  groupId: string,
+  opts?: { force?: boolean; page?: number; pageSize?: number; query?: string },
+) {
+  selectedGroupSub.value = 'service';
+
+  if (!opts?.force && serviceList.value[groupId] !== undefined) return;
+
+  const ret = await productServiceStore.fetchListService({
+    page: opts?.page ?? 1,
+    pageSize: opts?.pageSize ?? 9999,
+    productGroupId: groupId,
+    query: opts?.query,
+
+    fullDetail: true,
+  });
+  if (ret) serviceList.value[groupId] = ret.result;
+}
+
+async function assignToProductServiceList() {
+  const ret = await productServiceStore.fetchProductGroup({
+    page: 1,
+    pageSize: 9999,
+  });
+
+  if (ret) {
+    productGroup.value = ret.result;
+  }
+}
+
+async function assignFormData(id: string) {
+  const data = await debitNote.getDebitNote(id);
+  if (!data) return;
+
+  debitNoteData.value = data;
+
+  selectedProductGroup.value =
+    data.productServiceList[0]?.product.productGroup?.id || '';
+
+  currentFormData.value = {
+    id: data.id || undefined,
+    debitNoteQuotationId: data.debitNoteQuotationId || undefined,
+    productServiceList: structuredClone(
+      data.productServiceList.map((v) => ({
+        workerIndex: v.worker.map((a) =>
+          data.worker.findIndex((b) => b.employeeId === a.employeeId),
+        ),
+        installmentNo: v.installmentNo,
+        discount: v.discount,
+        amount: v.amount,
+        workId: v.workId ?? '',
+        serviceId: v.serviceId ?? '',
+        productId: v.productId,
+      })),
+    ),
+    worker: data.worker.map((v) => v.employee),
+    payBillDate: new Date(data.payBillDate),
+    paySplitCount: data.paySplitCount,
+    payCondition: data.payCondition,
+    dueDate: new Date(data.dueDate),
+    discount: data.discount,
+    agentPrice: data.agentPrice,
+    quotationId: data.debitNoteQuotationId,
+    remark: data.remark || undefined,
+  };
+
+  productServiceList.value = data.productServiceList.map((v, i) => ({
+    id: v.id!,
+    installmentNo: v.installmentNo || 0,
+    workerIndex: v.worker.map((a) =>
+      data.worker.findIndex((b) => b.employeeId === a.employeeId),
+    ) || [0],
+    vat: v.vat || 0,
+    pricePerUnit: v.pricePerUnit || 0,
+    discount: v.discount || 0,
+    amount: v.amount || 0,
+    product: v.product,
+    work: v.work || null,
+    service: v.service || null,
+  }));
+
+  selectedWorker.value = data.worker.map((v) => v.employee);
+  await getQuotation(data.debitNoteQuotation?.id);
+  await assignToProductServiceList();
+  await fetchRequest();
+  await fetchReceipt();
+
+  await initStatus();
+}
+
+async function getQuotation(id?: string) {
+  const quotationId =
+    typeof route.query['quotationId'] === 'string'
+      ? route.query['quotationId']
+      : id;
+
+  if (!!quotationId) {
+    const data = await quotationStore.getQuotation(quotationId);
+    if (!!data) {
+      quotationData.value = data;
+    }
+  }
+}
+
+function getStatus(
+  status: typeof currentFormData.value.quotationStatus,
+  doneIndex: number,
+  doingIndex: number,
+) {
+  return QUOTATION_STATUS.findIndex((v) => v === status) >= doneIndex
+    ? 'done'
+    : QUOTATION_STATUS.findIndex((v) => v === status) >= doingIndex
+      ? 'doing'
+      : 'waiting';
+}
+
+async function initStatus() {
+  if (debitNoteData.value?.quotationStatus === QuotationStatus.Issued)
+    view.value = QuotationStatus.Issued;
+
+  //TODO แก้สถานะแสดงแยกต่างหาก
+  statusTabForm.value = [
+    {
+      title: 'title',
+      status: debitNoteData.value?.id !== undefined ? 'done' : 'doing',
+      active: () => view.value === null,
+      handler: () => {
+        view.value = null;
+      },
+    },
+    {
+      title: 'payment',
+      status:
+        debitNoteData.value?.id !== undefined
+          ? getStatus(debitNoteData.value.quotationStatus, 1, -1)
+          : 'waiting',
+      active: () => view.value === QuotationStatus.PaymentPending,
+      handler: async () => {
+        view.value = QuotationStatus.PaymentPending;
+      },
+    },
+
+    {
+      title: 'receipt',
+      status: getStatus(debitNoteData.value?.quotationStatus, 1, 1),
+      active: () => view.value === QuotationStatus.PaymentSuccess,
+      handler: () => {
+        view.value = QuotationStatus.PaymentSuccess;
+      },
+    },
+
+    {
+      title: 'processComplete',
+      status: getStatus(debitNoteData.value?.quotationStatus, 2, 1),
+      active: () => view.value === QuotationStatus.ProcessComplete,
+      handler: () => {
+        view.value = QuotationStatus.ProcessComplete;
+      },
+    },
+  ];
+}
+
+function goToQuotation() {
+  if (!quotationData.value) return;
+
+  const quotation = quotationData.value;
+  const url = new URL('/quotation/view', window.location.origin);
+
+  localStorage.setItem(
+    'new-quotation',
+    JSON.stringify({
+      customerBranchId: quotation.customerBranchId,
+      agentPrice: quotation.agentPrice,
+      statusDialog: 'info',
+      quotationId: quotation.id,
+    }),
+  );
+
+  window.open(url.toString(), '_blank');
+}
+
+function getPrice(
+  list: typeof productServiceList.value,
+  filterHook?: (
+    item: (typeof productServiceList.value)[number],
+    index?: number,
+  ) => boolean,
+) {
+  if (filterHook) list = list.filter(filterHook);
+
+  return list.reduce(
+    (a, c) => {
+      if (
+        selectedInstallmentNo.value.length > 0 &&
+        c.installmentNo &&
+        !selectedInstallmentNo.value.includes(c.installmentNo)
+      ) {
+        return a;
+      }
+
+      const price = precisionRound(c.pricePerUnit * c.amount);
+      const vat =
+        precisionRound(
+          (c.pricePerUnit * (c.discount ? c.amount : 1) - c.discount) *
+            (config.value?.vat || 0.07),
+        ) * (!c.discount ? c.amount : 1);
+
+      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.vatExcluded
+        : precisionRound(a.vat + vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice -
+          a.totalDiscount +
+          a.vat -
+          Number(currentFormData.value.discount || 0),
+      );
+
+      return a;
+    },
+    {
+      totalPrice: 0,
+      totalDiscount: 0,
+      vat: 0,
+      vatExcluded: 0,
+      finalPrice: 0,
+    },
+  );
+}
+
+async function fetchRequest() {
+  const res = await requestStore.getRequestDataList({
+    query: pageState.inputSearchRequest,
+    page: 1,
+    pageSize: 999999,
+    requestDataStatus:
+      pageState.statusFilterRequest === 'All'
+        ? undefined
+        : pageState.statusFilterRequest,
+    quotationId: currentFormData.value.id,
+  });
+
+  if (res) {
+    rowsRequestList.value = res.result;
+  }
+}
+
+async function fetchReceipt() {
+  const res = await useReceiptStore.getReceiptList({
+    debitNoteId: debitNoteData.value?.id || '',
+    debitNoteOnly: true,
+    quotationOnly: false,
+  });
+
+  if (res) {
+    receiptList.value = res.result;
+  }
+}
+
+function viewProductFile(data: ProductRelation) {
+  const base64 = data.detail.match(/src="([^"]+)"/);
+
+  pageState.imageDialog = true;
+  pageState.imageDialogTitle = data.name;
+  pageState.imageDialogUrl = base64 ? base64[1] : '';
+}
+
+function convertToTable(nodes: Node[]) {
+  const _recursive = (v: Node): Node | Node[] => {
+    if (v.checked && v.children) return v.children.flatMap(_recursive);
+    if (v.checked) return v;
+    return [];
+  };
+  const list = nodes.flatMap(_recursive).map((v) => v.value);
+
+  currentFormData.value.paySplitCount = Math.max(
+    ...list.map((v) => v.installmentNo || 0),
+  );
+  tempPaySplitCount.value = currentFormData.value.paySplitCount;
+
+  list.forEach((v) => {
+    v.amount = Math.max(selectedWorkerItem.value.length, 1);
+    if (!v.workerIndex) v.workerIndex = [];
+    for (let i = 0; i < selectedWorkerItem.value.length; i++) {
+      v.workerIndex.push(i);
+    }
+
+    if (!v.installmentNo) {
+      v.installmentNo = currentFormData.value.paySplitCount;
+    }
+  });
+
+  productServiceList.value = list;
+  tempTableProduct.value = JSON.parse(JSON.stringify(list));
+
+  currentFormData.value.paySplitCount = 0;
+  currentFormData.value.payCondition = PayCondition.Full;
+
+  tempPaySplitCount.value = currentFormData.value.paySplitCount;
+  pageState.productServiceModal = false;
+}
+
+async function getFileList(debitNoteId: string, slip?: boolean) {
+  const list = slip
+    ? await debitNote.listFile({
+        group: 'slip',
+        parentId: debitNoteId,
+      })
+    : await debitNote.listAttachment({
+        parentId: debitNoteId,
+      });
+  if (list)
+    slip
+      ? (fileData.value = await Promise.all(
+          list.map(async (v) => {
+            const rse = await debitNote.headFile({
+              group: 'slip',
+              parentId: debitNoteId,
+              fileId: v,
+            });
+
+            let contentLength = 0;
+            if (rse) contentLength = Number(rse['content-length']);
+
+            return {
+              name: v,
+              progress: 1,
+              loaded: contentLength,
+              total: contentLength,
+              url: `/debit-note/${debitNoteId}/file-slip/${v}`,
+            };
+          }),
+        ))
+      : (attachmentData.value = await Promise.all(
+          list.map(async (v) => {
+            const rse = await debitNote.headAttachment({
+              parentId: debitNoteId,
+              fileId: v,
+            });
+
+            let contentLength = 0;
+            if (rse) contentLength = Number(rse['content-length']);
+
+            return {
+              name: v,
+              progress: 1,
+              loaded: contentLength,
+              total: contentLength,
+              url: `/debit-note/${debitNoteId}/attachment/${v}`,
+            };
+          }),
+        ));
+}
+
+async function uploadFile(debitNoteId: string, list: FileList, slip?: boolean) {
+  const promises: ReturnType<
+    typeof debitNote.putAttachment | typeof debitNote.putFile
+  >[] = [];
+
+  if (!slip) {
+    attachmentData.value = attachmentData.value.filter((v) => !v.placeholder);
+  }
+
+  for (let i = 0; i < list.length; i++) {
+    const data = {
+      name: list[i].name,
+      progress: 1,
+      loaded: 0,
+      total: 0,
+      url: `/debit-note/${debitNoteId}/${slip ? 'file-slip' : 'attachment'}/${list[i].name}`,
+    };
+    promises.push(
+      slip
+        ? debitNote.putFile({
+            group: 'slip',
+            parentId: debitNoteId,
+            fileId: list[i].name,
+            file: list[i],
+            uploadUrl: true,
+            onUploadProgress: (e) => {
+              const exists = fileData?.value.find((v) => v.name === data.name);
+              if (!exists) return fileData?.value.push(data);
+              exists.total = e.total || 0;
+              exists.progress = e.progress || 0;
+              exists.loaded = e.loaded;
+            },
+          })
+        : debitNote.putAttachment({
+            parentId: debitNoteId,
+            name: list[i].name,
+            file: list[i],
+            onUploadProgress: (e) => {
+              const exists = attachmentData?.value.find(
+                (v) => v.name === data.name,
+              );
+              if (!exists) return attachmentData?.value.push(data);
+              exists.total = e.total || 0;
+              exists.progress = e.progress || 0;
+              exists.loaded = e.loaded;
+            },
+          }),
+    );
+    slip ? fileData?.value.push(data) : attachmentData?.value.push(data);
+  }
+  fileList.value = undefined;
+  attachmentList.value = undefined;
+
+  const beforeUnloadHandler = (e: Event) => {
+    e.preventDefault();
+  };
+
+  window.addEventListener('beforeunload', beforeUnloadHandler);
+
+  return await Promise.all(promises).then((v) => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler);
+    return v;
+  });
+}
+
+async function remove(debitNoteId: string, n: string, slip?: boolean) {
+  dialogWarningClose(t, {
+    message: t('dialog.message.confirmDelete'),
+    actionText: t('dialog.action.ok'),
+    action: async () => {
+      const res = slip
+        ? await debitNote.delFile({
+            group: 'slip',
+            parentId: debitNoteId,
+            fileId: n,
+          })
+        : await debitNote.delAttachment({
+            parentId: debitNoteId,
+            name: n,
+          });
+      if (res) {
+        getFileList(debitNoteId, slip);
+      }
+    },
+    cancel: () => {},
+  });
+}
+
+async function submit() {
+  const payload: DebitNotePayload = {
+    id: currentFormData.value.id || undefined,
+    productServiceList: productServiceList.value.map((v) => ({
+      installmentNo: v.installmentNo,
+      workerIndex: v.workerIndex,
+      discount: v.discount,
+      amount: v.amount,
+      productId: v.product.id,
+      workId: v.work?.id || '',
+      serviceId: v.service?.id || '',
+    })),
+
+    worker: JSON.parse(
+      JSON.stringify([
+        ...selectedWorker.value.map((v) => {
+          {
+            return v.id;
+          }
+        }),
+        ...newWorkerList.value.map((v) => {
+          const { attachment, ...payload } = v;
+          return payload;
+        }),
+      ]),
+    ),
+    dueDate: currentFormData.value.dueDate,
+    payCondition: currentFormData.value.payCondition,
+    discount: currentFormData.value.discount,
+    remark: currentFormData.value.remark || undefined,
+    agentPrice: agentPrice.value,
+    quotationId: quotationData.value?.id || '',
+  };
+
+  const res =
+    pageState.mode === 'edit'
+      ? await debitNote.updateDebitNote(payload)
+      : await debitNote.createDebitNote(payload);
+
+  if (res) {
+    await router.push(`/debit-note/${res.id}/?mode=info`);
+
+    if (attachmentList.value && pageState.mode === 'create') {
+      await uploadFile(res.id, attachmentList.value, false);
+    }
+
+    pageState.mode = 'info';
+
+    assignFormData(res.id);
+
+    initStatus();
+  }
+}
+
+function toggleMode(mode: 'create' | 'edit' | 'info') {
+  const currentMode = mode || route.query.mode;
+  const newMode = currentMode; // เปลี่ยนค่า 'edit' เป็น 'view' และกลับกัน
+
+  router.push({
+    path: route.path,
+    query: { ...route.query, mode: newMode },
+  });
+}
+
+async function exampleReceipt(id: string) {
+  $q.loading.show();
+  const url = await paymentStore.getFlowAccount(id);
+
+  if (url) {
+    $q.loading.hide();
+    window.open(url.data.link, '_blank');
+  }
+}
+
+function storeDataLocal() {
+  //  quotationFormData.value.productServiceList = productServiceList.value;
+
+  localStorage.setItem(
+    'debit-note-preview',
+    JSON.stringify({
+      data: {
+        ...currentFormData.value,
+        customerBranchId: quotationData.value?.customerBranchId,
+        registeredBranchId: quotationData.value?.registeredBranchId,
+      },
+      meta: {
+        source: {
+          code: pageState.mode === 'create' ? '-' : debitNoteData.value?.code,
+          createAt:
+            pageState.mode === 'create'
+              ? Date.now()
+              : debitNoteData.value?.createdAt,
+          createBy: debitNoteData.value?.createdBy,
+          payCondition: currentFormData.value.payCondition,
+          contactName: quotationData.value?.contactName,
+          contactTel: quotationData.value?.contactTel,
+          workName: quotationData.value?.workName,
+          dueDate: currentFormData.value.dueDate,
+        },
+        productServicelist: productService.value,
+        selectedWorker: selectedWorker.value,
+        createdBy: getName(),
+      },
+    }),
+  );
+
+  const url = new URL('/debit-note/document-view', window.location.origin);
+
+  window.open(url, '_blank');
+}
+
+watch(
+  () => pageState.mode,
+  () => toggleMode(pageState.mode),
+);
+
+watch(
+  [() => pageState.inputSearchRequest, () => pageState.statusFilterRequest],
+  () => {
+    fetchRequest();
+  },
+);
+
+onMounted(async () => {
+  initTheme();
+  initLang();
+  initStatus();
+
+  if (!!route.params['id'] && typeof route.params['id'] === 'string') {
+    await assignFormData(route.params['id']);
+  }
+
+  if (typeof route.query['quotationId'] === 'string') {
+    pageState.mode = 'create';
+    await getQuotation(route.query['quotationId']);
+  }
+
+  if (typeof route.query['mode'] === 'string') {
+    pageState.mode = route.query['mode'] as 'create' | 'edit' | 'info';
+  }
+
+  await useConfigStore().getConfig();
+});
+</script>
+
+<template>
+  <div class="column surface-0 fullscreen">
+    <div class="color-bar" :class="{ ['dark']: $q.dark.isActive }">
+      <div :class="{ ['indigo-segment']: true }"></div>
+      <div :class="{ ['light-indigo-segment']: true }"></div>
+      <div class="white-segment"></div>
+    </div>
+
+    <!-- SEC: Header -->
+    <header
+      class="row q-px-md q-py-sm items-center justify-between relative-position"
+    >
+      <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
+      <div style="flex: 1" class="row items-center">
+        <RouterLink to="/debit-note">
+          <q-img src="/icons/favicon-512x512.png" width="3rem" />
+        </RouterLink>
+        <span class="column text-h6 text-bold q-ml-md">
+          {{ $t('debitNote.title') }}
+          <!-- {{ code || '' }} -->
+          <span class="text-caption text-regular app-text-muted">
+            {{
+              $t('quotation.processOn', {
+                msg: dateFormatJS({
+                  date: debitNoteData?.createdAt || new Date(Date.now()),
+                  monthStyle: 'long',
+                }),
+              })
+            }}
+          </span>
+        </span>
+      </div>
+    </header>
+
+    <!-- SEC: Body -->
+    <article
+      class="col full-width q-pa-md"
+      style="flex-grow: 1; overflow-y: auto"
+    >
+      <section class="col-sm col-12">
+        <div class="col q-gutter-y-md">
+          <nav
+            class="surface-1 q-pa-sm row no-wrap full-width scroll rounded"
+            style="gap: 10px"
+          >
+            <StateButton
+              v-for="i in statusTabForm"
+              :key="i.title"
+              :label="
+                $t(
+                  `debitNote${i.title === 'title' ? '' : '.viewMode'}.${i.title}`,
+                )
+              "
+              :status-active="i.active?.()"
+              :status-done="i.status === 'done'"
+              :status-waiting="i.status === 'waiting'"
+              @click="i.handler()"
+            />
+          </nav>
+          <!-- #TODO  add goToQuotation as @goto-quotation-->
+          <DocumentExpansion
+            v-if="view === null"
+            :readonly
+            :registered-branch-id="quotationData?.registeredBranchId"
+            :customer-id="quotationData?.customerBranchId"
+            :quotation-code="quotationData?.code || '-'"
+            :quotation-work-name="quotationData?.workName || '-'"
+            :quotation-contact-name="quotationData?.contactName || '-'"
+            :quotation-contact-tel="quotationData?.contactTel || '-'"
+            v-model:due-date="currentFormData.dueDate"
+            @goto-quotation="() => goToQuotation()"
+          />
+
+          <DebitNoteExpansion
+            v-if="view === null"
+            :readonly
+            v-model:reason="currentFormData.reason"
+            v-model:detail="currentFormData.detail"
+          />
+
+          <PaymentForm
+            v-if="view === QuotationStatus.PaymentPending"
+            is-debit-note
+            :data="debitNoteData"
+            @fetch-status="
+              () => {
+                if (!!debitNoteData) assignFormData(debitNoteData?.id);
+              }
+            "
+          />
+
+          <WorkerItemExpansion
+            v-if="view === null"
+            :readonly
+            :hide-btn-add-worker="
+              !readonly &&
+              (!currentFormData || currentFormData.quotationStatus === 'Issued')
+            "
+            :row-worker="selectedWorkerItem"
+            @add-worker="() => (pageState.employeeModal = true)"
+            @delete="(i) => deleteItem(selectedWorker, i)"
+          />
+
+          <!-- #TODO add  openProductDialog at @add-product-->
+
+          <ProductExpansion
+            v-if="view === null"
+            :readonly
+            :installment-input="currentFormData.payCondition === 'SplitCustom'"
+            :max-installment="currentFormData.paySplitCount"
+            :agent-price="agentPrice"
+            :employee-rows="selectedWorkerItem"
+            :rows="productService"
+            @add-product="() => (pageState.productServiceModal = true)"
+            @update-rows="
+              (v) => {
+                view === null && (productServiceList = v);
+              }
+            "
+            @delete="toggleDeleteProduct"
+            @view-file="viewProductFile"
+          />
+
+          <PaymentExpansion
+            v-if="view === null"
+            readonly
+            :total-price="summaryPrice.finalPrice"
+            class="q-mb-md"
+            v-model:pay-type="currentFormData.payCondition"
+            v-model:pay-split-count="currentFormData.paySplitCount"
+            v-model:pay-split="currentFormData.paySplit"
+            v-model:final-discount="currentFormData.discount"
+            v-model:pay-bill-date="currentFormData.payBillDate"
+            v-model:summary-price="summaryPrice"
+          />
+
+          <!-- TODO: bind additional file -->
+          <AdditionalFileExpansion
+            v-if="view === null || view === QuotationStatus.PaymentPending"
+            :readonly
+            v-model:file-data="attachmentData"
+            :transform-url="
+              async (url: string) => {
+                const result = await api.get<string>(url);
+                return result.data;
+              }
+            "
+            @fetch-file-list="
+              () => {
+                if (!debitNoteData) return;
+                getFileList(debitNoteData.id);
+              }
+            "
+            @upload="
+              async (f) => {
+                attachmentList = f;
+                attachmentData = [];
+
+                Array.from(f).forEach(({ name }) => {
+                  attachmentData.push({
+                    name: name,
+                    progress: 1,
+                    loaded: 0,
+                    total: 0,
+                    placeholder: true,
+                  });
+                });
+
+                if (!debitNoteData) return;
+
+                await uploadFile(debitNoteData.id, f);
+              }
+            "
+            @remove="
+              async (n) => {
+                if (!debitNoteData) return;
+                await remove(debitNoteData.id, n);
+              }
+            "
+          />
+
+          <!-- TODO: bind remark -->
+          <RemarkExpansion
+            v-if="view === null || view === QuotationStatus.PaymentPending"
+            :readonly="readonly"
+            v-model:remark="currentFormData.remark"
+          />
+
+          <main
+            v-if="view === QuotationStatus.ProcessComplete"
+            class="surface-1 q-pa-md full-width q-gutter-y-md rounded"
+          >
+            <div class="row justify-between items-center">
+              <q-input
+                for="input-search"
+                outlined
+                dense
+                :label="$t('general.search')"
+                class="col-12 col-md-3"
+                :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+                v-model="pageState.inputSearchRequest"
+                debounce="200"
+              >
+                <template #prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="pageState.statusFilterRequest"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  {
+                    label: $t('general.all'),
+                    value: 'All',
+                  },
+                  {
+                    label: $t('requestList.status.Pending'),
+                    value: RequestDataStatus.Pending,
+                  },
+                  {
+                    label: $t('requestList.status.InProgress'),
+                    value: RequestDataStatus.InProgress,
+                  },
+                  {
+                    label: $t('requestList.status.Completed'),
+                    value: RequestDataStatus.Completed,
+                  },
+                ]"
+              ></q-select>
+            </div>
+            <TableRequest :rows="rowsRequestList" />
+          </main>
+
+          <template v-if="view === QuotationStatus.PaymentSuccess">
+            <QuotationFormReceipt
+              hide-view-btn
+              v-for="(v, i) in receiptList"
+              :key="i"
+              :amount="v.amount"
+              :date="v.date"
+              :pay-type="quotationData?.payCondition"
+              :index="i"
+              :pay-split-count="quotationData?.paySplitCount || 0"
+              @view="
+                () => {
+                  if (quotationData?.payCondition !== 'Full') {
+                    selectedInstallmentNo = [v.invoice.installments[0].no];
+                    installmentAmount = v.invoice.amount;
+                  }
+
+                  view = null;
+                }
+              "
+              @example="() => exampleReceipt(v.id)"
+            />
+          </template>
+        </div>
+      </section>
+    </article>
+
+    <!-- SEC: footer -->
+    <footer class="surface-1 q-pa-md full-width">
+      <nav class="row justify-end">
+        <!-- TODO: view example -->
+        <MainButton
+          v-if="view === null"
+          class="q-mr-auto"
+          outlined
+          icon="mdi-play-box-outline"
+          color="207 96% 32%"
+          @click="storeDataLocal()"
+        >
+          {{ $t('general.view', { msg: $t('general.example') }) }}
+        </MainButton>
+
+        <div class="row q-gutter-x-sm">
+          <UndoButton
+            outlined
+            @click="
+              () => {
+                pageState.mode = 'info';
+              }
+            "
+            v-if="false"
+          />
+
+          <SaveButton
+            v-if="!readonly && pageState.mode === 'create'"
+            @click="submit"
+            :label="true ? $t('debitNote.label.submit') : $t('general.save')"
+            :icon="
+              true
+                ? 'mdi-account-multiple-check-outline'
+                : 'mdi-content-save-outline'
+            "
+            solid
+          ></SaveButton>
+
+          <EditButton
+            v-if="false"
+            class="no-print"
+            @click="pageState.mode = 'edit'"
+            solid
+          />
+        </div>
+      </nav>
+    </footer>
+  </div>
+
+  <!-- SEC: Dialog -->
+  <!-- add employee quotation -->
+
+  <QuotationFormWorkerSelect
+    :preselect-worker="selectedWorker"
+    :customerBranchId="quotationData?.customerBranchId"
+    v-model:open="pageState.employeeModal"
+    v-model:new-worker-list="newWorkerList"
+    @success="
+      (v) => {
+        selectedWorker = v.worker;
+      }
+    "
+  />
+
+  <!-- add product service -->
+  <QuotationFormProductSelect
+    v-model="pageState.productServiceModal"
+    v-model:nodes="productServiceNodes"
+    v-model:product-group="productGroup"
+    v-model:product-list="productList"
+    v-model:service-list="serviceList"
+    v-model:selected-product-group="selectedProductGroup"
+    :agent-price="agentPrice"
+    @submit="convertToTable"
+    @select-group="
+      async (id) => {
+        await getAllService(id);
+        await getAllProduct(id);
+      }
+    "
+    @search="
+      (id, text, mode) => {
+        if (mode === 'service') {
+          getAllService(id, { force: true, query: text, pageSize: 50 });
+        }
+        if (mode === 'product') {
+          getAllProduct(id, { force: true, query: text, pageSize: 50 });
+        }
+      }
+    "
+  ></QuotationFormProductSelect>
+
+  <SelectReadyRequestWork
+    v-if="quotationData"
+    creditNote
+    :fetch-params="{ cancelOnly: true, quotationId: quotationData.id }"
+    v-model:open="pageState.productDialog"
+    v-model:task-list="formTaskList"
+  />
+
+  <DialogViewFile
+    hide-tab
+    download
+    v-model="pageState.fileDialog"
+    :url="fileData[0]?.url"
+    :transform-url="
+      async (url: string) => {
+        const result = await api.get<string>(url);
+        return result.data;
+      }
+    "
+  />
+</template>
+
+<style scoped>
+.color-bar {
+  width: 100%;
+  height: 1vh;
+  background: linear-gradient(
+    90deg,
+    rgb(47, 68, 173) 0%,
+    rgba(255, 255, 255, 1) 77%,
+    rgba(204, 204, 204, 1) 100%
+  );
+  display: flex;
+  overflow: hidden;
+}
+
+.color-bar.dark {
+  opacity: 0.7;
+}
+
+.indigo-segment {
+  background-color: var(--cyan-7);
+  flex-grow: 4;
+}
+
+.light-indigo-segment {
+  background-color: hsla(var(--indigo-10-hsl) / 0.2);
+  flex-grow: 0.5;
+}
+
+.white-segment {
+  background-color: #ffffff;
+  flex-grow: 1;
+}
+
+.indigo-segment,
+.light-indigo-segment,
+.white-segment {
+  transform: skewX(-60deg);
+}
+
+.banner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('/images/building-banner.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: -1;
+
+  &.dark {
+    filter: invert(100%);
+  }
+}
+</style>
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
new file mode 100644
index 00000000..2143ba59
--- /dev/null
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -0,0 +1,499 @@
+<script lang="ts" setup>
+// NOTE: Library
+import { computed, onMounted, reactive, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+// NOTE:  Components
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import NoData from 'src/components/NoData.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import FloatingActionButton from 'components/FloatingActionButton.vue';
+import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
+import DialogHeader from 'src/components/dialog/DialogHeader.vue';
+import { CancelButton, SaveButton } from 'src/components/button';
+import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
+import FormDebit from 'src/components/12_debit-note/FormDebit.vue';
+import TableDebitNote from './TableDebitNote.vue';
+
+// NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
+import useFlowStore from 'src/stores/flow';
+import { pageTabs, columns, hslaColors } from './constants';
+import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note';
+import { ref } from 'vue';
+import { dialogWarningClose } from 'src/stores/utils';
+
+const { t } = useI18n();
+const flow = useFlowStore();
+const navigator = useNavigator();
+const debitNote = useDebitNote();
+const selectedQuotationId = ref<string>('');
+const { stats, pageMax, page, data, pageSize } = storeToRefs(debitNote);
+
+// NOTE: Variable
+const pageState = reactive({
+  quotationId: '',
+  currentTab: DebitNoteStatus.Pending,
+  hideStat: false,
+  statusFilter: 'None',
+  inputSearch: '',
+  fieldSelected: columns
+    .filter((v) => !v.name.startsWith('#'))
+    .map((v) => v.name),
+  gridView: false,
+  total: 0,
+
+  debitDialog: false,
+});
+
+const fieldSelectedOption = computed(() => {
+  return columns
+    .filter((v) => !v.name.startsWith('#'))
+    .map((v) => ({
+      label: v.label,
+      value: v.name,
+    }));
+});
+
+// NOTE: Function
+
+async function getList(opts?: { page?: number; pageSize?: number }) {
+  const res = await debitNote.getDebitNoteList({
+    page: opts?.page || page.value,
+    pageSize: opts?.pageSize || pageSize.value,
+    query: pageState.inputSearch === '' ? undefined : pageState.inputSearch,
+    deebitNoteStatus: pageState.currentTab as DebitNoteStatus | undefined,
+    includeRegisteredBranch: true,
+  });
+
+  if (res) {
+    data.value = res.result;
+    pageState.total = res.total;
+    pageMax.value = Math.ceil(res.total / pageSize.value);
+  }
+}
+
+async function triggerDelete(id: string) {
+  dialogWarningClose(t, {
+    message: t('dialog.message.confirmDelete'),
+    actionText: t('dialog.action.ok'),
+    action: async () => {
+      const res = await debitNote.deleteDebitNote(id);
+      if (!!res) {
+        getList();
+      }
+    },
+    cancel: () => {},
+  });
+}
+
+async function triggerCreateDebitNote() {
+  pageState.debitDialog = true;
+}
+
+function navigateTo(opts: {
+  statusDialog: 'info' | 'edit' | 'create';
+  quotationId?: string;
+  debitId?: string;
+}) {
+  const url = new URL(
+    `/debit-note/${opts.statusDialog === 'create' ? 'add' : opts.debitId}`,
+    window.location.origin,
+  );
+
+  if (opts.statusDialog === 'create') {
+    url.searchParams.append('quotationId', opts.quotationId || '');
+  }
+
+  url.searchParams.append('mode', opts.statusDialog);
+
+  window.open(url.toString(), '_blank');
+}
+
+async function submit() {
+  navigateTo({ statusDialog: 'create', quotationId: pageState.quotationId });
+}
+
+function close() {
+  pageState.debitDialog = false;
+}
+
+onMounted(async () => {
+  navigator.current.title = 'debitNote.title';
+  navigator.current.path = [{ text: 'debitNote.caption', i18n: true }];
+
+  debitNote.getDebitNoteStats().then((res) => res && (stats.value = res));
+  getList();
+});
+
+watch(
+  [
+    () => pageState.currentTab,
+    () => pageState.inputSearch,
+    () => pageSize.value,
+    () => pageState.statusFilter,
+  ],
+  () => getList(),
+);
+</script>
+<template>
+  <!-- #TODO add  trigger dialog add debit  -->
+  <FloatingActionButton
+    style="z-index: 999"
+    hide-icon
+    @click.stop="() => triggerCreateDebitNote()"
+  ></FloatingActionButton>
+
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('general.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{ pageState.total }}
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'material-symbols-light:receipt-long',
+                count: stats[DebitNoteStatus.Pending],
+                label: `debitNote.stats.${DebitNoteStatus.Pending}`,
+                color: 'orange',
+              },
+              {
+                icon: 'mdi-clock-alert-outline',
+                count: stats[DebitNoteStatus.Expire],
+                label: `debitNote.stats.${DebitNoteStatus.Expire}`,
+                color: 'cyan',
+              },
+              {
+                icon: 'tabler:cash-register',
+                count: stats[DebitNoteStatus.Payment],
+                label: `debitNote.stats.${DebitNoteStatus.Payment}`,
+                color: 'dark-orange',
+              },
+              {
+                icon: 'fluent:receipt-money-16-regular',
+                count: stats[DebitNoteStatus.Receipt],
+                label: `debitNote.stats.${DebitNoteStatus.Receipt}`,
+                color: 'green',
+              },
+
+              {
+                icon: 'mdi-check-decagram-outline',
+                count: stats[DebitNoteStatus.Succeed],
+                label: `debitNote.stats.${DebitNoteStatus.Succeed}`,
+                color: 'blue',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height">
+        <!-- SEC: header content -->
+        <header
+          class="row surface-3 justify-between full-width items-center"
+          style="z-index: 1"
+        >
+          <section
+            class="row q-py-sm q-px-md bordered-b justify-between full-width"
+          >
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="q-mr-md col-12 col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div
+              class="row col-12 col-md-3 justify-end"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+              style="white-space: nowrap"
+            >
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: v.label && $t(v.label),
+                  }))
+                "
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="pageState.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </section>
+
+          <nav class="surface-2 bordered-b q-px-md full-width">
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              v-model="pageState.currentTab"
+              align="left"
+              class="full-width"
+              active-color="info"
+            >
+              <q-tab
+                v-for="tab in pageTabs"
+                :name="tab.value"
+                :key="tab.value"
+                @click="
+                  () => {
+                    pageState.currentTab = tab.value;
+                    pageState.inputSearch = '';
+
+                    flow.rotate();
+                  }
+                "
+              >
+                <div
+                  class="row text-capitalize"
+                  :class="
+                    pageState.currentTab === tab.value
+                      ? 'text-bold'
+                      : 'app-text-muted'
+                  "
+                >
+                  {{ $t(`debitNote.status.${tab.label}`) }}
+                </div>
+              </q-tab>
+            </q-tabs>
+          </nav>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="data.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData :not-found="!!pageState.inputSearch" />
+        </article>
+        <article v-else class="col surface-2 full-width scroll q-pa-md">
+          <!-- #TODO change Table   -->
+          <TableDebitNote
+            :grid="pageState.gridView"
+            :visible-columns="pageState.fieldSelected"
+            @view="
+              (item) => navigateTo({ statusDialog: 'info', debitId: item.id })
+            "
+            @edit="
+              (item) => navigateTo({ statusDialog: 'edit', debitId: item.id })
+            "
+            @delete="(item) => triggerDelete(item.id)"
+          >
+            <template #grid="{ item }">
+              <div class="col-md-4 col-sm-6 col-12">
+                <QuotationCard
+                  hide-kebab-edit
+                  @view="
+                    () =>
+                      navigateTo({ statusDialog: 'info', debitId: item.row.id })
+                  "
+                  @edit="
+                    () =>
+                      navigateTo({ statusDialog: 'edit', debitId: item.row.id })
+                  "
+                  @delete="() => triggerDelete(item.row.id)"
+                  :title="item.row.debitNoteQuotation?.workName"
+                  :code="item.row.code"
+                  :status="$t(`quotation.status.${item.row.quotationStatus}`)"
+                  :badge-color="hslaColors[item.row.quotationStatus] || ''"
+                  :custom-data="[
+                    {
+                      label: $t('branch.card.branchVirtual'),
+                      value:
+                        $i18n.locale === 'tha'
+                          ? item.row.registeredBranch.name
+                          : item.row.registeredBranch.nameEN,
+                    },
+                    {
+                      label: $t('quotation.customer'),
+                      value:
+                        item.row.customerBranch.customer.customerType === 'CORP'
+                          ? item.row.customerBranch.customerName
+                          : $i18n.locale === 'tha'
+                            ? `${item.row.customerBranch.firstName} ${item.row.customerBranch.lastName}`
+                            : `${item.row.customerBranch.firstNameEN} ${item.row.customerBranch.lastNameEN}`,
+                    },
+                    {
+                      label: $t('requestList.quotationCode'),
+                      value: item.row.debitNoteQuotation?.code,
+                    },
+                    {
+                      label: $t('debitNote.label.quotationPayment'),
+                      value: $t(
+                        `quotation.type.${item.row.debitNoteQuotation?.payCondition}`,
+                      ),
+                    },
+                  ]"
+                />
+              </div>
+            </template>
+          </TableDebitNote>
+        </article>
+
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="pageMax > 0"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $t('general.recordsPage', {
+                resultcurrentPage: data.length,
+                total: pageState.inputSearch ? data.length : pageState.total,
+              })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <!-- #TODO add getList at fectch-data -->
+            <PaginationComponent
+              v-model:current-page="page"
+              v-model:max-page="pageMax"
+              :fetch-data="() => getList()"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+
+  <!-- SEC: Dialog -->
+  <!-- dialog create -->
+
+  <!-- #TODO add submit at submit -->
+  <DialogFormContainer
+    width="60vw"
+    height="500px"
+    v-model="pageState.debitDialog"
+    @submit="() => submit()"
+  >
+    <template #header>
+      <DialogHeader
+        :title="$t(`general.add`, { text: $t('debitNote.title') })"
+      />
+    </template>
+
+    <section class="q-pa-md col full-width">
+      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
+        <!-- TODO: bind quotation id -->
+        <FormDebit v-model:quotation-id="pageState.quotationId" />
+      </div>
+    </section>
+
+    <template #footer>
+      <CancelButton class="q-ml-auto" outlined @click="close()" />
+      <SaveButton
+        :label="$t(`general.add`, { text: $t('debitNote.title') })"
+        class="q-ml-sm"
+        icon="mdi-check"
+        solid
+        type="submit"
+      />
+    </template>
+  </DialogFormContainer>
+</template>
+<style scoped></style>
diff --git a/src/pages/12_debit-note/TableDebitNote.vue b/src/pages/12_debit-note/TableDebitNote.vue
new file mode 100644
index 00000000..77d26d18
--- /dev/null
+++ b/src/pages/12_debit-note/TableDebitNote.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { QTableSlots } from 'quasar';
+import { DebitNote, useDebitNote } from 'src/stores/debit-note';
+
+import { columns } from './constants.ts';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+
+const debitNote = useDebitNote();
+const { data, page, pageSize } = storeToRefs(debitNote);
+
+const prop = defineProps<{ grid: boolean; visibleColumns: string[] }>();
+defineEmits<{ (evt: 'view' | 'delete' | 'edit', val: DebitNote): void }>();
+
+const visible = computed(() =>
+  columns.filter(
+    (v) => prop.visibleColumns.includes(v.name) || v.name === '#action',
+  ),
+);
+</script>
+<template>
+  <q-table
+    :rows-per-page-options="[0]"
+    :rows="
+      data.map((item, i) => ({
+        ...item,
+        _index: i,
+        _page: page,
+        _pageSize: pageSize,
+      }))
+    "
+    :columns="visible"
+    :grid
+    hide-bottom
+    bordered
+    flat
+    hide-pagination
+    selection="multiple"
+    card-container-class="q-col-gutter-sm"
+    class="full-width"
+  >
+    <template v-slot:header="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
+        <q-th v-for="col in visible" :key="col.name" :props="props">
+          <template v-if="!col.name.startsWith('#')">
+            {{ $t(col.label) }}
+          </template>
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: DebitNote & { _index: number; _page: number; _pageSize: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+        <q-td v-for="col in visible" :align="col.align">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="!col.name.startsWith('#')">
+            <span v-if="col.name !== 'quotationPayment'">
+              {{
+                typeof col.field === 'string'
+                  ? props.row[col.field as keyof DebitNote]
+                  : col.field(props.row)
+              }}
+            </span>
+
+            <span v-if="col.name === 'quotationPayment'">
+              {{ $t(`quotation.type.${col.field(props.row)}`) }}
+            </span>
+          </template>
+
+          <template v-if="col.name === '#action'">
+            <KebabAction
+              hide-toggle
+              hide-edit
+              @edit="$emit('edit', props.row)"
+              @delete="$emit('delete', props.row)"
+              @view="$emit('view', props.row)"
+            />
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props: { row: DebitNote }">
+      <slot name="grid" :item="props" />
+    </template>
+  </q-table>
+</template>
diff --git a/src/pages/12_debit-note/constants.ts b/src/pages/12_debit-note/constants.ts
new file mode 100644
index 00000000..af2560cd
--- /dev/null
+++ b/src/pages/12_debit-note/constants.ts
@@ -0,0 +1,90 @@
+import { QTableProps } from 'quasar';
+import { DebitNoteStatus, DebitNote } from 'src/stores/debit-note';
+import { formatNumberDecimal } from 'src/stores/utils';
+
+export const taskStatusOpts = [
+  {
+    status: DebitNoteStatus.Expire,
+    name: `debitNote.status.${DebitNoteStatus.Expire}`,
+  },
+  {
+    status: DebitNoteStatus.Payment,
+    name: `debitNote.status.${DebitNoteStatus.Payment}`,
+  },
+  {
+    status: DebitNoteStatus.Receipt,
+    name: `debitNote.status.${DebitNoteStatus.Receipt}`,
+  },
+  {
+    status: DebitNoteStatus.Succeed,
+    name: `debitNote.status.${DebitNoteStatus.Succeed}`,
+  },
+];
+
+export const pageTabs = [
+  { label: 'Pending', value: DebitNoteStatus.Pending },
+  { label: 'Expire', value: DebitNoteStatus.Expire },
+  { label: 'Payment', value: DebitNoteStatus.Payment },
+  { label: 'Receipt', value: DebitNoteStatus.Receipt },
+  { label: 'Succeed', value: DebitNoteStatus.Succeed },
+];
+
+export enum Status {
+  taskOrder = 'taskOrder',
+  receiveTaskOrder = 'receiveTaskOrder',
+  sendTaskOrder = 'sendTaskOrder',
+  payment = 'payment',
+  goodReceipt = 'goodReceipt',
+}
+
+export const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: (
+      data: DebitNote & { _index: number; _page: number; _pageSize: number },
+    ) => (data._page - 1) * data._pageSize + data._index + 1,
+  },
+  {
+    name: 'code',
+    align: 'center',
+    label: 'debitNote.label.codeDebit',
+    field: (data: DebitNote) => data.code,
+  },
+  {
+    name: 'quotationCode',
+    align: 'center',
+    label: 'debitNote.label.codeQuotation',
+    field: (data: DebitNote) => data.debitNoteQuotation?.code,
+  },
+  {
+    name: 'quotationWorkName',
+    align: 'center',
+    label: 'debitNote.label.quotationWorkName',
+    field: (data: DebitNote) => data.workName,
+  },
+  {
+    name: 'quotationPayment',
+    align: 'center',
+    label: 'debitNote.label.quotationPayment',
+    field: (data: DebitNote) => data.debitNoteQuotation?.payCondition,
+  },
+  {
+    name: 'creditNoteValue',
+    align: 'center',
+    label: 'debitNote.label.value',
+    field: (data: DebitNote) => formatNumberDecimal(data.totalPrice),
+  },
+  {
+    name: '#action',
+    align: 'center',
+    label: '',
+    field: (_) => '#action',
+  },
+] as const satisfies QTableProps['columns'];
+
+export const hslaColors: Record<string, string> = {
+  Pending: '--blue-6-hsl',
+  Success: '--red-6-hsl',
+};
diff --git a/src/pages/12_debit-note/document-view/BankComponents.vue b/src/pages/12_debit-note/document-view/BankComponents.vue
new file mode 100644
index 00000000..3f6396c4
--- /dev/null
+++ b/src/pages/12_debit-note/document-view/BankComponents.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { QSelect } from 'quasar';
+
+// NOTE: Import stores
+import { selectFilterOptionRefMod } from 'stores/utils';
+import useOptionStore from 'stores/options';
+
+// NOTE  Import Types
+import { BankBook } from 'stores/branch/types';
+
+// NOTE: Import Components
+
+const optionStore = useOptionStore();
+
+const bankBookOptions = ref<Record<string, unknown>[]>([]);
+let bankBookFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+defineProps<{
+  bankBook: BankBook;
+  index: number;
+}>();
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    bankBookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+  },
+);
+</script>
+
+<template>
+  <fieldset class="rounded" style="border: 1px solid var(--gray-4)">
+    <legend>ช่องทางที่ {{ index + 1 }}</legend>
+
+    <div class="border-5 full-width row" style="gap: var(--size-4)">
+      <div class="column q-pa-sm" style="width: fit-content">
+        <img
+          :src="bankBook.bankUrl"
+          class="rounded"
+          style="
+            border: 1px solid var(--gray-3);
+            object-fit: scale-down;
+            width: 1in;
+            height: 1in;
+          "
+        />
+      </div>
+      <div class="column col" style="gap: var(--size-3)">
+        <div class="row" style="justify-content: space-between">
+          <div class="text-with-label">
+            <div>เลขบัญชีธนาคาร</div>
+            <div class="row items-start">
+              <img
+                width="25px"
+                height="25px"
+                class="q-mr-xs"
+                :src="`/img/bank/${bankBook.bankName}.png`"
+              />
+              {{ bankBook.accountNumber }}
+            </div>
+          </div>
+          <div class="text-with-label">
+            <div>เลขบัญชีธนาคาร</div>
+            <div>{{ bankBook.accountNumber }}</div>
+          </div>
+          <div class="text-with-label">
+            <div>ชื่อบัญชี</div>
+            <div>{{ bankBook.accountName }}</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="text-with-label">
+            <div>สาขา</div>
+            <div>{{ bankBook.bankBranch }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+legend {
+  background-color: white;
+  padding: 5px 10px;
+}
+
+.bordered-2 {
+  border: 2px solid var(--border-color);
+}
+
+.border-5 {
+  border-radius: 5px;
+}
+
+.text-with-label {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  & > :first-child {
+    color: var(--gray-6);
+  }
+}
+</style>
diff --git a/src/pages/12_debit-note/document-view/MainPage.vue b/src/pages/12_debit-note/document-view/MainPage.vue
new file mode 100644
index 00000000..0e4432f4
--- /dev/null
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@@ -0,0 +1,654 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { onMounted, nextTick, ref, watch } from 'vue';
+import { precisionRound } from 'src/utils/arithmetic';
+import ThaiBahtText from 'thai-baht-text';
+
+// NOTE: Import stores
+import { formatNumberDecimal } from 'stores/utils';
+
+import { useConfigStore } from 'stores/config';
+import useBranchStore from 'stores/branch';
+import { baseUrl } from 'stores/utils';
+import useCustomerStore from 'stores/customer';
+
+import { DebitNotePayload, useDebitNote } from 'src/stores/debit-note';
+
+// NOTE  Import Types
+import { CustomerBranch } from 'stores/customer/types';
+import { BankBook, Branch } from 'stores/branch/types';
+import {
+  CustomerBranchRelation,
+  Details,
+  ProductServiceList,
+} from 'src/stores/quotations/types';
+
+// NOTE: Import Components
+import ViewPDF from './ViewPdf.vue';
+import ViewHeader from './ViewHeader.vue';
+import ViewFooter from './ViewFooter.vue';
+import BankComponents from './BankComponents.vue';
+import PrintButton from 'src/components/button/PrintButton.vue';
+import { convertTemplate } from 'src/utils/string-template';
+
+const configStore = useConfigStore();
+const branchStore = useBranchStore();
+const customerStore = useCustomerStore();
+const debitNoteStore = useDebitNote();
+const { data: config } = storeToRefs(configStore);
+
+type Product = {
+  id: string;
+  code: string;
+  detail: string;
+  amount: number;
+  priceUnit: number;
+  discount: number;
+  vat: number;
+  value: number;
+};
+
+type SummaryPrice = {
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  vatExcluded: number;
+  finalPrice: number;
+};
+
+const customer = ref<CustomerBranch>();
+const branch = ref<Branch>();
+const productList = ref<Product[]>([]);
+const bankList = ref<BankBook[]>([]);
+
+const elements = ref<HTMLElement[]>([]);
+const chunks = ref<Product[][]>([[]]);
+const attachmentList = ref<
+  {
+    url: string;
+    isImage?: boolean;
+    isPDF?: boolean;
+  }[]
+>([]);
+const data = ref<
+  DebitNotePayload & {
+    customerBranch: CustomerBranchRelation;
+    customerBranchId: string;
+    registeredBranchId: string;
+  }
+>();
+
+const productServiceList = ref<ProductServiceList[]>([]);
+
+const summaryPrice = ref<SummaryPrice>({
+  totalPrice: 0,
+  totalDiscount: 0,
+  vat: 0,
+  vatExcluded: 0,
+  finalPrice: 0,
+});
+
+async function getAttachment(quotationId: string) {
+  const attachment = await debitNoteStore.listAttachment({
+    parentId: quotationId,
+  });
+
+  if (attachment) {
+    attachmentList.value = await Promise.all(
+      attachment.map(async (v) => {
+        const url = await debitNoteStore.getAttachment({
+          parentId: quotationId,
+          name: v,
+        });
+        const ft = v.substring(v.lastIndexOf('.') + 1);
+
+        return {
+          url,
+          isImage: ['png', 'jpg', 'jpeg'].includes(ft),
+          isPDF: ft === 'pdf',
+        };
+      }),
+    );
+  }
+}
+
+async function assignData() {
+  for (let i = 0; i < productList.value.length; i++) {
+    let el = elements.value.at(-1);
+
+    if (!el) return;
+
+    if (getHeight(el) < 500) {
+      chunks.value.at(-1)?.push(productList.value[i]);
+    } else {
+      chunks.value.push([]);
+      i--;
+    }
+
+    await nextTick();
+  }
+}
+
+function getHeight(el: HTMLElement) {
+  const shadow = document.createElement('div');
+
+  shadow.style.opacity = '0';
+  shadow.style.position = 'absolute';
+  shadow.style.top = '-999999px';
+  shadow.style.left = '-999999px';
+  shadow.style.pointerEvents = 'none';
+
+  document.body.appendChild(shadow);
+
+  shadow.appendChild(el.cloneNode(true));
+
+  const height = shadow.offsetHeight;
+
+  document.body.removeChild(shadow);
+
+  return height;
+}
+
+const details = ref<Details>();
+enum View {
+  DebitNote,
+  Invoice,
+  Payment,
+  Receipt,
+}
+const view = ref<View>(View.DebitNote);
+
+onMounted(async () => {
+  let str =
+    localStorage.getItem('debit-note-preview') ||
+    sessionStorage.getItem('debit-note-preview');
+
+  if (!str) return;
+
+  const obj: DebitNotePayload = JSON.parse(str);
+
+  if (obj) sessionStorage.setItem('debit-note-preview', JSON.stringify(obj));
+
+  delete localStorage['debit-note-preview'];
+
+  const parsed = JSON.parse(sessionStorage.getItem('debit-note-preview') || '');
+
+  data.value = 'data' in parsed ? parsed.data : undefined;
+
+  if (data.value) {
+    if (data.value.id) {
+      await getAttachment(data.value.id);
+    }
+
+    const resCustomerBranch = await customerStore.getBranchById(
+      data.value.customerBranchId,
+    );
+
+    if (resCustomerBranch) {
+      customer.value = resCustomerBranch;
+    }
+
+    details.value = {
+      code: parsed.meta.source.code,
+      createdAt: parsed.meta.source.createdAt,
+      createdBy: `${parsed.meta.createdBy} ${!parsed.meta.source.createdBy ? '' : parsed.meta.source.createdBy.telephoneNo}`,
+      payCondition: parsed.meta.source.payCondition,
+      contactName: parsed.meta.source.contactName,
+      contactTel: parsed.meta.source.contactTel,
+      workName: parsed.meta.source.workName,
+      dueDate: parsed.meta.source.dueDate,
+      worker: parsed.meta.selectedWorker,
+    };
+
+    const resBranch = await branchStore.fetchById(
+      data.value?.registeredBranchId,
+    );
+
+    if (resBranch) {
+      branch.value = resBranch;
+
+      bankList.value = resBranch.bank.map((v) => ({
+        ...v,
+        bankUrl: `${baseUrl}/branch/${resBranch.id}/bank-qr/${v.id}?ts=${Date.now()}`,
+      }));
+    }
+
+    productServiceList.value = parsed.meta.productServicelist;
+
+    productList.value =
+      productServiceList.value?.map((v) => ({
+        id: v.product.id,
+        code: v.product.code,
+        detail: v.product.name,
+        amount: v.amount || 0,
+        priceUnit: v.pricePerUnit || 0,
+        discount: v.discount || 0,
+        vat: v.vat || 0,
+        value: precisionRound(
+          (v.pricePerUnit || 0) * v.amount -
+            (v.discount || 0) +
+            (v.product.calcVat
+              ? ((v.pricePerUnit || 0) * v.amount - (v.discount || 0)) *
+                (config.value?.vat || 0.07)
+              : 0),
+        ),
+      })) || [];
+  }
+
+  summaryPrice.value = (productServiceList.value || []).reduce(
+    (a, c) => {
+      const price = precisionRound((c.pricePerUnit || 0) * c.amount);
+      const vat = precisionRound(
+        ((c.pricePerUnit || 0) * c.amount - (c.discount || 0)) *
+          (config.value?.vat || 0.07),
+      );
+
+      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.vatExcluded
+        : precisionRound(a.vat + vat);
+      a.finalPrice = precisionRound(
+        a.totalPrice -
+          a.totalDiscount +
+          a.vat -
+          Number(data.value?.discount || 0),
+      );
+
+      return a;
+    },
+    {
+      totalPrice: 0,
+      totalDiscount: 0,
+      vat: 0,
+      vatExcluded: 0,
+      finalPrice: 0,
+    },
+  );
+
+  assignData();
+});
+
+watch(elements, () => {});
+
+function print() {
+  window.print();
+}
+</script>
+
+<template>
+  <div class="toolbar">
+    <PrintButton solid @click="print" />
+  </div>
+  <div class="row justify-between container color-debit-note">
+    <section class="content" v-for="chunk in chunks">
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+        :view="view"
+      />
+
+      <span
+        class="q-mb-sm q-mt-md"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--main);
+          display: block;
+          border-bottom: 2px solid var(--main);
+        "
+      >
+        {{ $t('preview.productList') }}
+      </span>
+
+      <table ref="elements" class="q-mb-sm" cellpadding="0" style="width: 100%">
+        <tbody class="color-tr">
+          <tr>
+            <th>{{ $t('preview.rank') }}</th>
+            <th>{{ $t('preview.productCode') }}</th>
+            <th>{{ $t('general.detail') }}</th>
+            <th>{{ $t('general.amount') }}</th>
+            <th>{{ $t('preview.pricePerUnit') }}</th>
+            <th>{{ $t('preview.discount') }}</th>
+            <th>{{ $t('preview.vat') }}</th>
+            <th>{{ $t('preview.value') }}</th>
+          </tr>
+          <tr v-for="(v, i) in chunk">
+            <td class="text-center">{{ i + 1 }}</td>
+            <td>{{ v.code }}</td>
+            <td>{{ v.detail }}</td>
+            <td style="text-align: right">{{ v.amount }}</td>
+            <td style="text-align: right">
+              {{ formatNumberDecimal(v.priceUnit, 2) }}
+            </td>
+            <td style="text-align: right">
+              {{ formatNumberDecimal(v.discount, 2) }}
+            </td>
+            <td style="text-align: right">
+              {{ formatNumberDecimal(v.vat, 2) }}
+            </td>
+            <td style="text-align: right">
+              {{ formatNumberDecimal(v.value, 2) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table
+        style="width: 40%; margin-left: auto"
+        class="q-mb-md"
+        cellpadding="0"
+      >
+        <tbody class="color-tr">
+          <tr>
+            <td>{{ $t('general.total') }}</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
+              ฿
+            </td>
+          </tr>
+
+          <tr>
+            <td>{{ $t('general.discount') }}</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
+            </td>
+          </tr>
+          <tr>
+            <td>{{ $t('general.totalAfterDiscount') }}</td>
+            <td class="text-right">
+              {{
+                formatNumberDecimal(
+                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                  2,
+                )
+              }}
+              ฿
+            </td>
+          </tr>
+
+          <tr>
+            <td>{{ $t('general.totalVatExcluded') }}</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
+              ฿
+            </td>
+          </tr>
+          <tr>
+            <td>{{ $t('general.vat', { msg: '7%' }) }}</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
+            </td>
+          </tr>
+          <tr>
+            <td>{{ $t('general.totalVatIncluded') }}</td>
+            <td class="text-right">
+              {{
+                formatNumberDecimal(
+                  summaryPrice.totalPrice -
+                    summaryPrice.totalDiscount +
+                    summaryPrice.vat,
+                  2,
+                )
+              }}
+              ฿
+            </td>
+          </tr>
+
+          <tr>
+            <td>{{ $t('general.discountAfterVat') }}</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(data?.discount || 0, 2) }}
+              ฿
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="row justify-between q-mb-md" style="width: 100%">
+        <div
+          class="column set-width bg-color full-height"
+          style="padding: 12px"
+        >
+          ({{ ThaiBahtText(summaryPrice.finalPrice) }})
+        </div>
+        <div
+          class="row text-right border-5 items-center"
+          style="width: 40%; background: var(--main); padding: 8px"
+        >
+          <span style="color: white; font-weight: 600">ยอดรวมสุทธิ</span>
+          <span
+            class="border-5"
+            style="
+              width: 70%;
+              margin-left: auto;
+              background: white;
+              padding: 4px;
+            "
+          >
+            {{
+              formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
+            }}
+            ฿
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <section class="content">
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+        :view="view"
+      />
+
+      <span
+        class="q-mb-sm q-mt-md"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--main);
+          display: block;
+          border-bottom: 2px solid var(--main);
+        "
+      >
+        {{ $t('general.remark') }}
+      </span>
+
+      <div
+        class="border-5 surface-0 detail-note q-mb-md"
+        style="width: 100%; padding: 8px 16px; white-space: pre-wrap"
+      >
+        <div
+          v-html="
+            convertTemplate(data?.remark || '', {
+              'quotation-payment': {
+                paymentType: data?.payCondition || 'Full',
+                amount: summaryPrice.finalPrice,
+                installments: data?.paySplit,
+              },
+              'quotation-labor': {
+                name:
+                  details?.worker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.namePrefix}. ${v.firstNameEN} ${v.lastNameEN}`.toUpperCase(),
+                  ) || [],
+              },
+            }) || '-'
+          "
+        ></div>
+      </div>
+    </section>
+
+    <section class="content">
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+        :view="view"
+      />
+
+      <span
+        class="q-mb-sm"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--main);
+          display: block;
+          border-bottom: 2px solid var(--main);
+        "
+      >
+        {{ $t('preview.paymentMethods') }}
+      </span>
+      <article style="height: 5.8in">
+        <BankComponents
+          v-for="(bank, index) in bankList"
+          :index="index"
+          :bank-book="bank"
+          :key="bank.id"
+        />
+      </article>
+
+      <ViewFooter
+        :data="{
+          name: '',
+          company: branch?.name || '',
+          buyer: '',
+          buyDate: '',
+          approveDate: '',
+          approver: '',
+        }"
+      />
+    </section>
+
+    <section
+      v-for="item in attachmentList.filter((v) => v.isImage)"
+      class="content"
+    >
+      <q-img :src="item.url" />
+    </section>
+
+    <ViewPDF
+      v-for="item in attachmentList.filter((v) => v.isPDF)"
+      :url="item.url"
+    />
+  </div>
+</template>
+
+<style scoped>
+.color-debit-note {
+  --main: var(--cyan-7);
+  --main-hsl: var(--cyan-7-hsl);
+}
+
+.toolbar {
+  width: 100%;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: white;
+  border-bottom: 1px solid var(--gray-3);
+  z-index: 99999;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th {
+  background: var(--main);
+  color: white;
+
+  padding: 4px;
+}
+td {
+  padding: 4px 8px;
+}
+
+.border-5 {
+  border-radius: 5px;
+}
+.set-width {
+  width: 50%;
+}
+
+.bg-color {
+  background-color: hsla(var(--main-hsl) / 0.1);
+}
+
+.color-tr > tr:nth-child(odd) {
+  background-color: hsla(var(--main-hsl) / 0.1);
+}
+
+.container {
+  padding: 1rem;
+  display: flex;
+  gap: 1rem;
+  margin-inline: auto;
+  background: var(--gray-3);
+  width: calc(8.3in + 1rem);
+}
+
+.container :deep(*) {
+  font-size: 95%;
+}
+
+.content {
+  width: 100%;
+  padding: 0.5in;
+  align-items: center;
+  background: white;
+  page-break-after: always;
+  break-after: page;
+  height: 11.7in;
+  max-height: 11.7in;
+}
+
+.position-bottom {
+  margin-top: auto;
+}
+
+.detail-note {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  & > * {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+hr {
+  border-style: solid;
+  border-color: var(--main);
+}
+
+@media print {
+  .toolbar {
+    display: none;
+  }
+
+  .container {
+    padding: 0;
+    gap: 0;
+    width: 100%;
+    background: white;
+  }
+
+  .content {
+    padding: 0;
+    height: unset;
+  }
+}
+</style>
diff --git a/src/pages/12_debit-note/document-view/ViewFooter.vue b/src/pages/12_debit-note/document-view/ViewFooter.vue
new file mode 100644
index 00000000..fc9a34a5
--- /dev/null
+++ b/src/pages/12_debit-note/document-view/ViewFooter.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+defineProps<{
+  data?: {
+    name: string;
+    buyer: string;
+    buyDate: string;
+
+    company: string;
+    approver: string;
+    approveDate: string;
+  };
+}>();
+</script>
+<template>
+  <div class="footer-container">
+    <div class="footer-top">
+      <div>ในนาม {{ data?.name || '-' }}</div>
+      <div>ในนาม {{ data?.company || '-' }}</div>
+    </div>
+
+    <img src="/images/jws-stamp.png" alt="${0}" />
+
+    <div class="footer-bottom">
+      <section>
+        <div>
+          <span class="data-placeholder"></span>
+          <span>ผู้สั่งซื้อสินค้า</span>
+        </div>
+        <div>
+          <span class="data-placeholder"></span>
+          <span>วันที่</span>
+        </div>
+      </section>
+      <section>
+        <div>
+          <span class="data-placeholder"></span>
+          <span>ผู้อนุมัติ</span>
+        </div>
+        <div>
+          <span class="data-placeholder"></span>
+          <span>วันที่</span>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.footer-container {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  height: 1.5in;
+}
+
+.footer-top {
+  position: absolute;
+  width: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  & > * {
+    width: 38%;
+  }
+}
+.footer-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+
+  & > * {
+    display: flex;
+    width: 38%;
+    justify-content: space-around;
+
+    & > * {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+  }
+}
+
+.data-placeholder {
+  display: block;
+  min-width: 1.2in;
+  border-bottom: 1px dotted black;
+  margin-bottom: 2mm;
+}
+</style>
diff --git a/src/pages/12_debit-note/document-view/ViewHeader.vue b/src/pages/12_debit-note/document-view/ViewHeader.vue
new file mode 100644
index 00000000..e9c4624d
--- /dev/null
+++ b/src/pages/12_debit-note/document-view/ViewHeader.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import { dateFormat } from 'src/utils/datetime';
+
+// NOTE: Import stores
+import { formatAddress } from 'src/utils/address';
+
+// NOTE  Import Types
+import { Branch } from 'src/stores/branch/types';
+import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
+// NOTE: Import Components
+
+enum View {
+  DebitNote,
+  Invoice,
+  Payment,
+  Receipt,
+}
+
+defineProps<{
+  branch: Branch;
+  customer: CustomerBranchRelation;
+  details: Details;
+  view: View;
+}>();
+
+function titleMode(mode: View): string {
+  if (mode === View.DebitNote) {
+    return 'preview.title.debitNote';
+  }
+  if (mode === View.Invoice) {
+    return 'preview.title.invoice';
+  }
+  if (mode === View.Payment) {
+    return 'preview.title.payment';
+  }
+  if (mode === View.Receipt) {
+    return 'preview.title.receipt';
+  }
+
+  return '';
+}
+</script>
+
+<template>
+  <div class="row items-center q-mb-lg">
+    <div class="column" style="width: 50%">
+      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
+    </div>
+    <div
+      class="column"
+      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
+    >
+      {{ $t(titleMode(view)) }}
+    </div>
+  </div>
+
+  <article class="detail-card">
+    <section class="detail-customer-info">
+      <article>
+        <b>
+          {{ !!branch.virtual ? '' : $t('general.company') }} {{ branch.name }}
+        </b>
+
+        <span v-if="branch.province && branch.district && branch.subDistrict">
+          {{
+            formatAddress({
+              address: branch.address,
+              addressEN: branch.addressEN,
+              moo: branch.moo,
+              mooEN: branch.mooEN,
+              soi: branch.soi,
+              soiEN: branch.soiEN,
+              street: branch.street,
+              streetEN: branch.streetEN,
+              province: branch.province,
+              district: branch.district,
+              subDistrict: branch.subDistrict,
+            })
+          }}
+        </span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
+        <span>{{ branch.webUrl }}</span>
+      </article>
+      <article>
+        <b>ลูกค้า</b>
+        <span>
+          {{
+            formatAddress({
+              address: customer.address,
+              addressEN: customer.addressEN,
+              moo: customer.moo,
+              mooEN: customer.mooEN,
+              soi: customer.soi,
+              soiEN: customer.soiEN,
+              street: customer.street,
+              streetEN: customer.streetEN,
+              province: customer.province,
+              district: customer.district,
+              subDistrict: customer.subDistrict,
+            })
+          }}
+        </span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
+        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
+      </article>
+    </section>
+    <section class="detail-quotation-info">
+      <div>
+        <div>{{ $t('general.itemNo', { msg: `${$t(titleMode(view))}` }) }}</div>
+        <div>{{ details.code }}</div>
+      </div>
+      <div>
+        <div>{{ $t('preview.dateAt', { msg: `${$t(titleMode(view))}` }) }}</div>
+        <div>{{ dateFormat(details.createdAt, true, false, true) }}</div>
+      </div>
+      <div>
+        <div>{{ $t('preview.seller') }}</div>
+        <div>{{ details.createdBy }}</div>
+      </div>
+      <div>
+        <div>{{ $t('quotation.paymentCondition') }}</div>
+        <div>
+          {{
+            {
+              Full: $t('quotation.type.fullAmountCash'),
+              Split: $t('quotation.type.installmentsCash'),
+              BillFull: $t('quotation.type.fullAmountBill'),
+              BillSplit: $t('quotation.type.installmentsBill'),
+            }[details.payCondition]
+          }}
+        </div>
+      </div>
+      <div>
+        <div>{{ $t('quotation.workName') }}</div>
+        <div>{{ details.workName }}</div>
+      </div>
+      <div>
+        <div>{{ $t('quotation.contactName') }}</div>
+        <div>{{ details.contactName }}</div>
+      </div>
+      <div>
+        <div>{{ $t('preview.dueDate') }}</div>
+        <div>{{ dateFormat(details.dueDate, true, false, true) }}</div>
+      </div>
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.detail-card {
+  display: flex;
+  gap: 16px;
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  & > :first-child {
+    max-width: 57.5%;
+  }
+}
+
+.detail-customer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  & > * {
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+      color: var(--main);
+    }
+  }
+}
+
+.detail-quotation-info {
+  & > * {
+    display: flex;
+
+    & > :first-child {
+      color: var(--main);
+    }
+
+    & > * {
+      width: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/pages/12_debit-note/document-view/ViewPdf.vue b/src/pages/12_debit-note/document-view/ViewPdf.vue
new file mode 100644
index 00000000..f800e790
--- /dev/null
+++ b/src/pages/12_debit-note/document-view/ViewPdf.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+const props = defineProps<{
+  url: string;
+}>();
+
+const { pdf, pages } = usePDF(props.url);
+</script>
+
+<template>
+  <section v-for="page in pages" class="content">
+    <VuePDF style="width: 100%" :pdf="pdf" :page="page" :scale="1.5" />
+  </section>
+</template>
+
+<style scoped>
+.content :deep(canvas) {
+  width: 100% !important;
+  height: auto !important;
+}
+
+@media print {
+  .content :deep(canvas) {
+    scale: 1.1;
+  }
+}
+</style>
diff --git a/src/pages/12_debit-note/expansion/DebitNoteExpansion.vue b/src/pages/12_debit-note/expansion/DebitNoteExpansion.vue
new file mode 100644
index 00000000..a7649753
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/DebitNoteExpansion.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import SelectInput from 'src/components/shared/SelectInput.vue';
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const reason = defineModel<string>('reason');
+const detail = defineModel<string>('detail');
+</script>
+<template>
+  <q-expansion-item
+    dense
+    :default-opened="true"
+    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"
+  >
+    <template #header>
+      <span>
+        {{ $t('debitNote.label.debitNoteInformation') }}
+      </span>
+    </template>
+
+    <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
+      <SelectInput
+        :readonly
+        for="select-debit-note-specify-reason"
+        :label="$t('debitNote.label.specifyReasonForDebit')"
+        class="col-md col-12"
+        v-model="reason"
+        :option="[
+          { label: $t('debitNote.label.reasonReturn'), value: 'Return' },
+          { label: $t('debitNote.label.reasonCanceled'), value: 'Canceled' },
+        ]"
+      ></SelectInput>
+      <q-input
+        :readonly
+        for="input-debit-note-additional-detail"
+        :label="$t('debitNote.label.additionalDetail')"
+        outlined
+        dense
+        class="col"
+        v-model="detail"
+      ></q-input>
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped></style>
diff --git a/src/pages/12_debit-note/expansion/DocumentExpansion.vue b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
new file mode 100644
index 00000000..0d38ac7b
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/DocumentExpansion.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
+import SelectCustomer from 'src/components/shared/select/SelectCustomer.vue';
+import DatePicker from 'src/components/shared/DatePicker.vue';
+import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'gotoQuotation'): void;
+}>();
+
+const registeredBranchId = defineModel<string>('registeredBranchId');
+const customerId = defineModel<string>('customerId');
+const issueDate = defineModel<string>('issueDate');
+const dueDate = defineModel<string | Date>('dueDate');
+
+const quotationCode = defineModel<string>('quotationCode');
+const quotationWorkName = defineModel<string>('quotationWorkName');
+const quotationContactName = defineModel<string>('quotationContactName');
+const quotationContactTel = defineModel<string>('quotationContactTel');
+const quotationCreatedBy = defineModel<string>('quotationCreatedBy');
+</script>
+<template>
+  <q-expansion-item
+    default-opened
+    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"
+  >
+    <template #header>
+      <span>
+        {{ $t('general.information', { msg: $t('general.document') }) }}
+      </span>
+    </template>
+
+    <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
+      <SelectBranch
+        readonly
+        class="col-md-4 col-12"
+        :label="`${$t('creditNote.label.quotationRegisteredBranch')}`"
+        v-model:value="registeredBranchId"
+      />
+      <SelectCustomer
+        readonly
+        simple
+        class="col-md-4 col-12"
+        :label="`${$t('creditNote.label.customer')}`"
+        v-model:value="customerId"
+      />
+      <DatePicker
+        :label="$t('general.createdAt')"
+        class="col-md-2 col-6"
+        :model-value="issueDate || new Date(Date.now())"
+        :readonly
+        :disabled="!readonly"
+      />
+      <DatePicker
+        :label="$t('general.createdAt')"
+        class="col-md-2 col-6"
+        :model-value="dueDate || new Date(Date.now())"
+        @update:model-value="
+          (v) => {
+            if (typeof v === 'string') dueDate = v;
+          }
+        "
+        :readonly
+      />
+
+      <DataDisplay
+        clickable
+        class="col-md col-6"
+        style="padding-inline: 20px"
+        :label="$t('creditNote.label.quotationCode')"
+        :value="quotationCode"
+        @label-click="$emit('gotoQuotation')"
+      />
+
+      <q-input
+        readonly
+        :label="$t('creditNote.label.quotationWorkName')"
+        outlined
+        dense
+        class="col-md col-6"
+        v-model="quotationWorkName"
+      />
+      <q-input
+        readonly
+        :label="$t('quotation.contactName')"
+        outlined
+        dense
+        class="col-md col-6"
+        v-model="quotationContactName"
+      />
+      <q-input
+        readonly
+        :label="$t('general.telephone')"
+        outlined
+        dense
+        class="col-md col-6"
+        v-model="quotationContactTel"
+      />
+      <q-input
+        :readonly
+        :label="$t('creditNote.label.quotationCreatedBy')"
+        outlined
+        dense
+        class="col-md col-6"
+        :disable="!readonly"
+        :model-value="quotationCreatedBy || '-'"
+      />
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped></style>
diff --git a/src/pages/12_debit-note/expansion/PaymentExpansion.vue b/src/pages/12_debit-note/expansion/PaymentExpansion.vue
new file mode 100644
index 00000000..e1b5a7c5
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/PaymentExpansion.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import useOptionStore from 'src/stores/options';
+import { watch } from 'vue';
+import QuotationFormInfo from 'src/pages/05_quotation/QuotationFormInfo.vue';
+import { PayCondition } from 'src/stores/quotations';
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean;
+    installmentNo?: number[];
+    installmentAmount?: number;
+  }>(),
+  {},
+);
+
+const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
+  required: false,
+});
+const payType = defineModel<PayCondition>('payType', { required: true });
+const paySplitCount = defineModel<number | null>('paySplitCount', {
+  default: 1,
+});
+const paySplit = defineModel<{ no: number; name?: string; amount: number }[]>(
+  'paySplit',
+  { required: true },
+);
+const summaryPrice = defineModel<{
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  vatExcluded: number;
+  finalPrice: number;
+}>('summaryPrice', {
+  required: true,
+  default: {
+    totalPrice: 0,
+    totalDiscount: 0,
+    vat: 0,
+    vatExcluded: 0,
+    finalPrice: 0,
+  },
+});
+
+const optionStore = useOptionStore();
+</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"
+  >
+    <template #header>
+      <span>
+        {{ $t('general.payment') }}
+      </span>
+    </template>
+
+    <main class="surface-1 q-pa-md full-width">
+      <QuotationFormInfo
+        v-bind="{ ...$props }"
+        debit-note
+        v-model:pay-type="payType"
+        v-model:pay-split-count="paySplitCount"
+        v-model:pay-split="paySplit"
+        v-model:pay-bill-date="payBillDate"
+        v-model:summary-price="summaryPrice"
+      />
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped>
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  font-size: 1.5rem;
+  padding: var(--size-1);
+  border-radius: var(--radius-2);
+}
+
+:deep(.price-tag .q-field__control) {
+  display: flex;
+  align-items: center;
+  width: 90px;
+  height: 25px;
+}
+
+.credit-note-color {
+  --_color: var(--indigo-10-hsl);
+}
+
+.bg-color {
+  color: white;
+  background: hsla(var(--_color));
+}
+
+.dark .bg-color {
+  --_color: var(--orange-6-hsl);
+}
+
+.bg-color-light {
+  background: hsla(var(--_color) / 0.1);
+}
+
+.dark .bg-color-light {
+  --_color: var(--orange-6-hsl / 0.2);
+}
+
+.price-container > * {
+  padding: var(--size-1);
+}
+</style>
diff --git a/src/pages/12_debit-note/expansion/ProductExpansion.vue b/src/pages/12_debit-note/expansion/ProductExpansion.vue
new file mode 100644
index 00000000..dca92aa2
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/ProductExpansion.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import ProductItem from 'src/components/05_quotation/ProductItem.vue';
+import { AddButton } from 'components/button';
+import {
+  ProductRelation,
+  ProductServiceList,
+  QuotationPayload,
+} from 'src/stores/quotations';
+
+defineProps<{
+  readonly?: boolean;
+  agentPrice: boolean;
+  installmentInput?: boolean;
+  maxInstallment?: number | null;
+  creditNote?: boolean;
+  employeeRows: {
+    foreignRefNo: string;
+    employeeName: string;
+    birthDate: string;
+    gender: string;
+    age: string;
+    nationality: string;
+    documentExpireDate: string;
+    imgUrl: string;
+    status: string;
+  }[];
+}>();
+
+const rows = defineModel<
+  Required<QuotationPayload['productServiceList'][number]>[]
+>('rows', { required: true });
+
+defineEmits<{
+  (e: 'addProduct'): void;
+  (e: 'viewFile', data: ProductRelation): void;
+  (e: 'delete', index: number): void;
+  (
+    e: 'updateTable',
+    v: QuotationPayload['productServiceList'][number],
+    opt?: {
+      newInstallmentNo: number;
+    },
+  ): void;
+
+  (e: 'updateRows', v: Required<ProductServiceList>[]): void;
+}>();
+</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">
+      <ProductItem
+        :installment-input
+        :max-installment
+        :readonly
+        :agent-price
+        :employee-rows
+        :rows="rows"
+        @delete="(v) => $emit('delete', v)"
+        @update:rows="(v) => $emit('updateRows', v)"
+        @update-table="(data, opt) => $emit('updateTable', data, opt)"
+        @view-file="(v) => $emit('viewFile', v)"
+      />
+    </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/pages/12_debit-note/expansion/RemarkExpansion.vue b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
new file mode 100644
index 00000000..d33fcf73
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const remark = defineModel<string>('remark', { default: '' });
+</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"
+  >
+    <template #header>
+      <span>
+        {{ $t('general.remark') }}
+      </span>
+    </template>
+
+    <main class="surface-1 q-pa-md full-width">
+      <q-editor
+        dense
+        :readonly="readonly"
+        :model-value="remark"
+        min-height="5rem"
+        class="full-width"
+        toolbar-bg="input-border"
+        style="cursor: auto; color: var(--foreground)"
+        :content-class="readonly ? 'q-mt-sm' : 'bordered q-mt-sm rounded'"
+        :flat="!readonly"
+        :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+        :toolbar="[['left', 'center', 'justify'], ['clip']]"
+        :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+        :toolbar-color="readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''"
+        :definitions="{
+          clip: {
+            icon: 'mdi-paperclip',
+            tip: 'Upload',
+            disable: readonly,
+            handler: () => console.log('upload'),
+          },
+        }"
+        @update:model-value="
+          (v) => {
+            remark = v;
+          }
+        "
+      />
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped>
+:deep(.q-editor__toolbar-group):nth-child(2) {
+  margin-left: auto !important;
+}
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-2) !important;
+}
+
+:deep(.q-editor__toolbar) {
+  border-color: var(--surface-3) !important;
+}
+</style>
diff --git a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
new file mode 100644
index 00000000..aa4ee499
--- /dev/null
+++ b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { AddButton } from 'components/button';
+import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';
+
+defineProps<{
+  readonly?: boolean;
+  hideBtnAddWorker?: boolean;
+  employeeAmount?: number;
+  rowWorker: {
+    foreignRefNo: string;
+    employeeName: string;
+    birthDate: string;
+    gender: string;
+    age: string;
+    nationality: string;
+    documentExpireDate: string;
+    imgUrl?: string;
+    status: string;
+  }[];
+}>();
+
+defineEmits<{
+  (e: 'addWorker'): void;
+  (e: 'edit'): void;
+  (e: 'update:employeeAmount', number: number): void;
+  (e: 'delete', index: number): void;
+}>();
+
+const toggleWorker = defineModel<boolean>('toggleWorker');
+</script>
+
+<template>
+  <q-expansion-item
+    for="item-up"
+    id="item-up"
+    dense
+    class="overflow-hidden"
+    switch-toggle-side
+    default-opened
+    style="border-radius: var(--radius-2)"
+    expand-icon="mdi-chevron-down-circle"
+    header-class="surface-1"
+  >
+    <template v-slot:header>
+      <section class="row items-center full-width">
+        <div class="row items-center q-pr-md q-py-sm">
+          <span class="q-mr-md" style="font-size: 18px">
+            {{ $t('quotation.employeeList') }}
+          </span>
+          <template v-if="!readonly">
+            <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }}
+          </template>
+        </div>
+        <nav class="q-ml-auto">
+          <AddButton
+            v-if="!hideBtnAddWorker"
+            icon-only
+            @click.stop="$emit('addWorker')"
+          />
+        </nav>
+      </section>
+    </template>
+
+    <div class="surface-1 q-pa-md full-width">
+      <WorkerItem
+        @update:employee-amount="(v) => $emit('update:employeeAmount', v)"
+        :employee-amount
+        :readonly="readonly"
+        fallback-img="/images/employee-avatar.png"
+        :rows="rowWorker"
+        @delete="(i) => $emit('delete', i)"
+      />
+    </div>
+  </q-expansion-item>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/12_debit-note/form.ts b/src/pages/12_debit-note/form.ts
new file mode 100644
index 00000000..9f92c0ff
--- /dev/null
+++ b/src/pages/12_debit-note/form.ts
@@ -0,0 +1,64 @@
+import { dialog } from 'stores/utils';
+import { defineStore } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { DebitNotePayload } from 'src/stores/debit-note';
+import { PayCondition } from 'src/stores/quotations';
+
+// NOTE: Import types
+
+// NOTE: Import stores
+
+const DEFAULT_DATA: DebitNotePayload = {
+  productServiceList: [],
+  debitNoteQuotationId: '',
+  worker: [],
+  payBillDate: new Date(),
+  paySplit: [],
+  paySplitCount: 0,
+  payCondition: PayCondition.Full,
+  dueDate: new Date(),
+  discount: 0,
+  status: 'CREATED',
+  remark: '#[quotation-labor]<br/><br/>#[quotation-payment]',
+  quotationId: '',
+  agentPrice: false,
+};
+
+export const useDebitNoteForm = defineStore('form-debit-note', () => {
+  const { t } = useI18n();
+
+  let resetFormData = structuredClone(DEFAULT_DATA);
+
+  const currentFormData = ref<DebitNotePayload>(structuredClone(resetFormData));
+
+  const currentFormState = ref<{
+    mode: null | 'info' | 'create' | 'edit';
+  }>({
+    mode: null,
+  });
+
+  function isFormDataDifferent() {
+    const { ...resetData } = resetFormData;
+    const { ...currData } = currentFormData.value;
+
+    return JSON.stringify(resetData) !== JSON.stringify(currData);
+  }
+
+  function resetForm(clean = false) {
+    if (clean) {
+      currentFormData.value = structuredClone(DEFAULT_DATA);
+      resetFormData = structuredClone(DEFAULT_DATA);
+      return;
+    }
+
+    currentFormData.value = structuredClone(resetFormData);
+
+    currentFormState.value.mode = 'info';
+  }
+
+  return {
+    isFormDataDifferent,
+    resetForm,
+  };
+});
diff --git a/src/router/routes.ts b/src/router/routes.ts
index dee71a15..785f6601 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -120,6 +120,11 @@ const routes: RouteRecordRaw[] = [
         name: 'receipt',
         component: () => import('pages/13_receipt/MainPage.vue'),
       },
+      {
+        path: '/debit-note',
+        name: 'debitNote',
+        component: () => import('pages/12_debit-note/MainPage.vue'),
+      },
     ],
   },
 
@@ -183,6 +188,22 @@ const routes: RouteRecordRaw[] = [
     name: 'receiptform',
     component: () => import('pages/13_receipt/MainPage.vue'),
   },
+  {
+    path: '/debit-note/add',
+    name: 'DebitNoteNew',
+    component: () => import('pages/12_debit-note/FormPage.vue'),
+  },
+  {
+    path: '/debit-note/:id',
+    name: 'DebitNoteView',
+    component: () => import('pages/12_debit-note/FormPage.vue'),
+  },
+
+  {
+    path: '/debit-note/document-view',
+    name: 'DebitNoteDocumentView',
+    component: () => import('pages/12_debit-note/document-view/MainPage.vue'),
+  },
 
   // Always leave this as last one,
   // but you can also remove it
diff --git a/src/stores/debit-note/index.ts b/src/stores/debit-note/index.ts
new file mode 100644
index 00000000..7ef3b8b3
--- /dev/null
+++ b/src/stores/debit-note/index.ts
@@ -0,0 +1,94 @@
+import {
+  DebitNote as Data,
+  DebitNoteStatus as Status,
+  DebitNotePayload as Payload,
+} from './types.ts';
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+import { api } from 'src/boot/axios.ts';
+import { PaginationResult } from 'src/types.ts';
+import { manageAttachment, manageFile } from '../utils/index.ts';
+
+const ENDPOINT = 'debit-note';
+
+export * from './types.ts';
+
+export async function getDebitNoteStats() {
+  const res = await api.get<Record<Status, number>>(`/${ENDPOINT}/stats`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getDebitNoteList(params?: {
+  page?: number;
+  pageSize?: number;
+  query?: string;
+  deebitNoteStatus?: Status;
+  includeRegisteredBranch?: boolean;
+}) {
+  const res = await api.get<PaginationResult<Data>>(`/${ENDPOINT}`, {
+    params,
+  });
+  if (res.status < 400) return res.data;
+  return null;
+}
+
+export async function getDebitNote(id: string) {
+  const res = await api.get<Data>(`/${ENDPOINT}/${id}`);
+  if (res.status < 400) return res.data;
+  return null;
+}
+
+export async function createDebitNote(body: Payload) {
+  const res = await api.post<Data>(`/${ENDPOINT}`, body);
+  if (res.status < 400) return res.data;
+  return null;
+}
+
+export async function updateDebitNote(body: Payload) {
+  const { id, quotationId, ...payload } = body;
+  const res = await api.put<Data>(`/${ENDPOINT}/${id}`, payload);
+  if (res.status < 400) return res.data;
+  return null;
+}
+
+export async function deleteDebitNote(id: string) {
+  const res = await api.delete<Data>(`/${ENDPOINT}/${id}`);
+  if (res.status < 400) return res.data;
+  return null;
+}
+
+export const useDebitNote = defineStore('debit-note-store', () => {
+  const data = ref<Data[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
+  const stats = ref<Record<Status, number>>({
+    [Status.Pending]: 0,
+    [Status.Expire]: 0,
+    [Status.Payment]: 0,
+    [Status.Receipt]: 0,
+    [Status.Succeed]: 0,
+  });
+
+  return {
+    data,
+    page,
+    pageMax,
+    pageSize,
+    stats,
+
+    getDebitNoteStats,
+    getDebitNote,
+    getDebitNoteList,
+    createDebitNote,
+    updateDebitNote,
+    deleteDebitNote,
+
+    ...manageAttachment(api, ENDPOINT),
+    ...manageFile<'slip'>(api, ENDPOINT),
+  };
+});
diff --git a/src/stores/debit-note/types.ts b/src/stores/debit-note/types.ts
new file mode 100644
index 00000000..00f6b468
--- /dev/null
+++ b/src/stores/debit-note/types.ts
@@ -0,0 +1,94 @@
+import {
+  Quotation,
+  QuotationFull,
+  QuotationStatus,
+  QuotationPayload,
+  PayCondition,
+} from '../quotations';
+import { RequestWork } from '../request-list';
+import { CreatedBy, UpdatedBy } from '../types';
+import { CustomerBranch } from '../customer';
+import { Branch } from '../branch/types';
+
+export type DebitNotePayload = Omit<
+  QuotationPayload & {
+    id?: string;
+    quotationId: string;
+    debitNoteQuotationId?: string;
+    reason?: string;
+    detail?: string;
+    agentPrice: boolean;
+  },
+  | 'customerBranchId'
+  | 'registeredBranchId'
+  | 'contactName'
+  | 'contactTel'
+  | '_count'
+  | 'urgent'
+  | 'workName'
+  | 'workerMax'
+  | 'productServiceList'
+  | 'paySplit'
+> & {
+  productServiceList: {
+    installmentNo: number;
+    workerIndex: number[];
+    discount: number;
+    amount: number;
+    productId: string;
+    workId: string;
+    serviceId: string;
+  }[];
+};
+
+export type DebitNote = {
+  debitNoteQuotation?: QuotationFull;
+  updatedBy: UpdatedBy;
+  createdBy: CreatedBy;
+  productServiceList: QuotationFull['productServiceList'];
+  worker: QuotationFull['worker'];
+  paySplit: QuotationFull['paySplit'];
+  registeredBranch: Branch;
+  customerBranch: CustomerBranch;
+  _count: { worker: number };
+
+  updatedByUserId: string;
+  updatedAt: string;
+  createdByUserId: string;
+  createdAt: string;
+  debitNoteQuotationId: string;
+  isDebitNote: boolean;
+  finalPrice: number;
+  discount: number;
+  vatExcluded: number;
+  vat: number;
+  totalDiscount: number;
+  totalPrice: number;
+  agentPrice: boolean;
+  urgent: boolean;
+  workerMax: number;
+  payBillDate: string;
+  paySplitCount: number;
+  payCondition: PayCondition;
+  date: string;
+  dueDate: string;
+  contactTel: string;
+  contactName: string;
+  workName: string;
+  code: string;
+  remark: string;
+  quotationStatus: QuotationStatus;
+  statusOrder: number;
+  status: string;
+  customerBranchId: string;
+  registeredBranchId: string;
+  id: string;
+};
+
+export enum DebitNoteStatus {
+  Pending = 'Pending',
+  Expire = 'Expire',
+  Payment = 'Payment',
+  Receipt = 'Receipt',
+  Succeed = 'Succeed',
+}
diff --git a/src/stores/payment/index.ts b/src/stores/payment/index.ts
index e85de252..93c210fc 100644
--- a/src/stores/payment/index.ts
+++ b/src/stores/payment/index.ts
@@ -98,6 +98,9 @@ export const useReceipt = defineStore('receipt-store', () => {
     pageSize?: number;
     query?: string;
     quotationId?: string;
+    debitNoteId?: string;
+    debitNoteOnly?: boolean;
+    quotationOnly?: boolean;
   }) {
     const res = await api.get<PaginationResult<Receipt>>('/receipt', {
       params: opts,
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index e985f1ce..775dc7ac 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -192,10 +192,15 @@ export const useQuotationStore = defineStore('quotation-store', () => {
  * @deprecated Please use payment store instead.
  */
 export const useQuotationPayment = defineStore('quotation-payment', () => {
-  async function getQuotationPayment(quotationId: string) {
+  async function getQuotationPayment(params: {
+    quotationId?: string;
+    debitNoteId?: string;
+    debitNoteOnly?: boolean;
+    quotationOnly?: boolean;
+  }) {
     const res = await api.get<PaginationResult<QuotationPaymentData>>(
       '/payment',
-      { params: { quotationId } },
+      { params },
     );
     if (res.status < 400) {
       return res.data;
diff --git a/tests/institution.spec.ts b/tests/institution.spec.ts
new file mode 100644
index 00000000..906d571c
--- /dev/null
+++ b/tests/institution.spec.ts
@@ -0,0 +1,44 @@
+import { fakerEN, fakerTH } from '@faker-js/faker';
+import test, { expect, Page } from '@playwright/test';
+import { login } from './utils';
+
+test.describe.configure({ mode: 'serial' });
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('JWS_INST_001 - Login', async () => {
+  await login(page);
+});
+
+test('JWS_INST_002 - Goto Institution', async () => {
+  await page.click('//span[text()="หน่วยงาน"]');
+  await expect(page).toHaveURL(/.*agencies-management/);
+  await page.waitForTimeout(5000);
+});
+
+test('JWS_INST_003 - Click New Institution', async () => {
+  await page.click('i.q-icon.mdi.mdi-plus');
+  await expect(page.locator('div.col.text-subtitle1')).toContainText(
+    'เพิ่มหน่วยงาน',
+  );
+  await page.waitForTimeout(5000);
+});
+
+test('JWS_INST_004 - Fill Form', async () => {
+  await page
+    .getByRole('textbox', { name: 'ชื่อหน่วยงาน' })
+    .fill(fakerTH.company.name());
+  await page
+    .getByRole('textbox', { name: 'Agencies Name' })
+    .fill(fakerEN.company.name());
+  fakerEN.location.buildingNumber();
+  await page.waitForTimeout(5000);
+});
diff --git a/tests/utils/index.ts b/tests/utils/index.ts
new file mode 100644
index 00000000..3277a9aa
--- /dev/null
+++ b/tests/utils/index.ts
@@ -0,0 +1,19 @@
+import { expect, Page } from '@playwright/test';
+
+let isLoggedIn = false;
+
+export async function login(page: Page) {
+  if (!process.env.TEST_APP_URL) throw new Error('Expect TEST_APP_URL env.');
+
+  if (isLoggedIn) return;
+
+  await page.goto('/');
+  await expect(page).toHaveTitle(/^Sign in to /);
+  await page.fill("input[name='username']", 'admin');
+  await page.fill("input[name='password']", '1234');
+  await page.click('id=kc-login');
+  await page.waitForTimeout(2000);
+  await expect(page).toHaveURL(new RegExp('^' + process.env.TEST_APP_URL));
+
+  isLoggedIn = true;
+}