feat: add tab debt

src/i18n/eng.ts

@@ -1360,6 +1360,7 @@ export default {
       Product: 'Product and Service Report',
       Sale: 'Sales Summary Report',
       Profit: 'Profit and Loss Report',
+      Debt: 'Overdue Customer Report',
     },
     document: {
       code: 'Code',
@@ -1395,6 +1396,12 @@ export default {
       expenses: 'Expenses',
       income: 'Income',
     },
+    debtReport: {
+      title: 'Overdue Customer Report',
+      customerName: 'Customer Name',
+      unpaid: 'Unpaid',
+      paid: 'Paid',
+    },
   },
   dashboard: {
     title: 'Dashboard',

src/i18n/tha.ts

@@ -1340,6 +1340,7 @@ export default {
       Product: 'รายงานสินค้าและบริการ',
       Sale: 'รายงานสรุปยอดขาย',
       Profit: 'รายงานกำไรและขาดทุน',
+      Debt: 'รายงานลูกค้าที่มีหนี้ค้างชำระ',
     },
     document: {
       code: 'รหัส',
@@ -1376,6 +1377,12 @@ export default {
       expenses: 'ต้นทุน',
       income: 'รายได้',
     },
+    debtReport: {
+      title: 'รายงานลูกค้าที่มีหนี้ค้างชำระ ',
+      customerName: 'ชื่อลูกค้า',
+      unpaid: 'ยังไม่ได้ชำระ',
+      paid: 'ชำระแล้ว',
+    },
   },
   dashboard: {
     title: 'Dashboard',

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'] },
 ];

src/stores/report/index.ts

@@ -8,6 +8,7 @@ import {
   ReportQuotation,
   ReportSale,
   ReportProfit,
+  CustomerDept,
 } from './types';
 import { baseUrl } from '../utils';
 import { getToken } from 'src/services/keycloak';
@@ -146,6 +147,14 @@ export async function getReportProfit(params?: {
   return null;
 }
 
+export async function getReportDept() {
+  const res = await api.get<CustomerDept[]>(`/${ENDPOINT}/customer-dept`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
 export const useReportStore = defineStore('report-store', () => {
   const dataReportQuotation = ref<ReportQuotation[]>([]);
   const dataReportInvoice = ref<Report[]>([]);
@@ -154,6 +163,7 @@ export const useReportStore = defineStore('report-store', () => {
   const dataReportProduct = ref<ReportProduct[]>([]);
   const dataReportPayment = ref<ReportPayment[]>([]);
   const dataReportProfit = ref<ReportProfit>();
+  const detaReportDept = ref<CustomerDept[]>([]);
 
   return {
     dataReportQuotation,
@@ -163,6 +173,7 @@ export const useReportStore = defineStore('report-store', () => {
     dataReportProduct,
     dataReportPayment,
     dataReportProfit,
+    detaReportDept,
 
     downloadReportQuotation,
     getReportQuotation,
@@ -176,5 +187,6 @@ export const useReportStore = defineStore('report-store', () => {
     getReportProduct,
     getReportPayment,
     getReportProfit,
+    getReportDept,
   };
 });

src/stores/report/types.ts

@@ -63,3 +63,9 @@ export type ReportProfit = {
   expenses: number;
   income: number;
 };
+
+export type CustomerDept = {
+  customerBranch: CustomerBranch;
+  unpaid: number;
+  paid: number;
+};