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

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

@@ -9,29 +9,29 @@ import { type BusinessTransactionsFilter } from '../../gql/graphql.js';
 import { isObjectEmpty, TIMELESS_DATE_REGEX } from '../../helpers/index.js';
 import { useGetBusinesses } from '../../hooks/use-get-businesses.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
-import { UserContext } from '../../providers/user-provider.js';
+import { UserContext } from '../../providers/user-provider.jsx';
 import { PopUpModal } from '../common/index.js';
-import { Button } from '../ui/button.js';
+import { Button } from '../ui/button.jsx';
 
-export function encodeTransactionsFilters(
+export function encodeLedgerRecordsFilters(
   filter?: BusinessTransactionsFilter | null,
 ): string | null {
   return !filter || isObjectEmpty(filter) ? null : encodeURIComponent(JSON.stringify(filter));
 }
 
-interface BusinessTransactionsFilterFormProps {
+interface BusinessLedgerRecordsFilterFormProps {
   filter: BusinessTransactionsFilter;
   setFilter: (filter: BusinessTransactionsFilter) => void;
   closeModal: () => void;
   single?: boolean;
 }
 
-function BusinessTransactionsFilterForm({
+function BusinessLedgerRecordsFilterForm({
   filter,
   setFilter,
   closeModal,
   single = false,
-}: BusinessTransactionsFilterFormProps): ReactElement {
+}: BusinessLedgerRecordsFilterFormProps): ReactElement {
   const { control, handleSubmit } = useForm<BusinessTransactionsFilter>({
     defaultValues: { ...filter },
   });
@@ -199,15 +199,15 @@ function BusinessTransactionsFilterForm({
   );
 }
 
-interface BusinessTransactionsFilterProps {
+interface BusinessLedgerRecordsFilterProps {
   filter: BusinessTransactionsFilter;
   setFilter: (filter: BusinessTransactionsFilter) => void;
 }
 
-export function BusinessTransactionsFilters({
+export function BusinessLedgerRecordsFilters({
   filter,
   setFilter,
-}: BusinessTransactionsFilterProps): ReactElement {
+}: BusinessLedgerRecordsFilterProps): ReactElement {
   const [opened, setOpened] = useState(false);
   const [isFiltered, setIsFiltered] = useState(!isObjectEmpty(filter));
   const { get, set } = useUrlQuery();
@@ -232,9 +232,9 @@ export function BusinessTransactionsFilters({
   // update url on filter change
   useEffect(() => {
     const newFilter = isObjectEmpty(filter) ? null : encodeURIComponent(JSON.stringify(filter));
-    const oldFilter = get('transactionsFilters');
+    const oldFilter = get('ledgerRecordsFilters');
     if (newFilter !== oldFilter) {
-      set('transactionsFilters', newFilter);
+      set('ledgerRecordsFilters', newFilter);
     }
   }, [filter, get, set]);
 
@@ -244,7 +244,7 @@ export function BusinessTransactionsFilters({
         opened={opened}
         onClose={(): void => setOpened(false)}
         content={
-          <BusinessTransactionsFilterForm
+          <BusinessLedgerRecordsFilterForm
             single
             filter={filter}
             setFilter={onSetFilter}

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

@@ -3,31 +3,31 @@ import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Mark } from '@mantine/core';
 import {
-  BusinessTransactionsSummeryDocument,
+  BusinessLedgerRecordsSummeryDocument,
   Currency,
+  type BusinessLedgerRecordsSummeryQuery,
   type BusinessTransactionsFilter,
-  type BusinessTransactionsSummeryQuery,
 } from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { FiltersContext } from '../../providers/filters-context.js';
 import { AccounterLoader, AccounterTable } from '../common/index.js';
 import { BusinessExtendedInfo } from './business-extended-info.js';
-import { BusinessTransactionsFilters } from './business-transactions-filters.js';
+import { BusinessLedgerRecordsFilters } from './business-ledger-filters.js';
 
 type Props = {
   businessId?: string;
 };
 
-export const BusinessTransactionsSingle = ({ businessId }: Props): ReactElement => {
+export const BusinessLedgerRecordsSingle = ({ businessId }: Props): ReactElement => {
   const { businessId: businessIdFromUrl } = useParams<{ businessId: string }>();
   const { get } = useUrlQuery();
   const { setFiltersContext } = useContext(FiltersContext);
   const id = businessId || businessIdFromUrl;
   const [filter, setFilter] = useState<BusinessTransactionsFilter>(
-    get('transactionsFilters')
+    get('ledgerRecordsFilters')
       ? {
           ...(JSON.parse(
-            decodeURIComponent(get('transactionsFilters') as string),
+            decodeURIComponent(get('ledgerRecordsFilters') as string),
           ) as BusinessTransactionsFilter),
           businessIDs: id ? [id] : [],
         }
@@ -36,17 +36,17 @@ export const BusinessTransactionsSingle = ({ businessId }: Props): ReactElement
         },
   );
   const [{ data, fetching }] = useQuery({
-    query: BusinessTransactionsSummeryDocument,
+    query: BusinessLedgerRecordsSummeryDocument,
     variables: {
       filters: filter,
     },
   });
 
   useEffect(() => {
-    setFiltersContext(<BusinessTransactionsFilters filter={filter} setFilter={setFilter} />);
+    setFiltersContext(<BusinessLedgerRecordsFilters filter={filter} setFilter={setFilter} />);
   }, [data, filter, setFiltersContext, setFilter]);
 
-  const businessTransactionsSum = useMemo(() => {
+  const businessLedgerRecordsSum = useMemo(() => {
     if (data?.businessTransactionsSumFromLedgerRecords.__typename === 'CommonError') {
       return [];
     }
@@ -68,7 +68,7 @@ export const BusinessTransactionsSingle = ({ businessId }: Props): ReactElement
       striped
       highlightOnHover
       stickyHeader
-      items={businessTransactionsSum}
+      items={businessLedgerRecordsSum}
       columns={[
         {
           title: 'Business Name',
@@ -106,14 +106,14 @@ export const BusinessTransactionsSingle = ({ businessId }: Props): ReactElement
   );
 };
 
-type BusinessTransactionsSum = Extract<
-  BusinessTransactionsSummeryQuery['businessTransactionsSumFromLedgerRecords'],
+type BusinessLedgerRecordsSum = Extract<
+  BusinessLedgerRecordsSummeryQuery['businessTransactionsSumFromLedgerRecords'],
   { businessTransactionsSum: unknown }
 >['businessTransactionsSum'][number];
 
 type CellInfo = {
   title: ReactNode;
-  value: (data: BusinessTransactionsSum) => string | ReactNode;
+  value: (data: BusinessLedgerRecordsSum) => string | ReactNode;
   style?: React.CSSProperties;
 };
 

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

@@ -3,47 +3,47 @@ import { format } from 'date-fns';
 import { Currency } from '../../gql/graphql.js';
 import { currencyCodeToSymbol, type TimelessDateString } from '../../helpers/index.js';
 import { DownloadCSVButton } from '../common/index.js';
-import type { ExtendedTransaction } from './business-extended-info.js';
+import type { ExtendedLedger } from './business-extended-info.js';
 
 interface Props {
-  transactions: Array<ExtendedTransaction>;
+  ledgerRecords: Array<ExtendedLedger>;
   businessName: string;
   fromDate?: TimelessDateString;
   toDate?: TimelessDateString;
 }
 
 export const DownloadCSV = ({
-  transactions,
+  ledgerRecords,
   businessName,
   fromDate,
   toDate,
 }: Props): ReactElement => {
   const createFileVariables = useCallback(async () => {
-    const csvData = convertToCSV(transactions);
-    const fileName = `business_${businessName}_transactions${fromDate ? `_${fromDate}` : ''}${toDate ? `_${toDate}` : ''}`;
+    const csvData = convertToCSV(ledgerRecords);
+    const fileName = `business_${businessName}_ledger_records${fromDate ? `_${fromDate}` : ''}${toDate ? `_${toDate}` : ''}`;
     return {
       fileName,
       fileContent: csvData,
     };
-  }, [transactions, businessName, fromDate, toDate]);
+  }, [ledgerRecords, businessName, fromDate, toDate]);
 
   return <DownloadCSVButton createFileVariables={createFileVariables} />;
 };
 
-const convertToCSV = (transactions: Array<ExtendedTransaction>): string => {
+const convertToCSV = (ledgerRecords: Array<ExtendedLedger>): string => {
   let csvString = '';
 
   const currencies = Array.from(
     new Set(
-      transactions.filter(t => t.foreignAmount?.currency).map(t => t.foreignAmount!.currency),
+      ledgerRecords.filter(t => t.foreignAmount?.currency).map(t => t.foreignAmount!.currency),
     ),
   );
 
   csvString += `Sorting Date,Date,Amount,Amount Balance,${getHeadersFromForeignCurrencies(currencies)}Reference,Details,Counter Account\r\n`;
 
-  for (const transaction of transactions) {
-    const stringifiedTransaction = handleTransaction(transaction, currencies);
-    csvString += stringifiedTransaction;
+  for (const record of ledgerRecords) {
+    const stringifiedRecord = handleLedgerRecord(record, currencies);
+    csvString += stringifiedRecord;
   }
 
   return csvString;
@@ -59,13 +59,13 @@ function getHeadersFromForeignCurrencies(currencies: Array<Currency>): string {
 }
 
 function getAmountsFromForeignCurrencies(
-  transaction: ExtendedTransaction,
+  ledgerRecord: ExtendedLedger,
   currencies: Array<Currency>,
 ): string {
   let amounts = '';
   currencies.map(currency => {
-    if (transaction.foreignAmount && transaction.foreignAmount.currency === currency) {
-      amounts += `${transaction.foreignAmount.raw},${transaction[`${currency.toLowerCase()}Balance` as keyof ExtendedTransaction] ?? 0},`;
+    if (ledgerRecord.foreignAmount && ledgerRecord.foreignAmount.currency === currency) {
+      amounts += `${ledgerRecord.foreignAmount.raw},${ledgerRecord[`${currency.toLowerCase()}Balance` as keyof ExtendedLedger] ?? 0},`;
     } else {
       amounts += ',,';
     }
@@ -73,21 +73,21 @@ function getAmountsFromForeignCurrencies(
   return amounts;
 }
 
-function handleTransaction(transaction: ExtendedTransaction, currencies: Array<Currency>): string {
-  let transactionString = '';
+function handleLedgerRecord(ledgerRecord: ExtendedLedger, currencies: Array<Currency>): string {
+  let ledgerRecordString = '';
 
-  const sortingDate = transaction.invoiceDate
-    ? format(new Date(transaction.invoiceDate), 'yyy-MM-dd')
+  const sortingDate = ledgerRecord.invoiceDate
+    ? format(new Date(ledgerRecord.invoiceDate), 'yyy-MM-dd')
     : null;
-  const date = transaction.invoiceDate
-    ? format(new Date(transaction.invoiceDate), 'dd/MM/yy')
+  const date = ledgerRecord.invoiceDate
+    ? format(new Date(ledgerRecord.invoiceDate), 'dd/MM/yy')
     : null;
-  const ilsAmount = transaction.amount.raw;
-  const { ilsBalance, reference, details } = transaction;
-  const counterAccount = transaction.counterAccount?.name ?? '';
+  const ilsAmount = ledgerRecord.amount.raw;
+  const { ilsBalance, reference, details } = ledgerRecord;
+  const counterAccount = ledgerRecord.counterAccount?.name ?? '';
 
-  transactionString += `${sortingDate},${date},${ilsAmount},${ilsBalance},${getAmountsFromForeignCurrencies(transaction, currencies)}${sanitizeString(reference ?? '')},${sanitizeString(details ?? '')},${sanitizeString(counterAccount)},\r\n`;
-  return transactionString;
+  ledgerRecordString += `${sortingDate},${date},${ilsAmount},${ilsBalance},${getAmountsFromForeignCurrencies(ledgerRecord, currencies)}${sanitizeString(reference ?? '')},${sanitizeString(details ?? '')},${sanitizeString(counterAccount)},\r\n`;
+  return ledgerRecordString;
 }
 
 function sanitizeString(content: string | number): string {

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',