refactor(webapp): use FinancialSheet in financial report tables and simplify component

Made-with: Cursor

packages/webapp/src/components/FinancialSheet/FinancialSheet.tsx

@@ -3,7 +3,7 @@ import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 
-import { If, FormattedMessage as T } from '@/components';
+import { FormattedMessage as T } from '@/components';
 import {
   FinancialSheetRoot,
   FinancialSheetFooterCurrentTime,
@@ -23,9 +23,7 @@ import {
 export function FinancialSheet({
   companyName,
   sheetType,
-  fromDate,
+  dateText,
-  toDate,
-  asDate,
   children,
   accountingBasis,
   basis,
@@ -34,19 +32,6 @@ export function FinancialSheet({
   currentDate = true,
   className,
 }) {
-  const format = 'DD MMMM YYYY';
-  const formattedFromDate = useMemo(
-    () => moment(fromDate).format(format),
-    [fromDate],
-  );
-  const formattedToDate = useMemo(
-    () => moment(toDate).format(format),
-    [toDate],
-  );
-  const formattedAsDate = useMemo(
-    () => moment(asDate).format(format),
-    [asDate],
-  );
   const methodsLabels = useMemo(
     () => ({
       cash: intl.get('cash'),
@@ -69,15 +54,7 @@ export function FinancialSheet({
       {companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
       {sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
 
-      <FinancialSheetDate>
+      {dateText && <FinancialSheetDate>{dateText}</FinancialSheetDate>}
-        <If condition={asDate}>
-          <T id={'as'} /> {formattedAsDate}
-        </If>
-        <If condition={fromDate && toDate}>
-          <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
-          {formattedToDate}
-        </If>
-      </FinancialSheetDate>
 
       <FinancialSheetTable>{children}</FinancialSheetTable>
       <FinancialSheetAccountingBasis>

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx

@@ -20,7 +20,7 @@ export default function APAgingSummaryTable({
 }) {
   // AP aging summary report content.
   const {
-    APAgingSummary: { table, query },
+    APAgingSummary: { table, query, meta },
     isAPAgingLoading,
   } = useAPAgingSummaryContext();
 
@@ -31,7 +31,7 @@ export default function APAgingSummaryTable({
     <FinancialSheet
       companyName={organizationName}
       sheetType={intl.get('payable_aging_summary')}
-      asDate={query.as_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
       loading={isAPAgingLoading}
     >
       <APAgingSummaryDataTable

packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx

@@ -20,7 +20,7 @@ export default function ReceivableAgingSummaryTable({
 }) {
   // AR aging summary report context.
   const {
-    ARAgingSummary: { table, query },
+    ARAgingSummary: { table, query, meta },
     isARAgingLoading,
   } = useARAgingSummaryContext();
 
@@ -31,7 +31,7 @@ export default function ReceivableAgingSummaryTable({
     <FinancialSheet
       companyName={organizationName}
       sheetType={intl.get('receivable_aging_summary')}
-      asDate={query.as_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
       loading={isARAgingLoading}
     >
       <ARAgingSummaryDataTable

packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx

@@ -18,7 +18,7 @@ export default function BalanceSheetTable({
 }) {
   // Balance sheet context.
   const {
-    balanceSheet: { table, query },
+    balanceSheet: { table, query, meta },
   } = useBalanceSheetContext();
 
   // Retrieve the database columns.
@@ -34,7 +34,7 @@ export default function BalanceSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('balance_sheet')}
-      asDate={query.to_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
       basis={query.basis}
     >
       <BalanceSheetDataTable

packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx

@@ -18,7 +18,7 @@ export default function CashFlowStatementTable({
   companyName,
 }) {
   const {
-    cashFlowStatement: { tableRows },
+    cashFlowStatement: { tableRows, meta },
     query,
   } = useCashFlowStatementContext();
 
@@ -32,8 +32,7 @@ export default function CashFlowStatementTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('statement_of_cash_flow')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       basis={query.basis}
     >
       <CashflowStatementDataTable

packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx

@@ -18,7 +18,7 @@ export default function CustomersBalanceSummaryTable({
   companyName,
 }) {
   const {
-    CustomerBalanceSummary: { table, query },
+    CustomerBalanceSummary: { table, query, meta },
   } = useCustomersBalanceSummaryContext();
 
   // Retrieves the customers summary columns.
@@ -28,7 +28,7 @@ export default function CustomersBalanceSummaryTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('customers_balance_summary')}
-      asDate={query.as_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
     >
       <CustomerBalanceDataTable
         columns={columns}

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx

@@ -20,7 +20,7 @@ export default function CustomersTransactionsTable({
 }) {
   // Customers transactions context.
   const {
-    customersTransactions: { tableRows },
+    customersTransactions: { tableRows, meta },
     query,
   } = useCustomersTransactionsContext();
 
@@ -36,8 +36,7 @@ export default function CustomersTransactionsTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('customers_transactions')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       fullWidth={true}
     >
       <CustomersTransactionsDataTable

packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx

@@ -21,7 +21,7 @@ import { useGeneralLedgerTableColumns } from './dynamicColumns';
 export default function GeneralLedgerTable({ companyName }) {
   // General ledger context.
   const {
-    generalLedger: { query, table },
+    generalLedger: { query, table, meta },
     isLoading,
   } = useGeneralLedgerContext();
 
@@ -38,8 +38,7 @@ export default function GeneralLedgerTable({ companyName }) {
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('general_ledger_sheet')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       loading={isLoading}
       fullWidth={true}
     >

packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx

@@ -18,7 +18,7 @@ export function InventoryItemDetailsTable({
   companyName,
 }) {
   const {
-    inventoryItemDetails: { tableRows },
+    inventoryItemDetails: { tableRows, meta },
     isInventoryItemDetailsLoading,
     query,
   } = useInventoryItemDetailsContext();
@@ -35,8 +35,7 @@ export function InventoryItemDetailsTable({
       companyName={companyName}
       sheetType={intl.get('inventory_item_details')}
       loading={isInventoryItemDetailsLoading}
-      fromDate={query.fromDate}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.toDate}
       fullWidth={true}
     >
       <InventoryItemDetailsDataTable

packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx

@@ -19,7 +19,7 @@ export default function InventoryValuationTable({
 }) {
   // Inventory valuation context.
   const {
-    inventoryValuation: { table, query },
+    inventoryValuation: { table, query, meta },
     isLoading,
   } = useInventoryValuationContext();
 
@@ -30,7 +30,7 @@ export default function InventoryValuationTable({
     <InventoryValuationSheet
       companyName={companyName}
       sheetType={intl.get('inventory_valuation')}
-      asDate={query.as_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
       loading={isLoading}
     >
       <InventoryValuationDataTable

packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx

@@ -23,7 +23,7 @@ import { useJournalSheetColumns } from './dynamicColumns';
 export function JournalTable({ companyName }) {
   // Journal sheet context.
   const {
-    journalSheet: { table, query },
+    journalSheet: { table, query, meta },
     isLoading,
   } = useJournalSheetContext();
 
@@ -37,8 +37,7 @@ export function JournalTable({ companyName }) {
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('journal_sheet')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       loading={isLoading}
       fullWidth={true}
       name="journal"

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx

@@ -19,7 +19,7 @@ export default function ProfitLossSheetTable({
 }) {
   // Profit/Loss sheet context.
   const {
-    profitLossSheet: { table, query },
+    profitLossSheet: { table, query, meta },
   } = useProfitLossSheetContext();
 
   // Retrieves the profit/loss table columns.
@@ -35,8 +35,7 @@ export default function ProfitLossSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={<T id={'profit_loss_sheet'} />}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       basis={query.basis}
     >
       <ProfitLossDataTable

packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryTable.tsx

@@ -18,7 +18,7 @@ export default function ProjectProfitabilitySummaryTable({
 }) {
   // Project profitability summary context.
   const {
-    projectProfitabilitySummary: { tableRows },
+    projectProfitabilitySummary: { tableRows, meta },
     query,
   } = useProjectProfitabilitySummaryContext();
 
@@ -29,8 +29,7 @@ export default function ProjectProfitabilitySummaryTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('project_profitability_summary')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       basis={query.basis}
       name="project-profitability-summary"
     >

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx

@@ -17,7 +17,7 @@ import { usePurchasesByItemsTableColumns } from './dynamicColumns';
 export default function PurchasesByItemsTable({ companyName }) {
   // Purchases by items context.
   const {
-    purchaseByItems: { table, query },
+    purchaseByItems: { table, query, meta },
   } = usePurchaseByItemsContext();
 
   // Purchases by items table columns.
@@ -27,8 +27,7 @@ export default function PurchasesByItemsTable({ companyName }) {
     <PurchasesByItemsSheet
       companyName={companyName}
       sheetType={intl.get('purchases_by_items')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
     >
       <PurchasesByItemsDataTable
         columns={columns}

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx

@@ -15,7 +15,7 @@ import { TableStyle } from '@/constants';
 export default function SalesByItemsTable({ companyName }) {
   // Sales by items context.
   const {
-    salesByItems: { table, query },
+    salesByItems: { table, query, meta },
     isLoading,
   } = useSalesByItemsContext();
 
@@ -26,8 +26,7 @@ export default function SalesByItemsTable({ companyName }) {
     <SalesByItemsSheet
       companyName={companyName}
       sheetType={intl.get('sales_by_items')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       loading={isLoading}
     >
       <SalesByItemsDataTable

packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryTable.tsx

@@ -19,7 +19,7 @@ function SalesTaxLiabilitySummaryTableRoot({
 }) {
   // Balance sheet context.
   const {
-    salesTaxLiabilitySummary: { table, query },
+    salesTaxLiabilitySummary: { table, query, meta },
   } = useSalesTaxLiabilitySummaryContext();
 
   // Retrieve the database columns.
@@ -35,8 +35,7 @@ function SalesTaxLiabilitySummaryTableRoot({
     <FinancialSheet
       companyName={organizationName}
       sheetType={'Sales Tax Liability Summary'}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       basis={''}
     >
       <SalesTaxLiabilitySummaryDataTable

packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx

@@ -16,7 +16,7 @@ import { useTrialBalanceSheetTableColumns } from './hooks';
 export default function TrialBalanceSheetTable({ companyName }) {
   // Trial balance sheet context.
   const {
-    trialBalanceSheet: { table, query },
+    trialBalanceSheet: { table, query, meta },
     isLoading,
   } = useTrialBalanceSheetContext();
 
@@ -27,8 +27,7 @@ export default function TrialBalanceSheetTable({ companyName }) {
     <FinancialSheet
       companyName={companyName}
       sheetType={intl.get('trial_balance_sheet')}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       name="trial-balance"
       loading={isLoading}
       basis={'cash'}

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx

@@ -17,7 +17,7 @@ export default function VendorsBalanceSummaryTable({
   organizationName,
 }) {
   const {
-    VendorBalanceSummary: { table, query },
+    VendorBalanceSummary: { table, query, meta },
   } = useVendorsBalanceSummaryContext();
 
   // vendors balance summary columns.
@@ -27,7 +27,7 @@ export default function VendorsBalanceSummaryTable({
     <VendorBalanceFinancialSheet
       companyName={organizationName}
       sheetType={intl.get('vendors_balance_summary')}
-      asDate={query.as_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
     >
       <VendorBalanceDataTable
         columns={columns}

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

@@ -23,7 +23,7 @@ export default function VendorsTransactionsTable({
   const { vendorsTransactions, isVendorsTransactionsLoading } =
     useVendorsTransactionsContext();
 
-  const { table, query } = vendorsTransactions;
+  const { table, query, meta } = vendorsTransactions;
 
   // Retireve vendor transactions table columns.
   const columns = useVendorsTransactionsColumns();
@@ -39,8 +39,7 @@ export default function VendorsTransactionsTable({
       companyName={companyName}
       sheetType={intl.get('vendors_transactions')}
       loading={isVendorsTransactionsLoading}
-      fromDate={query.from_date}
+      dateText={meta?.formatted_date_range ?? meta?.formatted_as_date}
-      toDate={query.to_date}
       fullWidth={true}
     >
       <VendorsTransactionsDataTable

packages/webapp/src/hooks/query/FinancialReports/use-customer-balance-summary.ts

@@ -22,10 +22,12 @@ export function useCustomerBalanceSummaryReport(query, props) {
       select: (res) => ({
         query: res.data.query,
         table: res.data.table,
+        meta: res.data.meta,
       }),
       defaultData: {
         table: {},
         query: {},
+        meta: {},
       },
       ...props,
     },

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

@@ -22,10 +22,12 @@ export function useCustomersTransactionsReport(query, props) {
       select: (res) => ({
         data: res.data.table,
         tableRows: res.data.table.rows,
+        meta: res.data.meta,
       }),
       defaultData: {
         tableRows: [],
         data: [],
+        meta: {},
       },
       ...props,
     },

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

@@ -22,10 +22,12 @@ export function useVendorsBalanceSummaryReport(query, props) {
       select: (res) => ({
         query: res.data.query,
         table: res.data.table,
+        meta: res.data.meta,
       }),
       defaultData: {
         table: {},
         query: {},
+        meta: {},
       },
       ...props,
     },