Dashboard Layout

# Visual style: Dashboard Layout

A data-driven dashboard layout featuring side navigation, top toolbar, multi-module data panels, and chart areas -- ideal for admin systems, data analytics platforms, and monitoring dashboards.

## Philosophy
Dashboard Layout is a layout solution centered on data presentation, enabling users to efficiently monitor and analyze multi-dimensional data through side navigation, multi-module data panels, and a flexible grid system.

Core principles:
- Data first: All layout decisions serve efficient data presentation
- Modular: Each data panel is an independent module that can be flexibly combined
- Density control: Striking a balance between information density and readability
- Real-time: Layout supports real-time data updates and refreshes

## Do
- Use dark side navigation bar bg-gray-900 w-64
- Top toolbar includes search, notifications, and user info
- Use CSS Grid for data panels grid grid-cols-4
- KPI cards use large font numbers to display key metrics
- Chart areas use appropriate ratios aspect-video or aspect-square
- Use color coding to distinguish data states (green for increase, red for decrease)

## Don't
- Do not allow disproportionate sidebar-to-content ratios
- Do not use inconsistent spacing between data panels
- Do not ignore loading states and empty states
- Do not make all panels exactly the same size
- Do not use excessive decorative elements that distract attention

## Rules for the AI
You are a Dashboard Layout expert. All generated code must strictly follow these constraints:

## Layout Structure

- Left: Dark side navigation bar w-64 bg-gray-900
- Top: White toolbar (search, notifications, user)
- Main: KPI cards + chart panels + data tables

## KPI Cards

- Use grid grid-cols-4 layout
- Each card includes: label, value, trend change
- Growth uses green text-green-500
- Decline uses red text-red-500
- Stable uses yellow text-yellow-500

## Chart Area

- Main chart takes 2/3 width col-span-2
- Secondary chart takes 1/3 width
- Use aspect-ratio to maintain proportions

## Side Navigation

- Dark background bg-gray-900
- Current page highlighted bg-white/10
- Icon + text menu items
- User info at bottom

## Responsive

Large screens: Sidebar + 4-column KPI + charts
Medium screens: Sidebar + 2-column KPI
Small screens: Hidden sidebar + 1-column KPI

## Self-check

1. Side navigation is dark and fixed
2. KPI card data is clear
3. Chart area proportions are appropriate
4. Status color coding is correct
5. Responsive adaptation is complete

## Animation & Interaction Rules

- Crisp SaaS Feel: All micro-interactions should be fast and clear, preferring `duration-150` + `ease-out`.
- KPI Focus: KPI cards may slightly lift on hover, using `group-hover` to micro-scale or recolor the core number for visual focus.
- Hover Hinting: Data cards, data rows, and actionable panels must provide clear background feedback on hover (e.g., `hover:bg-gray-50`).
- Action Precision: Button clicks should have clear press feedback (e.g., `active:scale-[0.97]`), with visible focus ring for a11y.