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.

2.9 KiB Raw Blame History Unescape Escape