@accounter/client 0.0.8-alpha-20251021225827-178e480c997a9811913e16f85cb94329041b096e → 0.0.8-alpha-20251022034712-a30a030f5a83f0dff0ee9fa8ccd0ebdaf7986647

package/src/components/documents-table/cells/debtor.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState, type ReactElement } from 'react';
-import { Link } from 'react-router-dom';
 import { useGetBusinesses } from '@/hooks/use-get-businesses.js';
-import { Indicator } from '@mantine/core';
+import { Indicator, NavLink } from '@mantine/core';
 import { DocumentType } from '../../../gql/graphql.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
 import { useUrlQuery } from '../../../hooks/use-url-query.js';
@@ -101,15 +100,9 @@ export const Debtor = ({ document, onChange }: Props): ReactElement => {
         <Indicator inline size={12} disabled={!isError} color="red" zIndex="auto">
           {shouldHaveDebtor &&
             (id ? (
-              <Link
-                to={getHref(id)}
-                target="_blank"
-                rel="noreferrer"
-                onClick={event => event.stopPropagation()}
-                className="inline-flex items-center font-semibold"
-              >
-                {name}
-              </Link>
+              <a href={getHref(id)} target="_blank" rel="noreferrer">
+                <NavLink label={name} className="[&>*>.mantine-NavLink-label]:font-semibold" />
+              </a>
             ) : (
               <SelectWithSearch
                 options={selectableBusinesses}

package/src/components/layout/dashboard-layout.tsx

@@ -1,9 +1,7 @@
 import type { ReactElement } from 'react';
 import { useSidebar } from '../../hooks/use-sidebar.js';
-import { Breadcrumbs } from './breadcrumbs.js';
 import { Footer } from './footer.js';
 import { Header } from './header.js';
-import { NavigationProgress } from './navigation-progress.js';
 import { Sidebar } from './sidebar.js';
 
 type DashboardLayoutProps = {
@@ -16,14 +14,12 @@ export function DashboardLayout({ children, filtersContext }: DashboardLayoutPro
 
   return (
     <main>
-      <NavigationProgress />
       <Header />
       <div className="flex h-screen overflow-hidden bg-gray-100">
         <Sidebar />
         <div
           className={`overflow-scroll flex flex-col justify-start gap-10 z-0 my-20 pl-10 flex-1 ${isMinimized ? 'pr-10' : 'pr-5'} transition-all`}
         >
-          <Breadcrumbs />
           {children}
         </div>
       </div>

package/src/components/layout/sidelinks.tsx

@@ -26,7 +26,6 @@ import {
   Scale,
   Tags,
 } from 'lucide-react';
-import { ROUTES } from '../../router/routes.js';
 
 export interface NavLink {
   title: string;
@@ -50,19 +49,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'All Charges',
         label: '',
-        href: ROUTES.CHARGES.ALL,
+        href: '/charges',
         icon: <Receipt size={18} />,
       },
       {
         title: 'Missing Info Charges',
         label: '',
-        href: ROUTES.CHARGES.MISSING_INFO,
+        href: '/charges/missing-info',
         icon: <RectangleEllipsis size={18} />,
       },
       {
         title: 'Ledger Validation',
         label: '',
-        href: ROUTES.CHARGES.LEDGER_VALIDATION,
+        href: '/charges/ledger-validation',
         icon: <BookOpenCheck size={18} />,
       },
     ],
@@ -76,73 +75,73 @@ export const sidelinks: SideLink[] = [
       {
         title: 'VAT Monthly Report',
         label: '',
-        href: ROUTES.REPORTS.VAT_MONTHLY,
+        href: '/reports/vat-monthly',
         icon: <Receipt size={18} />,
       },
       {
         title: 'Trial Balance Report',
         label: '',
-        href: ROUTES.REPORTS.TRIAL_BALANCE,
+        href: '/reports/trial-balance',
         icon: <Scale size={18} />,
       },
       {
         title: 'Conto Report',
         label: '',
-        href: ROUTES.REPORTS.CONTO,
+        href: '/reports/conto',
         icon: <Puzzle size={18} />,
       },
       {
         title: 'Profit and Loss Report',
         label: '',
-        href: ROUTES.REPORTS.PROFIT_AND_LOSS(),
+        href: '/reports/profit-and-loss',
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Tax Report',
         label: '',
-        href: ROUTES.REPORTS.TAX(),
+        href: '/reports/tax',
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Corporate Tax Ruling Compliance Report',
         label: '',
-        href: ROUTES.REPORTS.CORPORATE_TAX_RULING_COMPLIANCE(),
+        href: '/reports/corporate-tax-ruling-compliance',
         icon: <ParkingMeter size={18} />,
       },
       {
         title: 'Depreciation Report',
         label: '',
-        href: ROUTES.REPORTS.DEPRECIATION,
+        href: '/reports/depreciation',
         icon: <ChartColumnDecreasing size={18} />,
       },
       {
         title: 'Shaam 6111 Report',
         label: '',
-        href: ROUTES.REPORTS.SHAAM_6111,
+        href: '/reports/shaam6111',
         icon: <HandCoins size={18} />,
       },
       {
         title: 'Accountant Approvals',
         label: '',
-        href: ROUTES.ACCOUNTANT_APPROVALS,
+        href: '/accountant-approvals',
         icon: <Calculator size={18} />,
       },
       {
         title: 'Yearly Ledger Report',
         label: '',
-        href: ROUTES.REPORTS.YEARLY_LEDGER,
+        href: '/reports/yearly-ledger',
         icon: <Rows4 size={18} />,
       },
       {
         title: 'Transactions Balance',
         label: '',
-        href: ROUTES.REPORTS.BALANCE,
+        href: '/reports/balance',
         icon: <ChartNoAxesCombined size={18} />,
       },
       {
         title: 'Validate Reports',
         label: '',
-        href: ROUTES.REPORTS.VALIDATE_REPORTS,
+        href: '/reports/validate-reports',
         icon: <CheckCheck size={18} />,
       },
       {
@@ -161,25 +160,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Businesses',
         label: '',
-        href: ROUTES.BUSINESSES.ALL,
+        href: '/businesses',
         icon: <Factory size={18} />,
       },
       {
         title: 'Business Transactions',
         label: '',
-        href: ROUTES.BUSINESSES.TRANSACTIONS,
+        href: '/businesses/transactions',
         icon: <ArrowLeftRight size={18} />,
       },
       {
         title: 'Tax Categories',
         label: '',
-        href: ROUTES.TAX_CATEGORIES,
+        href: '/tax-categories',
         icon: <ArrowDown01 size={18} />,
       },
       {
         title: 'Sort Codes',
         label: '',
-        href: ROUTES.SORT_CODES,
+        href: '/sort-codes',
         icon: <Book size={18} />,
       },
     ],
@@ -191,7 +190,7 @@ export const sidelinks: SideLink[] = [
     icon: <Files size={18} />,
     sub: [
       {
-        href: ROUTES.DOCUMENTS.ALL,
+        href: '/documents',
         title: 'All Documents',
         label: '',
         icon: <Files size={18} />,
@@ -199,19 +198,19 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Issue Documents',
         label: '',
-        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENTS,
+        href: '/documents/issue-documents',
         icon: <FilePen size={18} />,
       },
       {
         title: 'Issue Document',
         label: '',
-        href: ROUTES.DOCUMENTS.ISSUE_DOCUMENT,
+        href: '/documents/issue-document',
         icon: <FilePen size={18} />,
       },
     ],
   },
   {
-    href: ROUTES.BUSINESS_TRIPS.ALL,
+    href: '/business-trips',
     title: 'Business Trips',
     label: '',
     icon: <PlaneTakeoff size={18} />,
@@ -225,25 +224,25 @@ export const sidelinks: SideLink[] = [
       {
         title: 'Main',
         label: '',
-        href: ROUTES.CHARTS.MAIN,
+        href: '/charts/',
         icon: <BarChartBig size={18} />,
       },
       {
         title: 'Monthly Income/Expense',
         label: '',
-        href: ROUTES.CHARTS.MONTHLY_INCOME_EXPENSE,
+        href: '/charts/monthly-income-expense',
         icon: <BarChartBig size={18} />,
       },
     ],
   },
   {
-    href: ROUTES.SALARIES,
+    href: '/salaries',
     title: 'Salaries',
     label: '',
     icon: <BadgeDollarSign size={18} />,
   },
   {
-    href: ROUTES.TAGS,
+    href: '/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 { Link } from 'react-router-dom';
+import { NavLink } from '@mantine/core';
 import type { ChargeFilter } from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { getBusinessTransactionsHref } from '../business-transactions/index.js';
@@ -50,27 +50,21 @@ export const CounterpartyCell = ({ account, diffAccount }: Props): ReactElement
       {(account || isAccountDiff) && (
         <>
           {account && (
-            <Link
-              to={getHref(account.id)}
-              target="_blank"
-              rel="noreferrer"
-              onClick={event => event.stopPropagation()}
-              className="inline-flex items-center font-semibold"
-            >
-              {account.name}
-            </Link>
+            <a href={getHref(account.id)} target="_blank" rel="noreferrer">
+              <NavLink
+                label={account.name}
+                className={`[&>*>.mantine-NavLink-label]:font-semibold ${isAccountDiff ? 'line-through' : ''}`}
+              />
+            </a>
           )}
           {isAccountDiff && diffAccount && (
             <div className="border-2 border-yellow-500 rounded-md">
-              <Link
-                to={getHref(diffAccount.id)}
-                target="_blank"
-                rel="noreferrer"
-                onClick={event => event.stopPropagation()}
-                className="inline-flex items-center font-semibold"
-              >
-                {diffAccount.name}
-              </Link>
+              <a href={getHref(diffAccount.id)} target="_blank" rel="noreferrer">
+                <NavLink
+                  label={diffAccount.name}
+                  className="[&>*>.mantine-NavLink-label]:font-semibold"
+                />
+              </a>
             </div>
           )}
         </>

package/src/components/login-page.tsx

@@ -5,7 +5,6 @@ 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';
@@ -33,7 +32,7 @@ export function LoginPage(): ReactElement {
   function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       authService.login(values.username, values.password).then(_user => {
-        navigate(ROUTES.HOME);
+        navigate('/');
       });
       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 { useParams } from 'react-router-dom';
+import { useMatch } 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 { year: yearFromUrl } = useParams<{ year: string }>();
+  const match = useMatch('/reports/corporate-tax-ruling-compliance/:year');
   const { setFiltersContext } = useContext(FiltersContext);
   const [years, setYears] = useState<number[]>(
-    yearFromUrl ? [Number(yearFromUrl)] : [new Date().getFullYear()],
+    (match ? [Number(match.params.year)] : undefined) ?? [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 { useParams } from 'react-router-dom';
+import { useMatch } 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 { year: yearFromUrl } = useParams<{ year: string }>();
+  const match = useMatch('/reports/profit-and-loss/:year');
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
+    (match ? Number(match.params.year) : undefined) ?? 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 { useParams } from 'react-router-dom';
+import { useMatch } 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 { year: yearFromUrl } = useParams<{ year: string }>();
+  const match = useMatch('/reports/tax/:year');
   const { setFiltersContext } = useContext(FiltersContext);
   const [year, setYear] = useState<number>(
-    yearFromUrl ? Number(yearFromUrl) : new Date().getFullYear(),
+    (match ? Number(match.params.year) : undefined) ?? 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 { useLoaderData, useParams } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 import { useQuery } from 'urql';
 import Business from '@/components/business/index.js';
-import { BusinessScreenDocument, type BusinessScreenQuery } from '../../../gql/graphql.js';
+import { BusinessScreenDocument } from '../../../gql/graphql.js';
 import { AccounterLoader } from '../../common/index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -20,37 +20,25 @@ export function getBusinessHref(businessId: string): string {
 }
 
 export const BusinessScreen = (): ReactElement => {
-  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
-  }
+  const match = useMatch('/businesses/:businessId');
+
+  const businessId = match?.params.businessId;
 
-  // Only fetch if we don't have loader data
   const [{ data, fetching }, fetchBusiness] = useQuery({
     query: BusinessScreenDocument,
-    pause: !businessId || !!loaderData,
+    pause: !businessId,
     variables: {
       businessId: businessId ?? '',
     },
   });
 
-  // Use loader data if available, otherwise use query data
-  const businessData = loaderData || data;
-  const isLoading = !loaderData && fetching;
-
-  if (isLoading && !businessData?.business) {
+  if (fetching && !data?.business) {
     return <AccounterLoader />;
   }
 
-  if (!businessId || !businessData?.business) {
+  if (!businessId || !data?.business) {
     return <div>Business not found</div>;
   }
 
-  return <Business data={businessData.business} refetchBusiness={async () => fetchBusiness()} />;
+  return <Business data={data.business} refetchBusiness={async () => fetchBusiness()} />;
 };

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

@@ -1,7 +1,7 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { useLoaderData, useParams } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { ChargeScreenDocument, type ChargeScreenQuery } from '../../../gql/graphql.js';
+import { ChargeScreenDocument } from '../../../gql/graphql.js';
 import { ChargesTable } from '../../charges/charges-table.js';
 import {
   AccounterLoader,
@@ -29,17 +29,9 @@ type Props = {
 };
 
 export const Charge = ({ chargeId }: Props): ReactElement => {
-  const { chargeId: chargeIdFromUrl } = useParams<{ chargeId: string }>();
-  const id = chargeId || chargeIdFromUrl;
+  const match = useMatch('/charges/: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 id = chargeId || match?.params.chargeId;
 
   const [editChargeId, setEditChargeId] = useState<
     { id: string; onChange: () => void } | undefined
@@ -51,24 +43,19 @@ 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 || !!loaderData,
+    pause: !id,
     variables: {
       chargeId: id ?? '',
     },
   });
 
   useEffect(() => {
-    if (id && !loaderData) {
+    if (id) {
       fetchCharge();
     }
-  }, [id, loaderData, fetchCharge]);
-
-  // Use loader data if available, otherwise use query data
-  const chargeData = loaderData || data;
-  const isLoading = !loaderData && fetching;
+  }, [id, fetchCharge]);
 
   if (!id) {
     return <div>Charge not found</div>;
@@ -76,14 +63,14 @@ export const Charge = ({ chargeId }: Props): ReactElement => {
 
   return (
     <>
-      {isLoading ? (
+      {fetching ? (
         <AccounterLoader />
       ) : (
         <ChargesTable
           setEditChargeId={setEditChargeId}
           setInsertDocument={setInsertDocument}
           setMatchDocuments={setMatchDocuments}
-          data={chargeData?.charge ? [chargeData.charge] : []}
+          data={data?.charge ? [data.charge] : []}
           isAllOpened
         />
       )}

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

@@ -1,6 +1,5 @@
 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';
@@ -86,15 +85,9 @@ export function Counterparty({ transaction, onChange }: Props): ReactElement {
     <>
       <div className="flex flex-wrap flex-col justify-center">
         {counterparty?.id ? (
-          <Link
-            to={getHref(counterparty.id)}
-            target="_blank"
-            rel="noreferrer"
-            onClick={event => event.stopPropagation()}
-            className="inline-flex items-center font-semibold"
-          >
+          <a href={getHref(counterparty.id)} target="_blank" rel="noreferrer">
             {name}
-          </Link>
+          </a>
         ) : (
           <>
             <SelectWithSearch

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

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

package/src/index.tsx

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

package/src/providers/auth-guard.tsx

@@ -1,4 +1,7 @@
-import { createContext, useMemo, useState, type ReactNode } from 'react';
+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 { UserService } from '../services/user-service.js';
 
 type ContextType = {
@@ -11,19 +14,25 @@ export const AuthContext = createContext<ContextType>({
   setAuthService: () => void 0,
 });
 
-/**
- * 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());
+export const AuthGuard = ({ children }: { children?: ReactNode }): ReactNode => {
+  const [authService, setAuthService] = useState<UserService>(new UserService());
+  const navigate = useNavigate();
 
-  // Memoize the context value to prevent unnecessary re-renders
-  const contextValue = useMemo(() => ({ authService, setAuthService }), [authService]);
+  const loggedIn = authService.isLoggedIn();
 
-  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
-};
+  useEffect(() => {
+    if (!loggedIn) {
+      navigate('/login');
+    }
+  }, [loggedIn, navigate]);
 
-// Keep AuthGuard as alias for backwards compatibility
-export const AuthGuard = AuthProvider;
+  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>
+  );
+};