56 lines
1.3 KiB
Markdown
56 lines
1.3 KiB
Markdown
# Lovable App 1 — Ops UI Kit (Design-led Micro-App)
|
|
|
|
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.
|
|
|
|
## Goal
|
|
|
|
Create a visually polished **Ops Dashboard UI Kit** micro-app that feels like a premium admin console. This app is design-led: prioritize typography, spacing, states, and interaction polish.
|
|
|
|
## Scope constraints
|
|
|
|
- Only modify files in this repository.
|
|
- No backend calls; mock data + localStorage only
|
|
- No `console.log`
|
|
- No hardcoded colors (use CSS variables)
|
|
|
|
## Must-have pages
|
|
|
|
- `/` overview landing
|
|
- `/components` gallery of:
|
|
- buttons, inputs, selects
|
|
- badges, tabs
|
|
- dialogs/drawers
|
|
- toasts
|
|
- empty/loading/error states
|
|
- `/table` table demo with filters
|
|
|
|
## UX requirements
|
|
|
|
- Theme toggle (light/dark)
|
|
- Keyboard accessibility:
|
|
- Esc closes overlays
|
|
- focus returns to triggering element
|
|
- Micro-interactions:
|
|
- hover, press, focus rings
|
|
- subtle animation for drawer/dialog
|
|
|
|
## Table requirements
|
|
|
|
- Mock dataset: incidents
|
|
- Sort + filter + pagination
|
|
- Row actions menu
|
|
- Details drawer with tabs
|
|
|
|
## Deliverables
|
|
|
|
- Next.js 16 App Router app
|
|
- Tailwind v4
|
|
- TypeScript strict
|
|
- Scripts: `dev`, `check`, `build` (build uses `next build --webpack`)
|
|
|
|
## Success criteria
|
|
|
|
- Looks and feels premium
|
|
- Fully self-contained
|
|
- Ready to copy components into other dashboards
|