# Dashboard UI Redesign — Implementation Plan

**Created:** 2026-06-02
**Spec:** `apps/dashboard-ui/docs/superpowers/specs/2026-06-02-dashboard-redesign-design.md`
**Approach:** Bottom-Up Design System (Approach A)

---

## TODOs

### Phase 1: Design Foundation

- [x] 1. Delete dead scaffold files (`src/style.css`, `src/counter.ts`, `public/icons.svg`)
- [x] 2. Add Google Fonts (Inter + JetBrains Mono) to `index.html`
- [x] 3. Create design tokens in `src/assets/main.css` using `@theme` directive
- [x] 4. Add base animation CSS (page transitions, modal transitions, sidebar transitions)

### Phase 2: Component Library

- [x] 5. Create `NgButton.vue` — primary, secondary, ghost, danger variants with loading state
- [x] 6. Create `NgCard.vue` — glass card wrapper with default, elevated, stat variants
- [x] 7. Create `NgModal.vue` — HeadlessUI Dialog wrapper with transitions, header/body/footer slots
- [x] 8. Create `NgTable.vue` — sortable headers, row hover, responsive layout
- [x] 9. Create `NgInput.vue` — text, password, search with label, error, hint
- [x] 10. Create `NgSelect.vue` — HeadlessUI Listbox wrapper
- [x] 11. Create `NgToggle.vue` — HeadlessUI Switch wrapper
- [x] 12. Create `NgBadge.vue` — status badges: online, offline, warning
- [x] 13. Create `NgToast.vue` + `useToast.ts` — notification system replacing `alert()`
- [x] 14. Create `NgSidebar.vue` — collapsible sidebar with icons + labels
- [x] 15. Create `NgDropdown.vue` — HeadlessUI Menu wrapper
- [x] 16. Create `NgAccordion.vue` — HeadlessUI Disclosure wrapper
- [x] 17. Create `NgTooltip.vue` — HeadlessUI Popover wrapper
- [x] 18. Create `NgSkeleton.vue` — loading skeleton placeholders

### Phase 3: Layout System

- [x] 19. Refactor `App.vue` — new sidebar layout with NgSidebar
- [x] 20. Add page transitions to router (fade + slide-up)
- [x] 21. Implement responsive breakpoints (mobile hamburger, tablet collapsed, desktop full)
- [x] 22. Add sidebar collapse/expand with `Cmd+B` shortcut

### Phase 4: Page Restyle

- [x] 23. Restyle `Login.vue` — centered card, no sidebar, animated gradient background
- [x] 24. Restyle `Dashboard.vue` — stat cards, traffic overview, recent activity, quick actions
- [x] 25. Restyle `Devices.vue` — search + filter bar, data table, pagination
- [x] 26. Restyle `DeviceDetail.vue` — back nav, sections (keys, settings, firewall, linked)
- [x] 27. Restyle `Servers.vue` — card-based layout with status indicators
- [x] 28. Restyle `TrafficHistory.vue` — filters, chart, data table, export
- [x] 29. Restyle `Users.vue` — table with role badges, inline create form
- [x] 30. Restyle `ShareConfig.vue` — public centered card, monospace config, copy/download
- [x] 31. Replace all `alert()`/`confirm()` with NgToast/NgModal
- [x] 32. Add loading skeletons to all pages
- [x] 33. Integrate Iconify icons throughout (nav, buttons, status)

### Phase 5: Polish

- [x] 34. Add micro-interactions (hover, focus states) to all components
- [x] 35. Add staggered list animations to tables and cards
- [x] 36. Add empty states for all data lists
- [x] 37. Add error states for failed loads

### Phase 6: Documentation & Cleanup

- [x] 38. Update `apps/dashboard-ui/AGENTS.md` with new architecture
- [x] 39. Update root `README.md` with dashboard architecture section
- [x] 40. Delete unused public assets (`public/icons.svg`)

---

## Final Verification Wave

- [x] F1. **Build Verification** — `npm run build` passes with zero errors
- [x] F2. **Lint Verification** — No TypeScript errors, no console warnings
- [x] F3. **Visual QA** — All pages render correctly with new design system
- [x] F4. **Responsive QA** — Mobile, tablet, desktop layouts work correctly

---

## Acceptance Criteria

### Must Have
- [x] Design tokens defined in `@theme` directive
- [x] 14 shared components in `src/components/ui/`
- [x] All 8 pages restyled with new components
- [x] Page transitions working
- [x] Responsive sidebar (mobile/tablet/desktop)
- [x] Toast notifications replacing `alert()`
- [x] Iconify icons integrated

### Must NOT Have
- [x] No `alert()` or `confirm()` calls
- [x] No hardcoded colors in Vue SFCs (use design tokens)
- [x] No `style.css` or `counter.ts` (deleted)
- [x] No breaking changes to API modules or stores

---

## Evidence

- [x] Build output shows zero errors
- [x] All pages use Ng* components
- [x] No raw Tailwind classes for colors (use tokens)
- [x] Responsive layout tested at 375px, 768px, 1024px+