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

package/src/components/common/forms/edit-document.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import { useForm, type SubmitHandler } from 'react-hook-form';
+import { Link } from 'react-router-dom';
 import { useQuery } from 'urql';
+import { Button } from '@/components/ui/button.js';
+import { Label } from '@/components/ui/label.js';
 import { Drawer, Image, Loader } from '@mantine/core';
 import { EditDocumentDocument, type UpdateDocumentFieldsInput } from '../../../gql/graphql.js';
 import { relevantDataPicker, type MakeBoolean } from '../../../helpers/form.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
 import { Form } from '../../ui/form.js';
-import { ButtonWithLabel, ImageMagnifier, SimpleGrid } from '../index.js';
+import { ImageMagnifier, SimpleGrid } from '../index.js';
 import { ModifyDocumentFields } from './modify-document-fields.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -106,21 +109,31 @@ export const EditDocument = ({ documentId, onDone, onChange }: Props): ReactElem
               <form onSubmit={handleSubmit(onSubmit)}>
                 <SimpleGrid cols={4}>
                   <ModifyDocumentFields document={document} formManager={formManager} />
-                  <ButtonWithLabel
-                    target="_blank"
-                    textLabel="File"
-                    url={document?.file?.toString()}
-                    title="Open Link"
-                  />
+
+                  <div className="space-y-2">
+                    <Label htmlFor="file">File</Label>
+                    <Link
+                      to={document?.file?.toString() || ''}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex flex-col items-center justify-center mt-5"
+                    >
+                      <Button variant="outline" className="w-full mb-2">
+                        Open File
+                      </Button>
+                    </Link>
+                  </div>
                 </SimpleGrid>
                 <div className="flex justify-center mt-5">
-                  <button
+                  <Button
                     type="submit"
-                    className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12  border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    variant="default"
+                    // className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12 mr-5 border border-transparent shadow-xs text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    onClick={onDone}
                     disabled={fetching || Object.keys(dirtyFields).length === 0}
                   >
                     Save
-                  </button>
+                  </Button>
                 </div>
               </form>
             </Form>

package/src/components/common/new-documents-list.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { NavLink } from '@mantine/core';
+import { Link } from 'react-router-dom';
 import { NewFetchedDocumentFieldsFragmentDoc } from '../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../gql/index.js';
 import { getChargeHref } from '../screens/charges/charge.js';
@@ -32,14 +32,16 @@ export const NewDocumentsList = ({ data }: Props): ReactElement => {
       {documents
         .filter(({ charge }) => charge)
         .map(doc => (
-          <NavLink
+          <Link
             key={doc.id}
-            label={`${doc.charge!.counterparty?.name ?? 'Unknown'} - ${doc.charge!.userDescription}`}
-            onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-              event.stopPropagation();
-              window.open(getChargeHref(doc.charge!.id), '_blank', 'noreferrer');
-            }}
-          />
+            to={getChargeHref(doc.charge!.id)}
+            target="_blank"
+            rel="noreferrer"
+            onClick={event => event.stopPropagation()}
+            className="inline-flex items-center font-semibold"
+          >
+            {`${doc.charge!.counterparty?.name ?? 'Unknown'} - ${doc.charge!.userDescription}`}
+          </Link>
         ))}
     </div>
   );

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

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

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

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

package/src/components/error-boundary.tsx

@@ -0,0 +1,189 @@
+import { type ReactElement } from 'react';
+import { AlertCircle, Home, RefreshCw } from 'lucide-react';
+import { isRouteErrorResponse, Link, useRouteError } from 'react-router-dom';
+import { ROUTES } from '../router/routes.js';
+import { Button } from './ui/button.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card.js';
+
+/**
+ * Global error boundary for router errors
+ * Handles different error types and provides appropriate UI
+ */
+export function ErrorBoundary(): ReactElement {
+  const error = useRouteError();
+
+  // Handle route errors (404, 401, 500, etc.)
+  if (isRouteErrorResponse(error)) {
+    switch (error.status) {
+      case 404:
+        return (
+          <ErrorLayout
+            icon={<AlertCircle className="h-16 w-16 text-yellow-500" />}
+            title="Page Not Found"
+            description="The page you're looking for doesn't exist."
+            statusCode={404}
+          >
+            <div className="flex gap-4">
+              <Link to={ROUTES.HOME}>
+                <Button variant="default">
+                  <Home className="mr-2 h-4 w-4" />
+                  Go Home
+                </Button>
+              </Link>
+              <Button variant="outline" onClick={() => window.history.back()}>
+                Go Back
+              </Button>
+            </div>
+          </ErrorLayout>
+        );
+
+      case 401:
+        return (
+          <ErrorLayout
+            icon={<AlertCircle className="h-16 w-16 text-red-500" />}
+            title="Unauthorized"
+            description="You need to be logged in to access this page."
+            statusCode={401}
+          >
+            <Link to={ROUTES.LOGIN}>
+              <Button variant="default">Go to Login</Button>
+            </Link>
+          </ErrorLayout>
+        );
+
+      case 403:
+        return (
+          <ErrorLayout
+            icon={<AlertCircle className="h-16 w-16 text-red-500" />}
+            title="Forbidden"
+            description="You don't have permission to access this resource."
+            statusCode={403}
+          >
+            <Link to={ROUTES.HOME}>
+              <Button variant="default">
+                <Home className="mr-2 h-4 w-4" />
+                Go Home
+              </Button>
+            </Link>
+          </ErrorLayout>
+        );
+
+      case 500:
+        return (
+          <ErrorLayout
+            icon={<AlertCircle className="h-16 w-16 text-red-500" />}
+            title="Server Error"
+            description="Something went wrong on our end. We're working to fix it."
+            statusCode={500}
+          >
+            <div className="flex gap-4">
+              <Button variant="default" onClick={() => window.location.reload()}>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Reload Page
+              </Button>
+              <Link to={ROUTES.HOME}>
+                <Button variant="outline">
+                  <Home className="mr-2 h-4 w-4" />
+                  Go Home
+                </Button>
+              </Link>
+            </div>
+          </ErrorLayout>
+        );
+
+      default:
+        return (
+          <ErrorLayout
+            icon={<AlertCircle className="h-16 w-16 text-orange-500" />}
+            title={`Error ${error.status}`}
+            description={error.statusText || 'An unexpected error occurred'}
+            statusCode={error.status}
+          >
+            <Link to={ROUTES.HOME}>
+              <Button variant="default">
+                <Home className="mr-2 h-4 w-4" />
+                Go Home
+              </Button>
+            </Link>
+          </ErrorLayout>
+        );
+    }
+  }
+
+  // Handle generic JavaScript errors
+  const genericError = error as Error;
+  const isDevelopment = import.meta.env.DEV;
+
+  return (
+    <ErrorLayout
+      icon={<AlertCircle className="h-16 w-16 text-red-500" />}
+      title="Unexpected Error"
+      description="An unexpected error occurred. Please try again."
+    >
+      {isDevelopment && genericError.message && (
+        <Card className="max-w-2xl mt-4 bg-red-50 border-red-200">
+          <CardHeader>
+            <CardTitle className="text-sm text-red-700">Error Details (Dev Only)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <pre className="text-xs text-red-600 overflow-auto">
+              {genericError.message}
+              {genericError.stack && `\n\n${genericError.stack}`}
+            </pre>
+          </CardContent>
+        </Card>
+      )}
+      <div className="flex gap-4 mt-4">
+        <Button variant="default" onClick={() => window.location.reload()}>
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Reload Page
+        </Button>
+        <Link to={ROUTES.HOME}>
+          <Button variant="outline">
+            <Home className="mr-2 h-4 w-4" />
+            Go Home
+          </Button>
+        </Link>
+      </div>
+    </ErrorLayout>
+  );
+}
+
+/**
+ * Reusable error layout component
+ */
+interface ErrorLayoutProps {
+  icon: ReactElement;
+  title: string;
+  description: string;
+  statusCode?: number;
+  children?: React.ReactNode;
+}
+
+function ErrorLayout({
+  icon,
+  title,
+  description,
+  statusCode,
+  children,
+}: ErrorLayoutProps): ReactElement {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
+      <Card className="max-w-md w-full">
+        <CardHeader className="text-center space-y-4">
+          <div className="flex justify-center">{icon}</div>
+          <div>
+            <CardTitle className="text-2xl font-bold">
+              {title}
+              {statusCode && (
+                <span className="ml-2 text-sm text-muted-foreground">({statusCode})</span>
+              )}
+            </CardTitle>
+            <CardDescription className="mt-2">{description}</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center space-y-4">{children}</CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/layout/breadcrumbs.tsx

@@ -0,0 +1,77 @@
+import { Fragment, type ReactElement } from 'react';
+import { ChevronRight, Home } from 'lucide-react';
+import { Link, useMatches } from 'react-router-dom';
+
+interface RouteHandle {
+  breadcrumb?: string | ((data?: unknown) => string);
+  title?: string | ((data?: unknown) => string);
+  [key: string]: unknown;
+}
+
+interface Crumb {
+  title: string;
+  path: string;
+  isLast: boolean;
+}
+
+/**
+ * Breadcrumbs component - displays navigation path
+ * Reads breadcrumb data from route handles
+ */
+export function Breadcrumbs(): ReactElement {
+  const matches = useMatches();
+
+  // Build breadcrumb trail from matched routes
+  const crumbs: Crumb[] = matches
+    .filter(match => {
+      const handle = match.handle as RouteHandle | undefined;
+      return handle?.breadcrumb;
+    })
+    .map((match, index, array) => {
+      const handle = match.handle as RouteHandle;
+      const title =
+        typeof handle.breadcrumb === 'function'
+          ? handle.breadcrumb(match.data)
+          : handle.breadcrumb || 'Page';
+
+      return {
+        title,
+        path: match.pathname,
+        isLast: index === array.length - 1,
+      };
+    });
+
+  // Don't render if no breadcrumbs
+  if (crumbs.length === 0) {
+    return <div className="h-8" />; // Spacer to maintain layout
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center space-x-1 text-sm text-gray-600">
+      {/* Home icon as first item */}
+      <Link
+        to="/"
+        className="flex items-center hover:text-gray-900 transition-colors"
+        aria-label="Home"
+      >
+        <Home className="h-4 w-4" />
+      </Link>
+
+      {/* Breadcrumb items */}
+      {crumbs.map((crumb, index) => (
+        <Fragment key={`${crumb.path}-${index}`}>
+          <ChevronRight className="h-4 w-4 text-gray-400" />
+          {crumb.isLast ? (
+            <span className="font-medium text-gray-900" aria-current="page">
+              {crumb.title}
+            </span>
+          ) : (
+            <Link to={crumb.path} className="hover:text-gray-900 transition-colors">
+              {crumb.title}
+            </Link>
+          )}
+        </Fragment>
+      ))}
+    </nav>
+  );
+}

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

@@ -1,7 +1,9 @@
 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 = {
@@ -14,12 +16,14 @@ 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/document-title.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useMatches } from 'react-router-dom';
+
+interface RouteHandle {
+  title?: string | ((data?: unknown) => string);
+  breadcrumb?: string | ((data?: unknown) => string);
+  [key: string]: unknown;
+}
+
+/**
+ * Component that updates document title based on route handle
+ * Place this in the root layout to automatically update titles
+ */
+export function DocumentTitle() {
+  const matches = useMatches();
+
+  useEffect(() => {
+    const lastMatch = matches[matches.length - 1];
+    const handle = lastMatch?.handle as RouteHandle | undefined;
+
+    if (handle?.title) {
+      const title =
+        typeof handle.title === 'function' ? handle.title(lastMatch.data) : handle.title;
+      document.title = `${title} - Accounter`;
+    } else {
+      document.title = 'Accounter';
+    }
+  }, [matches]);
+
+  return <div style={{ display: 'none' }} />;
+}

package/src/components/layout/navigation-progress.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useNavigation } from 'react-router-dom';
+import { Progress } from '../ui/progress.js';
+
+/**
+ * Global navigation progress indicator
+ * Shows a loading bar at the top of the page during route transitions
+ */
+export function NavigationProgress() {
+  const navigation = useNavigation();
+  const [progress, setProgress] = useState(0);
+  const isLoading = navigation.state === 'loading';
+
+  useEffect(() => {
+    if (isLoading) {
+      // Start at 20% when loading begins
+      setProgress(20);
+
+      // Simulate progress
+      const interval = setInterval(() => {
+        setProgress(prev => {
+          // Asymptotically approach 90% but never quite reach it
+          const next = prev + (90 - prev) * 0.1;
+          return Math.min(next, 90);
+        });
+      }, 300);
+
+      return () => clearInterval(interval);
+    }
+
+    // Complete the progress when loading finishes
+    setProgress(100);
+
+    // Reset after animation
+    const timeout = setTimeout(() => {
+      setProgress(0);
+    }, 500);
+
+    return () => clearTimeout(timeout);
+  }, [isLoading]);
+
+  // Don't render anything if not loading and progress is 0
+  if (!isLoading && progress === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 h-1">
+      <Progress value={progress} className="h-1 rounded-none transition-all duration-300" />
+    </div>
+  );
+}

package/src/components/layout/page-skeleton.tsx

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import { Skeleton } from '../ui/skeleton.js';
+
+/**
+ * Generic page loading skeleton
+ * Displayed during route transitions
+ */
+export function PageSkeleton(): ReactElement {
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <Skeleton className="h-12 w-64" /> {/* Page title */}
+      <div className="flex gap-4">
+        <Skeleton className="h-10 w-32" /> {/* Button/filter */}
+        <Skeleton className="h-10 w-32" />
+      </div>
+      <Skeleton className="h-96 w-full" /> {/* Main content area */}
+    </div>
+  );
+}
+
+/**
+ * Table loading skeleton
+ */
+export function TableSkeleton(): ReactElement {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-12 w-full" /> {/* Header */}
+      {Array.from({ length: 8 }).map((_, i) => (
+        <Skeleton key={i} className="h-16 w-full" />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Report loading skeleton
+ */
+export function ReportSkeleton(): ReactElement {
+  return (
+    <div className="flex flex-col gap-6">
+      <Skeleton className="h-16 w-96" /> {/* Report title */}
+      <div className="flex gap-4">
+        <Skeleton className="h-10 w-48" /> {/* Date filter */}
+        <Skeleton className="h-10 w-32" /> {/* Export button */}
+      </div>
+      <Skeleton className="h-[600px] w-full" /> {/* Report content */}
+    </div>
+  );
+}