Layouts

DashboardLayout (Primary)

File: src/components/layout/dashboard/DashboardLayout.tsx

The main layout for Hermina 360. Uses a dark Hermina-green sider with the classic variant by default.

// In routes/index.tsx — already configured
<DashboardLayout variant="classic" />

// Custom menu (override defaults)
<DashboardLayout
  variant="classic"
  menuItems={customMenuItems}
  siderWidth={260}
/>

Variants

Variant	Description	When to use
classic	Dark green sider, no top header	Default — Hermina 360 standard
mixed	Light sider + top header	Secondary sections, config pages
mini	Icon-only sider + top header	Compact layouts

HERMINA_MENU_ITEMS

Pre-configured Hermina 360 navigation. Exported from DashboardLayout.tsx:

Executive Dashboard
  ├── Executive Summary        /dashboard/executive
  ├── Periodic Trends          /dashboard/trends
  └── Branch Statistics        /dashboard/branches

Finance
  ├── CFO Cockpit              /dashboard/cfo
  ├── Liquidity & Working Cap  /dashboard/liquidity
  └── HQ Consolidation         /dashboard/consolidation

Services
  ├── Daily Operations         /dashboard/operational
  ├── Service Line Performance /dashboard/service-lines
  └── Patient Retention        /dashboard/patient-retention

Clinical Analytics
  ├── Clinical Flow Summary    /dashboard/clinical
  └── Maternal & ANC           /dashboard/maternal

Human Resources              /dashboard/hr

Platform
  ├── Access Management        /dashboard/access
  └── Configuration            /dashboard/config

Adding a Menu Item

// In DashboardLayout.tsx → HERMINA_MENU_ITEMS
{
  key: 'new-section',
  label: 'New Section',
  icon: <SomeIcon />,
  children: [
    { key: 'new-page', label: 'New Page', icon: <SomeIcon />, path: '/dashboard/new-page' },
  ],
},

Then add the route in src/routes/index.tsx.

---

AppLayout

File: src/components/layout/AppLayout.tsx

Top-navigation shell for public or simple pages. Not used for main dashboard.

---

NavMenuItem Type

interface NavMenuItem {
  key: string;
  label: string;
  icon?: ReactNode;
  path?: string;         // used for active state matching
  children?: NavMenuItem[];
  hidden?: boolean;      // hide from menu without removing from routes
}

---

Mobile Behavior

On mobile (<lg breakpoint), the sider becomes a Drawer. The menu button appears in the top bar (classic variant) or header (mixed/mini).

Tablet (lg but not xl): sider auto-collapses to 64px icon-only mode.

Desktop (xl+): full sider at configured siderWidth.