Dashboard
The home screen — usage stats, recent generations, and quick actions.
The Dashboard is the first screen you see after clicking into the app. It gives a glanceable overview of your activity and lets you jump to the most common workflows in one click.
What's on it
1. Welcome header
A greeting and a description of what the app can do. This is mostly for first-run context; feel free to remove it once your users are regulars.
2. Stat cards
Four cards showing lifetime counters:
| Card | What it counts |
|---|---|
| Total Generations | Every time a prompt was sent through /api/generate |
| Total Words | Sum of all words in returned content |
| Documents | Items in the Editor |
| Avg. Words / Generate | totalWords / totalGenerations |
All counters live in Zustand and persist across sessions. They are per-browser, not per-account.
3. Quick actions
Four popular templates displayed as clickable cards:
- Blog Post
- Product Description
- LinkedIn Post
- Cold Email
Clicking any of them takes you straight to the Generate page with that template pre-selected.
To change which templates appear here, edit the popularTemplateIds array at the top of app/(dashboard)/dashboard/page.tsx.
4. Recent generations
The 5 most recent entries from your history. Each shows:
- Template name and category badge
- First line of the output
- Word count, provider, model, relative time
Clicking a row opens the full content.
5. Category usage
A compact bar chart showing which template categories you use the most. Great for seeing whether your team is biased toward, say, social media over blog content.
Common patterns
- Empty state — First-time users see placeholder messaging with a "Create your first generation" CTA pointing to Templates.
- Refresh — Data is reactive from the Zustand store, so generating content on another tab updates the Dashboard automatically.
Customization
The file to edit: app/(dashboard)/dashboard/page.tsx.
Common tweaks:
- Change which stat cards appear (remove "Documents" if you don't use the Editor).
- Swap the bar chart for your own component from
components/ui/chart.tsx. - Add a "Daily streak" or "Tokens used this month" card by extending the Zustand store.
Next: Templates Page →