Project Setup

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
import { App } from '@/App';
import '@/index.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      retry: 1,
      refetchOnWindowFocus: false,
    },
    mutations: {
      retry: 0,
    },
  },
});

async function enableMocking(): Promise<void> {
  if (import.meta.env.VITE_MOCK_API !== 'true') {
    return;
  }

  const { worker } = await import('@/mocks/mock-server');
  await worker.start({
    onUnhandledRequest: 'bypass',
    quiet: false,
  });

  console.info('[MSW] Mock service worker started');
}

enableMocking().then(() => {
  const root = document.getElementById('root');

  if (!root) {
    throw new Error('Root element not found. Ensure index.html has a <div id="root">.');
  }

  createRoot(root).render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </QueryClientProvider>
    </StrictMode>,
  );
});

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { Toaster } from 'sonner';
import { RootLayout } from '@/components/layout/root-layout';
import { LoadingSpinner } from '@/components/shared/loading-spinner';

/* ----- Lazy-loaded pages ----- */

const OverviewPage = lazy(() =>
  import('@/pages/overview/overview-page').then((m) => ({ default: m.OverviewPage })),
);
const SessionsPage = lazy(() =>
  import('@/pages/sessions/sessions-page').then((m) => ({ default: m.SessionsPage })),
);
const SessionDetailPage = lazy(() =>
  import('@/pages/sessions/session-detail-page').then((m) => ({ default: m.SessionDetailPage })),
);
const AgentsPage = lazy(() =>
  import('@/pages/agents/agents-page').then((m) => ({ default: m.AgentsPage })),
);
const DigitalTwinPage = lazy(() =>
  import('@/pages/digital-twin/digital-twin-page').then((m) => ({ default: m.DigitalTwinPage })),
);
const BomPage = lazy(() =>
  import('@/pages/bom/bom-page').then((m) => ({ default: m.BomPage })),
);
const CompliancePage = lazy(() =>
  import('@/pages/compliance/compliance-page').then((m) => ({ default: m.CompliancePage })),
);
const TestingPage = lazy(() =>
  import('@/pages/testing/testing-page').then((m) => ({ default: m.TestingPage })),
);
const SupplyChainPage = lazy(() =>
  import('@/pages/supply-chain/supply-chain-page').then((m) => ({ default: m.SupplyChainPage })),
);
const ApprovalsPage = lazy(() =>
  import('@/pages/approvals/approvals-page').then((m) => ({ default: m.ApprovalsPage })),
);
const SettingsPage = lazy(() =>
  import('@/pages/settings/settings-page').then((m) => ({ default: m.SettingsPage })),
);

/* ----- Page-level loading fallback ----- */

function PageLoader() {
  return (
    <div className="flex h-[calc(100vh-4rem)] items-center justify-center">
      <LoadingSpinner size="lg" label="Loading page..." />
    </div>
  );
}

/* ----- Application component ----- */

export function App() {
  return (
    <>
      <Routes>
        <Route element={<RootLayout />}>
          <Route
            index
            element={
              <Suspense fallback={<PageLoader />}>
                <OverviewPage />
              </Suspense>
            }
          />
          <Route
            path="sessions"
            element={
              <Suspense fallback={<PageLoader />}>
                <SessionsPage />
              </Suspense>
            }
          />
          <Route
            path="sessions/:id"
            element={
              <Suspense fallback={<PageLoader />}>
                <SessionDetailPage />
              </Suspense>
            }
          />
          <Route
            path="agents"
            element={
              <Suspense fallback={<PageLoader />}>
                <AgentsPage />
              </Suspense>
            }
          />
          <Route
            path="digital-twin"
            element={
              <Suspense fallback={<PageLoader />}>
                <DigitalTwinPage />
              </Suspense>
            }
          />
          <Route
            path="bom"
            element={
              <Suspense fallback={<PageLoader />}>
                <BomPage />
              </Suspense>
            }
          />
          <Route
            path="compliance"
            element={
              <Suspense fallback={<PageLoader />}>
                <CompliancePage />
              </Suspense>
            }
          />
          <Route
            path="testing"
            element={
              <Suspense fallback={<PageLoader />}>
                <TestingPage />
              </Suspense>
            }
          />
          <Route
            path="supply-chain"
            element={
              <Suspense fallback={<PageLoader />}>
                <SupplyChainPage />
              </Suspense>
            }
          />
          <Route
            path="approvals"
            element={
              <Suspense fallback={<PageLoader />}>
                <ApprovalsPage />
              </Suspense>
            }
          />
          <Route
            path="settings"
            element={
              <Suspense fallback={<PageLoader />}>
                <SettingsPage />
              </Suspense>
            }
          />
        </Route>
      </Routes>
      <Toaster
        position="bottom-right"
        toastOptions={{
          classNames: {
            toast: 'bg-card text-card-foreground border-border',
            title: 'text-foreground',
            description: 'text-muted-foreground',
          },
        }}
      />
    </>
  );
}