EmberClone/apps/web/src/App.tsx

import { createRootRoute, createRoute, createRouter, RouterProvider, Outlet, redirect } from "@tanstack/react-router"
import Dashboard from "./pages/Dashboard"
import Login from "./pages/Login"
import TimeEntries from "./pages/TimeEntries"
import Customers from "./pages/Customers"
import CustomerDetail from "./pages/CustomerDetail"
import Projects from "./pages/Projects"
import ProjectDetail from "./pages/ProjectDetail"
import Profile from "./pages/Profile"
import AdminUsers from "./pages/AdminUsers"
import Settings from "./pages/Settings"
import Calendar from "./pages/Calendar"
import AuditLog from "./pages/AuditLog"
import Documents from "./pages/Documents"
import Webhooks from "./pages/Webhooks"
import TwoFactorAuth from "./pages/TwoFactorAuth"
import Billing from "./pages/Billing"
import Integrations from "./pages/Integrations"
import ProjectTemplates from "./pages/ProjectTemplates"
import Nav from "./components/Nav"
import CommandPalette from "./components/CommandPalette"
import KeyboardHelp from "./components/KeyboardHelp"
import OnboardingTour from "./components/OnboardingTour"
import { ToastProvider } from "./components/Toast"
import ErrorBoundary from "./components/ErrorBoundary"
import { api } from "./lib/api"

const rootRoute = createRootRoute({
  component: () => (
    <ToastProvider>
      <div className="min-h-screen bg-slate-50">
        <Nav />
        <CommandPalette />
        <KeyboardHelp />
        <OnboardingTour />
        <Outlet />
      </div>
    </ToastProvider>
  )
})

const loginRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/login",
  component: Login
})

const authCheck = async () => {
  try {
    await api.getMe()
  } catch (error: any) {
    if (error.status === 401) {
      throw redirect({ to: "/login" })
    }
  }
}

const adminCheck = async () => {
  try {
    const user = await api.getMe()
    if (user.role !== "admin") {
      throw redirect({ to: "/" })
    }
  } catch (error: any) {
    if (error.status === 401) {
      throw redirect({ to: "/login" })
    } else if (error.status === 302 || error.status === 403) {
      throw error
    }
    throw redirect({ to: "/" })
  }
}

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/",
  beforeLoad: authCheck,
  component: Dashboard
})

const timeEntriesRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/time-entries",
  beforeLoad: authCheck,
  component: TimeEntries
})

const calendarRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/calendar",
  beforeLoad: authCheck,
  component: Calendar
})

const customersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/customers",
  beforeLoad: authCheck,
  component: Customers
})

const customerDetailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/customers/$id",
  beforeLoad: authCheck,
  component: CustomerDetail
})

const projectsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/projects",
  beforeLoad: authCheck,
  component: Projects
})

const projectDetailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/projects/$id",
  beforeLoad: authCheck,
  component: ProjectDetail
})

const documentsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/documents",
  beforeLoad: authCheck,
  component: Documents
})

const profileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/profile",
  beforeLoad: authCheck,
  component: Profile
})

const twoFactorRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/2fa",
  beforeLoad: authCheck,
  component: TwoFactorAuth
})

const billingRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/billing",
  beforeLoad: authCheck,
  component: Billing
})

const integrationsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/integrations",
  beforeLoad: authCheck,
  component: Integrations
})

const adminRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/admin",
  beforeLoad: adminCheck,
  component: AdminUsers
})

const settingsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/settings",
  beforeLoad: authCheck,
  component: Settings
})

const auditLogRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/admin/audit-log",
  beforeLoad: adminCheck,
  component: AuditLog
})

const webhooksRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/admin/webhooks",
  beforeLoad: adminCheck,
  component: Webhooks
})

const projectTemplatesRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/admin/templates",
  beforeLoad: adminCheck,
  component: ProjectTemplates
})

const routeTree = [
  indexRoute,
  loginRoute,
  timeEntriesRoute,
  calendarRoute,
  customersRoute,
  customerDetailRoute,
  projectsRoute,
  projectDetailRoute,
  documentsRoute,
  profileRoute,
  twoFactorRoute,
  billingRoute,
  integrationsRoute,
  adminRoute,
  settingsRoute,
  auditLogRoute,
  webhooksRoute,
  projectTemplatesRoute,
]

const router = createRouter({ 
  routeTree,
  defaultPreload: 'intent'
})

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}

export default function App() {
  return (
    <ErrorBoundary>
      <RouterProvider router={router} />
    </ErrorBoundary>
  )
}