feat(frontend): implement main dashboard page (#48)

Implement the main dashboard / projects list page for Syndarix as the landing page after login. The implementation includes: Dashboard Components: - QuickStats: Overview cards showing active projects, agents, issues, approvals - ProjectsSection: Grid/list view with filtering and sorting controls - ProjectCardGrid: Rich project cards for grid view - ProjectRowList: Compact rows for list view - ActivityFeed: Real-time activity sidebar with connection status - PerformanceCard: Performance metrics display - EmptyState: Call-to-action for new users - ProjectStatusBadge: Status indicator with icons - ComplexityIndicator: Visual complexity dots - ProgressBar: Accessible progress bar component Features: - Projects grid/list view with view mode toggle - Filter by status (all, active, paused, completed, archived) - Sort by recent, name, progress, or issues - Quick stats overview with counts - Real-time activity feed sidebar with live/reconnecting status - Performance metrics card - Create project button linking to wizard - Responsive layout for mobile/desktop - Loading skeleton states - Empty state for new users API Integration: - useProjects hook for fetching projects (mock data until backend ready) - useDashboardStats hook for statistics - TanStack Query for caching and data fetching Testing: - 37 unit tests covering all dashboard components - E2E test suite for dashboard functionality - Accessibility tests (keyboard nav, aria attributes, heading hierarchy) Technical: - TypeScript strict mode compliance - ESLint passing - WCAG AA accessibility compliance - Mobile-first responsive design - Dark mode support via semantic tokens - Follows design system guidelines
2025-12-30 23:46:50 +01:00
parent 9b41571967
commit 551dbb7293
67 changed files with 8879 additions and 0 deletions
--- a/frontend/src/features/issues/mocks.ts
+++ b/frontend/src/features/issues/mocks.ts
@@ -0,0 +1,252 @@
+/**
+ * Issue Management Mock Data
+ *
+ * Mock data for development and testing.
+ * This will be removed once the backend API is implemented.
+ *
+ * @module features/issues/mocks
+ */
+
+import type { IssueSummary, IssueDetail } from './types';
+
+/**
+ * Mock issues for list view
+ */
+export const mockIssues: IssueSummary[] = [
+  {
+    id: 'ISS-001',
+    number: 42,
+    title: 'Implement user authentication flow',
+    description:
+      'Create complete authentication flow with login, register, and password reset.',
+    status: 'in_progress',
+    priority: 'high',
+    labels: ['feature', 'auth', 'backend'],
+    sprint: 'Sprint 3',
+    assignee: { id: 'agent-be', name: 'Backend Engineer', type: 'agent' },
+    created_at: '2025-01-15T10:30:00Z',
+    updated_at: '2025-01-20T14:22:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-002',
+    number: 43,
+    title: 'Design product catalog component',
+    description: 'Create reusable product card and catalog grid components.',
+    status: 'in_review',
+    priority: 'medium',
+    labels: ['feature', 'frontend', 'ui'],
+    sprint: 'Sprint 3',
+    assignee: { id: 'agent-fe', name: 'Frontend Engineer', type: 'agent' },
+    created_at: '2025-01-16T09:00:00Z',
+    updated_at: '2025-01-20T15:30:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-003',
+    number: 44,
+    title: 'Fix cart total calculation bug',
+    description: 'Cart total shows incorrect amount when discount is applied.',
+    status: 'blocked',
+    priority: 'high',
+    labels: ['bug', 'critical', 'backend'],
+    sprint: 'Sprint 3',
+    assignee: { id: 'agent-be', name: 'Backend Engineer', type: 'agent' },
+    created_at: '2025-01-17T11:00:00Z',
+    updated_at: '2025-01-20T13:00:00Z',
+    sync_status: 'pending',
+    blocked_by: 'Waiting for discount API specification',
+  },
+  {
+    id: 'ISS-004',
+    number: 45,
+    title: 'Add product search functionality',
+    description: 'Implement full-text search with filters for the product catalog.',
+    status: 'open',
+    priority: 'medium',
+    labels: ['feature', 'search', 'backend'],
+    sprint: 'Sprint 3',
+    assignee: null,
+    created_at: '2025-01-18T14:00:00Z',
+    updated_at: '2025-01-18T14:00:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-005',
+    number: 46,
+    title: 'Optimize database queries for product listing',
+    description: 'Performance optimization for product queries with pagination.',
+    status: 'done',
+    priority: 'low',
+    labels: ['performance', 'backend', 'database'],
+    sprint: 'Sprint 2',
+    assignee: { id: 'agent-be', name: 'Backend Engineer', type: 'agent' },
+    created_at: '2025-01-10T09:00:00Z',
+    updated_at: '2025-01-18T10:00:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-006',
+    number: 47,
+    title: 'Create checkout page wireframes',
+    description: 'Design wireframes for the checkout flow including payment selection.',
+    status: 'done',
+    priority: 'high',
+    labels: ['design', 'checkout', 'ui'],
+    sprint: 'Sprint 2',
+    assignee: { id: 'agent-po', name: 'Product Owner', type: 'agent' },
+    created_at: '2025-01-08T08:00:00Z',
+    updated_at: '2025-01-15T16:00:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-007',
+    number: 48,
+    title: 'Implement responsive navigation',
+    description: 'Create mobile-friendly navigation with hamburger menu.',
+    status: 'open',
+    priority: 'medium',
+    labels: ['feature', 'frontend', 'responsive'],
+    sprint: null,
+    assignee: null,
+    created_at: '2025-01-19T10:00:00Z',
+    updated_at: '2025-01-19T10:00:00Z',
+    sync_status: 'synced',
+  },
+  {
+    id: 'ISS-008',
+    number: 49,
+    title: 'Set up E2E test framework',
+    description: 'Configure Playwright for end-to-end testing.',
+    status: 'in_progress',
+    priority: 'medium',
+    labels: ['testing', 'infrastructure'],
+    sprint: 'Sprint 3',
+    assignee: { id: 'agent-qa', name: 'QA Engineer', type: 'agent' },
+    created_at: '2025-01-20T08:00:00Z',
+    updated_at: '2025-01-20T12:00:00Z',
+    sync_status: 'synced',
+  },
+];
+
+/**
+ * Mock issue detail for detail view
+ */
+export const mockIssueDetail: IssueDetail = {
+  id: 'ISS-001',
+  number: 42,
+  title: 'Implement user authentication flow',
+  description: `## Overview
+Create a complete authentication flow for the e-commerce platform.
+
+## Requirements
+- Login with email/password
+- Registration with email verification
+- Password reset functionality
+- OAuth support (Google, GitHub)
+- JWT token management
+- Session handling
+
+## Acceptance Criteria
+- [ ] Users can register with email and password
+- [ ] Users receive email verification link
+- [ ] Users can log in with verified email
+- [ ] Password reset email is sent within 30 seconds
+- [ ] OAuth buttons redirect properly
+- [x] JWT tokens are stored securely
+- [x] Tokens refresh automatically
+
+## Technical Notes
+- Use FastAPI security utilities
+- Store sessions in Redis
+- Follow OWASP guidelines`,
+  status: 'in_progress',
+  priority: 'high',
+  labels: [
+    { id: 'lbl-1', name: 'feature', color: '#3b82f6' },
+    { id: 'lbl-2', name: 'auth', color: '#8b5cf6' },
+    { id: 'lbl-3', name: 'backend', color: '#10b981' },
+    { id: 'lbl-4', name: 'security', color: '#ef4444' },
+  ],
+  sprint: 'Sprint 3',
+  milestone: 'MVP Launch',
+  story_points: 8,
+  assignee: { id: 'agent-be', name: 'Backend Engineer', type: 'agent', avatar: 'BE' },
+  reporter: { id: 'agent-po', name: 'Product Owner', type: 'agent', avatar: 'PO' },
+  created_at: '2025-01-15T10:30:00Z',
+  updated_at: '2025-01-20T14:22:00Z',
+  due_date: '2025-02-01',
+  sync_status: 'synced',
+  external_url: 'https://gitea.example.com/project/issues/42',
+  branch: 'feature/42-auth-flow',
+  pull_request: 'PR #15',
+  activity: [
+    {
+      id: 'act-001',
+      type: 'status_change',
+      actor: { id: 'agent-be', name: 'Backend Engineer', type: 'agent' },
+      message: 'moved issue from "Open" to "In Progress"',
+      timestamp: '2 hours ago',
+    },
+    {
+      id: 'act-002',
+      type: 'comment',
+      actor: { id: 'agent-be', name: 'Backend Engineer', type: 'agent' },
+      message:
+        'Started implementing JWT token generation. Using HS256 algorithm as discussed in architecture meeting.',
+      timestamp: '3 hours ago',
+    },
+    {
+      id: 'act-003',
+      type: 'assignment',
+      actor: { id: 'agent-po', name: 'Product Owner', type: 'agent' },
+      message: 'assigned this issue to Backend Engineer',
+      timestamp: '1 day ago',
+    },
+    {
+      id: 'act-004',
+      type: 'label',
+      actor: { id: 'agent-po', name: 'Product Owner', type: 'agent' },
+      message: 'added labels: security, backend',
+      timestamp: '1 day ago',
+    },
+    {
+      id: 'act-005',
+      type: 'created',
+      actor: { id: 'agent-po', name: 'Product Owner', type: 'agent' },
+      message: 'created this issue',
+      timestamp: '5 days ago',
+    },
+  ],
+};
+
+/**
+ * Mock sprints for filter options
+ */
+export const mockSprints = ['Sprint 3', 'Sprint 2', 'Sprint 1'];
+
+/**
+ * Mock assignees for filter options
+ */
+export const mockAssignees = [
+  { id: 'agent-be', name: 'Backend Engineer', type: 'agent' as const },
+  { id: 'agent-fe', name: 'Frontend Engineer', type: 'agent' as const },
+  { id: 'agent-qa', name: 'QA Engineer', type: 'agent' as const },
+  { id: 'agent-po', name: 'Product Owner', type: 'agent' as const },
+];
+
+/**
+ * Mock labels for filter options
+ */
+export const mockLabels = [
+  'feature',
+  'bug',
+  'backend',
+  'frontend',
+  'ui',
+  'auth',
+  'testing',
+  'performance',
+  'design',
+  'infrastructure',
+];