| The user wants a complete, self-contained analytics dashboard for a B2B SaaS product. Let me break down all the requirements: |
|
|
| 1. **Layout**: Left sidebar + topbar + main content area |
| 2. **Left sidebar**: Workspace switcher, 6 nav items with icons, user profile |
| 3. **Topbar**: Global search, date range picker, notifications with red dot |
| 4. **Main area**: |
| - 4 KPI cards with SVG sparklines |
| - Line chart (SVG) for weekly active users |
| - Donut chart (SVG) for traffic sources |
| - Sortable data table for transactions |
|
|
| Colors: neutral grays with #10b981 emerald accent |
| Light theme |
| Hover states and focus rings throughout |
|
|
| I need to create fake but realistic data and actually draw the sparklines and charts using SVG paths. Let me plan the data: |
|
|
| **KPI Cards**: |
| - Revenue: $124,500 (up 12%) |
| - Active Users: 8,234 (up 5%) |
| - Conversion Rate: 3.2% (up 0.4%) |
| - Churn: 2.1% (down 0.3%) |
|
|
| **Sparkline data**: I'll create small arrays of numbers for each |
|
|
| **Weekly active users line chart**: 12 weeks of data |
|
|
| **Traffic sources donut**: Organic (45%), Paid (30%), Social (15%), Direct (10%) |
|
|
| **Transactions table**: 8-10 rows with user, amount, date, status |
|
|
| For SVG sparklines, I'll map data points to coordinates and create path elements. |
|
|
| Let me build this step by step, making sure all the interactive elements work (collapsible nav, sortable table, hover states). |
