@accounter/client 0.0.8-alpha-20251029124401-d15137847e8450b1ecf3e3cfa6b68dda7239ca45 → 0.0.8-alpha-20251029124558-c1dac18cef0a90c88021bcb6e06319cc55ec33d9

package/src/components/{business-transactions → business-ledger}/index.tsx

@@ -9,10 +9,10 @@ import {
 import { useQuery } from 'urql';
 import { Mark, Table, Text, Tooltip } from '@mantine/core';
 import {
-  BusinessTransactionsSummeryDocument,
+  BusinessLedgerRecordsSummeryDocument,
   Currency,
+  type BusinessLedgerRecordsSummeryQuery,
   type BusinessTransactionsFilter,
-  type BusinessTransactionsSummeryQuery,
 } from '../../gql/graphql.js';
 import { FIAT_CURRENCIES } from '../../helpers/index.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
@@ -21,11 +21,11 @@ import { AccounterTableRow } from '../common/index.js';
 import { PageLayout } from '../layout/page-layout.js';
 import { Button } from '../ui/button.js';
 import { BusinessExtendedInfo } from './business-extended-info.js';
-import { BusinessTransactionsFilters } from './business-transactions-filters.js';
+import { BusinessLedgerRecordsFilters } from './business-ledger-filters.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
-  query BusinessTransactionsSummery($filters: BusinessTransactionsFilter) {
+  query BusinessLedgerRecordsSummery($filters: BusinessTransactionsFilter) {
     businessTransactionsSumFromLedgerRecords(filters: $filters) {
       ... on BusinessTransactionsSumFromLedgerRecordsSuccessfulResult {
         businessTransactionsSum {
@@ -66,32 +66,32 @@ import { BusinessTransactionsFilters } from './business-transactions-filters.js'
   }
 `;
 
-type BusinessTransactionsSum = Extract<
-  BusinessTransactionsSummeryQuery['businessTransactionsSumFromLedgerRecords'],
+type BusinessLedgerRecordsSum = Extract<
+  BusinessLedgerRecordsSummeryQuery['businessTransactionsSumFromLedgerRecords'],
   { businessTransactionsSum: unknown }
 >['businessTransactionsSum'][number];
 
 type CellInfo = {
   title: string | ReactNode;
   disabled?: boolean;
-  value: (item: BusinessTransactionsSum) => string | ReactNode;
+  value: (item: BusinessLedgerRecordsSum) => string | ReactNode;
   style?: React.CSSProperties;
 };
 
-export const BusinessTransactionsSummery = (): ReactElement => {
+export const BusinessLedgerRecordsSummery = (): ReactElement => {
   const { get } = useUrlQuery();
   const { setFiltersContext } = useContext(FiltersContext);
   const [isAllOpened, setIsAllOpened] = useState<boolean>(false);
   const [isExpandedCurrencies, setIsExpandedCurrencies] = useState<boolean>(false);
   const [filter, setFilter] = useState<BusinessTransactionsFilter>(
-    get('transactionsFilters')
+    get('ledgerRecordsFilters')
       ? (JSON.parse(
-          decodeURIComponent(get('transactionsFilters') as string),
+          decodeURIComponent(get('ledgerRecordsFilters') as string),
         ) as BusinessTransactionsFilter)
       : {},
   );
   const [{ data, fetching }] = useQuery({
-    query: BusinessTransactionsSummeryDocument,
+    query: BusinessLedgerRecordsSummeryDocument,
     variables: {
       filters: filter,
     },
@@ -100,7 +100,7 @@ export const BusinessTransactionsSummery = (): ReactElement => {
   useEffect(() => {
     setFiltersContext(
       <div className="flex flex-row gap-x-5">
-        <BusinessTransactionsFilters filter={filter} setFilter={setFilter} />
+        <BusinessLedgerRecordsFilters filter={filter} setFilter={setFilter} />
         <Tooltip label="Expand all accounts">
           <Button
             variant="outline"
@@ -141,7 +141,7 @@ export const BusinessTransactionsSummery = (): ReactElement => {
     isExpandedCurrencies,
   ]);
 
-  const businessTransactionsSum = useMemo(() => {
+  const businessLedgerRecordsSum = useMemo(() => {
     if (data?.businessTransactionsSumFromLedgerRecords.__typename === 'CommonError') {
       return [];
     }
@@ -195,7 +195,7 @@ export const BusinessTransactionsSummery = (): ReactElement => {
   ];
 
   return (
-    <PageLayout title="Business Transactions" description="Business Transactions Summery">
+    <PageLayout title="Business Ledger Records" description="Business Ledger Records Summary">
       {fetching ? (
         <Loader2 className="h-10 w-10 animate-spin mr-2 self-center" />
       ) : (
@@ -209,7 +209,7 @@ export const BusinessTransactionsSummery = (): ReactElement => {
             </tr>
           </thead>
           <tbody>
-            {businessTransactionsSum.map((item, index) => (
+            {businessLedgerRecordsSum.map((item, index) => (
               <AccounterTableRow
                 key={index}
                 columns={columns}

package/src/components/charges/charge-extended-info.tsx

@@ -4,6 +4,7 @@ import { useQuery } from 'urql';
 import { Accordion, Box, Collapse, Loader, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
+  ChargeLedgerRecordsTableFieldsFragmentDoc,
   ChargesTableErrorsFieldsFragmentDoc,
   ChargeTableTransactionsFieldsFragmentDoc,
   ConversionChargeInfoFragmentDoc,
@@ -12,7 +13,6 @@ import {
   ExchangeRatesInfoFragmentDoc,
   FetchChargeDocument,
   TableDocumentsFieldsFragmentDoc,
-  TableLedgerRecordsFieldsFragmentDoc,
   TableMiscExpensesFieldsFragmentDoc,
   TableSalariesFieldsFragmentDoc,
   type FetchChargeQuery,
@@ -55,7 +55,7 @@ import { SalariesTable } from './extended-info/salaries-info.jsx';
       }
       ...DocumentsGalleryFields @defer
       ...TableDocumentsFields @defer
-      ...TableLedgerRecordsFields @defer
+      ...ChargeLedgerRecordsTableFields @defer
       ...ChargeTableTransactionsFields @defer
       ...ConversionChargeInfo @defer
       ...CreditcardBankChargeInfo @defer
@@ -89,6 +89,31 @@ import { SalariesTable } from './extended-info/salaries-info.jsx';
   }
 `;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment ChargeLedgerRecordsTableFields on Charge {
+    id
+    ledger {
+      __typename
+      records {
+        id
+        ...LedgerRecordsTableFields
+      }
+      ... on Ledger @defer {
+        validate {
+          ... on LedgerValidation @defer {
+            matches
+            differences {
+              id
+              ...LedgerRecordsTableFields
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 interface Props {
   chargeID: string;
   onChange?: () => void;
@@ -191,7 +216,7 @@ export function ChargeExtendedInfo({
 
   const ledgerRecordsAreReady = isFragmentReady(
     FetchChargeDocument,
-    TableLedgerRecordsFieldsFragmentDoc,
+    ChargeLedgerRecordsTableFieldsFragmentDoc,
     charge,
   );
 
@@ -442,7 +467,7 @@ export function ChargeExtendedInfo({
                   </div>
                 </Accordion.Control>
                 <Accordion.Panel>
-                  {ledgerRecordsAreReady && <LedgerTable ledgerFragment={charge} />}
+                  {ledgerRecordsAreReady && <ChargeLedgerTable data={charge} />}
                 </Accordion.Panel>
               </Accordion.Item>
             )}
@@ -460,3 +485,19 @@ export function ChargeExtendedInfo({
     </div>
   );
 }
+
+type ChargeLedgerTableProps = {
+  data: FragmentType<typeof ChargeLedgerRecordsTableFieldsFragmentDoc>;
+};
+
+export const ChargeLedgerTable = ({ data }: ChargeLedgerTableProps): ReactElement => {
+  const { ledger } = getFragmentData(ChargeLedgerRecordsTableFieldsFragmentDoc, data);
+
+  return (
+    <LedgerTable
+      ledgerRecordsData={ledger.records}
+      ledgerDiffData={ledger.validate?.differences}
+      matches={ledger.validate?.matches}
+    />
+  );
+};

package/src/components/layout/sidelinks.tsx

@@ -165,9 +165,9 @@ export const sidelinks: SideLink[] = [
         icon: <Factory size={18} />,
       },
       {
-        title: 'Business Transactions',
+        title: 'Business Ledger',
         label: '',
-        href: ROUTES.BUSINESSES.TRANSACTIONS,
+        href: ROUTES.BUSINESSES.LEDGER,
         icon: <ArrowLeftRight size={18} />,
       },
       {

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

@@ -53,7 +53,7 @@ export const columns: ColumnDef<LedgerRecordRow>[] = [
     },
   },
   {
-    header: 'Debit Account1',
+    header: 'Debit Account (Main)',
     columns: [
       {
         accessorKey: 'debitAccount1.name',
@@ -120,7 +120,7 @@ export const columns: ColumnDef<LedgerRecordRow>[] = [
     ],
   },
   {
-    header: 'Credit Account1',
+    header: 'Credit Account (Main)',
     columns: [
       {
         accessorKey: 'creditAccount1.name',
@@ -187,7 +187,7 @@ export const columns: ColumnDef<LedgerRecordRow>[] = [
     ],
   },
   {
-    header: 'Debit Account2',
+    header: 'Debit Account (Secondary)',
     columns: [
       {
         accessorKey: 'debitAccount2.name',
@@ -254,7 +254,7 @@ export const columns: ColumnDef<LedgerRecordRow>[] = [
     ],
   },
   {
-    header: 'Credit Account2',
+    header: 'Credit Account (Secondary)',
     columns: [
       {
         accessorKey: 'creditAccount2.name',

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 { 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 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,71 @@ 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">
+        <Pagination
+          value={table.getState().pagination.pageIndex}
+          total={table.getPageCount()}
+          onChange={page => table.setPageIndex(page)}
+        />
+      </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';