Pattern
Stable

Dashboard Layout

The dashboard is the primary landing page for every Syhrezz role. It always follows a fixed composition: page header, optional alert, KPI grid, main content grid, and secondary content grid.

Composition

/* Dashboard page structure — always in this order */

1. Page Header  — h1 (24px fw-800) + subtitle + action buttons (top-right)
2. Alert Banner — optional, shows if system warnings exist (alert-warning / alert-danger)
3. KPI Grid     — 4 columns, gradient colored cards (kpi-card) OR white stat-cards
4. Main Grid    — grid-3-2 (3fr chart + 2fr panel) OR grid-2 (two equal columns)
                  Left: Revenue chart / Activity feed / Follow-up list
                  Right: Target card / Todo list / location panel
5. Secondary    — grid-3 with table (2fr) + donut chart/todo (1fr)
6. Toast container — fixed bottom-right, auto-shows welcome toast on load

Role Variants

RoleKPI StyleHero BannerSpecial Elements
AdminWhite stat-cards (4-col)NoneSystem health, user activity, audit log preview
DirectorHero KPI banner (5-col strip)Dark gradient heroExecutive KPI strip, regional performance, team leaderboard
SupervisorWhite stat-cards (4-col)NoneLocation violations, team check-in status, alert banners
SalesGradient KPI cards (4-col)NoneFollow-up list, activity feed, data table, todo list
ManagerGradient KPI cards (4-col)NoneTeam leaderboard, rep performance chart, pipeline donut

KPI Grid Rules

KPI cards always animate in with staggered .fade-up .fu-1 through .fu-4 classes. Sales/Manager use gradient .kpi-card .kpi-{color}. primary role use white .stat-card with colored icon boxes. Director uses a single .hero-banner spanning full width with 5 KPI items inside.

AI Implementation Notes

For AI coding assistants: Every dashboard page must: (1) have a page header with h1 24px fw-800 + subtitle, (2) KPI grid with exactly 4 cards for Sales/primary role or the hero banner for accent role, (3) at least one chart (Chart.js), (4) a toast container at the bottom that auto-fires a welcome/info toast after 700ms. Charts always use responsive:true, maintainAspectRatio:false with a fixed-height container div. Always add .fade-up .fu-1 through .fu-4 to the KPI cards.