App Shell & Routing

CXB Console is a single-page React app. src/App.tsx owns the route tree, wraps everything in the auth and toast providers, and lazy-loads every page so the initial bundle stays small.

​

Provider Stack

App.tsx mounts three nested providers around the router:

• AuthProvider (src/auth/AuthContext.tsx) holds the JWT token, the current user, and role booleans.
• ToastProvider (src/components/Toast.tsx) supplies the useToast() notification helper used across pages.
• Suspense shows RouteFallback (a simple “Loading…” div) while a lazy page chunk is fetched.

​

Two Layouts, Two Audiences

There are two top-level protected branches, each behind ProtectedRoute with a roles allow-list and rendering a distinct layout via <Outlet />. A catch-all path="*" renders RoleRedirect, which sends agents/supervisors to /agent-console (when ADK is on) and everyone else to /dashboard.

​

Dashboard Routes

All children of /dashboard are nested routes rendered inside DashboardLayout.

​

Agent Console Routes

The entire /agent-console branch is registered only when ADK is true.

​

Role Gating

DashboardLayout builds its sidebar from a navSections array. Each item can declare superAdmin or gated flags:

• superAdmin: true items (Carriers, Settings) are only shown when user.role === 'super_admin'.
• gated: true items (Agent Desk, Agent Assist) are only shown when ADK is true.

AgentLayout filters its navItems by a supervisorOnly flag, so agents see Home/Analytics/My History while supervisors additionally get Agent Overview and Agent Assist. ProtectedRoute (src/auth/ProtectedRoute.tsx) enforces the same boundaries at the route level: while auth is loading it shows a spinner; with no token it redirects to /login; and when the user’s role is not in the route’s roles list it redirects to the role’s home surface.

​

The ADK Feature Flag

src/tier.ts derives a single boolean ADK by hashing the lowercased BRAND_NAME (FNV-1a) against a fixed allow-list. When false, the Agent Desk / Agent Console routes and nav items are never registered. This keeps Agent Desk out of brands that have not licensed it, without per-brand source changes.

​

Lazy Loading

Every page and both layouts are wrapped in React.lazy(() => import(...)). Route transitions therefore fetch the page chunk on demand, falling back to RouteFallback during load.

​

Related Docs