feat: add tab debt

src/pages/14_report/MainPage.vue

@@ -22,6 +22,7 @@ import {
   colProfit,
   colProfitByMoth,
   colProfitByYear,
+  colProfitDebtReport,
 } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useReportStore } from 'src/stores/report';
@@ -46,6 +47,7 @@ const {
   dataReportSale,
   dataReportProduct,
   dataReportProfit,
+  detaReportDept,
 } = storeToRefs(reportStore);
 
 const userRoles = computed(() => getRole() || []);
@@ -98,6 +100,10 @@ async function fetchReportProfitByYears(years: number) {
   dataReportProfitByYears.value = res?.dataset || [];
 }
 
+async function fetchReportDept() {
+  detaReportDept.value = (await reportStore.getReportDept()) || [];
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'report.title';
   navigatorStore.current.path = [{ text: '' }];
@@ -146,6 +152,10 @@ async function fetchReportTab() {
       await fetchReportProfit();
       break;
     }
+    case ViewMode.DebtReport: {
+      await fetchReportDept();
+      break;
+    }
   }
 }
 
@@ -636,6 +646,36 @@ watch([() => pastYears.value], async () => {
               </Expansion>
             </div>
           </template>
+
+          <template v-if="pageState.currentTab === ViewMode.DebtReport">
+            <Expansion default-opened>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('report.debtReport.title') }}
+                </div>
+              </template>
+
+              <template #main>
+                <TableReport
+                  :row="
+                    detaReportDept.map((v) => ({
+                      customerName:
+                        v.customerBranch.customer.customerType === 'CORP'
+                          ? $i18n.locale === 'eng'
+                            ? v.customerBranch.registerNameEN
+                            : v.customerBranch.registerName
+                          : $i18n.locale === 'eng'
+                            ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                            : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                      unpaid: v.unpaid,
+                      paid: v.paid,
+                    }))
+                  "
+                  :columns="colProfitDebtReport"
+                ></TableReport>
+              </template>
+            </Expansion>
+          </template>
         </article>
       </div>
     </section>

src/pages/14_report/constants.ts

@@ -1,6 +1,6 @@
 import { QTableProps } from 'quasar';
-import { Invoice, Receipt } from 'src/stores/payment/types';
 import {
+  CustomerDept,
   Report,
   ReportProduct,
   ReportQuotation,
@@ -15,6 +15,7 @@ export enum ViewMode {
   Product = 'product',
   Sale = 'sale',
   Profit = 'profit',
+  DebtReport = 'debtReport',
 }
 
 type ColumnsSale = {
@@ -48,6 +49,10 @@ type ColumnsProfixByYear = Omit<ColumnsProfixByMonth, 'moth'> & {
   income: number;
 };
 
+type ColumnsDebt = Omit<CustomerDept, 'customerBranch'> & {
+  customerName: string;
+};
+
 export const colReportQuotation = [
   {
     name: 'code',
@@ -260,10 +265,33 @@ export const colProfitByYear = [
     field: (data: ColumnsProfixByYear) => formatNumberDecimal(data.income, 2),
   },
 ] as const satisfies QTableProps['columns'];
+
+export const colProfitDebtReport = [
+  {
+    name: 'customerName',
+    align: 'left',
+    label: 'report.debtReport.customerName',
+    field: (data: ColumnsDebt) => data.customerName,
+  },
+  {
+    name: 'unpaid',
+    align: 'left',
+    label: 'report.debtReport.unpaid',
+    field: (data: ColumnsDebt) => data.unpaid,
+  },
+  {
+    name: 'paid',
+    align: 'left',
+    label: 'report.debtReport.paid',
+    field: (data: ColumnsDebt) => data.paid,
+  },
+] as const satisfies QTableProps['columns'];
+
 export const pageTabs = [
   { label: 'Document', value: ViewMode.Document, by: ['user'] },
   { label: 'Invoice', value: ViewMode.Invoice, by: ['user'] },
   { label: 'Product', value: ViewMode.Product, by: ['user'] },
   { label: 'Sale', value: ViewMode.Sale, by: ['admin'] },
   { label: 'Profit', value: ViewMode.Profit, by: ['admin'] },
+  { label: 'Debt', value: ViewMode.DebtReport, by: ['admin'] },
 ];