feat: add more field

src/i18n/eng.ts

@@ -1349,9 +1349,10 @@ export default {
       Succeed: 'Completed',
     },
   },
-  report: {
   report: {
     title: 'Report',
+    value: 'Value',
+    customerName: 'Customer Name',
     view: {
       Document: 'Document Status Report',
       Invoice: 'Payment Report',
@@ -1384,7 +1385,6 @@ export default {
       count: 'Sold Quantity',
     },
   },
-  },
   dashboard: {
     title: 'Dashboard',
     newComer: 'New Interested Party',

src/i18n/tha.ts

@@ -1331,6 +1331,8 @@ export default {
 
   report: {
     title: 'รายงาน',
+    customerName: 'ชื่อลูกค้า',
+    value: 'มูลค่า',
     view: {
       Document: 'รายงานสถานะเอกสาร',
       Invoice: 'รายงานการชำระเงิน',

src/pages/14_report/MainPage.vue

@@ -181,7 +181,19 @@ watch([() => pageState.currentTab], async () => {
 
                 <template #main>
                   <TableReport
-                    :row="dataReportQuotation"
+                    :row="
+                      dataReportQuotation.map((v) => ({
+                        ...v,
+                        name:
+                          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}`,
+                      }))
+                    "
                     :columns="colReportQuotation"
                   >
                     <template #status="{ item }">
@@ -208,7 +220,22 @@ watch([() => pageState.currentTab], async () => {
                   </div>
                 </template>
                 <template #main>
-                  <TableReport :row="dataReportInvoice" :columns="colReport">
+                  <TableReport
+                    :row="
+                      dataReportInvoice.map((v) => ({
+                        ...v,
+                        name:
+                          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}`,
+                      }))
+                    "
+                    :columns="colReport"
+                  >
                     <template #status="{ item }">
                       <BadgeComponent
                         :title="$t(`invoice.status.${item.row.status}`)"
@@ -233,7 +260,22 @@ watch([() => pageState.currentTab], async () => {
                   </div>
                 </template>
                 <template #main>
-                  <TableReport :row="dataReportReceipt" :columns="colReport">
+                  <TableReport
+                    :row="
+                      dataReportReceipt.map((v) => ({
+                        ...v,
+                        name:
+                          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}`,
+                      }))
+                    "
+                    :columns="colReport"
+                  >
                     <template #status="{ item }">
                       <BadgeComponent
                         :title="$t(`invoice.status.${item.row.status}`)"
@@ -260,7 +302,22 @@ watch([() => pageState.currentTab], async () => {
                 </div>
               </template>
               <template #main>
-                <TableReport :row="dataReportInvoice" :columns="colReport">
+                <TableReport
+                  :row="
+                    dataReportInvoice.map((v) => ({
+                      ...v,
+                      name:
+                        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}`,
+                    }))
+                  "
+                  :columns="colReport"
+                >
                   <template #status="{ item }">
                     <BadgeComponent
                       :title="$t(`invoice.status.${item.row.status}`)"
@@ -317,7 +374,9 @@ watch([() => pageState.currentTab], async () => {
                           code: v.code,
                           name:
                             v.customer.customerType === 'CORP'
-                              ? v.customerName
+                              ? $i18n.locale === 'eng'
+                                ? v.registerNameEN
+                                : v.registerName
                               : $i18n.locale === 'eng'
                                 ? `${v.firstNameEN} ${v.lastNameEN}`
                                 : `${v.firstName} ${v.lastName}`,

src/pages/14_report/Table/TableReport.vue

@@ -32,7 +32,12 @@ const prop = withDefaults(
         style="background-color: hsla(var(--info-bg) / 0.07)"
         :props="props"
       >
-        <q-th v-for="col in columns" :key="col.name" :props="props">
+        <q-th
+          v-for="col in columns"
+          style="text-align: center"
+          :key="col.name"
+          :props="props"
+        >
           {{ $t(col.label) }}
         </q-th>
       </q-tr>

src/pages/14_report/constants.ts

@@ -41,6 +41,18 @@ export const colReportQuotation = [
     label: 'report.document.status',
     field: '',
   },
+  {
+    name: 'customer',
+    align: 'left',
+    label: 'report.customerName',
+    field: 'name',
+  },
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'report.value',
+    field: (data: ReportQuotation) => formatNumberDecimal(data.amount, 2),
+  },
   {
     name: 'createAt',
     align: 'center',
@@ -68,6 +80,18 @@ export const colReport = [
     label: 'report.table.status',
     field: '',
   },
+  {
+    name: 'customer',
+    align: 'left',
+    label: 'report.customerName',
+    field: 'name',
+  },
+  {
+    name: 'amount',
+    align: 'left',
+    label: 'report.value',
+    field: (data: Report) => formatNumberDecimal(data.amount, 2),
+  },
   {
     name: 'createAt',
     align: 'center',

src/stores/report/types.ts

@@ -5,8 +5,10 @@ import { CustomerBranch } from '../customer';
 import { PaymentDataStatus } from '../payment/types';
 
 export type ReportQuotation = {
+  customerBranch: CustomerBranch;
   updatedAt: Date | null;
   createdAt: Date | null;
+  amount: number;
   status: QuotationStatus;
   code: string;
 };
@@ -20,7 +22,9 @@ export enum Status {
 
 // use with Invoice and Receipt
 export type Report = {
+  customerBranch: CustomerBranch;
   createdAt: Date | null;
+  amount: number;
   status: Status;
   code: string;
 };