@accounter/client 0.0.8-alpha-20251022130946-0923a77d2ee3f22a60a7f5b1e0623bd3bee88868 → 0.0.8-alpha-20251022131500-0d2446e83760934b05cf2c65a8b065989f7724c8

package/src/router/config.tsx

@@ -0,0 +1,534 @@
+import { lazy, Suspense, type ReactElement } from 'react';
+import type { RouteObject } from 'react-router-dom';
+import { ErrorBoundary } from '../components/error-boundary.js';
+import { PageSkeleton, ReportSkeleton, TableSkeleton } from '../components/layout/page-skeleton.js';
+import { DashboardLayoutRoute } from './layouts/dashboard-layout.js';
+import { RootLayout } from './layouts/root-layout.js';
+import { businessLoader, chargeLoader, publicOnly, requireAuth } from './loaders/index.js';
+import { ROUTES } from './routes.js';
+
+/**
+ * Lazy load page components for code splitting
+ * Components use named exports, so we need to extract them
+ */
+
+// Charges
+const AllCharges = lazy(() =>
+  import('../components/screens/charges/all-charges.js').then(m => ({ default: m.AllCharges })),
+);
+const MissingInfoCharges = lazy(() =>
+  import('../components/screens/charges/missing-info-charges.js').then(m => ({
+    default: m.MissingInfoCharges,
+  })),
+);
+const Charge = lazy(() =>
+  import('../components/screens/charges/charge.js').then(m => ({ default: m.Charge })),
+);
+const ChargesLedgerValidation = lazy(() =>
+  import('../components/charges-ledger-validation.js').then(m => ({
+    default: m.ChargesLedgerValidation,
+  })),
+);
+
+// Businesses
+const Businesses = lazy(() =>
+  import('../components/businesses/index.js').then(m => ({ default: m.Businesses })),
+);
+const BusinessScreen = lazy(() =>
+  import('../components/screens/businesses/business.js').then(m => ({ default: m.BusinessScreen })),
+);
+const BusinessTransactionsSummery = lazy(() =>
+  import('../components/business-transactions/index.js').then(m => ({
+    default: m.BusinessTransactionsSummery,
+  })),
+);
+const BusinessTransactionsSingle = lazy(() =>
+  import('../components/business-transactions/business-transactions-single.js').then(m => ({
+    default: m.BusinessTransactionsSingle,
+  })),
+);
+
+// Business Trips
+const BusinessTrips = lazy(() =>
+  import('../components/business-trips/index.js').then(m => ({ default: m.BusinessTrips })),
+);
+const BusinessTrip = lazy(() =>
+  import('../components/business-trips/business-trip.js').then(m => ({ default: m.BusinessTrip })),
+);
+
+// Charts
+const ChartPage = lazy(() =>
+  import('../components/charts/index.js').then(m => ({ default: m.ChartPage })),
+);
+const MonthlyIncomeExpenseChart = lazy(() =>
+  import('../components/charts/monthly-income-expense/index.js').then(m => ({
+    default: m.MonthlyIncomeExpenseChart,
+  })),
+);
+
+// Documents
+const DocumentsReport = lazy(() =>
+  import('../components/screens/documents/all-documents/index.jsx').then(m => ({
+    default: m.DocumentsReport,
+  })),
+);
+const IssueDocumentScreen = lazy(() =>
+  import('../components/screens/documents/issue-document.js').then(m => ({
+    default: m.IssueDocumentScreen,
+  })),
+);
+const IssueDocuments = lazy(() =>
+  import('../components/screens/documents/issue-documents/index.js').then(m => ({
+    default: m.IssueDocuments,
+  })),
+);
+
+// Reports
+const TrialBalanceReport = lazy(() =>
+  import('../components/reports/trial-balance-report/index.js').then(m => ({
+    default: m.TrialBalanceReport,
+  })),
+);
+const ContoReport = lazy(() =>
+  import('../components/reports/conto/index.js').then(m => ({ default: m.ContoReport })),
+);
+const VatMonthlyReport = lazy(() =>
+  import('../components/reports/vat-monthly-report/index.js').then(m => ({
+    default: m.VatMonthlyReport,
+  })),
+);
+const ProfitAndLossReport = lazy(() =>
+  import('../components/reports/profit-and-loss-report/index.js').then(m => ({
+    default: m.ProfitAndLossReport,
+  })),
+);
+const TaxReport = lazy(() =>
+  import('../components/reports/tax-report/index.js').then(m => ({ default: m.TaxReport })),
+);
+const DepreciationReport = lazy(() =>
+  import('../components/screens/reports/depreciation-report/index.js').then(m => ({
+    default: m.DepreciationReport,
+  })),
+);
+const Shaam6111Report = lazy(() =>
+  import('../components/screens/reports/shaam6111-report/index.js').then(m => ({
+    default: m.Shaam6111Report,
+  })),
+);
+const YearlyLedgerReport = lazy(() =>
+  import('../components/reports/yearly-ledger/index.js').then(m => ({
+    default: m.YearlyLedgerReport,
+  })),
+);
+const CorporateTaxRulingComplianceReport = lazy(() =>
+  import('../components/reports/corporate-tax-ruling-compliance-report/index.js').then(m => ({
+    default: m.CorporateTaxRulingComplianceReport,
+  })),
+);
+const BalanceReport = lazy(() =>
+  import('../components/screens/reports/balance-report/index.js').then(m => ({
+    default: m.BalanceReport,
+  })),
+);
+const ValidateReportsScreen = lazy(() =>
+  import('../components/reports/validations/index.js').then(m => ({
+    default: m.ValidateReportsScreen,
+  })),
+);
+const AccountantApprovals = lazy(() =>
+  import('../components/reports/accountant-approvals.js').then(m => ({
+    default: m.AccountantApprovals,
+  })),
+);
+
+// Other
+const Salaries = lazy(() =>
+  import('../components/salaries/index.js').then(m => ({ default: m.Salaries })),
+);
+const TagsManager = lazy(() =>
+  import('../components/tags/index.js').then(m => ({ default: m.TagsManager })),
+);
+const TaxCategories = lazy(() =>
+  import('../components/tax-categories/index.js').then(m => ({ default: m.TaxCategories })),
+);
+const SortCodes = lazy(() =>
+  import('../components/screens/sort-codes/index.js').then(m => ({ default: m.SortCodes })),
+);
+const PageNotFound = lazy(() =>
+  import('../components/screens/page-not-found.js').then(m => ({ default: m.PageNotFound })),
+);
+
+// Auth
+const LoginPage = lazy(() =>
+  import('../components/login-page.js').then(m => ({ default: m.LoginPage })),
+);
+
+/**
+ * Helper to wrap components with Suspense
+ */
+function withSuspense(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: React.LazyExoticComponent<React.ComponentType<any>>,
+  fallback?: ReactElement,
+) {
+  return (
+    <Suspense fallback={fallback || <PageSkeleton />}>
+      <Component />
+    </Suspense>
+  );
+}
+
+/**
+ * Application route configuration
+ * Using object-based routes for better type safety and features
+ */
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <RootLayout />,
+    errorElement: <ErrorBoundary />,
+    children: [
+      // Public routes (login, error pages)
+      {
+        path: ROUTES.LOGIN,
+        loader: publicOnly,
+        element: withSuspense(LoginPage),
+        handle: {
+          title: 'Login',
+        },
+      },
+
+      // Protected routes (require authentication)
+      {
+        path: '/',
+        loader: requireAuth,
+        element: <DashboardLayoutRoute />,
+        errorElement: <ErrorBoundary />,
+        children: [
+          // Home / Charges (default)
+          {
+            index: true,
+            element: withSuspense(AllCharges, <TableSkeleton />),
+            handle: {
+              title: 'All Charges',
+              breadcrumb: 'Charges',
+            },
+          },
+
+          // Charges section
+          {
+            path: 'charges',
+            handle: { breadcrumb: 'Charges' },
+            children: [
+              {
+                index: true,
+                element: withSuspense(AllCharges, <TableSkeleton />),
+                handle: { title: 'All Charges' },
+              },
+              {
+                path: 'missing-info',
+                element: withSuspense(MissingInfoCharges, <TableSkeleton />),
+                handle: {
+                  title: 'Missing Info Charges',
+                  breadcrumb: 'Missing Info',
+                },
+              },
+              {
+                path: 'ledger-validation',
+                element: withSuspense(ChargesLedgerValidation, <TableSkeleton />),
+                handle: {
+                  title: 'Ledger Validation',
+                  breadcrumb: 'Ledger Validation',
+                },
+              },
+              {
+                path: ':chargeId',
+                loader: chargeLoader,
+                element: withSuspense(Charge),
+                handle: {
+                  title: 'Charge Details',
+                  breadcrumb: 'Details',
+                },
+              },
+            ],
+          },
+
+          // Businesses section
+          {
+            path: 'businesses',
+            handle: { breadcrumb: 'Businesses' },
+            children: [
+              {
+                index: true,
+                element: withSuspense(Businesses, <TableSkeleton />),
+                handle: { title: 'All Businesses' },
+              },
+              {
+                path: 'transactions',
+                element: withSuspense(BusinessTransactionsSummery, <TableSkeleton />),
+                handle: {
+                  title: 'Business Transactions Summary',
+                  breadcrumb: 'Transactions',
+                },
+              },
+              {
+                path: ':businessId',
+                loader: businessLoader,
+                element: withSuspense(BusinessScreen),
+                handle: {
+                  title: 'Business Details',
+                  breadcrumb: 'Details',
+                },
+              },
+              {
+                path: ':businessId/transactions',
+                element: withSuspense(BusinessTransactionsSingle, <TableSkeleton />),
+                handle: {
+                  title: 'Business Transactions',
+                  breadcrumb: 'Transactions',
+                },
+              },
+            ],
+          },
+
+          // Business Trips section
+          {
+            path: 'business-trips',
+            handle: { breadcrumb: 'Business Trips' },
+            children: [
+              {
+                index: true,
+                element: withSuspense(BusinessTrips, <TableSkeleton />),
+                handle: { title: 'Business Trips' },
+              },
+              {
+                path: ':businessTripId',
+                element: withSuspense(BusinessTrip),
+                handle: {
+                  title: 'Business Trip Details',
+                  breadcrumb: 'Details',
+                },
+              },
+            ],
+          },
+
+          // Charts section
+          {
+            path: 'charts',
+            handle: { breadcrumb: 'Charts' },
+            children: [
+              {
+                index: true,
+                element: withSuspense(ChartPage),
+                handle: { title: 'Charts' },
+              },
+              {
+                path: 'monthly-income-expense',
+                element: withSuspense(MonthlyIncomeExpenseChart),
+                handle: {
+                  title: 'Monthly Income/Expense',
+                  breadcrumb: 'Income/Expense',
+                },
+              },
+            ],
+          },
+
+          // Documents section
+          {
+            path: 'documents',
+            handle: { breadcrumb: 'Documents' },
+            children: [
+              {
+                index: true,
+                element: withSuspense(DocumentsReport, <TableSkeleton />),
+                handle: { title: 'All Documents' },
+              },
+              {
+                path: 'issue-document',
+                element: withSuspense(IssueDocumentScreen),
+                handle: {
+                  title: 'Issue Document',
+                  breadcrumb: 'Issue Document',
+                },
+              },
+              {
+                path: 'issue-documents',
+                element: withSuspense(IssueDocuments),
+                handle: {
+                  title: 'Issue Documents',
+                  breadcrumb: 'Issue Documents',
+                },
+              },
+            ],
+          },
+
+          // Reports section
+          {
+            path: 'reports',
+            handle: { breadcrumb: 'Reports' },
+            children: [
+              {
+                path: 'trial-balance',
+                element: withSuspense(TrialBalanceReport, <ReportSkeleton />),
+                handle: {
+                  title: 'Trial Balance Report',
+                  breadcrumb: 'Trial Balance',
+                },
+              },
+              {
+                path: 'conto',
+                element: withSuspense(ContoReport, <ReportSkeleton />),
+                handle: {
+                  title: 'Conto Report',
+                  breadcrumb: 'Conto',
+                },
+              },
+              {
+                path: 'vat-monthly',
+                element: withSuspense(VatMonthlyReport, <ReportSkeleton />),
+                handle: {
+                  title: 'VAT Monthly Report',
+                  breadcrumb: 'VAT Monthly',
+                },
+              },
+              {
+                path: 'profit-and-loss',
+                handle: { breadcrumb: 'Profit & Loss' },
+                children: [
+                  {
+                    index: true,
+                    element: withSuspense(ProfitAndLossReport, <ReportSkeleton />),
+                    handle: { title: 'Profit & Loss Report' },
+                  },
+                  {
+                    path: ':year',
+                    element: withSuspense(ProfitAndLossReport, <ReportSkeleton />),
+                    handle: {
+                      title: 'Profit & Loss Report',
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- loader data type varies by route
+                      breadcrumb: (data: any) => data?.year || 'Year',
+                    },
+                  },
+                ],
+              },
+              {
+                path: 'tax',
+                handle: { breadcrumb: 'Tax' },
+                children: [
+                  {
+                    index: true,
+                    element: withSuspense(TaxReport, <ReportSkeleton />),
+                    handle: { title: 'Tax Report' },
+                  },
+                  {
+                    path: ':year',
+                    element: withSuspense(TaxReport, <ReportSkeleton />),
+                    handle: {
+                      title: 'Tax Report',
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- loader data type varies by route
+                      breadcrumb: (data: any) => data?.year || 'Year',
+                    },
+                  },
+                ],
+              },
+              {
+                path: 'depreciation',
+                element: withSuspense(DepreciationReport, <ReportSkeleton />),
+                handle: {
+                  title: 'Depreciation Report',
+                  breadcrumb: 'Depreciation',
+                },
+              },
+              {
+                path: 'shaam-6111',
+                element: withSuspense(Shaam6111Report, <ReportSkeleton />),
+                handle: {
+                  title: 'Shaam 6111 Report',
+                  breadcrumb: 'Shaam 6111',
+                },
+              },
+              {
+                path: 'yearly-ledger',
+                element: withSuspense(YearlyLedgerReport, <ReportSkeleton />),
+                handle: {
+                  title: 'Yearly Ledger Report',
+                  breadcrumb: 'Yearly Ledger',
+                },
+              },
+              {
+                path: 'corporate-tax-ruling-compliance',
+                handle: { breadcrumb: 'Tax Ruling' },
+                children: [
+                  {
+                    index: true,
+                    element: withSuspense(CorporateTaxRulingComplianceReport, <ReportSkeleton />),
+                    handle: { title: 'Corporate Tax Ruling Compliance Report' },
+                  },
+                  {
+                    path: ':year',
+                    element: withSuspense(CorporateTaxRulingComplianceReport, <ReportSkeleton />),
+                    handle: {
+                      title: 'Corporate Tax Ruling Compliance Report',
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- loader data type varies by route
+                      breadcrumb: (data: any) => data?.year || 'Year',
+                    },
+                  },
+                ],
+              },
+              {
+                path: 'balance',
+                element: withSuspense(BalanceReport, <ReportSkeleton />),
+                handle: {
+                  title: 'Balance Report',
+                  breadcrumb: 'Balance',
+                },
+              },
+              {
+                path: 'validate-reports',
+                element: withSuspense(ValidateReportsScreen),
+                handle: {
+                  title: 'Validate Reports',
+                  breadcrumb: 'Validate',
+                },
+              },
+            ],
+          },
+
+          // Standalone routes
+          {
+            path: 'accountant-approvals',
+            element: withSuspense(AccountantApprovals, <TableSkeleton />),
+            handle: { title: 'Accountant Approvals', breadcrumb: 'Accountant Approvals' },
+          },
+          {
+            path: 'salaries',
+            element: withSuspense(Salaries, <TableSkeleton />),
+            handle: { title: 'Salaries', breadcrumb: 'Salaries' },
+          },
+          {
+            path: 'tags',
+            element: withSuspense(TagsManager),
+            handle: { title: 'Tags', breadcrumb: 'Tags' },
+          },
+          {
+            path: 'tax-categories',
+            element: withSuspense(TaxCategories),
+            handle: { title: 'Tax Categories', breadcrumb: 'Tax Categories' },
+          },
+          {
+            path: 'sort-codes',
+            element: withSuspense(SortCodes),
+            handle: { title: 'Sort Codes', breadcrumb: 'Sort Codes' },
+          },
+
+          // 404 catch-all
+          {
+            path: '*',
+            element: withSuspense(PageNotFound),
+            handle: { title: 'Page Not Found' },
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/router/layouts/dashboard-layout.tsx

@@ -0,0 +1,20 @@
+import { useState, type ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { DashboardLayout as DashboardUI } from '../../components/layout/dashboard-layout.js';
+import { FiltersContext } from '../../providers/filters-context.js';
+
+/**
+ * Dashboard layout route wrapper
+ * Provides the dashboard UI with sidebar, header, footer
+ */
+export function DashboardLayoutRoute(): ReactElement {
+  const [filtersContext, setFiltersContext] = useState<ReactElement | null>(null);
+
+  return (
+    <FiltersContext.Provider value={{ filtersContext, setFiltersContext }}>
+      <DashboardUI filtersContext={filtersContext}>
+        <Outlet />
+      </DashboardUI>
+    </FiltersContext.Provider>
+  );
+}

package/src/router/layouts/root-layout.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+import { MantineProvider } from '@mantine/core';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { red } from '@mui/material/colors';
+import { createTheme } from '@mui/material/styles';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DocumentTitle } from '../../components/layout/document-title.js';
+import { NavigationProgress } from '../../components/layout/navigation-progress.js';
+import { Toaster } from '../../components/ui/sonner.js';
+import { AuthProvider } from '../../providers/auth-guard.js';
+import { UrqlProvider } from '../../providers/urql.js';
+import { UserProvider } from '../../providers/user-provider.js';
+
+// Create these outside the component to prevent recreation on every render
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+});
+
+/**
+ * Root layout - wraps all routes
+ * Provides all app-level providers and navigation progress indicator
+ */
+export function RootLayout(): ReactElement {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      theme={{
+        fontFamily: 'Roboto, sans-serif',
+        fontSizes: { md: '14' },
+      }}
+    >
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <AuthProvider>
+          <Toaster />
+          <UrqlProvider>
+            <QueryClientProvider client={queryClient}>
+              <UserProvider>
+                <DocumentTitle />
+                <NavigationProgress />
+                <Outlet />
+              </UserProvider>
+            </QueryClientProvider>
+          </UrqlProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </MantineProvider>
+  );
+}

package/src/router/loaders/auth-loader.ts

@@ -0,0 +1,32 @@
+import { redirect } from 'react-router-dom';
+import { UserService } from '../../services/user-service.js';
+import { ROUTES } from '../routes.js';
+
+/**
+ * Auth loader - protects routes that require authentication
+ * Redirects to login if user is not authenticated
+ */
+export function requireAuth() {
+  const authService = new UserService();
+
+  if (!authService.isLoggedIn()) {
+    // Redirect to login page
+    throw redirect(ROUTES.LOGIN);
+  }
+
+  return null;
+}
+
+/**
+ * Public only loader - redirects authenticated users away from login page
+ */
+export function publicOnly() {
+  const authService = new UserService();
+
+  if (authService.isLoggedIn()) {
+    // Redirect to home page if already logged in
+    throw redirect(ROUTES.HOME);
+  }
+
+  return null;
+}

package/src/router/loaders/business-loader.ts

@@ -0,0 +1,25 @@
+import type { LoaderFunctionArgs } from 'react-router-dom';
+import { BusinessScreenDocument } from '../../gql/graphql.js';
+import { getUrqlClient } from '../../providers/urql-client.js';
+import { validateBusinessParams } from '../types.js';
+
+/**
+ * Business loader - prefetches business data before component renders
+ * Used by: /businesses/:businessId route
+ */
+export async function businessLoader({ params }: LoaderFunctionArgs) {
+  const { businessId } = validateBusinessParams(params);
+
+  const client = getUrqlClient();
+  const result = await client.query(BusinessScreenDocument, { businessId }).toPromise();
+
+  if (result.error) {
+    throw new Response('Failed to load business', { status: 500 });
+  }
+
+  if (!result.data?.business) {
+    throw new Response('Business not found', { status: 404 });
+  }
+
+  return result.data;
+}