diff --git a/.sisyphus/plans/bugfix-status-traffic-firewall.md b/.sisyphus/plans/archived/bugfix-status-traffic-firewall.md similarity index 100% rename from .sisyphus/plans/bugfix-status-traffic-firewall.md rename to .sisyphus/plans/archived/bugfix-status-traffic-firewall.md diff --git a/.sisyphus/plans/device-agent-reliability.md b/.sisyphus/plans/archived/device-agent-reliability.md similarity index 100% rename from .sisyphus/plans/device-agent-reliability.md rename to .sisyphus/plans/archived/device-agent-reliability.md diff --git a/.sisyphus/plans/dashboard-ui-redesign.md b/.sisyphus/plans/dashboard-ui-redesign.md new file mode 100644 index 0000000..cb0674f --- /dev/null +++ b/.sisyphus/plans/dashboard-ui-redesign.md @@ -0,0 +1,104 @@ +# 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+ diff --git a/README.md b/README.md index 6b3321c..2f09fe6 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ NexusGuard is an Enterprise Zero-Trust SD-WAN solution built with Go, Vue 3, and ## 🏗️ System Architecture This suite contains three main components: 1. **[Server Core](http://git.datadunia.com/nexusguard/nexus-server-core)**: The central API and VPN Hub managing database state, token distribution, and Linux firewall isolation. -2. **[Dashboard UI](http://git.datadunia.com/nexusguard/nexus-dashboard-ui)**: The Admin Web GUI for managing Nodes, Users, Devices, and Firewall rules. +2. **[Dashboard UI](http://git.datadunia.com/nexusguard/nexus-dashboard-ui)**: The Admin Web GUI for managing Nodes, Users, Devices, and Firewall rules. Features a futuristic glassmorphism design system using Vue 3, Vite, TailwindCSS v4, and HeadlessUI. 3. **[Device Agent](http://git.datadunia.com/nexusguard/nexus-device-agent)**: A stealth background daemon for Linux client machines that establishes memory-injected WireGuard tunnels. --- @@ -239,3 +239,4 @@ NexusGuard/ ├── .env.example # Environment template └── Makefile # Quick commands ``` +