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

frontend/src/features/issues/components/StatusWorkflow.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+/**
+ * StatusWorkflow Component
+ *
+ * Interactive status selector with workflow transitions.
+ *
+ * @module features/issues/components/StatusWorkflow
+ */
+
+import {
+  CircleDot,
+  PlayCircle,
+  Clock,
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import type { IssueStatus } from '../types';
+import { STATUS_ORDER, STATUS_CONFIG } from '../constants';
+
+const STATUS_ICONS = {
+  open: CircleDot,
+  in_progress: PlayCircle,
+  in_review: Clock,
+  blocked: AlertCircle,
+  done: CheckCircle2,
+  closed: XCircle,
+} as const;
+
+interface StatusWorkflowProps {
+  currentStatus: IssueStatus;
+  onStatusChange: (status: IssueStatus) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function StatusWorkflow({
+  currentStatus,
+  onStatusChange,
+  disabled = false,
+  className,
+}: StatusWorkflowProps) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-lg">Status Workflow</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2" role="radiogroup" aria-label="Issue status">
+          {STATUS_ORDER.map((status) => {
+            const config = STATUS_CONFIG[status];
+            const Icon = STATUS_ICONS[status];
+            const isActive = currentStatus === status;
+
+            return (
+              <button
+                key={status}
+                type="button"
+                role="radio"
+                aria-checked={isActive}
+                disabled={disabled}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded-lg p-2 text-left transition-colors',
+                  isActive
+                    ? 'bg-primary/10 text-primary'
+                    : 'hover:bg-muted',
+                  disabled && 'cursor-not-allowed opacity-50'
+                )}
+                onClick={() => !disabled && onStatusChange(status)}
+              >
+                <Icon className={cn('h-4 w-4', config.color)} aria-hidden="true" />
+                <span className="text-sm">{config.label}</span>
+                {isActive && (
+                  <CheckCircle2 className="ml-auto h-4 w-4" aria-hidden="true" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}