PROJECTTEMPLATE
Internal Dashboard
A single-page app for the numbers your team checks every day, which currently live in a spreadsheet or in somebody's head. The spec covers the layout, the components, and the API calls behind them; your job is to name the actual metrics and exactly where they come from. Be precise about the data source. "Pull the sales numbers" is how dashboards end up confidently wrong.
markdown
# Internal Dashboard Spec
## Project
An internal-only dashboard for [BUSINESS NAME] showing operational
metrics. Users: 3-10 staff members. Data: pulled from [DATA SOURCE].
## Stack
- Frontend: Svelte 5 with SvelteKit (or React 19 with Next.js; pick
one).
- Styling: Tailwind CSS.
- Component library: shadcn-svelte (Svelte) or shadcn/ui (React).
- Backend: existing API at `[API_URL]` (or generate one with Devii).
- Auth: simple email/password against a `users` table, with role
field. (Or pass through to the existing auth system.)
## Layout
Follow section 5.2 vocabulary:
- Top nav: logo on left, page title in center, user menu on right
(with logout).
- Side nav: collapsible. Links: Dashboard, Customers, Orders,
Reports, Settings (Settings only for admin role).
- Main content area.
## Pages
### Dashboard (`/`)
4 metric cards in a row:
- Today's revenue (vs. yesterday, with up/down arrow).
- Today's orders (vs. yesterday).
- Active customers this week.
- Open issues / tasks.
Below: 2 panels side-by-side:
- Line chart of revenue over the last 30 days.
- Table of the 10 most recent orders.
### Customers (`/customers`)
- Searchable, sortable, paginated table.
- Columns: Name, Email, Phone, Total spent, Last order, Actions.
- Click row to view detail page.
### Orders (`/orders`)
- Filterable by date range, status, customer.
- Columns: Order ID, Customer, Total, Status, Date.
- Status uses colored badges: green (paid), yellow (pending), red
(cancelled).
### Reports (`/reports`)
- Date range picker.
- 4 reports as cards: Revenue by day, Top products, Customer
acquisitions, Returns.
- Each card has a "Download CSV" button.
### Settings (`/settings`) [admin only]
- Tabs: Users, Integrations, Preferences.
- Users tab: list users with role dropdowns, "Invite user" button.
## Roles
See `roles.md`. Default:
- admin: all pages.
- manager: all except Settings.
- staff: Dashboard, Customers, Orders only.
## Design
See `design-tokens.md`.
## API Calls
- `GET /api/metrics/summary?date=today`
- `GET /api/customers?search=&page=&sort=`
- `GET /api/orders?from=&to=&status=`
- `GET /api/reports/revenue-by-day?from=&to=`
- (etc.)
## Out of Scope
- Mobile-optimized layout (desktop-first).
- Real-time updates (page refresh is fine).
- Customizable dashboards (fixed layout).
## Verification Checklist
- [ ] Login works for all 3 roles.
- [ ] Side nav reflects role (admin sees Settings, others don't).
- [ ] Dashboard cards show correct numbers from the API.
- [ ] Customers table sorts and filters.
- [ ] Orders table filters by date range correctly.
- [ ] Settings page is inaccessible to non-admins (returns 403 from
API and redirects in UI).