Dashboard Playbook

Build a fast, trustworthy overview dashboard with KPI summaries, filters, and drilldowns.

Start Here

• Template: Dashboard from @gtcx/templates
• Layout: MetronicLayout with sidebar or card-sidebar variant

Recommended Composition

• KPI row: Card + Badge + Trend
• Filters: Toolbar + Select + DatePicker
• Primary table: AdvancedTable
• Secondary panels: Card + DataVisualization

Minimal Example

import { MetronicLayout } from '@gtcx/ui';
import { DashboardTemplate } from '@gtcx/templates';
 
export function Dashboard() {
  return (
    <MetronicLayout variant="sidebar" menu={menuConfig}>
      <DashboardTemplate />
    </MetronicLayout>
  );
}

Accessibility Notes

• Ensure filter labels are explicit and visible.
• Use table row focus and keyboard navigation.
• Provide visible loading and empty states.

Tokens to Customize

• colorPrimary
• colorBgContainer
• borderRadiusLG