Pages & Routing

Router: React Router v7 (react-router-dom 7.9.1) with createBrowserRouter.

---

Application Layout

---

Complete Route Table

Core Routes

Path	Component	Notes
/	Home	Landing page
/dashboard	Dashboard	Observability dashboard
/guides	Placeholder	Coming soon
/projects	Placeholder	Coming soon
/settings	Placeholder	Coming soon
/support	Placeholder	Coming soon

Access Management

Path	Component	Notes
/access-management	Redirect	→ /users
/access-management/users	UsersPage	User list
/access-management/users/:userId	UserDetailPage	User detail
/access-management/user-groups	UserGroupsPage	Groups with tree nav
/access-management/roles-permissions	RolesPermissionsPage	RBAC management
/access-management/sso-sessions	Placeholder
/access-management/token-management	Placeholder

Data Management

Path	Component	Notes
/data-management	Redirect	→ /schema-management
/data-management/schema-management	SchemaRegistry	Schema list
/data-management/schema-management/create	CreateSchemaPage	Create wizard
/data-management/schema-management/:id	SchemaDetailPage	Schema detail + tabs
/data-management/schema-management/:id/edit	CreateSchemaPage	Edit (reuses create)
/data-management/connectors	Connectors	Connector list
/data-management/synthetic-data	SyntheticDataDashboard	SDG dashboard
/data-management/synthetic-data/generators	GeneratorListPage	Generator list
/data-management/synthetic-data/create	CreateGeneratorPage	Create wizard
/data-management/synthetic-data/:id	GeneratorDetailPage	Generator detail
/data-management/synthetic-data/:id/edit	CreateGeneratorPage	Edit generator
/data-management/synthetic-data/pools	PoolsPage	Data pools
/data-management/synthetic-data/universes	UniverseListPage	Universe list
/data-management/synthetic-data/universes/create	CreateUniversePage	Create universe
/data-management/synthetic-data/universes/:id	UniverseDetailPage	Universe detail

Pipeline

Path	Component	Notes
/pipeline	Redirect	→ /designer
/pipeline/pipelines	Pipelines	Pipeline list
/pipeline/designer	PipelineDesigner	Full-screen — XYFlow canvas

Infrastructure

Path	Component	Notes
/infra-management	Redirect	→ /kafka
/infra-management/kafka	KafkaManagement	Topic list
/infra-management/kafka/:topicName	KafkaTopicDetailPage	Topic detail
/infra-management/cache	CacheManagement	Key browser
/infra-management/cache/:keyName	CacheKeyDetailPage	Key detail

Approval Workflow

Path	Component	Notes
/approval-workflow	Redirect	→ /workflows
/approval-workflow/workflows	WorkflowsPage	Workflow list
/approval-workflow/workflows/:workflowId	WorkflowDetailPage	Workflow detail
/approval-workflow/tasks	TasksPage	Task inbox
/approval-workflow/designer	WorkflowDesigner	Full-screen
/approval-workflow/designer/:workflowId	WorkflowDesigner	Full-screen edit

Designers (Full-Screen)

Path	Component	Notes
/pipeline/designer	PipelineDesigner	No Layout wrapper
/data-management/designer	ConnectorDesigner	No Layout wrapper
/approval-workflow/designer	WorkflowDesigner	No Layout wrapper

---

Navigation Structure

The sidebar is defined in src/constants/navigation.ts and rendered by Sidebar.tsx:

Top Items
  ├── Home                    (/)
  └── Guides                  (/guides)

Access Management
  ├── Users                   (/access-management/users)
  ├── User Groups             (/access-management/user-groups)
  ├── Roles & Permissions     (/access-management/roles-permissions)
  ├── SSO Sessions            (/access-management/sso-sessions)
  └── Token Management        (/access-management/token-management)

Data Management
  ├── Schema Management       (/data-management/schema-management)
  ├── Designer                (/data-management/designer)
  ├── Connectors              (/data-management/connectors)
  └── Synthetic Data          (/data-management/synthetic-data)

Pipeline
  ├── Designer                (/pipeline/designer)
  └── Pipelines               (/pipeline/pipelines)

Infrastructure
  ├── Kafka                   (/infra-management/kafka)
  └── Cache                   (/infra-management/cache)

Observability
  └── Dashboard               (/dashboard)

Approval Workflow
  ├── Designer                (/approval-workflow/designer)
  ├── Workflows               (/approval-workflow/workflows)
  └── My Tasks                (/approval-workflow/tasks)

Bottom Items
  ├── Projects                (/projects)
  ├── Settings                (/settings)
  └── Support                 (/support)

All icons are from @untitledui/icons.

---

Authentication & Guards

Auth Flow

Key Points

• All routes require authentication — Keycloak onLoad: 'login-required' redirects before the app renders
• No route-level guards — once authenticated, all routes are accessible
• Permission checking is component-level via usePermissionCheck() hook
• Token injection — fetchWithAuth() automatically sets Authorization: Bearer {token} on all API calls
• PKCE — S256 for HTTPS, disabled for HTTP development
• Tenant ID — extracted from JWT tenant_id claim