@accounter/client 0.0.8-alpha-20251029094652-37d24ebe6304860cfa001b18424cc588dbcf064d → 0.0.8-alpha-20251029111239-192c5afd2d66a4d11ea8217039b86666b6fff216

package/src/components/ledger-table/index.tsx

@@ -2,151 +2,81 @@ import { useMemo, useState, type ReactElement } from 'react';
 import {
   flexRender,
   getCoreRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
   type SortingState,
 } from '@tanstack/react-table';
 import {
-  TableLedgerRecordsFieldsFragmentDoc,
-  type TableLedgerRecordsFieldsFragment,
+  LedgerRecordsTableFieldsFragmentDoc,
+  type LedgerRecordsTableFieldsFragment,
 } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { EMPTY_UUID } from '../../helpers/consts.js';
+import { Button } from '../ui/button.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { columns } from './columns.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
-  fragment TableLedgerRecordsFields on Charge {
+  fragment LedgerRecordsTableFields on LedgerRecord {
     id
-    ledger {
+    creditAccount1 {
       __typename
-      records {
-        id
-        creditAccount1 {
-          __typename
-          id
-          name
-        }
-        creditAccount2 {
-          __typename
-          id
-          name
-        }
-        debitAccount1 {
-          __typename
-          id
-          name
-        }
-        debitAccount2 {
-          __typename
-          id
-          name
-        }
-        creditAmount1 {
-          formatted
-          currency
-        }
-        creditAmount2 {
-          formatted
-          currency
-        }
-        debitAmount1 {
-          formatted
-          currency
-        }
-        debitAmount2 {
-          formatted
-          currency
-        }
-        localCurrencyCreditAmount1 {
-          formatted
-          raw
-        }
-        localCurrencyCreditAmount2 {
-          formatted
-          raw
-        }
-        localCurrencyDebitAmount1 {
-          formatted
-          raw
-        }
-        localCurrencyDebitAmount2 {
-          formatted
-          raw
-        }
-        invoiceDate
-        valueDate
-        description
-        reference
-      }
-      ... on Ledger @defer {
-        validate {
-          ... on LedgerValidation @defer {
-            matches
-            differences {
-              id
-              creditAccount1 {
-                __typename
-                id
-                name
-              }
-              creditAccount2 {
-                __typename
-                id
-                name
-              }
-              debitAccount1 {
-                __typename
-                id
-                name
-              }
-              debitAccount2 {
-                __typename
-                id
-                name
-              }
-              creditAmount1 {
-                formatted
-                currency
-              }
-              creditAmount2 {
-                formatted
-                currency
-              }
-              debitAmount1 {
-                formatted
-                currency
-              }
-              debitAmount2 {
-                formatted
-                currency
-              }
-              localCurrencyCreditAmount1 {
-                formatted
-                raw
-              }
-              localCurrencyCreditAmount2 {
-                formatted
-                raw
-              }
-              localCurrencyDebitAmount1 {
-                formatted
-                raw
-              }
-              localCurrencyDebitAmount2 {
-                formatted
-                raw
-              }
-              invoiceDate
-              valueDate
-              description
-              reference
-            }
-          }
-        }
-      }
+      id
+      name
     }
+    creditAccount2 {
+      __typename
+      id
+      name
+    }
+    debitAccount1 {
+      __typename
+      id
+      name
+    }
+    debitAccount2 {
+      __typename
+      id
+      name
+    }
+    creditAmount1 {
+      formatted
+      currency
+    }
+    creditAmount2 {
+      formatted
+      currency
+    }
+    debitAmount1 {
+      formatted
+      currency
+    }
+    debitAmount2 {
+      formatted
+      currency
+    }
+    localCurrencyCreditAmount1 {
+      formatted
+      raw
+    }
+    localCurrencyCreditAmount2 {
+      formatted
+      raw
+    }
+    localCurrencyDebitAmount1 {
+      formatted
+      raw
+    }
+    localCurrencyDebitAmount2 {
+      formatted
+      raw
+    }
+    invoiceDate
+    valueDate
+    description
+    reference
   }
 `;
 
@@ -166,43 +96,51 @@ function getRowColorByStatus(status?: 'New' | 'Diff' | 'Deleted'): string {
   return rowStyle;
 }
 
-export type LedgerRecordRow = TableLedgerRecordsFieldsFragment['ledger']['records'][number] & {
+export type LedgerRecordRow = LedgerRecordsTableFieldsFragment & {
   matchingStatus?: 'New' | 'Diff' | 'Deleted';
-  diff?: TableLedgerRecordsFieldsFragment['ledger']['records'][number];
+  diff?: LedgerRecordsTableFieldsFragment;
 };
 
 type Props = {
-  ledgerFragment: FragmentType<typeof TableLedgerRecordsFieldsFragmentDoc>;
+  ledgerRecordsData: FragmentType<typeof LedgerRecordsTableFieldsFragmentDoc>[];
+  ledgerDiffData?: FragmentType<typeof LedgerRecordsTableFieldsFragmentDoc>[];
+  matches?: string[];
 };
 
-export const LedgerTable = ({ ledgerFragment }: Props): ReactElement => {
-  const { ledger } = getFragmentData(TableLedgerRecordsFieldsFragmentDoc, ledgerFragment);
+export const LedgerTable = ({
+  ledgerRecordsData,
+  ledgerDiffData,
+  matches,
+}: Props): ReactElement => {
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const data = useMemo(() => {
-    const records: LedgerRecordRow[] = ledger.records.map(record => {
-      const diff = ledger.validate?.differences?.find(diffRecord => diffRecord.id === record.id);
+    const records = ledgerRecordsData.map(recordData =>
+      getFragmentData(LedgerRecordsTableFieldsFragmentDoc, recordData),
+    );
+    const differences = ledgerDiffData?.map(recordData =>
+      getFragmentData(LedgerRecordsTableFieldsFragmentDoc, recordData),
+    );
+
+    const currentRecords: LedgerRecordRow[] = records.map(record => {
+      const diff = differences?.find(diffRecord => diffRecord.id === record.id);
       return {
         ...record,
         matchingStatus:
-          !ledger.validate?.matches || ledger.validate.matches?.includes(record.id)
-            ? undefined
-            : diff
-              ? 'Diff'
-              : 'Deleted',
+          !matches || matches?.includes(record.id) ? undefined : diff ? 'Diff' : 'Deleted',
         diff,
       };
     });
     const newRecords: LedgerRecordRow[] =
-      ledger?.validate?.differences
+      differences
         ?.filter(record => record.id === EMPTY_UUID)
         .map(record => ({
           ...record,
           matchingStatus: 'New',
         })) ?? [];
-    records.push(...newRecords);
-    return records;
-  }, [ledger]);
+    currentRecords.push(...newRecords);
+    return currentRecords;
+  }, [ledgerRecordsData, ledgerDiffData, matches]);
 
   const table = useReactTable({
     data,
@@ -210,49 +148,82 @@ export const LedgerTable = ({ ledgerFragment }: Props): ReactElement => {
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     state: {
       sorting,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 10,
+      },
+      sorting: [
+        {
+          id: 'invoiceDate',
+          desc: true,
+        },
+      ],
+    },
   });
 
   return (
-    <Table>
-      <TableHeader>
-        {table.getHeaderGroups().map(headerGroup => (
-          <TableRow key={headerGroup.id}>
-            {headerGroup.headers.map(header => (
-              <TableHead key={header.id} colSpan={header.colSpan}>
-                {header.isPlaceholder
-                  ? null
-                  : flexRender(header.column.columnDef.header, header.getContext())}
-              </TableHead>
-            ))}
-          </TableRow>
-        ))}
-      </TableHeader>
-      <TableBody>
-        {table.getRowModel().rows?.length ? (
-          table.getRowModel().rows.map(row => (
-            <TableRow
-              key={row.id}
-              data-state={row.getIsSelected() && 'selected'}
-              className={getRowColorByStatus(row.original.matchingStatus)}
-            >
-              {row.getVisibleCells().map(cell => (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
+    <>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map(headerGroup => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <TableHead className="text-center" key={header.id} colSpan={header.colSpan}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </TableHead>
               ))}
             </TableRow>
-          ))
-        ) : (
-          <TableRow>
-            <TableCell colSpan={columns.length} className="h-24 text-center">
-              No results.
-            </TableCell>
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map(row => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && 'selected'}
+                className={getRowColorByStatus(row.original.matchingStatus)}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </>
   );
 };

package/src/components/reports/conto/custom-node.tsx

@@ -13,7 +13,7 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { Currency } from '../../../gql/graphql.js';
 import { getCurrencyFormatter } from '../../../helpers/index.js';
-import { BusinessExtendedInfo } from '../../business-transactions/business-extended-info.js';
+import { BusinessExtendedInfo } from '../../business-ledger/business-extended-info.js';
 import { Tooltip } from '../../common/index.js';
 import { Badge } from '../../ui/badge.js';
 import { Button } from '../../ui/button.js';

package/src/components/reports/trial-balance-report/trial-balance-report-account.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactElement } from 'react';
 import { PanelTopClose, PanelTopOpen } from 'lucide-react';
 import { Text, Tooltip } from '@mantine/core';
 import type { TrialBalanceTableFieldsFragment } from '../../../gql/graphql.js';
-import { BusinessExtendedInfo } from '../../business-transactions/business-extended-info.js';
+import { BusinessExtendedInfo } from '../../business-ledger/business-extended-info.js';
 import { Button } from '../../ui/button.js';
 import { TrialBalanceReportFilters } from './trial-balance-report-filters.js';
 

package/src/components/transactions-table/columns.tsx

@@ -51,7 +51,7 @@ import {
 
 export type TransactionsTableRowType = TransactionForTransactionsTableFieldsFragment & {
   onUpdate: () => void;
-  editTransaction: () => void;
+  editTransaction: (id: string) => void;
   enableEdit?: boolean;
   enableChargeLink?: boolean;
 };
@@ -63,7 +63,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Counterparty
           {column.getIsSorted() &&
@@ -90,7 +90,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Event Date
           {column.getIsSorted() &&
@@ -117,7 +117,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Debit Date
           {column.getIsSorted() &&
@@ -139,7 +139,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Amount
           {column.getIsSorted() &&
@@ -161,7 +161,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Account
           {column.getIsSorted() &&
@@ -183,7 +183,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Description
           {column.getIsSorted() &&
@@ -205,7 +205,7 @@ export const columns: ColumnDef<TransactionsTableRowType>[] = [
       return (
         <Button
           variant="ghost"
-          // onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           Reference#
           {column.getIsSorted() &&
@@ -230,7 +230,7 @@ export const actionsColumn: ColumnDef<TransactionsTableRowType> = {
     if (row.original.enableEdit) {
       return (
         <>
-          <EditMiniButton onClick={row.original.editTransaction} />
+          <EditMiniButton onClick={() => row.original.editTransaction(row.original.id)} />
           <InsertMiscExpenseModal
             chargeId={row.original.chargeId}
             transactionId={row.original.id}

package/src/components/transactions-table/index.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState, type ReactElement } from 'react';
 import {
   flexRender,
   getCoreRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
   type SortingState,
@@ -9,6 +10,7 @@ import {
 import { TransactionForTransactionsTableFieldsFragmentDoc } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { EditTransactionModal } from '../common/index.js';
+import { Button } from '../ui/button.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { actionsColumn, columns, type TransactionsTableRowType } from './columns.js';
 
@@ -21,37 +23,37 @@ type Props = {
 
 export const TransactionsTable = ({
   transactionsProps,
-  onChange = (): void => void 0,
+  onChange,
   enableEdit,
   enableChargeLink,
 }: Props): ReactElement => {
   const [editTransactionId, setEditTransactionId] = useState<string | undefined>(undefined);
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const transactions = useMemo(
-    () =>
-      transactionsProps.map(rawTransaction =>
-        getFragmentData(TransactionForTransactionsTableFieldsFragmentDoc, rawTransaction),
-      ),
-    [transactionsProps],
-  );
+  const transactions = useMemo(() => {
+    console.log('rendering Transactions');
+    return transactionsProps.map(rawTransaction => {
+      return getFragmentData(TransactionForTransactionsTableFieldsFragmentDoc, rawTransaction);
+    });
+  }, [transactionsProps]);
 
-  const data: TransactionsTableRowType[] = useMemo(
-    () =>
-      transactions?.map(transaction => ({
+  const data: TransactionsTableRowType[] = useMemo(() => {
+    console.log('rendering TransactionsTable data');
+    return transactions.map(transaction => {
+      return {
         ...transaction,
-        editTransaction: (): void => setEditTransactionId(transaction.id),
-        onUpdate: onChange,
+        editTransaction: setEditTransactionId,
+        onUpdate: onChange || (() => {}),
         enableEdit,
         enableChargeLink,
-      })),
-    [transactions, onChange, enableEdit, enableChargeLink],
-  );
+      };
+    });
+  }, [transactions, enableEdit, enableChargeLink, onChange]);
 
-  const tableColumns = useMemo(
-    () => (enableEdit || enableChargeLink ? [...columns, actionsColumn] : columns),
-    [enableEdit, enableChargeLink],
-  );
+  const tableColumns = useMemo(() => {
+    console.log('rendering tableColumns');
+    return enableEdit || enableChargeLink ? [...columns, actionsColumn] : columns;
+  }, [enableEdit, enableChargeLink]);
 
   const table = useReactTable({
     data,
@@ -59,9 +61,22 @@ export const TransactionsTable = ({
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
     state: {
       sorting,
     },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 100,
+      },
+      sorting: [
+        {
+          id: 'eventDate',
+          desc: true,
+        },
+      ],
+    },
   });
 
   return (
@@ -102,10 +117,30 @@ export const TransactionsTable = ({
           )}
         </TableBody>
       </Table>
+      {table.getPageCount() > 1 && (
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      )}
       <EditTransactionModal
         transactionID={editTransactionId}
         close={() => setEditTransactionId(undefined)}
-        onChange={onChange}
+        onChange={onChange ?? (() => {})}
       />
     </>
   );