122 lines
2.9 KiB
Markdown
122 lines
2.9 KiB
Markdown
# Bolt App 1 — Ops UI Kit (Micro-App)
|
||
|
||
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
|
||
|
||
## Mission
|
||
|
||
Build a **UI/UX-rich** Next.js 16 micro-app called **Ops UI Kit** that showcases production-grade operations dashboard patterns. This app will later be cross-pollinated into `dashboards/admin-web` and `dashboards/tracker-web`.
|
||
|
||
## Scope / Safety
|
||
|
||
- Only change files in this repository.
|
||
- **No backend / no network calls.** Use mock data and localStorage.
|
||
- **No auth, no Cosmos, no Key Vault.**
|
||
- **No `console.log`.**
|
||
- **No hardcoded colors.** Define a small set of CSS variables in `src/app/globals.css` (e.g. `--ux-*`) and only use those + Tailwind utilities.
|
||
- **Do not edit** any other repo folder.
|
||
|
||
## Stack requirements
|
||
|
||
- Next.js `16.1.x` (App Router)
|
||
- React `19.x`
|
||
- TypeScript strict
|
||
- TailwindCSS v4
|
||
- shadcn/ui-style components (Radix + Tailwind)
|
||
- lucide-react icons
|
||
- pnpm package manager
|
||
|
||
## App pages (required)
|
||
|
||
- `/` — overview landing + links to demos
|
||
- `/table` — DataTable demo
|
||
- `/filters` — filter builder demo
|
||
- `/details` — drawers/modals demo
|
||
- `/states` — loading/empty/error/success patterns
|
||
- `/kpi` — KPI cards + tiny chart placeholders
|
||
|
||
## App shell UX (required)
|
||
|
||
- Left sidebar navigation (responsive)
|
||
- Top bar with:
|
||
- global search input (client-side; filters mock data)
|
||
- theme toggle (light/dark)
|
||
- help button showing shortcuts
|
||
- Keyboard shortcuts:
|
||
- `Cmd+K` opens command palette
|
||
- `Esc` closes modal/drawer
|
||
|
||
## Demo requirements (high polish)
|
||
|
||
### 1) DataTable
|
||
|
||
Mock dataset (~80–120 rows) representing “incidents” or “webhook deliveries” with:
|
||
|
||
- `id`, `status`, `severity`, `service`, `createdAt`, `requestId`, `summary`, `tags`
|
||
|
||
Table must include:
|
||
|
||
- sorting
|
||
- pagination
|
||
- column visibility toggle
|
||
- row selection + bulk actions bar
|
||
- per-row actions menu:
|
||
- copy `requestId`
|
||
- copy row JSON
|
||
- open details drawer
|
||
- sticky header
|
||
- expandable row details
|
||
|
||
### 2) Filter Builder
|
||
|
||
A filter panel supporting:
|
||
|
||
- faceted filters (status, severity, service)
|
||
- date range (simple UI)
|
||
- free-text search
|
||
- active filter chips row
|
||
- clear all
|
||
- save/load presets (localStorage)
|
||
|
||
### 3) Details Drawer
|
||
|
||
Row click opens right-side drawer with tabs:
|
||
|
||
- Overview (key/value)
|
||
- Raw JSON (pretty-printed)
|
||
- Notes (editable, stored locally)
|
||
|
||
Focus rules:
|
||
|
||
- opening drawer moves focus inside
|
||
- closing returns focus to triggering row
|
||
|
||
### 4) States Gallery
|
||
|
||
Reusable patterns for:
|
||
|
||
- skeleton loading
|
||
- empty state with CTA
|
||
- inline error banner with retry
|
||
- toast notifications
|
||
- destructive confirm dialog
|
||
|
||
## Deliverables
|
||
|
||
Create a complete app with:
|
||
|
||
- `package.json` scripts: `dev`, `check`, `build`, `lint`, `test`
|
||
- `check` must run `tsc --noEmit` + `eslint`
|
||
- `build` must run `next build --webpack`
|
||
|
||
## Verification
|
||
|
||
From the repo root:
|
||
|
||
- `pnpm install`
|
||
- `pnpm run check`
|
||
- `pnpm run build`
|
||
|
||
## Output expectation
|
||
|
||
Open a PR containing only this app. No other repo changes.
|