# Dasher Template Reference

Source URL: https://themewagon.github.io/dasher/

Use this as a cached local description of the Dasher admin-dashboard direction. Do not copy source code, assets, logos, or exact content. Recreate the feel using Tailwind, Inter, Font Awesome, and generated fake data.

## Layout Pattern
- Desktop admin shell with a fixed left sidebar and a top header inside the main content area.
- Sidebar contains product/app identity, grouped navigation links, active item highlight, and compact Font Awesome icons.
- Header contains page title, search field, notifications/messages, and user profile/avatar area when useful.
- Main canvas uses a soft gray background with white rounded cards.
- Dashboard page should feel dense but readable: KPI cards at top, charts/stat panels in the middle, recent activity and tables below.

## Components To Emulate
- KPI cards with icon capsule, label, large number, trend indicator, and small supporting text.
- Data table cards with toolbar, search/filter, status badges, row action icons, and pagination-like footer.
- Side-by-side analytics cards: revenue/order/activity chart placeholders, progress bars, donut-like stat widgets, location or category cards.
- Recent activity timeline/list with avatars or icon bullets.
- Polished modals for create/edit/delete workflows.
- Small toasts for save/delete feedback.

## Visual Direction
- Neutral background, white surfaces, subtle border, soft shadow, strong typography hierarchy.
- One clear accent color derived from the BA brief; if unspecified use teal/emerald or professional blue sparingly.
- Cards should have compact professional spacing, not oversized landing-page hero sections.
- Keep navigation, table, button, modal, and badge styling consistent across all pages.

## Responsive Behavior
- On tablet/mobile, sidebar can collapse into a top menu or remain as a compact icon rail.
- Tables should scroll horizontally or transform into stacked cards.
- Modals must fit small screens and remain usable.
