Customize

Layouts & Navigation

The main shell is designed for responsive dashboard workspaces and exposes configurable header, sidebar, and content-width behavior.

Main layout files

Location	Purpose
`src/components/layout/AppShell.tsx`	Combines the application layout, header, sidebar, and main content.
`src/components/layout/Sidebar.tsx`	Renders expanded and collapsed navigation including icon-only branding.
`src/components/layout/Header.tsx`	Header controls, search, notifications, language/apps/profile controls, and customizer access.
`src/data/navigation.ts`	Defines the navigation groups and nested destinations.

Supported layout settings

Mode

Light, dark, or system.

Sidebar

Light/dark color, default/compact size, and collapsed state.

Content

Fluid or boxed width plus fixed or static header.

Add a navigation item

{ label: "Reports", href: "/reports", icon: "ChartColumn" }

Add the item to the correct group in src/data/navigation.ts, then create the corresponding route file under src/routes/.

Routes and aliases

Route files use TanStack createFileRoute. Section index routes redirect to the first workspace. Literal dots in file names use [.], for example doctor-directory[.]html.tsx. Those files redirect old HTML URLs to canonical React routes.

Documentation links

The app footer and FAQ link to the local /documentation/index.html. Static documentation uses ordinary HTML links and ships in the public assets.

Management navigation order

Following Projects, the navigation includes Finance, Crypto, AI Analytics, School Management, HRM, and Hospital Management. Their children link to individual workspaces. Keep child links, header search destinations, and legacy redirects aligned when renaming a page.