@accounter/client 0.0.8-alpha-20251029232510-4bc0c8b8c08a26f0c27788725ae584e515236d20 → 0.0.8-alpha-20251029233659-8fb74309c9f1de4f20423db029c5740e2df4bb5d

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

@@ -2,81 +2,151 @@ import { useMemo, useState, type ReactElement } from 'react';
 import {
   flexRender,
   getCoreRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
   type SortingState,
 } from '@tanstack/react-table';
 import {
-  LedgerRecordsTableFieldsFragmentDoc,
-  type LedgerRecordsTableFieldsFragment,
+  TableLedgerRecordsFieldsFragmentDoc,
+  type TableLedgerRecordsFieldsFragment,
 } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { EMPTY_UUID } from '../../helpers/consts.js';
-import { Pagination } from '../ui/pagination.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 LedgerRecordsTableFields on LedgerRecord {
+  fragment TableLedgerRecordsFields on Charge {
     id
-    creditAccount1 {
+    ledger {
       __typename
-      id
-      name
+      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
+            }
+          }
+        }
+      }
     }
-    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
   }
 `;
 
@@ -96,51 +166,43 @@ function getRowColorByStatus(status?: 'New' | 'Diff' | 'Deleted'): string {
   return rowStyle;
 }
 
-export type LedgerRecordRow = LedgerRecordsTableFieldsFragment & {
+export type LedgerRecordRow = TableLedgerRecordsFieldsFragment['ledger']['records'][number] & {
   matchingStatus?: 'New' | 'Diff' | 'Deleted';
-  diff?: LedgerRecordsTableFieldsFragment;
+  diff?: TableLedgerRecordsFieldsFragment['ledger']['records'][number];
 };
 
 type Props = {
-  ledgerRecordsData: FragmentType<typeof LedgerRecordsTableFieldsFragmentDoc>[];
-  ledgerDiffData?: FragmentType<typeof LedgerRecordsTableFieldsFragmentDoc>[];
-  matches?: string[];
+  ledgerFragment: FragmentType<typeof TableLedgerRecordsFieldsFragmentDoc>;
 };
 
-export const LedgerTable = ({
-  ledgerRecordsData,
-  ledgerDiffData,
-  matches,
-}: Props): ReactElement => {
+export const LedgerTable = ({ ledgerFragment }: Props): ReactElement => {
+  const { ledger } = getFragmentData(TableLedgerRecordsFieldsFragmentDoc, ledgerFragment);
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const data = useMemo(() => {
-    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);
+    const records: LedgerRecordRow[] = ledger.records.map(record => {
+      const diff = ledger.validate?.differences?.find(diffRecord => diffRecord.id === record.id);
       return {
         ...record,
         matchingStatus:
-          !matches || matches?.includes(record.id) ? undefined : diff ? 'Diff' : 'Deleted',
+          !ledger.validate?.matches || ledger.validate.matches?.includes(record.id)
+            ? undefined
+            : diff
+              ? 'Diff'
+              : 'Deleted',
         diff,
       };
     });
     const newRecords: LedgerRecordRow[] =
-      differences
+      ledger?.validate?.differences
         ?.filter(record => record.id === EMPTY_UUID)
         .map(record => ({
           ...record,
           matchingStatus: 'New',
         })) ?? [];
-    currentRecords.push(...newRecords);
-    return currentRecords;
-  }, [ledgerRecordsData, ledgerDiffData, matches]);
+    records.push(...newRecords);
+    return records;
+  }, [ledger]);
 
   const table = useReactTable({
     data,
@@ -148,71 +210,49 @@ export const LedgerTable = ({
     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 className="text-center" key={header.id} colSpan={header.colSpan}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
-                </TableHead>
+    <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>
               ))}
             </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>
-                ))}
-              </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">
-        <Pagination
-          value={table.getState().pagination.pageIndex}
-          total={table.getPageCount()}
-          onChange={page => table.setPageIndex(page)}
-        />
-      </div>
-    </>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="h-24 text-center">
+              No results.
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
   );
 };

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-ledger/business-extended-info.js';
+import { BusinessExtendedInfo } from '../../business-transactions/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-ledger/business-extended-info.js';
+import { BusinessExtendedInfo } from '../../business-transactions/business-extended-info.js';
 import { Button } from '../../ui/button.js';
 import { TrialBalanceReportFilters } from './trial-balance-report-filters.js';
 

package/src/components/tags/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState, type ReactElement } from 'react';
+import { useCallback, useContext, useState, type ReactElement } from 'react';
 import { ListPlus, Loader2, Trash2 } from 'lucide-react';
 import { useQuery } from 'urql';
 import { AllTagsScreenDocument } from '../../gql/graphql.js';
@@ -32,9 +32,7 @@ export const TagsManager = (): ReactElement => {
   const { addTag } = useAddTag();
   const { deleteTag } = useDeleteTag();
 
-  useEffect(() => {
-    setFiltersContext(null);
-  }, [setFiltersContext]);
+  setFiltersContext(null);
 
   const allTags = sortTags(data?.allTags ?? []);
 

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

@@ -51,7 +51,7 @@ import {
 
 export type TransactionsTableRowType = TransactionForTransactionsTableFieldsFragment & {
   onUpdate: () => void;
-  editTransaction: (id: string) => void;
+  editTransaction: () => 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(row.original.id)} />
+          <EditMiniButton onClick={row.original.editTransaction} />
           <InsertMiscExpenseModal
             chargeId={row.original.chargeId}
             transactionId={row.original.id}

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

@@ -2,7 +2,6 @@ import { useMemo, useState, type ReactElement } from 'react';
 import {
   flexRender,
   getCoreRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
   type SortingState,
@@ -10,7 +9,6 @@ import {
 import { TransactionForTransactionsTableFieldsFragmentDoc } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { EditTransactionModal } from '../common/index.js';
-import { Pagination } from '../ui/pagination.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { actionsColumn, columns, type TransactionsTableRowType } from './columns.js';
 
@@ -23,35 +21,37 @@ type Props = {
 
 export const TransactionsTable = ({
   transactionsProps,
-  onChange,
+  onChange = (): void => void 0,
   enableEdit,
   enableChargeLink,
 }: Props): ReactElement => {
   const [editTransactionId, setEditTransactionId] = useState<string | undefined>(undefined);
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const transactions = useMemo(() => {
-    console.log('rendering Transactions');
-    return transactionsProps.map(rawTransaction => {
-      return getFragmentData(TransactionForTransactionsTableFieldsFragmentDoc, rawTransaction);
-    });
-  }, [transactionsProps]);
+  const transactions = useMemo(
+    () =>
+      transactionsProps.map(rawTransaction =>
+        getFragmentData(TransactionForTransactionsTableFieldsFragmentDoc, rawTransaction),
+      ),
+    [transactionsProps],
+  );
 
-  const data: TransactionsTableRowType[] = useMemo(() => {
-    return transactions.map(transaction => {
-      return {
+  const data: TransactionsTableRowType[] = useMemo(
+    () =>
+      transactions?.map(transaction => ({
         ...transaction,
-        editTransaction: setEditTransactionId,
-        onUpdate: onChange || (() => {}),
+        editTransaction: (): void => setEditTransactionId(transaction.id),
+        onUpdate: onChange,
         enableEdit,
         enableChargeLink,
-      };
-    });
-  }, [transactions, enableEdit, enableChargeLink, onChange]);
+      })),
+    [transactions, onChange, enableEdit, enableChargeLink],
+  );
 
-  const tableColumns = useMemo(() => {
-    return enableEdit || enableChargeLink ? [...columns, actionsColumn] : columns;
-  }, [enableEdit, enableChargeLink]);
+  const tableColumns = useMemo(
+    () => (enableEdit || enableChargeLink ? [...columns, actionsColumn] : columns),
+    [enableEdit, enableChargeLink],
+  );
 
   const table = useReactTable({
     data,
@@ -59,22 +59,9 @@ 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 (
@@ -115,19 +102,10 @@ export const TransactionsTable = ({
           )}
         </TableBody>
       </Table>
-      {table.getPageCount() > 1 && (
-        <div className="flex items-center justify-end space-x-2 py-4">
-          <Pagination
-            value={table.getState().pagination.pageIndex}
-            total={table.getPageCount()}
-            onChange={page => table.setPageIndex(page)}
-          />
-        </div>
-      )}
       <EditTransactionModal
         transactionID={editTransactionId}
         close={() => setEditTransactionId(undefined)}
-        onChange={onChange ?? (() => {})}
+        onChange={onChange}
       />
     </>
   );