diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index f91043b3..2e1fc0c7 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -192,6 +192,7 @@ export default {
     sales: {
       title: 'Sales',
       quotation: 'Quotation',
+      invoice: 'Invoice',
     },
 
     order: {
@@ -1114,6 +1115,7 @@ export default {
     discount: 'Discount',
     vat: 'VAT',
     value: 'Value',
+    netValue: 'Net Value',
     title: {
       quotation: 'Quotation',
       invoice: 'Invoice',
@@ -1186,4 +1188,15 @@ export default {
       Success: 'Refund Completed',
     },
   },
+
+  invoice: {
+    title: 'Invoice',
+    caption: 'All Invoices',
+    workSheetName: 'Worksheet Name',
+    paymentDueDate: 'Payment Duedate',
+    status: {
+      PaymentSuccess: 'Payment Success',
+      PaymentWait: 'Waiting For Payment',
+    },
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index b40f9b81..60d6d66d 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -194,6 +194,7 @@ export default {
     sales: {
       title: 'งานซื้อขาย',
       quotation: 'ใบเสนอราคา',
+      invoice: 'ใบแจ้งหนี้',
     },
 
     order: {
@@ -1095,6 +1096,7 @@ export default {
     discount: 'ส่วนลด',
     vat: 'ภาษี',
     value: 'มูลค่า',
+    netValue: 'มูลค่าสุทธิ',
     title: {
       quotation: 'ใบเสนอราคา',
       invoice: 'ใบแจ้งหนี้',
@@ -1167,4 +1169,15 @@ export default {
       Success: 'คืนเงินเสร็จสิ้น',
     },
   },
+
+  invoice: {
+    title: 'ใบแจ้งหนี้',
+    caption: 'ใบแจ้งหนี้ทั้งหมด',
+    workSheetName: 'ชื่อใบงาน',
+    paymentDueDate: 'กำหนดชำระ',
+    status: {
+      PaymentSuccess: 'ชำระเงินแล้ว',
+      PaymentWait: 'ยังไม่ชำระ',
+    },
+  },
 };
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 8c7a7009..cc80c525 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -134,7 +134,10 @@ onMounted(async () => {
     {
       label: 'menu.sales',
       icon: 'mdi-store-settings-outline',
-      children: [{ label: 'quotation', route: '/quotation' }],
+      children: [
+        { label: 'quotation', route: '/quotation' },
+        { label: 'invoice', route: '/invoice' },
+      ],
     },
     {
       label: 'menu.order',
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index efac31ea..44873ee4 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -356,18 +356,8 @@ async function fetchStatus() {
         code.value = '';
         selectedInstallmentNo.value = [];
         selectedInstallment.value = [];
-        view.value =
-          quotationFormData.value.payCondition === 'Full' ||
-          quotationFormData.value.payCondition === 'BillFull'
-            ? View.Invoice
-            : View.InvoicePre;
 
-        if (
-          quotationFormData.value.payCondition === 'Full' ||
-          quotationFormData.value.payCondition === 'BillFull'
-        ) {
-          getInvoiceCodeFullPay();
-        }
+        getInvoice();
       },
     },
     {
@@ -1011,35 +1001,7 @@ onMounted(async () => {
   pageState.isLoaded = true;
 
   if (route.query['tab'] === 'invoice') {
-    if (route.query['id']) {
-      const queryInvoiceId = route.query['id'] as string;
-      const queryInvoiceAmount = Number(route.query['amount']) || 0;
-
-      await getInvoiceCode(queryInvoiceId);
-
-      selectedInstallmentNo.value =
-        quotationFormState.value.source?.paySplit
-          .filter((v) => v.invoiceId === queryInvoiceId)
-          .map((v) => v.no) || [];
-
-      installmentAmount.value = queryInvoiceAmount;
-      view.value = View.Invoice;
-      return;
-    }
-    selectedInstallmentNo.value = [];
-    selectedInstallment.value = [];
-    view.value =
-      quotationFormData.value.payCondition === 'Full' ||
-      quotationFormData.value.payCondition === 'BillFull'
-        ? View.Invoice
-        : View.InvoicePre;
-
-    if (
-      quotationFormData.value.payCondition === 'Full' ||
-      quotationFormData.value.payCondition === 'BillFull'
-    ) {
-      getInvoiceCodeFullPay();
-    }
+    getInvoice();
   }
   if (route.query['tab'] === 'receipt') {
     await fetchReceipt();
@@ -1241,6 +1203,23 @@ async function exampleReceipt(id: string) {
   }
 }
 
+function getInvoice() {
+  view.value =
+    quotationFormData.value.payCondition === 'Full' ||
+    quotationFormData.value.payCondition === 'BillFull'
+      ? View.Invoice
+      : View.InvoicePre;
+
+  if (
+    quotationFormData.value.payCondition === 'Full' ||
+    quotationFormData.value.payCondition === 'BillFull'
+  ) {
+    getInvoiceCodeFullPay();
+  } else {
+    code.value = '';
+  }
+}
+
 watch(
   [
     () => quotationFormState.value.statusFilterRequest,
diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index fac2c010..1b7ce701 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -5,9 +5,7 @@ import { precisionRound } from 'src/utils/arithmetic';
 import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
-import useOptionStore from 'stores/options';
 import { formatNumberDecimal } from 'stores/utils';
-import { useQuotationForm } from 'pages/05_quotation/form';
 import { useConfigStore } from 'stores/config';
 import useBranchStore from 'stores/branch';
 import { baseUrl } from 'stores/utils';
@@ -19,8 +17,8 @@ import { CustomerBranch } from 'stores/customer/types';
 import { BankBook, Branch } from 'stores/branch/types';
 import {
   QuotationPayload,
-  CustomerBranchRelation,
   Details,
+  QuotationFull,
 } from 'src/stores/quotations/types';
 
 // NOTE: Import Components
@@ -70,9 +68,7 @@ const attachmentList = ref<
     isPDF?: boolean;
   }[]
 >([]);
-const data = ref<
-  QuotationPayload & { customerBranch: CustomerBranchRelation; id: string }
->();
+const data = ref<QuotationFull & { remark?: string }>();
 
 const summaryPrice = ref<SummaryPrice>({
   totalPrice: 0,
@@ -82,6 +78,12 @@ const summaryPrice = ref<SummaryPrice>({
   finalPrice: 0,
 });
 
+async function fetchQuotationById(id: string) {
+  const res = await quotationStore.getQuotation(id);
+
+  if (res) data.value = res;
+}
+
 async function getAttachment(quotationId: string) {
   const attachment = await quotationStore.listAttachment({
     parentId: quotationId,
@@ -178,10 +180,13 @@ onMounted(async () => {
   data.value = 'data' in parsed ? parsed.data : undefined;
 
   if (data.value) {
-    await getAttachment(data.value.id);
+    if (!!data.value.id) {
+      await getAttachment(data.value.id);
+      await fetchQuotationById(data.value.id);
+    }
 
     const resCustomerBranch = await customerStore.getBranchById(
-      data.value.customerBranchId,
+      data.value?.customerBranchId,
     );
 
     if (resCustomerBranch) {
@@ -189,19 +194,27 @@ onMounted(async () => {
     }
 
     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,
+      code: parsed?.meta?.source?.code ?? data.value?.code,
+      createdAt:
+        parsed?.meta?.source?.createdAt ??
+        new Date(data.value?.createdAt || ''),
+      createdBy:
+        `${parsed?.meta?.source?.createdBy?.firstName ?? ''} ${parsed?.meta?.source?.createdBy?.telephoneNo ?? ''}`.trim() ||
+        `${data.value?.createdBy?.firstName ?? ''} ${data.value?.createdBy?.telephoneNo ?? ''}`.trim(),
+      payCondition:
+        parsed?.meta?.source?.payCondition ?? data.value?.payCondition,
+      contactName: parsed?.meta?.source?.contactName ?? data.value?.contactName,
+      contactTel: parsed?.meta?.source?.contactTel ?? data.value?.contactTel,
+      workName: parsed?.meta?.source?.workName ?? data.value?.workName,
+      dueDate:
+        parsed?.meta?.source?.dueDate ?? new Date(data.value?.dueDate || ''),
+      worker:
+        parsed?.meta?.selectedWorker ??
+        data.value?.worker.map((v) => v.employee),
     };
 
     const resBranch = await branchStore.fetchById(
-      data.value?.registeredBranchId,
+      data.value?.registeredBranchId ?? data.value?.registeredBranchId,
     );
 
     if (resBranch) {
@@ -214,26 +227,31 @@ onMounted(async () => {
     }
 
     productList.value =
-      data.value?.productServiceList.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),
-        ),
-      })) || [];
+      (data?.value?.productServiceList ?? data.value?.productServiceList).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 = (data.value?.productServiceList || []).reduce(
+  summaryPrice.value = (
+    (data?.value?.productServiceList ?? data.value?.productServiceList) ||
+    []
+  ).reduce(
     (a, c) => {
       const price = precisionRound((c.pricePerUnit || 0) * c.amount);
       const vat = precisionRound(
diff --git a/src/pages/05_quotation/preview/ViewHeader.vue b/src/pages/05_quotation/preview/ViewHeader.vue
index 7d76ae71..0f1c3f8c 100644
--- a/src/pages/05_quotation/preview/ViewHeader.vue
+++ b/src/pages/05_quotation/preview/ViewHeader.vue
@@ -121,14 +121,7 @@ function titleMode(mode: View): string {
       <div>
         <div>เงื่อนไขการชำระ</div>
         <div>
-          {{
-            {
-              Full: $t('quotation.type.fullAmountCash'),
-              Split: $t('quotation.type.installmentsCash'),
-              BillFull: $t('quotation.type.fullAmountBill'),
-              BillSplit: $t('quotation.type.installmentsBill'),
-            }[details.payCondition]
-          }}
+          {{ $t(`quotation.type.${details.payCondition}`) }}
         </div>
       </div>
       <div>
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
new file mode 100644
index 00000000..fd21a427
--- /dev/null
+++ b/src/pages/10_invoice/MainPage.vue
@@ -0,0 +1,412 @@
+<script lang="ts" setup>
+// NOTE: Library
+import { computed, onMounted, reactive, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+// 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 TableInvoice from './TableInvoice.vue';
+import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
+
+// NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
+import { columns, hslaColors } from './constants';
+import useFlowStore from 'src/stores/flow';
+import { useRequestList } from 'src/stores/request-list';
+import { useInvoice } from 'src/stores/payment';
+import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
+import { Quotation } from 'src/stores/quotations';
+
+const navigatorStore = useNavigator();
+const flowStore = useFlowStore();
+const invoiceStore = useInvoice();
+const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
+
+// NOTE: Variable
+const pageState = reactive({
+  hideStat: false,
+  statusFilter: 'None' as 'None' | PaymentDataStatus,
+  inputSearch: '',
+  fieldSelected: [...columns.map((v) => v.name)],
+  gridView: false,
+  total: 0,
+});
+
+const fieldSelectedOption = computed(() => {
+  return columns.map((v) => ({
+    label: v.label,
+    value: v.name,
+  }));
+});
+
+async function fetchList(opts?: { rotateFlowId?: boolean }) {
+  const ret = await invoiceStore.getInvoiceList({
+    page: page.value,
+    pageSize: pageSize.value,
+    query: pageState.inputSearch,
+    pay:
+      pageState.statusFilter === PaymentDataStatus.Success
+        ? true
+        : pageState.statusFilter === PaymentDataStatus.Wait
+          ? false
+          : undefined,
+  });
+  if (ret) {
+    data.value = ret.result;
+    pageState.total = ret.total;
+    pageMax.value = Math.ceil(ret.total / pageSize.value);
+  }
+
+  if (opts?.rotateFlowId) flowStore.rotate();
+}
+
+async function fetchStats() {
+  const ret = await invoiceStore.getInvoiceStats();
+  if (ret) stats.value = ret;
+}
+
+function triggerView(opts: { quotationId: string }) {
+  const url = new URL(`/quotation/view?tab=invoice`, window.location.origin);
+
+  localStorage.setItem(
+    'new-quotation',
+    JSON.stringify({
+      quotationId: opts.quotationId,
+      statusDialog: 'info',
+    }),
+  );
+
+  window.open(url.toString(), '_blank');
+}
+
+function viewDocExample(quotationId: string) {
+  localStorage.setItem(
+    'quotation-preview',
+    JSON.stringify({
+      data: {
+        id: quotationId,
+      },
+    }),
+  );
+
+  const url = new URL('/quotation/document-view', window.location.origin);
+
+  url.searchParams.append('type', 'invoice');
+
+  window.open(url, '_blank');
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'invoice.title';
+  navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
+
+  await fetchStats();
+  await fetchList({ rotateFlowId: true });
+});
+
+watch(
+  [
+    () => pageState.inputSearch,
+    () => pageState.statusFilter,
+    () => pageSize.value,
+    () => page.value,
+  ],
+  () => fetchList({ rotateFlowId: true }),
+);
+</script>
+<template>
+  <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));
+        "
+      >
+        {{ Object.values(stats).reduce((a, c) => a + c, 0) }}
+      </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: 'mdi-timer-sand',
+                count: stats[PaymentDataStatus.Wait],
+                label: 'invoice.status.PaymentWait',
+                color: 'orange',
+              },
+              {
+                icon: 'mdi-check-decagram-outline',
+                count: stats[PaymentDataStatus.Success],
+                label: 'invoice.status.PaymentSuccess',
+                color: 'light-green',
+              },
+            ]"
+            :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 bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md 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-5 justify-end"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+              style="white-space: nowrap"
+            >
+              <q-select
+                v-model="pageState.statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                :class="{ 'offset-md-5': pageState.gridView }"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  {
+                    label: $t('general.all'),
+                    value: 'None',
+                  },
+                  {
+                    label: $t('invoice.status.PaymentWait'),
+                    value: PaymentDataStatus.Wait,
+                  },
+                  {
+                    label: $t('invoice.status.PaymentSuccess'),
+                    value: PaymentDataStatus.Success,
+                  },
+                ]"
+              />
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :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>
+          </div>
+        </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">
+          <TableInvoice
+            :columns="columns"
+            :rows="data"
+            :grid="pageState.gridView"
+            @view="(quotationId) => triggerView({ quotationId })"
+            @preview="(quotationId) => viewDocExample(quotationId)"
+          >
+            <template #grid="{ item }">
+              <div class="col-md-4 col-sm-6 col-12">
+                <QuotationCard
+                  hide-action
+                  :code="item.row.code"
+                  :title="item.row.quotation.workName"
+                  :status="
+                    $t(`invoice.status.${item.row.payment.paymentStatus}`)
+                  "
+                  :badge-color="
+                    hslaColors[item.row.payment.paymentStatus] || ''
+                  "
+                  :custom-data="[
+                    {
+                      label: $t('general.customer'),
+                      value:
+                        item.row.quotation.customerBranch.registerName ||
+                        `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
+                    },
+                    {
+                      label: $t('taskOrder.issueDate'),
+                      value: new Date(item.row.createdAt).toLocaleString(
+                        'th-TH',
+                        {
+                          hour12: false,
+                        },
+                      ),
+                    },
+                    {
+                      label: $t('invoice.paymentDueDate'),
+                      value: new Date(
+                        item.row.quotation.dueDate,
+                      ).toLocaleDateString('th-TH', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: 'numeric',
+                      }),
+                    },
+                    {
+                      label: $t('quotation.payType'),
+                      value: $t(
+                        `quotation.type.${item.row.quotation.payCondition}`,
+                      ),
+                    },
+                    {
+                      label: $t('preview.netValue'),
+                      value: item.row.amount,
+                    },
+                  ]"
+                  @view="
+                    () => triggerView({ quotationId: item.row.quotation.id })
+                  "
+                  @preview="
+                    () => {
+                      viewDocExample(item.row.quotation.id);
+                    }
+                  "
+                />
+              </div>
+            </template>
+          </TableInvoice>
+        </article>
+
+        <!-- SEC: footer content -->
+        <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">
+            <PaginationComponent
+              v-model:current-page="page"
+              v-model:max-page="pageMax"
+              :fetch-data="() => fetchList({ rotateFlowId: true })"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped></style>
diff --git a/src/pages/10_invoice/TableInvoice.vue b/src/pages/10_invoice/TableInvoice.vue
new file mode 100644
index 00000000..640e2aed
--- /dev/null
+++ b/src/pages/10_invoice/TableInvoice.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts" generic="T">
+import { QTableSlots } from 'quasar';
+import { columns } from './constants';
+import BadgeComponent from 'src/components/BadgeComponent.vue';
+
+import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
+import { ViewButton } from 'components/button';
+import { useInvoice } from 'src/stores/payment';
+
+const invoiceStore = useInvoice();
+
+withDefaults(
+  defineProps<{
+    rows: T[];
+    readonly?: boolean;
+    flat?: boolean;
+    bordered?: boolean;
+    grid?: boolean;
+    hideHeader?: boolean;
+    buttonDownload?: boolean;
+    buttonDelete?: boolean;
+    hidePagination?: boolean;
+    inTable?: boolean;
+    hideView?: boolean;
+    btnSelected?: boolean;
+
+    imgColumn?: string;
+    customColumn?: string[];
+  }>(),
+  {
+    row: () => [],
+    flat: false,
+    bordered: false,
+    grid: false,
+    hideHeader: false,
+    buttonDownload: false,
+    imgColumn: '',
+    customColumn: () => [],
+  },
+);
+
+defineEmits<{
+  (e: 'view', id: string): void;
+  (e: 'preview', id: string): void;
+  (e: 'edit', data: T, index: number): void;
+  (e: 'delete', data: T, index: number): void;
+  (e: 'download', data: T, index: number): void;
+}>();
+</script>
+
+<template>
+  <q-table
+    :rows-per-page-options="[0]"
+    :rows="rows.map((data, i) => ({ ...data, _index: i }))"
+    :columns
+    :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 columns" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: Invoice & { _index: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+        <q-td v-for="col in columns" :align="col.align">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="!col.name.startsWith('#')">
+            <span>
+              {{
+                typeof col.field === 'string'
+                  ? props.row[col.field as keyof Invoice]
+                  : col.field(props.row)
+              }}
+            </span>
+          </template>
+          <template v-if="col.name === '#order'">
+            {{
+              col.field(props.row) +
+              (invoiceStore.page - 1) * invoiceStore.pageSize
+            }}
+          </template>
+          <template v-if="col.name === '#status'">
+            <BadgeComponent
+              :hsla-color="
+                {
+                  [PaymentDataStatus.Success]: '--green-8-hsl',
+                  [PaymentDataStatus.Wait]: '--orange-5-hsl',
+                }[props.row.payment.paymentStatus]
+              "
+              :title="$t(`invoice.status.${props.row.payment.paymentStatus}`)"
+            />
+          </template>
+          <template v-if="col.name === '#action'">
+            <q-btn
+              :id="`btn-preview-${props.row.quotation.workName}`"
+              flat
+              dense
+              rounded
+              icon="mdi-play-box-outline"
+              size="12px"
+              :title="$t('preview.doc')"
+              @click.stop="$emit('preview', props.row.quotation.id)"
+            />
+
+            <q-btn
+              :id="`btn-eye-${props.row.quotation.workName}`"
+              icon="mdi-eye-outline"
+              size="sm"
+              dense
+              round
+              flat
+              @click.stop="$emit('view', props.row.quotation.id)"
+            />
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props: { row: Invoice }">
+      <slot name="grid" :item="props" />
+    </template>
+  </q-table>
+</template>
+
+<style lang="scss" scoped>
+:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
+  color: #ffc224 !important;
+}
+</style>
diff --git a/src/pages/10_invoice/constants.ts b/src/pages/10_invoice/constants.ts
new file mode 100644
index 00000000..e21573f6
--- /dev/null
+++ b/src/pages/10_invoice/constants.ts
@@ -0,0 +1,111 @@
+import { QTableProps } from 'quasar';
+import { Invoice } from 'src/stores/payment/types';
+import { formatNumberDecimal } from 'src/stores/utils';
+import { dateFormatJS } from 'src/utils/datetime';
+
+export const columns = [
+  {
+    name: '#order',
+    align: 'center',
+    label: 'general.order',
+    field: (v: Invoice & { _index: number }) => v._index + 1,
+  },
+
+  {
+    name: 'invoiceCode',
+    align: 'center',
+    label: 'requestList.invoiceCode',
+    field: 'code',
+  },
+
+  {
+    name: 'workSheetName',
+    align: 'center',
+    label: 'invoice.workSheetName',
+    field: (v: Invoice) => v.quotation.workName,
+  },
+
+  {
+    name: 'customer',
+    align: 'center',
+    label: 'general.customer',
+    field: (v: Invoice) => v.quotation.customerBranch.customerName,
+  },
+
+  {
+    name: 'issueDate',
+    align: 'center',
+    label: 'taskOrder.issueDate',
+    field: (v: Invoice) => dateFormatJS({ date: v.createdAt }),
+  },
+
+  {
+    name: 'paymentDueDate',
+    align: 'center',
+    label: 'invoice.paymentDueDate',
+    field: (v: Invoice) => dateFormatJS({ date: v.quotation.dueDate }),
+  },
+
+  {
+    name: 'value',
+    align: 'center',
+    label: 'preview.value',
+    field: (v: Invoice) => formatNumberDecimal(v.amount, 2),
+  },
+  {
+    name: '#status',
+    align: 'center',
+    label: 'general.status',
+    field: (_) => '#status',
+  },
+  {
+    name: '#action',
+    align: 'center',
+    label: '',
+    field: (_) => '#action',
+  },
+] as const satisfies QTableProps['columns'];
+
+export const docColumn = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  {
+    name: 'document',
+    align: 'left',
+    label: 'general.document',
+    field: 'document',
+  },
+  {
+    name: 'attachment',
+    align: 'left',
+    label: 'requestList.attachment',
+    field: 'attachment',
+  },
+  {
+    name: 'amount',
+    align: 'center',
+    label: 'general.amount',
+    field: 'amount',
+  },
+  {
+    name: 'documentInSystem',
+    align: 'center',
+    label: 'requestList.documentInSystem',
+    field: 'documentInSystem',
+  },
+  {
+    name: 'status',
+    align: 'center',
+    label: 'general.status',
+    field: 'status',
+  },
+] as const satisfies QTableProps['columns'];
+
+export const hslaColors: Record<string, string> = {
+  PaymentWait: '--orange-5-hsl',
+  PaymentSuccess: '--green-8-hsl',
+};
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 0a91c9fa..9830d39e 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -110,6 +110,11 @@ const routes: RouteRecordRaw[] = [
         name: 'CreditNote',
         component: () => import('pages/11_credit-note/MainPage.vue'),
       },
+      {
+        path: '/invoice',
+        name: '/Invoice',
+        component: () => import('pages/10_invoice/MainPage.vue'),
+      },
     ],
   },
 
diff --git a/src/stores/payment/index.ts b/src/stores/payment/index.ts
index 4b5b716d..10280b7c 100644
--- a/src/stores/payment/index.ts
+++ b/src/stores/payment/index.ts
@@ -8,6 +8,7 @@ import {
   Payment,
   Receipt,
   PaymentFlowAccount,
+  PaymentDataStatus,
 } from './types';
 import { manageAttachment } from '../utils';
 
@@ -122,6 +123,19 @@ export const useInvoice = defineStore('invoice-store', () => {
   const page = ref<number>(1);
   const pageMax = ref<number>(1);
   const pageSize = ref<number>(30);
+  const stats = ref<Record<PaymentDataStatus, number>>({
+    [PaymentDataStatus.Success]: 0,
+    [PaymentDataStatus.Wait]: 0,
+  });
+
+  async function getInvoiceStats(params?: { quotationId?: string }) {
+    const res = await api.get<Record<PaymentDataStatus, number>>(
+      '/invoice/stats',
+      { params },
+    );
+    if (res.status >= 400) return null;
+    return res.data;
+  }
 
   async function getInvoice(id: string) {
     const res = await api.get<Invoice>(`/invoice/${id}`);
@@ -136,6 +150,7 @@ export const useInvoice = defineStore('invoice-store', () => {
     pageSize?: number;
     query?: string;
     quotationId?: string;
+    pay?: boolean;
   }) {
     const res = await api.get<PaginationResult<Invoice>>('/invoice', {
       params,
@@ -171,7 +186,9 @@ export const useInvoice = defineStore('invoice-store', () => {
     page,
     pageSize,
     pageMax,
+    stats,
 
+    getInvoiceStats,
     getInvoice,
     getInvoiceList,
     createInvoice,
diff --git a/src/stores/payment/types.ts b/src/stores/payment/types.ts
index 31a6a8ae..273bac5a 100644
--- a/src/stores/payment/types.ts
+++ b/src/stores/payment/types.ts
@@ -16,9 +16,14 @@ export type Invoice = {
   createdBy: CreatedBy;
   createdByUserId: string;
 
-  payment?: Payment;
+  payment: Payment;
 };
 
+export enum PaymentDataStatus {
+  Success = 'PaymentSuccess',
+  Wait = 'PaymentWait',
+}
+
 export type InvoicePayload = {
   quotationId: string;
   amount: number;