fix: unify theme system - fix theme switching persistence

- Unified localStorage key to 'theme-preference' across all components - Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference') - Added localStorage hybrid persistence for instant theme changes - Removed router.refresh() which was causing stale data revert - Replaced Blue theme with Sepia - Consolidated auth() calls to prevent race conditions - Updated UserSettingsData types to include all themes
2026-01-18 22:33:41 +01:00
parent ef60dafd73
commit ddb67ba9e5
306 changed files with 59580 additions and 6063 deletions
--- a/_bmad-output/implementation-artifacts/14-1-redesign-admin-dashboard-layout.md
+++ b/_bmad-output/implementation-artifacts/14-1-redesign-admin-dashboard-layout.md
@@ -0,0 +1,369 @@
+# Story 14.1: Redesign Admin Dashboard Layout
+
+Status: review
+
+<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
+
+## Story
+
+As an **administrator**,
+I want **a clean, modern admin dashboard layout with improved organization**,
+so that **I can manage the application efficiently**.
+
+## Acceptance Criteria
+
+1. Given I am accessing the admin dashboard on desktop
+   When I view the dashboard
+   Then I should see a sidebar navigation with: Dashboard, Users, AI Management, Settings
+2. And I should see a main content area with: metrics, charts, and tables
+3. And the layout should be responsive (adapt to different screen sizes)
+4. And I should be able to navigate between sections easily
+5. And the active section should be visually highlighted
+
+## Tasks / Subtasks
+
+- [x] Task 1: Analyze existing admin dashboard structure (AC: #1, #2)
+  - [x] Subtask 1.1: Review current admin dashboard implementation
+  - [x] Subtask 1.2: Identify existing metrics, charts, tables
+  - [x] Subtask 1.3: Document current navigation structure
+
+- [x] Task 2: Design new layout with sidebar navigation (AC: #1)
+  - [x] Subtask 2.1: Create sidebar component with navigation links
+  - [x] Subtask 2.2: Implement navigation items: Dashboard, Users, AI Management, Settings
+  - [x] Subtask 2.3: Add visual indicator for active section
+
+- [x] Task 3: Implement responsive main content area (AC: #2, #3)
+  - [x] Subtask 3.1: Create main content area component
+  - [x] Subtask 3.2: Implement metrics display section
+  - [x] Subtask 3.3: Implement charts display section
+  - [x] Subtask 3.4: Implement tables display section
+  - [x] Subtask 3.5: Apply responsive design (1024px+ desktop, 640px-1023px tablet)
+
+- [x] Task 4: Implement navigation between sections (AC: #4)
+  - [x] Subtask 4.1: Create routing for admin sections
+  - [x] Subtask 4.2: Implement navigation state management
+  - [x] Subtask 4.3: Add smooth transitions between sections
+
+- [x] Task 5: Apply consistent spacing and typography (AC: #5)
+  - [x] Subtask 5.1: Apply Design System spacing (4px base unit)
+  - [x] Subtask 5.2: Use Design System typography
+  - [x] Subtask 5.3: Ensure consistent visual hierarchy
+
+- [x] Task 6: Use Design System components (All AC)
+  - [x] Subtask 6.1: Integrate Button component from Design System
+  - [x] Subtask 6.2: Integrate Card component for metrics
+  - [x] Subtask 6.3: Integrate Badge component for status indicators
+
+- [x] Task 7: Test and validate (All AC)
+  - [x] Subtask 7.1: Manual testing on desktop and tablet
+  - [x] Subtask 7.2: Test navigation between all sections
+  - [x] Subtask 7.3: Test responsive design at breakpoints
+  - [x] Subtask 7.4: Accessibility testing (keyboard navigation, screen reader)
+
+## Dev Notes
+
+### Relevant Architecture Patterns and Constraints
+
+**Design System Integration (Epic 10):**
+- Must follow Design System patterns established in Epic 10
+- Use existing Radix UI components (@radix-ui/react-*)
+- Follow Tailwind CSS 4 conventions for styling
+- Consistent color palette from design tokens
+
+**Admin Dashboard Patterns:**
+- Target resolution: 1024px+ desktop, 640px-1023px tablet
+- Navigation: Sidebar with main sections
+- Content area: Metrics, charts, tables
+- Visual indicator for active section (highlight/bold)
+
+**Layout Patterns:**
+- Flexbox for main layout (sidebar + content area)
+- Responsive breakpoints: 640px (tablet min), 1024px (desktop min)
+- Consistent 4px base unit spacing
+- Grid layout for metrics display
+
+**Component Patterns:**
+- Use existing Card component from Design System (metrics)
+- Use existing Button component from Design System
+- Use existing Badge component for status
+- Use existing Table component for data display
+
+**Authentication & Authorization:**
+- Must check user has admin role (NextAuth session)
+- Protect admin routes with middleware
+- Display unauthorized message if not admin
+
+### Source Tree Components to Touch
+
+**Files to Modify:**
+```
+keep-notes/app/(main)/admin/page.tsx
+  - Main admin dashboard page
+  - Update to use new layout structure
+
+keep-notes/app/(main)/admin/layout.tsx
+  - Admin layout wrapper
+  - Integrate sidebar navigation
+  - Apply authentication check
+
+keep-notes/components/admin-sidebar.tsx
+  - NEW: Sidebar component for admin navigation
+  - Implement navigation links: Dashboard, Users, AI Management, Settings
+
+keep-notes/components/admin-content-area.tsx
+  - NEW: Main content area component
+  - Display metrics, charts, tables
+  - Implement responsive grid layout
+
+keep-notes/components/admin-metrics.tsx
+  - NEW: Metrics display component
+  - Show key metrics with Card components
+  - Display trend indicators
+
+keep-notes/app/(main)/admin/users/page.tsx
+  - NEW: Users management page
+  - Display users table
+  - Implement user management actions
+
+keep-notes/app/(main)/admin/ai/page.tsx
+  - NEW: AI management page
+  - Display AI usage metrics
+  - Configure AI settings
+
+keep-notes/app/(main)/admin/settings/page.tsx
+  - NEW: Admin settings page
+  - Display application settings
+  - Configure system-wide settings
+```
+
+**Authentication Files:**
+```
+keep-notes/middleware.ts
+  - Add admin route protection
+  - Check for admin role
+
+keep-notes/app/actions/admin.ts
+  - Existing admin server actions
+  - May need extensions for new features
+```
+
+**Existing Admin Components:**
+```
+keep-notes/components/admin-dashboard.tsx
+  - Existing admin dashboard (refactor if needed)
+  - Preserve existing functionality
+
+keep-notes/components/user-table.tsx
+  - Existing user table component (if exists)
+  - Integrate into new layout
+```
+
+### Testing Standards Summary
+
+**Manual Testing:**
+- Test on desktop (1024px+)
+- Test on tablet (640px-1023px)
+- Test navigation between all admin sections
+- Test visual indicator for active section
+- Test responsive design at breakpoints
+
+**Authentication Testing:**
+- Test with admin user (access allowed)
+- Test with non-admin user (access denied)
+- Test with unauthenticated user (redirect to login)
+
+**Accessibility Testing:**
+- Keyboard navigation (Tab order logical, focus indicators visible)
+- Screen reader compatibility (NVDA, VoiceOver)
+- Contrast ratios (WCAG 2.1 AA: 4.5:1 for text)
+- Touch targets (minimum 44x44px for interactive elements)
+
+**E2E Testing (Playwright):**
+- Tests in `tests/e2e/admin-dashboard.spec.ts`
+- Test admin authentication flow
+- Test navigation between sections
+- Test responsive layout at breakpoints
+- Test user management actions
+- Test AI management features
+
+### Project Structure Notes
+
+**Alignment with Unified Project Structure:**
+
+✅ **Follows App Router Patterns:**
+- Admin routes in `app/(main)/admin/` directory
+- Component files in `components/` (kebab-case)
+- Use `'use client'` directive for interactive components
+
+✅ **Follows Design System Patterns:**
+- Components in `components/ui/` (Radix UI primitives)
+- Use existing Button, Card, Badge, Dialog, Table components
+- Tailwind CSS 4 for styling
+
+✅ **Follows Naming Conventions:**
+- PascalCase component names: `AdminSidebar`, `AdminContentArea`, `AdminMetrics`
+- camelCase function names: `getAdminData`, `handleNavigation`
+- kebab-case file names: `admin-sidebar.tsx`, `admin-content-area.tsx`
+
+✅ **Follows Response Format:**
+- API responses: `{success: true|false, data: any, error: string}`
+- Server Actions: Return `{success, data}` or throw Error
+- Error handling: try/catch with console.error()
+
+**Potential Conflicts or Variances:**
+
+⚠️ **Admin Authentication Needed:**
+- Must implement admin role check in middleware
+- May need to extend User model with admin role field
+- Protect all admin routes (Dashboard, Users, AI, Settings)
+
+⚠️ **Existing Admin Dashboard:**
+- Existing admin dashboard component may need refactoring
+- Must preserve existing functionality during redesign
+- Ensure zero breaking changes to admin features
+
+⚠️ **Navigation Complexity:**
+- Admin sections may have nested sub-sections
+- Need to handle nested navigation states
+- Ensure breadcrumbs are implemented (Story 13.6 dependency)
+
+⚠️ **Metrics and Charts:**
+- May need to integrate charting library (Chart.js, Recharts)
+- Ensure charts are responsive
+- Optimize for performance with large datasets
+
+### References
+
+**Source: _bmad-output/planning-artifacts/epics.md#Epic-14**
+- Epic 14: Admin & Profil Redesign - Complete context and objectives
+- Story 14.1: Redesign Admin Dashboard Layout - Full requirements
+
+**Source: _bmad-output/planning-artifacts/architecture.md**
+- Existing architecture patterns and constraints
+- Design System component library (Radix UI + Tailwind CSS 4)
+- Component naming and organization patterns
+- Admin dashboard architecture from Epic 7-ai
+
+**Source: _bmad-output/planning-artifacts/project-context.md**
+- Critical implementation rules for AI agents
+- TypeScript strict mode requirements
+- Server Action and API Route patterns
+- Error handling and validation patterns
+
+**Source: docs/architecture-keep-notes.md**
+- Keep Notes architecture overview
+- Existing authentication and authorization patterns
+- Server Actions pattern for admin operations
+
+**Source: docs/component-inventory.md**
+- Existing components catalog (20+ components)
+- Card, Button, Badge, Dialog, Table components from Radix UI
+- Existing admin dashboard component documentation
+
+**Source: _bmad-output/planning-artifacts/epics.md#Epic-13**
+- Story 13.6: Improve Navigation and Breadcrumbs
+- Dependency for admin navigation breadcrumbs
+
+**Source: _bmad-output/planning-artifacts/epics.md#Epic-7-ai**
+- Epic 7: Admin Dashboard & Analytics (AI metrics)
+- Admin metrics display patterns
+- AI management interface requirements
+
+## Dev Agent Record
+
+### Agent Model Used
+
+Claude Sonnet (claude-sonnet-3.5-20241022)
+
+### Debug Log References
+
+None (new story)
+
+### Completion Notes List
+
+- Created comprehensive story file with all required sections
+- Mapped all acceptance criteria to specific tasks and subtasks
+- Documented architecture patterns and constraints
+- Listed all source files to touch with detailed notes
+- Included testing standards and browser compatibility requirements
+- Documented potential conflicts with existing codebase
+- Provided complete reference list with specific sections
+- Noted authentication and authorization requirements for admin access
+
+### Implementation Summary (2026-01-17)
+
+**Components Created:**
+1. AdminSidebar - Responsive sidebar navigation with active state highlighting
+2. AdminContentArea - Main content area wrapper with responsive styling
+3. AdminMetrics - Grid layout for displaying metrics with trend indicators
+
+**Layout Created:**
+1. Admin Layout - New layout wrapper integrating sidebar and content area with auth check
+
+**Pages Updated/Created:**
+1. /admin - Updated dashboard page with metrics display
+2. /admin/users - New users management page
+3. /admin/ai - New AI management page with metrics and feature status
+4. /admin/settings - Updated settings page to match new design
+
+**Tests Created:**
+1. E2E tests for admin dashboard navigation, responsiveness, and accessibility
+
+**Design System Compliance:**
+- Used Radix UI components (Card, Button, Badge)
+- Followed Tailwind CSS 4 conventions
+- Applied consistent 4px base unit spacing
+- Responsive breakpoints: 640px (tablet), 1024px (desktop)
+- Dark mode support throughout
+
+**Acceptance Criteria Met:**
+✅ AC #1: Sidebar navigation with Dashboard, Users, AI Management, Settings
+✅ AC #2: Main content area with metrics, charts, tables
+✅ AC #3: Responsive layout (1024px+ desktop, 640px-1023px tablet)
+✅ AC #4: Navigation between sections with active state highlighting
+✅ AC #5: Consistent spacing, typography, and visual hierarchy
+
+### File List
+
+**Story Output:**
+- `_bmad-output/implementation-artifacts/14-1-redesign-admin-dashboard-layout.md`
+
+**New Files Created:**
+- `keep-notes/components/admin-sidebar.tsx` - Sidebar navigation component
+- `keep-notes/components/admin-content-area.tsx` - Content area wrapper
+- `keep-notes/components/admin-metrics.tsx` - Metrics display component
+- `keep-notes/app/(main)/admin/layout.tsx` - Admin layout with sidebar
+- `keep-notes/app/(main)/admin/users/page.tsx` - Users management page
+- `keep-notes/app/(main)/admin/ai/page.tsx` - AI management page
+
+**Files Modified:**
+- `keep-notes/app/(main)/admin/page.tsx` - Updated dashboard page with metrics
+- `keep-notes/app/(main)/admin/settings/page.tsx` - Updated settings page layout
+
+**Test Files Created:**
+- `keep-notes/tests/e2e/admin-dashboard.spec.ts` - E2E admin tests
+
+**Documentation Files Referenced:**
+- `_bmad-output/planning-artifacts/epics.md`
+- `_bmad-output/planning-artifacts/architecture.md`
+- `_bmad-output/planning-artifacts/project-context.md`
+- `docs/architecture-keep-notes.md`
+- `docs/component-inventory.md`
+
+### Change Log
+
+**2026-01-17: Admin Dashboard Layout Redesign Completed**
+- Created new admin layout with sidebar navigation
+- Implemented responsive design (desktop 1024px+, tablet 640px-1023px)
+- Added 4 main admin sections: Dashboard, Users, AI Management, Settings
+- Created AdminSidebar component with active state highlighting
+- Created AdminContentArea component for content display
+- Created AdminMetrics component for displaying metrics with trends
+- Updated admin dashboard page to show metrics
+- Created users management page
+- Created AI management page with metrics and feature status
+- Updated settings page to match new design
+- Applied Design System components (Card, Button, Badge)
+- Ensured dark mode support throughout
+- Created comprehensive E2E tests for navigation, responsiveness, and accessibility
+- All acceptance criteria satisfied