@accounter/client 0.0.8-alpha-20251022034712-a30a030f5a83f0dff0ee9fa8ccd0ebdaf7986647 → 0.0.8-alpha-20251022131500-0d2446e83760934b05cf2c65a8b065989f7724c8

package/src/components/layout/sidelinks.tsx

@@ -26,6 +26,7 @@ import {
   Scale,
   Tags,
 } from 'lucide-react';
+import { ROUTES } from '../../router/routes.js';
 
 export interface NavLink {
   title: string;
@@ -49,19 +50,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'All Charges',
         label: '',
-        href: '/charges',
+        href: ROUTES.CHARGES.ALL,
         icon: <Receipt size={18} />,
       },
       {
         title: 'Missing Info Charges',
         label: '',
-        href: '/charges/missing-info',
+        href: ROUTES.CHARGES.MISSING_INFO,
         icon: <RectangleEllipsis size={18} />,
       },
       {
         title: 'Ledger Validation',
         label: '',
-        href: '/charges/ledger-validation',
+        href: ROUTES.CHARGES.LEDGER_VALIDATION,
         icon: <BookOpenCheck size={18} />,
       },
     ],
@@ -75,73 +76,73 @@ export const sidelinks: SideLink[] = [
       {
         title: 'VAT Monthly Report',
         label: '',
-        href: '/reports/vat-monthly',
+        href: ROUTES.REPORTS.VAT_MONTHLY,
         icon: <Receipt size={18} />,
       },
       {
         title: 'Trial Balance Report',
         label: '',
-        href: '/reports/trial-balance',
+        href: ROUTES.REPORTS.TRIAL_BALANCE,
         icon: <Scale size={18} />,
       },
       {
         title: 'Conto Report',
         label: '',
-        href: '/reports/conto',
+        href: ROUTES.REPORTS.CONTO,
         icon: <Puzzle size={18} />,
       },
       {
         title: 'Profit and Loss Report',
         label: '',
-        href: '/reports/profit-and-loss',
+        href: ROUTES.REPORTS.PROFIT_AND_LOSS(),
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Tax Report',
         label: '',
-        href: '/reports/tax',
+        href: ROUTES.REPORTS.TAX(),
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Corporate Tax Ruling Compliance Report',
         label: '',
-        href: '/reports/corporate-tax-ruling-compliance',
+        href: ROUTES.REPORTS.CORPORATE_TAX_RULING_COMPLIANCE(),
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Depreciation Report',
         label: '',
-        href: '/reports/depreciation',
+        href: ROUTES.REPORTS.DEPRECIATION,
         icon: <ChartColumnDecreasing size={18} />,
       },
       {
         title: 'Shaam 6111 Report',
         label: '',
-        href: '/reports/shaam6111',
+        href: ROUTES.REPORTS.SHAAM_6111,
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Accountant Approvals',
         label: '',
-        href: '/accountant-approvals',
+        href: ROUTES.ACCOUNTANT_APPROVALS,
         icon: <Calculator size={18} />,
       },
       {
         title: 'Yearly Ledger Report',
         label: '',
-        href: '/reports/yearly-ledger',
+        href: ROUTES.REPORTS.YEARLY_LEDGER,
         icon: <Rows4 size={18} />,
       },
       {
         title: 'Transactions Balance',
         label: '',
-        href: '/reports/balance',
+        href: ROUTES.REPORTS.BALANCE,
         icon: <ChartNoAxesCombined size={18} />,
       },
       {
         title: 'Validate Reports',
         label: '',
-        href: '/reports/validate-reports',
+        href: ROUTES.REPORTS.VALIDATE_REPORTS,
         icon: <CheckCheck size={18} />,
       },
       {
@@ -160,25 +161,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Businesses',
         label: '',
-        href: '/businesses',
+        href: ROUTES.BUSINESSES.ALL,
         icon: <Factory size={18} />,
       },
       {
         title: 'Business Transactions',
         label: '',
-        href: '/businesses/transactions',
+        href: ROUTES.BUSINESSES.TRANSACTIONS,
         icon: <ArrowLeftRight size={18} />,
       },
       {
         title: 'Tax Categories',
         label: '',
-        href: '/tax-categories',
+        href: ROUTES.TAX_CATEGORIES,
         icon: <ArrowDown01 size={18} />,
       },
       {
         title: 'Sort Codes',
         label: '',
-        href: '/sort-codes',
+        href: ROUTES.SORT_CODES,
         icon: <Book size={18} />,
       },
     ],
@@ -190,7 +191,7 @@ export const sidelinks: SideLink[] = [
     icon: <Files size={18} />,
     sub: [
       {
-        href: '/documents',
+        href: ROUTES.DOCUMENTS.ALL,
         title: 'All Documents',
         label: '',
         icon: <Files size={18} />,
@@ -198,19 +199,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Issue Documents',
         label: '',
-        href: '/documents/issue-documents',
+        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENTS,
         icon: <FilePen size={18} />,
       },
       {
         title: 'Issue Document',
         label: '',
-        href: '/documents/issue-document',
+        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENT,
         icon: <FilePen size={18} />,
       },
     ],
   },
   {
-    href: '/business-trips',
+    href: ROUTES.BUSINESS_TRIPS.ALL,
     title: 'Business Trips',
     label: '',
     icon: <PlaneTakeoff size={18} />,
@@ -224,25 +225,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Main',
         label: '',
-        href: '/charts/',
+        href: ROUTES.CHARTS.MAIN,
         icon: <BarChartBig size={18} />,
       },
       {
         title: 'Monthly Income/Expense',
         label: '',
-        href: '/charts/monthly-income-expense',
+        href: ROUTES.CHARTS.MONTHLY_INCOME_EXPENSE,
         icon: <BarChartBig size={18} />,
       },
     ],
   },
   {
-    href: '/salaries',
+    href: ROUTES.SALARIES,
     title: 'Salaries',
     label: '',
     icon: <BadgeDollarSign size={18} />,
   },
   {
-    href: '/tags',
+    href: ROUTES.TAGS,
     title: 'Tags',
     label: '',
     icon: <Tags size={18} />,

package/src/components/ledger-table/counterparty-cell.tsx

@@ -1,5 +1,5 @@
 import { useCallback, type ReactElement } from 'react';
-import { NavLink } from '@mantine/core';
+import { Link } from 'react-router-dom';
 import type { ChargeFilter } from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../business-transactions/index.js';
@@ -50,21 +50,27 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
       {(account || isAccountDiff) && (
         <>
           {account && (
-            <a href={getHref(account.id)} target="_blank" rel="noreferrer">
-              <NavLink
-                label={account.name}
-                className={`[&>*>.mantine-NavLink-label]:font-semibold ${isAccountDiff ? 'line-through' : ''}`}
-              />
-            </a>
+            <Link
+              to={getHref(account.id)}
+              target="_blank"
+              rel="noreferrer"
+              onClick={event => event.stopPropagation()}
+              className={`inline-flex items-center font-semibold ${isAccountDiff ? 'line-through' : ''}`}
+            >
+              {account.name}
+            </Link>
           )}
           {isAccountDiff && diffAccount && (
             <div className="border-2 border-yellow-500 rounded-md">
-              <a href={getHref(diffAccount.id)} target="_blank" rel="noreferrer">
-                <NavLink
-                  label={diffAccount.name}
-                  className="[&>*>.mantine-NavLink-label]:font-semibold"
-                />
-              </a>
+              <Link
+                to={getHref(diffAccount.id)}
+                target="_blank"
+                rel="noreferrer"
+                onClick={event => event.stopPropagation()}
+                className="inline-flex items-center font-semibold"
+              >
+                {diffAccount.name}
+              </Link>
             </div>
           )}
         </>

package/src/components/login-page.tsx

@@ -5,6 +5,7 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AuthContext } from '../providers/auth-guard.js';
+import { ROUTES } from '../router/routes.js';
 import { Button } from './ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form.js';
 import { Input } from './ui/input.js';
@@ -32,7 +33,7 @@ export function LoginPage(): ReactElement {
   function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       authService.login(values.username, values.password).then(_user => {
-        navigate('/');
+        navigate(ROUTES.HOME);
       });
       toast.success('Success', {
         description: 'You have successfully logged in.',

package/src/components/reports/corporate-tax-ruling-compliance-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Indicator, Table, Tooltip } from '@mantine/core';
 import { CorporateTaxRulingComplianceReportDocument, Currency } from '../../../gql/graphql.js';
@@ -109,10 +109,10 @@ function multipleOptionalFormatter(amounts: number[], currency: Currency) {
 }
 
 export const CorporateTaxRulingComplianceReport = (): ReactElement => {
-  const match = useMatch('/reports/corporate-tax-ruling-compliance/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [years, setYears] = useState<number[]>(
-    (match ? [Number(match.params.year)] : undefined) ?? [new Date().getFullYear()],
+    yearFromUrl ? [Number(yearFromUrl)] : [new Date().getFullYear()],
   );
 
   // fetch data

package/src/components/reports/profit-and-loss-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Table } from '@mantine/core';
 import { ProfitAndLossReportDocument } from '../../../gql/graphql.js';
@@ -135,10 +135,10 @@ import { ProfitAndLossReportFilter } from './profit-and-loss-report-filters.js';
 `;
 
 export const ProfitAndLossReport = (): ReactElement => {
-  const match = useMatch('/reports/profit-and-loss/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    (match ? Number(match.params.year) : undefined) ?? new Date().getFullYear(),
+    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
   );
   const [referenceYears, setReferenceYears] = useState<number[]>([]);
 

package/src/components/reports/tax-report/index.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2 } from 'lucide-react';
-import { useMatch } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import { Table } from '@mantine/core';
 import { TaxReportDocument } from '../../../gql/graphql.js';
@@ -140,10 +140,10 @@ import { TaxReportFilter } from './tax-report-filters.js';
 `;
 
 export const TaxReport = (): ReactElement => {
-  const match = useMatch('/reports/tax/:year');
+  const { year: yearFromUrl } = useParams<{ year: string }>();
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    (match ? Number(match.params.year) : undefined) ?? new Date().getFullYear(),
+    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
   );
   const [referenceYears, setReferenceYears] = useState<number[]>([]);
 

package/src/components/screens/businesses/business.tsx

@@ -1,8 +1,8 @@
 import { type ReactElement } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useLoaderData, useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
 import Business from '@/components/business/index.js';
-import { BusinessScreenDocument } from '../../../gql/graphql.js';
+import { BusinessScreenDocument, type BusinessScreenQuery } from '../../../gql/graphql.js';
 import { AccounterLoader } from '../../common/index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -20,25 +20,37 @@ export function getBusinessHref(businessId: string): string {
 }
 
 export const BusinessScreen = (): ReactElement => {
-  const match = useMatch('/businesses/:businessId');
-
-  const businessId = match?.params.businessId;
+  const { businessId } = useParams<{ businessId: string }>();
+
+  // Try to get loader data (will be available when navigating via router)
+  let loaderData: BusinessScreenQuery | undefined;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    loaderData = useLoaderData() as BusinessScreenQuery;
+  } catch {
+    // No loader data - fallback to query
+  }
 
+  // Only fetch if we don't have loader data
   const [{ data, fetching }, fetchBusiness] = useQuery({
     query: BusinessScreenDocument,
-    pause: !businessId,
+    pause: !businessId || !!loaderData,
     variables: {
       businessId: businessId ?? '',
     },
   });
 
-  if (fetching && !data?.business) {
+  // Use loader data if available, otherwise use query data
+  const businessData = loaderData || data;
+  const isLoading = !loaderData && fetching;
+
+  if (isLoading && !businessData?.business) {
     return <AccounterLoader />;
   }
 
-  if (!businessId || !data?.business) {
+  if (!businessId || !businessData?.business) {
     return <div>Business not found</div>;
   }
 
-  return <Business data={data.business} refetchBusiness={async () => fetchBusiness()} />;
+  return <Business data={businessData.business} refetchBusiness={async () => fetchBusiness()} />;
 };

package/src/components/screens/charges/charge.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { useMatch } from 'react-router-dom';
+import { useLoaderData, useParams } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { ChargeScreenDocument } from '../../../gql/graphql.js';
+import { ChargeScreenDocument, type ChargeScreenQuery } from '../../../gql/graphql.js';
 import { ChargesTable } from '../../charges/charges-table.js';
 import {
   AccounterLoader,
@@ -29,9 +29,17 @@ type Props = {
 };
 
 export const Charge = ({ chargeId }: Props): ReactElement => {
-  const match = useMatch('/charges/:chargeId');
+  const { chargeId: chargeIdFromUrl } = useParams<{ chargeId: string }>();
+  const id = chargeId || chargeIdFromUrl;
 
-  const id = chargeId || match?.params.chargeId;
+  // Try to get loader data (will be available when navigating via router)
+  let loaderData: ChargeScreenQuery | undefined;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    loaderData = useLoaderData() as ChargeScreenQuery;
+  } catch {
+    // No loader data - component used outside router context (e.g., as child component)
+  }
 
   const [editChargeId, setEditChargeId] = useState<
     { id: string; onChange: () => void } | undefined
@@ -43,19 +51,24 @@ export const Charge = ({ chargeId }: Props): ReactElement => {
     undefined,
   );
 
+  // Only fetch if we don't have loader data and need to fetch (prop-based usage)
   const [{ data, fetching }, fetchCharge] = useQuery({
     query: ChargeScreenDocument,
-    pause: !id,
+    pause: !id || !!loaderData,
     variables: {
       chargeId: id ?? '',
     },
   });
 
   useEffect(() => {
-    if (id) {
+    if (id && !loaderData) {
       fetchCharge();
     }
-  }, [id, fetchCharge]);
+  }, [id, loaderData, fetchCharge]);
+
+  // Use loader data if available, otherwise use query data
+  const chargeData = loaderData || data;
+  const isLoading = !loaderData && fetching;
 
   if (!id) {
     return <div>Charge not found</div>;
@@ -63,14 +76,14 @@ export const Charge = ({ chargeId }: Props): ReactElement => {
 
   return (
     <>
-      {fetching ? (
+      {isLoading ? (
         <AccounterLoader />
       ) : (
         <ChargesTable
           setEditChargeId={setEditChargeId}
           setInsertDocument={setInsertDocument}
           setMatchDocuments={setMatchDocuments}
-          data={data?.charge ? [data.charge] : []}
+          data={chargeData?.charge ? [chargeData.charge] : []}
           isAllOpened
         />
       )}

package/src/components/transactions-table/cells/counterparty.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState, type ReactElement } from 'react';
 import { CheckIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import type { ChargeFilter } from '../../../gql/graphql.js';
 import { useGetBusinesses } from '../../../hooks/use-get-businesses.js';
 import { useUpdateTransaction } from '../../../hooks/use-update-transaction.js';
@@ -85,9 +86,15 @@ export function Counterparty({ transaction, onChange }: Props): ReactElement {
     <>
       <div className="flex flex-wrap flex-col justify-center">
         {counterparty?.id ? (
-          <a href={getHref(counterparty.id)} target="_blank" rel="noreferrer">
+          <Link
+            to={getHref(counterparty.id)}
+            target="_blank"
+            rel="noreferrer"
+            onClick={event => event.stopPropagation()}
+            className="inline-flex items-center font-semibold"
+          >
             {name}
-          </a>
+          </Link>
         ) : (
           <>
             <SelectWithSearch

package/src/components/transactions-table/cells-legacy/counterparty.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState, type ReactElement } from 'react';
 import { CheckIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import {
   TransactionsTableEntityFieldsFragmentDoc,
   type ChargeFilter,
@@ -106,9 +107,15 @@ export function Counterparty({ data, onChange, enableEdit }: Props): ReactElemen
     <td>
       <div className="flex flex-wrap gap-1 items-center justify-center">
         {counterparty?.id ? (
-          <a href={getHref(counterparty.id)} target="_blank" rel="noreferrer">
+          <Link
+            to={getHref(counterparty.id)}
+            target="_blank"
+            rel="noreferrer"
+            onClick={event => event.stopPropagation()}
+            className="inline-flex items-center font-semibold"
+          >
             {name}
-          </a>
+          </Link>
         ) : (
           <>
             <SelectWithSearch

package/src/index.tsx

@@ -1,32 +1,14 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
-import { App } from './app.js';
-import { Providers } from './providers/index.js';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { routes } from './router/config.js';
 import './index.css';
 
 const rootElement = document.getElementById('root');
-
 const root = createRoot(rootElement!);
 
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route
-      path="*"
-      element={
-        <Providers>
-          <App />
-        </Providers>
-      }
-      errorElement={<p>error</p>} // TODO: implement
-    />,
-  ),
-);
+// Create router with object-based configuration
+const router = createBrowserRouter(routes);
 
 root.render(
   <StrictMode>

package/src/providers/auth-guard.tsx

@@ -1,7 +1,4 @@
-import { createContext, useEffect, useState, type ReactNode } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
-import { NetworkError } from '@/components/screens/network-error.js';
-import { LoginPage } from '../components/login-page.js';
+import { createContext, useMemo, useState, type ReactNode } from 'react';
 import { UserService } from '../services/user-service.js';
 
 type ContextType = {
@@ -14,25 +11,19 @@ export const AuthContext = createContext<ContextType>({
   setAuthService: () => void 0,
 });
 
-export const AuthGuard = ({ children }: { children?: ReactNode }): ReactNode => {
-  const [authService, setAuthService] = useState<UserService>(new UserService());
-  const navigate = useNavigate();
+/**
+ * AuthProvider - provides authentication context
+ * Auth routing logic is now handled by route loaders
+ */
+export const AuthProvider = ({ children }: { children?: ReactNode }): ReactNode => {
+  // Use lazy initialization to prevent creating new UserService on every render
+  const [authService, setAuthService] = useState<UserService>(() => new UserService());
 
-  const loggedIn = authService.isLoggedIn();
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => ({ authService, setAuthService }), [authService]);
 
-  useEffect(() => {
-    if (!loggedIn) {
-      navigate('/login');
-    }
-  }, [loggedIn, navigate]);
-
-  return (
-    <AuthContext.Provider value={{ authService, setAuthService }}>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/network-error" element={<NetworkError />} />
-        <Route path="*" element={children} />
-      </Routes>
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
 };
+
+// Keep AuthGuard as alias for backwards compatibility
+export const AuthGuard = AuthProvider;

package/src/providers/index.tsx

@@ -5,9 +5,14 @@ import { red } from '@mui/material/colors';
 import { createTheme } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from '../components/ui/sonner.js';
-import { AuthGuard } from './auth-guard.js';
+import { AuthContext, AuthGuard, AuthProvider } from './auth-guard.js';
 import { UrqlProvider } from './urql.js';
-import { UserProvider } from './user-provider.js';
+import { UserContext, UserProvider, type UserInfo } from './user-provider.js';
+
+export { AuthGuard, AuthProvider, AuthContext };
+export { FiltersContext } from './filters-context.js';
+export { UrqlProvider };
+export { UserProvider, UserContext, type UserInfo };
 
 const queryClient = new QueryClient();