fix: broken transactions by vendor report

packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorMeta.ts

@@ -25,9 +25,11 @@ export class TransactionsByVendorMeta {
     const formattedFromDate = moment(query.fromDate).format('YYYY/MM/DD');
     const formattedDateRange = `From ${formattedFromDate} | To ${formattedToDate}`;
 
+    const sheetName = 'Transactions By Vendor';
+
     return {
       ...commonMeta,
-      sheetName: 'Transactions By Vendor',
+      sheetName,
       formattedFromDate,
       formattedToDate,
       formattedDateRange,

packages/server/src/services/FinancialStatements/TransactionsByVendor/TransactionsByVendorPdf.ts

@@ -2,6 +2,7 @@ import { Inject, Service } from 'typedi';
 import { ITransactionsByVendorsFilter } from '@/interfaces';
 import { TableSheetPdf } from '../TableSheetPdf';
 import { TransactionsByVendorTableInjectable } from './TransactionsByVendorTableInjectable';
+import { HtmlTableCustomCss } from './constants';
 
 @Service()
 export class TransactionsByVendorsPdf {
@@ -27,7 +28,8 @@ export class TransactionsByVendorsPdf {
       tenantId,
       table.table,
       table.meta.sheetName,
-      table.meta.formattedDateRange
+      table.meta.formattedDateRange,
+      HtmlTableCustomCss
     );
   }
 }

packages/server/src/services/FinancialStatements/TransactionsByVendor/constants.ts

@@ -0,0 +1,23 @@
+export const HtmlTableCustomCss = `
+table tr td:not(:first-child) {
+  border-left: 1px solid #ececec;
+}
+table tr:last-child td {
+  border-bottom: 1px solid #ececec; 
+}
+table .cell--credit,
+table .cell--debit,
+table .column--credit,
+table .column--debit,
+table .column--running_balance,
+table .cell--running_balance{
+  text-align: right;
+}
+table tr.row-type--closing-balance td,
+table tr.row-type--opening-balance td {
+  font-weight: 600;
+}
+table tr.row-type--vendor:not(:first-child) td {
+  border-top: 1px solid #ddd;
+}
+`;

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx

@@ -20,18 +20,17 @@ export default function VendorsTransactionsTable({
   companyName,
 }) {
   // Vendor transactions context.
-  const {
-    vendorsTransactions: { tableRows },
-    isVendorsTransactionsLoading,
-    query,
-  } = useVendorsTransactionsContext();
+  const { vendorsTransactions, isVendorsTransactionsLoading } =
+    useVendorsTransactionsContext();
+
+  const { table, query } = vendorsTransactions;
 
   // Retireve vendor transactions table columns.
   const columns = useVendorsTransactionsColumns();
 
   const expandedRows = useMemo(
-    () => defaultExpanderReducer(tableRows, 5),
-    [tableRows],
+    () => defaultExpanderReducer(table.rows, 5),
+    [table.rows],
   );
 
   return (
@@ -46,7 +45,7 @@ export default function VendorsTransactionsTable({
     >
       <VendorsTransactionsDataTable
         columns={columns}
-        data={tableRows}
+        data={table.rows}
         rowClassNames={tableRowTypesToClassnames}
         noInitialFetch={true}
         expandable={true}

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/components.tsx

@@ -25,7 +25,7 @@ import {
  */
 export const useVendorsTransactionsColumns = () => {
   const {
-    vendorsTransactions: { tableRows },
+    vendorsTransactions: { table },
   } = useVendorsTransactionsContext();
 
   return React.useMemo(
@@ -59,7 +59,7 @@ export const useVendorsTransactionsColumns = () => {
         accessor: 'cells[4].value',
         className: 'credit',
         textOverview: true,
-        width: getColumnWidth(tableRows, 'cells[5].value', {
+        width: getColumnWidth(table.rows, 'cells[5].value', {
           minWidth: 100,
           magicSpacing: 10,
         }),
@@ -69,7 +69,7 @@ export const useVendorsTransactionsColumns = () => {
         accessor: 'cells[5].value',
         className: 'debit',
         textOverview: true,
-        width: getColumnWidth(tableRows, 'cells[6].value', {
+        width: getColumnWidth(table.rows, 'cells[6].value', {
           minWidth: 100,
           magicSpacing: 10,
         }),
@@ -79,13 +79,13 @@ export const useVendorsTransactionsColumns = () => {
         accessor: 'cells[6].value',
         className: 'running_balance',
         textOverview: true,
-        width: getColumnWidth(tableRows, 'cells[7].value', {
+        width: getColumnWidth(table.rows, 'cells[7].value', {
           minWidth: 120,
           magicSpacing: 10,
         }),
       },
     ],
-    [tableRows],
+    [table],
   );
 };
 

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/dialogs/VendorTransactionsPdfDialog/VendorTransactionsPdfDialogContent.tsx

@@ -1,13 +1,16 @@
+// @ts-nocheck
+import { AnchorButton } from '@blueprintjs/core';
 import {
   DialogContent,
   PdfDocumentPreview,
   FormattedMessage as T,
 } from '@/components';
 import { useTransactionsByVendorsPdf } from '@/hooks/query';
-import { AnchorButton } from '@blueprintjs/core';
+import { useVendorsTransactionsContext } from '../../VendorsTransactionsProvider';
 
 export default function VendorTransactionsPdfDialogContent() {
-  const { isLoading, pdfUrl } = useTransactionsByVendorsPdf();
+  const { httpQuery } = useVendorsTransactionsContext();
+  const { isLoading, pdfUrl } = useTransactionsByVendorsPdf(httpQuery);
 
   return (
     <DialogContent>

packages/webapp/src/hooks/query/FinancialReports/use-vendor-transactions.ts

@@ -19,14 +19,7 @@ export function useVendorsTransactionsReport(query, props) {
       },
     },
     {
-      select: (res) => ({
-        data: res.data.table,
-        tableRows: res.data.table.rows,
-      }),
-      defaultData: {
-        tableRows: [],
-        data: [],
-      },
+      select: (res) => res.data,
       ...props,
     },
   );