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

package/src/components/error-boundary.tsx

@@ -1,189 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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/document-title.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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>
-  );
-}

package/src/providers/urql-client.ts

@@ -1,86 +0,0 @@
-import {
-  createClient,
-  fetchExchange,
-  mapExchange,
-  type AnyVariables,
-  type Client,
-  type Operation,
-} from 'urql';
-import { authExchange } from '@urql/exchange-auth';
-import { UserService } from '../services/user-service.js';
-
-/**
- * Singleton URQL client for use in loaders and server-side operations
- * This is separate from the Provider client to avoid React context dependencies
- */
-let globalClient: Client | null = null;
-
-export function getUrqlClient(): Client {
-  if (globalClient) {
-    return globalClient;
-  }
-
-  const authService = new UserService();
-
-  let url: string;
-  switch (import.meta.env.MODE) {
-    case 'production': {
-      url = 'https://accounter.onrender.com/graphql';
-      break;
-    }
-    case 'staging': {
-      url = 'https://accounter-staging.onrender.com/graphql';
-      break;
-    }
-    default: {
-      url = 'http://localhost:4000/graphql';
-      break;
-    }
-  }
-
-  globalClient = createClient({
-    url,
-    exchanges: [
-      mapExchange({
-        onResult(result) {
-          if (result.error?.networkError) {
-            console.error('Network Error:', result.error.networkError);
-          }
-        },
-      }),
-      authExchange(async utils => {
-        return {
-          addAuthToOperation(operation): Operation<void, AnyVariables> {
-            const token = authService.authToken();
-            if (!token) {
-              return operation;
-            }
-            return utils.appendHeaders(operation, {
-              Authorization: token,
-            });
-          },
-          didAuthError(error, _operation): boolean {
-            return (
-              error?.response?.status === 401 ||
-              error?.graphQLErrors?.some(e => e.extensions?.code === 'FORBIDDEN')
-            );
-          },
-          async refreshAuth(): Promise<void> {
-            authService.logout();
-            // Redirect handled by route loader
-          },
-        };
-      }),
-      fetchExchange,
-    ],
-  });
-
-  return globalClient;
-}
-
-/**
- * Reset the global client (useful for tests or logout)
- */
-export function resetUrqlClient(): void {
-  globalClient = null;
-}