Internal Dashboard (svelte Or React)

# 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).