BillTracker/client/App.tsx

import { lazy, Suspense, useId, type ReactNode } from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import Layout from '@/components/layout/Layout';
import AppNavigation from '@/components/layout/Sidebar';
import PageTransition from '@/components/PageTransition';
import { ReleaseNotesDialog } from '@/components/ReleaseNotesDialog';
import CommandPalette from '@/components/CommandPalette';
import LoginPage from '@/pages/LoginPage';
import NotFoundPage from '@/pages/NotFoundPage';
import ErrorBoundary from '@/components/ErrorBoundary';
import PageLoader from '@/components/PageLoader';

// TanStack Query
import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { toast } from 'sonner';

const queryClient = new QueryClient({
  // Global error handling: pages render an inline error on the *initial* load
  // (no data yet), so only surface a toast when a *background refetch* fails
  // while stale data is still shown — otherwise the failure would be silent.
  queryCache: new QueryCache({
    onError: (error, query) => {
      if (query.state.data !== undefined) {
        toast.error(error?.message || 'Could not refresh — showing the last data.');
      }
    },
  }),
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 2, // 2 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

// Lazy-loaded components
const AdminPage = lazy(() => import('@/pages/AdminPage'));
const TrackerPage = lazy(() => import('@/pages/TrackerPage'));
const CalendarPage = lazy(() => import('@/pages/CalendarPage'));
const SummaryPage = lazy(() => import('@/pages/SummaryPage'));
const BillsPage = lazy(() => import('@/pages/BillsPage'));
const SubscriptionsPage = lazy(() => import('@/pages/SubscriptionsPage'));
const SubscriptionCatalogPage = lazy(() => import('@/pages/SubscriptionCatalogPage'));
const CategoriesPage = lazy(() => import('@/pages/CategoriesPage'));
const SettingsPage = lazy(() => import('@/pages/SettingsPage'));
const StatusPage = lazy(() => import('@/pages/StatusPage'));
const AnalyticsPage = lazy(() => import('@/pages/AnalyticsPage'));
const ReleaseNotesPage = lazy(() => import('@/pages/ReleaseNotesPage'));
const AboutPage = lazy(() => import('@/pages/AboutPage'));
const PrivacyPage = lazy(() => import('@/pages/PrivacyPage'));
const RoadmapPage = lazy(() => import('@/pages/RoadmapPage'));
const DataPage = lazy(() => import('@/pages/DataPage'));
const ProfilePage = lazy(() => import('@/pages/ProfilePage'));
const SnowballPage = lazy(() => import('@/pages/SnowballPage'));
const HealthPage = lazy(() => import('@/pages/HealthPage'));
const PayoffPage = lazy(() => import('@/pages/PayoffPage'));
const SpendingPage = lazy(() => import('@/pages/SpendingPage'));
const BankTransactionsPage = lazy(() => import('@/pages/BankTransactionsPage'));

function RequireAuth({ children, role }: { children: ReactNode; role?: string }): ReactNode {
  const { user, singleUserMode } = useAuth();
  const location = useLocation();

  // Loading state
  if (user === undefined) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-background text-muted-foreground text-sm">
        Loading...
      </div>
    );
  }

  // Single-user mode bypass
  if (singleUserMode && role === 'user') return children;

  // Not authenticated
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  const roleAllowed = !role || user.role === role || (role === 'user' && user.role === 'admin');

  if (role === 'user' && user.is_default_admin) {
    return <Navigate to="/admin" replace />;
  }

  // Role mismatch
  if (!roleAllowed) {
    return <Navigate to={user.role === 'admin' ? '/admin' : '/'} replace />;
  }

  return children;
}

function AdminShell({ children }: { children: ReactNode }) {
  const location = useLocation();

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_32rem),radial-gradient(circle_at_top_right,oklch(var(--accent)/0.08),transparent_24rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] text-foreground">
      <AppNavigation adminMode />
      <main className="mx-auto w-full max-w-[1500px] px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
        <PageTransition routeKey={location.pathname}>{children}</PageTransition>
      </main>
    </div>
  );
}

export default function App() {
  const { user } = useAuth();
  const mainContentId = useId();

  return (
    <QueryClientProvider client={queryClient}>
      {/* Release notes (only for user role) */}
      {user?.role === 'user' && <ReleaseNotesDialog />}
      {user && !user.is_default_admin && <CommandPalette />}

      {/* Skip link for keyboard users */}
      <a
        href={`#${mainContentId}`}
        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:bg-background focus:text-foreground focus:px-4 focus:py-2 focus:rounded-md focus:shadow-lg focus:outline-none"
      >
        Skip to main content
      </a>

      <main id={mainContentId}>
        <Routes>
          <Route
            path="/login"
            element={
              <ErrorBoundary>
                <LoginPage />
              </ErrorBoundary>
            }
          />
          <Route
            path="/about"
            element={
              <ErrorBoundary>
                <Suspense fallback={<PageLoader />}>
                  <AboutPage />
                </Suspense>
              </ErrorBoundary>
            }
          />
          <Route
            path="/privacy"
            element={
              <ErrorBoundary>
                <Suspense fallback={<PageLoader />}>
                  <PrivacyPage />
                </Suspense>
              </ErrorBoundary>
            }
          />
          <Route
            path="/release-notes"
            element={
              <ErrorBoundary>
                <Suspense fallback={<PageLoader />}>
                  <ReleaseNotesPage />
                </Suspense>
              </ErrorBoundary>
            }
          />

          <Route
            path="/admin"
            element={
              <RequireAuth role="admin">
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <AdminPage />
                  </Suspense>
                </ErrorBoundary>
              </RequireAuth>
            }
          />
          <Route
            path="/admin/about"
            element={
              <RequireAuth role="admin">
                <ErrorBoundary>
                  <AdminShell>
                    <Suspense fallback={<PageLoader />}>
                      <AboutPage />
                    </Suspense>
                  </AdminShell>
                </ErrorBoundary>
              </RequireAuth>
            }
          />
          <Route
            path="/roadmap"
            element={
              <RequireAuth role="admin">
                <ErrorBoundary>
                  <AdminShell>
                    <Suspense fallback={<PageLoader />}>
                      <RoadmapPage />
                    </Suspense>
                  </AdminShell>
                </ErrorBoundary>
              </RequireAuth>
            }
          />
          <Route
            path="/admin/roadmap"
            element={
              <RequireAuth role="admin">
                <ErrorBoundary>
                  <AdminShell>
                    <Suspense fallback={<PageLoader />}>
                      <RoadmapPage />
                    </Suspense>
                  </AdminShell>
                </ErrorBoundary>
              </RequireAuth>
            }
          />
          <Route
            path="/admin/status"
            element={
              <RequireAuth role="admin">
                <ErrorBoundary>
                  <AdminShell>
                    <Suspense fallback={<PageLoader />}>
                      <StatusPage />
                    </Suspense>
                  </AdminShell>
                </ErrorBoundary>
              </RequireAuth>
            }
          />
          <Route
            path="/status"
            element={
              <RequireAuth role="admin">
                <Navigate to="/admin/status" replace />
              </RequireAuth>
            }
          />

          <Route
            element={
              <RequireAuth role="user">
                <Layout mainContentId={mainContentId} />
              </RequireAuth>
            }
          >
            <Route
              index
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <TrackerPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="calendar"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <CalendarPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="summary"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SummaryPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="bills"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <BillsPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="subscriptions"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SubscriptionsPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="subscriptions/catalog"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SubscriptionCatalogPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="categories"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <CategoriesPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="health"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <HealthPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="analytics"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <AnalyticsPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="settings"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SettingsPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="snowball"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SnowballPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="payoff"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <PayoffPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="spending"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <SpendingPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="bank-transactions"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <BankTransactionsPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="data"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <DataPage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route
              path="profile"
              element={
                <ErrorBoundary>
                  <Suspense fallback={<PageLoader />}>
                    <ProfilePage />
                  </Suspense>
                </ErrorBoundary>
              }
            />
            <Route path="*" element={<NotFoundPage />} />
          </Route>

          {/* Top-level catch-all — covers public paths that don't exist */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}