Project Dashboard Frontend
Documentation for project-dashboard-frontend
-
Documentation for adr
-
Implementation Summary Status: ✅ Complete - Proper theme system implemented The app now has a complete dark/light mode system with: CSS Custom Properties: Theme-aware tokens for colors, backgrounds, borders System Preference Support: Automatically detects prefers-color-scheme: dark Manual Override: Theme toggle component allows users to choose light, dark, or system Persistent Settings: User preference saved to localStorage Smooth Transitions: All theme changes are animated with CSS transitions Theme System Architecture CSS Custom Properties 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 :root { /* Light theme (default) / –brand-foreground: #07213a; –surface: #ffffff; –background: #f7fbff; –border-color: rgba(10,20,40,0.06); / … / } @media (prefers-color-scheme: dark) { :root { / Dark theme via media query / –brand-foreground: #e8f4fd; –surface: #1a1f2e; –background: #0f1419; –border-color: rgba(255,255,255,0.1); / … / } } [data-theme="light"] { / Manual light override / } [data-theme="dark"] { / Manual dark override */ } Theme Toggle Component Location: Top navigation bar (right side) Options: System → Light → Dark (cycles) Icons: Desktop, Sun, Moon Storage: Preferences saved to localStorage as theme Testing & QA Manual Testing Completed ✅ Browser: Chrome (Playwright automation) Pages Tested: Overview, Projects list Theme Modes: System, Light, Dark
-
This document records the dashboard spec and notes what the current frontend implementation provides vs. what remains optional or unimplemented. Stack and high-level Frontend: Vue 3 + Vite + TypeScript (Composition API), Bulma CSS, Apache ECharts. Backend adapter: Go in-memory adapter (existing). The app is intentionally read-only and in-memory; most aggregations are performed client-side. High-level status Core pages implemented: Overview (/), Projects (/projects), Project detail (/projects/:id), Customers (/customers), Customer detail (/customers/:id), Persons (/persons), Person detail (/persons/:id), Admin (/admin). Timeline (Gantt-like) charts implemented in Overview, Person detail and Customer detail; charts include a vertical “Today” marker. UI note: navbar-driven page indicator
-
This file lists small, prioritized fixes for the Project detail page UI (see screenshot). Each item is self-contained: files to edit, acceptance criteria, quick test commands, and an estimated effort. Mark an item as done by changing [ ] to [x] and committing the change. How to use Edit this file to mark a task done (replace [ ] with [x]). After applying a change locally, run the checks listed under “Quick check” for that task. Commit with a clear message, e.g. git add -A && git commit -m "fix(project): tidy project detail - hide empty fields". Tasks -1) Consolidate empty-state placeholders (high)