feat(frontend): add Dashboard page and components for #53

Implement the main dashboard homepage with:
- WelcomeHeader: Personalized greeting with user name
- DashboardQuickStats: Stats cards for projects, agents, issues, approvals
- RecentProjects: Dynamic grid showing 3-6 recent projects
- PendingApprovals: Action-required approvals section
- EmptyState: Onboarding experience for new users
- useDashboard hook: Mock data fetching with React Query

The dashboard serves as the authenticated homepage at /(authenticated)/
and provides quick access to all project management features.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/app/[locale]/(authenticated)/page.tsx

@@ -0,0 +1,23 @@
+/**
+ * Dashboard Page
+ *
+ * Main authenticated homepage showing:
+ * - Quick stats overview
+ * - Recent projects
+ * - Pending approvals
+ * - Real-time activity feed
+ *
+ * @see Issue #53
+ */
+
+import { Metadata } from 'next';
+import { Dashboard } from '@/components/dashboard';
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'Overview of your projects, agents, and activity',
+};
+
+export default function DashboardPage() {
+  return <Dashboard />;
+}

frontend/src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,131 @@
+/**
+ * Dashboard Component
+ *
+ * Main dashboard layout orchestrator.
+ * Combines all dashboard sub-components into a cohesive layout.
+ *
+ * Layout:
+ * +------------------------------------------+------------------+
+ * |  Welcome Header                          |   ACTIVITY       |
+ * +------------------------------------------+   FEED           |
+ * |  Quick Stats (4 cards)                   |   SIDEBAR        |
+ * +------------------------------------------+                  |
+ * |  Recent Projects (3-6 cards)             |                  |
+ * +------------------------------------------+                  |
+ * |  Pending Approvals (if any)              |                  |
+ * +------------------------------------------+------------------+
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { useCallback } from 'react';
+import { toast } from 'sonner';
+import { Card } from '@/components/ui/card';
+import { ActivityFeed } from '@/components/activity/ActivityFeed';
+import { WelcomeHeader } from './WelcomeHeader';
+import { DashboardQuickStats } from './DashboardQuickStats';
+import { RecentProjects } from './RecentProjects';
+import { PendingApprovals } from './PendingApprovals';
+import { EmptyState } from './EmptyState';
+import { useDashboard, type PendingApproval } from '@/lib/api/hooks/useDashboard';
+import { useAuth } from '@/lib/auth/AuthContext';
+import { useProjectEvents } from '@/lib/hooks/useProjectEvents';
+import { useProjectEventsFromStore } from '@/lib/stores/eventStore';
+
+export interface DashboardProps {
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function Dashboard({ className }: DashboardProps) {
+  const { user } = useAuth();
+  const { data, isLoading, error } = useDashboard();
+
+  // Real-time events - using a generic project ID for dashboard-wide events
+  // In production, this would be a dedicated dashboard events endpoint
+  const { connectionState } = useProjectEvents('dashboard', {
+    autoConnect: true,
+  });
+  const events = useProjectEventsFromStore('dashboard');
+
+  // Get user's first name for empty state
+  const firstName = user?.first_name || user?.email?.split('@')[0] || 'there';
+
+  // Handle approval actions
+  const handleApprove = useCallback((approval: PendingApproval) => {
+    // TODO: Implement actual approval API call
+    toast.success(`Approved: ${approval.title}`, {
+      description: `${approval.projectName}`,
+    });
+  }, []);
+
+  const handleReject = useCallback((approval: PendingApproval) => {
+    // TODO: Implement actual rejection API call
+    toast.info(`Rejected: ${approval.title}`, {
+      description: `${approval.projectName}`,
+    });
+  }, []);
+
+  // Show error state
+  if (error) {
+    toast.error('Failed to load dashboard data', {
+      description: 'Please try refreshing the page',
+    });
+  }
+
+  // Check if user has no projects (empty state)
+  const hasNoProjects = !isLoading && (!data?.recentProjects || data.recentProjects.length === 0);
+
+  return (
+    <div className={className}>
+      <div className="container mx-auto px-4 py-6">
+        {/* Welcome Header - always shown */}
+        <WelcomeHeader className="mb-6" />
+
+        {hasNoProjects ? (
+          // Empty state for new users
+          <EmptyState userName={firstName} />
+        ) : (
+          // Main dashboard layout
+          <div className="grid gap-6 lg:grid-cols-[1fr_350px]">
+            {/* Main Content */}
+            <div className="space-y-6">
+              {/* Quick Stats */}
+              <DashboardQuickStats stats={data?.stats} isLoading={isLoading} />
+
+              {/* Recent Projects */}
+              <RecentProjects projects={data?.recentProjects} isLoading={isLoading} />
+
+              {/* Pending Approvals */}
+              <PendingApprovals
+                approvals={data?.pendingApprovals}
+                isLoading={isLoading}
+                onApprove={handleApprove}
+                onReject={handleReject}
+              />
+            </div>
+
+            {/* Activity Feed Sidebar */}
+            <div className="hidden lg:block">
+              <Card className="sticky top-4">
+                <ActivityFeed
+                  events={events}
+                  connectionState={connectionState}
+                  isLoading={isLoading}
+                  maxHeight={600}
+                  showHeader
+                  title="Recent Activity"
+                  enableFiltering={false}
+                  enableSearch={false}
+                  compact
+                />
+              </Card>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/DashboardQuickStats.tsx

@@ -0,0 +1,63 @@
+/**
+ * DashboardQuickStats Component
+ *
+ * Displays quick stats cards for the dashboard:
+ * - Active Projects
+ * - Running Agents
+ * - Open Issues
+ * - Pending Approvals
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { Folder, Bot, CircleDot, AlertCircle } from 'lucide-react';
+import { StatCard } from '@/components/admin/StatCard';
+import type { DashboardStats } from '@/lib/api/hooks/useDashboard';
+
+export interface DashboardQuickStatsProps {
+  /** Stats data */
+  stats?: DashboardStats;
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function DashboardQuickStats({ stats, isLoading = false, className }: DashboardQuickStatsProps) {
+  return (
+    <div className={className}>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Active Projects"
+          value={stats?.activeProjects ?? 0}
+          icon={Folder}
+          description="Currently in progress"
+          loading={isLoading}
+        />
+        <StatCard
+          title="Running Agents"
+          value={stats?.runningAgents ?? 0}
+          icon={Bot}
+          description="Working on tasks"
+          loading={isLoading}
+        />
+        <StatCard
+          title="Open Issues"
+          value={stats?.openIssues ?? 0}
+          icon={CircleDot}
+          description="Across all projects"
+          loading={isLoading}
+        />
+        <StatCard
+          title="Pending Approvals"
+          value={stats?.pendingApprovals ?? 0}
+          icon={AlertCircle}
+          description="Awaiting your review"
+          loading={isLoading}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/EmptyState.tsx

@@ -0,0 +1,61 @@
+/**
+ * EmptyState Component
+ *
+ * Displays a welcome message for new users with no projects.
+ * Provides call-to-action to create first project.
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { Rocket, Bot, Settings } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/lib/i18n/routing';
+
+export interface EmptyStateProps {
+  /** User's first name for personalization */
+  userName?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function EmptyState({ userName = 'there', className }: EmptyStateProps) {
+  return (
+    <Card className={className}>
+      <CardContent className="py-12 text-center">
+        <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <Rocket className="h-8 w-8 text-primary" />
+        </div>
+
+        <h2 className="text-2xl font-bold">Welcome to Syndarix, {userName}!</h2>
+        <p className="mx-auto mt-2 max-w-md text-muted-foreground">
+          Get started by creating your first project. Our AI agents will help you
+          turn your ideas into reality.
+        </p>
+
+        <Button size="lg" asChild className="mt-6">
+          <Link href="/projects/new">Create Your First Project</Link>
+        </Button>
+
+        <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+          <Link
+            href="/agents"
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
+          >
+            <Bot className="h-4 w-4" />
+            Set up AI agent types
+          </Link>
+          <Link
+            href="/settings"
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
+          >
+            <Settings className="h-4 w-4" />
+            Configure your account
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/dashboard/PendingApprovals.tsx

@@ -0,0 +1,195 @@
+/**
+ * PendingApprovals Component
+ *
+ * Displays pending approval requests that need user attention.
+ * Only renders when there are approvals to show.
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { formatDistanceToNow } from 'date-fns';
+import {
+  AlertCircle,
+  CheckCircle2,
+  XCircle,
+  GitBranch,
+  Code2,
+  Building2,
+  Rocket,
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Link } from '@/lib/i18n/routing';
+import { cn } from '@/lib/utils';
+import type { PendingApproval } from '@/lib/api/hooks/useDashboard';
+
+export interface PendingApprovalsProps {
+  /** Pending approvals to display */
+  approvals?: PendingApproval[];
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Callback when approval is approved */
+  onApprove?: (approval: PendingApproval) => void;
+  /** Callback when approval is rejected */
+  onReject?: (approval: PendingApproval) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const typeConfig: Record<
+  PendingApproval['type'],
+  { icon: typeof GitBranch; label: string; color: string }
+> = {
+  sprint_boundary: {
+    icon: GitBranch,
+    label: 'Sprint Boundary',
+    color: 'text-blue-500',
+  },
+  code_review: {
+    icon: Code2,
+    label: 'Code Review',
+    color: 'text-purple-500',
+  },
+  architecture_decision: {
+    icon: Building2,
+    label: 'Architecture',
+    color: 'text-orange-500',
+  },
+  deployment: {
+    icon: Rocket,
+    label: 'Deployment',
+    color: 'text-green-500',
+  },
+};
+
+const priorityConfig: Record<PendingApproval['priority'], { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+  low: { label: 'Low', variant: 'outline' },
+  medium: { label: 'Medium', variant: 'secondary' },
+  high: { label: 'High', variant: 'default' },
+  critical: { label: 'Critical', variant: 'destructive' },
+};
+
+function ApprovalSkeleton() {
+  return (
+    <div className="flex items-start gap-4 rounded-lg border p-4">
+      <Skeleton className="h-10 w-10 rounded-full" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+      <div className="flex gap-2">
+        <Skeleton className="h-9 w-20" />
+        <Skeleton className="h-9 w-20" />
+      </div>
+    </div>
+  );
+}
+
+interface ApprovalItemProps {
+  approval: PendingApproval;
+  onApprove?: () => void;
+  onReject?: () => void;
+}
+
+function ApprovalItem({ approval, onApprove, onReject }: ApprovalItemProps) {
+  const config = typeConfig[approval.type];
+  const Icon = config.icon;
+  const priority = priorityConfig[approval.priority];
+
+  const timeAgo = formatDistanceToNow(new Date(approval.requestedAt), { addSuffix: true });
+
+  return (
+    <div className="flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-start">
+      <div className={cn('flex h-10 w-10 items-center justify-center rounded-full bg-muted', config.color)}>
+        <Icon className="h-5 w-5" />
+      </div>
+
+      <div className="flex-1 space-y-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h4 className="font-medium">{approval.title}</h4>
+          <Badge variant={priority.variant} className="text-xs">
+            {priority.label}
+          </Badge>
+        </div>
+        <p className="text-sm text-muted-foreground">{approval.description}</p>
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          <Link
+            href={`/projects/${approval.projectId}`}
+            className="hover:text-primary hover:underline"
+          >
+            {approval.projectName}
+          </Link>
+          <span>-</span>
+          <span>Requested by {approval.requestedBy}</span>
+          <span>-</span>
+          <span>{timeAgo}</span>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+          onClick={onReject}
+        >
+          <XCircle className="mr-1 h-4 w-4" />
+          Reject
+        </Button>
+        <Button size="sm" onClick={onApprove}>
+          <CheckCircle2 className="mr-1 h-4 w-4" />
+          Approve
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function PendingApprovals({
+  approvals,
+  isLoading = false,
+  onApprove,
+  onReject,
+  className,
+}: PendingApprovalsProps) {
+  // Don't render if no approvals and not loading
+  if (!isLoading && (!approvals || approvals.length === 0)) {
+    return null;
+  }
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="h-5 w-5 text-amber-500" />
+          <CardTitle className="text-lg">Pending Approvals</CardTitle>
+          {approvals && approvals.length > 0 && (
+            <Badge variant="secondary">{approvals.length}</Badge>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {isLoading ? (
+          <>
+            <ApprovalSkeleton />
+            <ApprovalSkeleton />
+          </>
+        ) : (
+          approvals?.map((approval) => (
+            <ApprovalItem
+              key={approval.id}
+              approval={approval}
+              onApprove={() => onApprove?.(approval)}
+              onReject={() => onReject?.(approval)}
+            />
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/dashboard/RecentProjects.tsx

@@ -0,0 +1,152 @@
+/**
+ * RecentProjects Component
+ *
+ * Displays recent projects in a responsive grid with a "View all" link.
+ * Shows 3 projects on mobile, 6 on desktop.
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { ArrowRight, Bot, CircleDot, Clock } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Link } from '@/lib/i18n/routing';
+import { cn } from '@/lib/utils';
+import { ProjectStatusBadge } from '@/components/projects/StatusBadge';
+import { ProgressBar } from '@/components/projects/ProgressBar';
+import type { DashboardProject } from '@/lib/api/hooks/useDashboard';
+
+export interface RecentProjectsProps {
+  /** Projects to display */
+  projects?: DashboardProject[];
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function ProjectCardSkeleton() {
+  return (
+    <Card className="animate-pulse">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-5 w-20" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+        <Skeleton className="mt-2 h-6 w-3/4" />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-2 w-full" />
+        <div className="flex justify-between">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ProjectCardProps {
+  project: DashboardProject;
+}
+
+function ProjectCard({ project }: ProjectCardProps) {
+  return (
+    <Link href={`/projects/${project.id}`} className="block">
+      <Card className="h-full cursor-pointer transition-all hover:border-primary hover:shadow-md">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <ProjectStatusBadge status={project.status} />
+            {project.currentSprint && (
+              <Badge variant="outline" className="text-xs">
+                {project.currentSprint}
+              </Badge>
+            )}
+          </div>
+          <CardTitle className="mt-2 line-clamp-1 text-lg">{project.name}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {project.description && (
+            <p className="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>
+          )}
+
+          <ProgressBar value={project.progress} size="sm" showLabel />
+
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <div className="flex items-center gap-3">
+              <span className="flex items-center gap-1">
+                <Bot className="h-3 w-3" />
+                {project.activeAgents} agents
+              </span>
+              <span className="flex items-center gap-1">
+                <CircleDot className="h-3 w-3" />
+                {project.openIssues} issues
+              </span>
+            </div>
+            <span className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              {project.lastActivity}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+export function RecentProjects({ projects, isLoading = false, className }: RecentProjectsProps) {
+  // Show first 3 on mobile (hidden beyond), 6 on desktop
+  const displayProjects = projects?.slice(0, 6) ?? [];
+
+  return (
+    <div className={className}>
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Recent Projects</h2>
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/projects" className="gap-1">
+            View all
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div
+              key={i}
+              className={cn(i > 3 && 'hidden lg:block')}
+            >
+              <ProjectCardSkeleton />
+            </div>
+          ))}
+        </div>
+      ) : displayProjects.length === 0 ? (
+        <Card className="py-8 text-center">
+          <CardContent>
+            <p className="text-muted-foreground">No projects yet</p>
+            <Button asChild className="mt-4">
+              <Link href="/projects/new">Create your first project</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {displayProjects.map((project, index) => (
+            <div
+              key={project.id}
+              className={cn(index >= 3 && 'hidden lg:block')}
+            >
+              <ProjectCard project={project} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/WelcomeHeader.tsx

@@ -0,0 +1,55 @@
+/**
+ * WelcomeHeader Component
+ *
+ * Displays a personalized welcome message for the dashboard.
+ *
+ * @see Issue #53
+ */
+
+'use client';
+
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/lib/i18n/routing';
+import { useAuth } from '@/lib/auth/AuthContext';
+
+export interface WelcomeHeaderProps {
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function WelcomeHeader({ className }: WelcomeHeaderProps) {
+  const { user } = useAuth();
+
+  // Get first name for greeting
+  const firstName = user?.first_name || user?.email?.split('@')[0] || 'there';
+
+  // Get time-based greeting
+  const getGreeting = () => {
+    const hour = new Date().getHours();
+    if (hour < 12) return 'Good morning';
+    if (hour < 18) return 'Good afternoon';
+    return 'Good evening';
+  };
+
+  return (
+    <div className={className}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            {getGreeting()}, {firstName}
+          </h1>
+          <p className="mt-1 text-muted-foreground">
+            Here&apos;s what&apos;s happening with your projects today.
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/projects/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Project
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/dashboard/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Dashboard Components
+ *
+ * Exports all dashboard-related components.
+ *
+ * @module components/dashboard
+ * @see Issue #53
+ */
+
+export { Dashboard } from './Dashboard';
+export { WelcomeHeader } from './WelcomeHeader';
+export { DashboardQuickStats } from './DashboardQuickStats';
+export { RecentProjects } from './RecentProjects';
+export { PendingApprovals } from './PendingApprovals';
+export { EmptyState } from './EmptyState';
+
+// Re-export types
+export type { DashboardProps } from './Dashboard';
+export type { WelcomeHeaderProps } from './WelcomeHeader';
+export type { DashboardQuickStatsProps } from './DashboardQuickStats';
+export type { RecentProjectsProps } from './RecentProjects';
+export type { PendingApprovalsProps } from './PendingApprovals';
+export type { EmptyStateProps } from './EmptyState';

frontend/src/lib/api/hooks/useDashboard.ts

@@ -0,0 +1,257 @@
+/**
+ * Dashboard Data Hook
+ *
+ * Provides data for the main dashboard including:
+ * - Quick stats (projects, agents, issues, approvals)
+ * - Recent projects
+ * - Pending approvals
+ *
+ * Uses mock data until backend endpoints are available.
+ *
+ * @see Issue #53
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import type { Project, ProjectStatus } from '@/components/projects/types';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DashboardStats {
+  activeProjects: number;
+  runningAgents: number;
+  openIssues: number;
+  pendingApprovals: number;
+}
+
+export interface DashboardProject extends Project {
+  progress: number;
+  openIssues: number;
+  activeAgents: number;
+  currentSprint?: string;
+  lastActivity: string;
+}
+
+export interface PendingApproval {
+  id: string;
+  type: 'sprint_boundary' | 'code_review' | 'architecture_decision' | 'deployment';
+  title: string;
+  description: string;
+  projectId: string;
+  projectName: string;
+  requestedBy: string;
+  requestedAt: string;
+  priority: 'low' | 'medium' | 'high' | 'critical';
+}
+
+export interface DashboardData {
+  stats: DashboardStats;
+  recentProjects: DashboardProject[];
+  pendingApprovals: PendingApproval[];
+}
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const mockStats: DashboardStats = {
+  activeProjects: 3,
+  runningAgents: 8,
+  openIssues: 24,
+  pendingApprovals: 2,
+};
+
+const mockProjects: DashboardProject[] = [
+  {
+    id: 'proj-001',
+    name: 'E-Commerce Platform Redesign',
+    description: 'Complete redesign of the e-commerce platform with modern UI/UX',
+    status: 'active' as ProjectStatus,
+    autonomy_level: 'milestone',
+    created_at: '2025-11-15T10:00:00Z',
+    updated_at: '2025-12-30T14:30:00Z',
+    owner_id: 'user-001',
+    progress: 67,
+    openIssues: 12,
+    activeAgents: 4,
+    currentSprint: 'Sprint 3',
+    lastActivity: '2 minutes ago',
+  },
+  {
+    id: 'proj-002',
+    name: 'Mobile Banking App',
+    description: 'Native mobile app for banking services with biometric authentication',
+    status: 'active' as ProjectStatus,
+    autonomy_level: 'autonomous',
+    created_at: '2025-11-20T09:00:00Z',
+    updated_at: '2025-12-30T12:00:00Z',
+    owner_id: 'user-001',
+    progress: 45,
+    openIssues: 8,
+    activeAgents: 5,
+    currentSprint: 'Sprint 2',
+    lastActivity: '15 minutes ago',
+  },
+  {
+    id: 'proj-003',
+    name: 'Internal HR Portal',
+    description: 'Employee self-service portal for HR operations',
+    status: 'paused' as ProjectStatus,
+    autonomy_level: 'full_control',
+    created_at: '2025-10-01T08:00:00Z',
+    updated_at: '2025-12-28T16:00:00Z',
+    owner_id: 'user-001',
+    progress: 23,
+    openIssues: 5,
+    activeAgents: 0,
+    currentSprint: 'Sprint 1',
+    lastActivity: '2 days ago',
+  },
+  {
+    id: 'proj-004',
+    name: 'API Gateway Modernization',
+    description: 'Migrate legacy API gateway to cloud-native architecture',
+    status: 'active' as ProjectStatus,
+    autonomy_level: 'milestone',
+    created_at: '2025-12-01T11:00:00Z',
+    updated_at: '2025-12-30T10:00:00Z',
+    owner_id: 'user-001',
+    progress: 82,
+    openIssues: 3,
+    activeAgents: 2,
+    currentSprint: 'Sprint 4',
+    lastActivity: '1 hour ago',
+  },
+  {
+    id: 'proj-005',
+    name: 'Customer Analytics Dashboard',
+    description: 'Real-time analytics dashboard for customer behavior insights',
+    status: 'completed' as ProjectStatus,
+    autonomy_level: 'autonomous',
+    created_at: '2025-09-01T10:00:00Z',
+    updated_at: '2025-12-15T17:00:00Z',
+    owner_id: 'user-001',
+    progress: 100,
+    openIssues: 0,
+    activeAgents: 0,
+    lastActivity: '2 weeks ago',
+  },
+  {
+    id: 'proj-006',
+    name: 'DevOps Pipeline Automation',
+    description: 'Automate CI/CD pipelines with AI-assisted deployments',
+    status: 'active' as ProjectStatus,
+    autonomy_level: 'milestone',
+    created_at: '2025-12-10T14:00:00Z',
+    updated_at: '2025-12-30T09:00:00Z',
+    owner_id: 'user-001',
+    progress: 35,
+    openIssues: 6,
+    activeAgents: 3,
+    currentSprint: 'Sprint 1',
+    lastActivity: '30 minutes ago',
+  },
+];
+
+const mockApprovals: PendingApproval[] = [
+  {
+    id: 'approval-001',
+    type: 'sprint_boundary',
+    title: 'Sprint 3 Completion Review',
+    description: 'Review sprint deliverables and approve transition to Sprint 4',
+    projectId: 'proj-001',
+    projectName: 'E-Commerce Platform Redesign',
+    requestedBy: 'Product Owner Agent',
+    requestedAt: '2025-12-30T14:00:00Z',
+    priority: 'high',
+  },
+  {
+    id: 'approval-002',
+    type: 'architecture_decision',
+    title: 'Database Migration Strategy',
+    description: 'Approve PostgreSQL to CockroachDB migration plan',
+    projectId: 'proj-004',
+    projectName: 'API Gateway Modernization',
+    requestedBy: 'Architect Agent',
+    requestedAt: '2025-12-30T10:30:00Z',
+    priority: 'medium',
+  },
+];
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Fetches dashboard data (stats, recent projects, pending approvals)
+ *
+ * @returns Query result with dashboard data
+ */
+export function useDashboard() {
+  return useQuery<DashboardData>({
+    queryKey: ['dashboard'],
+    queryFn: async () => {
+      // Simulate network delay
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Return mock data
+      // TODO: Replace with actual API call when backend is ready
+      // const response = await apiClient.get('/api/v1/dashboard');
+      // return response.data;
+
+      return {
+        stats: mockStats,
+        recentProjects: mockProjects,
+        pendingApprovals: mockApprovals,
+      };
+    },
+    staleTime: 30000, // 30 seconds
+    refetchInterval: 60000, // Refetch every minute
+  });
+}
+
+/**
+ * Fetches only dashboard stats
+ */
+export function useDashboardStats() {
+  return useQuery<DashboardStats>({
+    queryKey: ['dashboard', 'stats'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      return mockStats;
+    },
+    staleTime: 30000,
+    refetchInterval: 60000,
+  });
+}
+
+/**
+ * Fetches recent projects for dashboard
+ *
+ * @param limit - Maximum number of projects to return
+ */
+export function useRecentProjects(limit: number = 6) {
+  return useQuery<DashboardProject[]>({
+    queryKey: ['dashboard', 'recentProjects', limit],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 400));
+      return mockProjects.slice(0, limit);
+    },
+    staleTime: 30000,
+  });
+}
+
+/**
+ * Fetches pending approvals
+ */
+export function usePendingApprovals() {
+  return useQuery<PendingApproval[]>({
+    queryKey: ['dashboard', 'pendingApprovals'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      return mockApprovals;
+    },
+    staleTime: 30000,
+  });
+}