feat(frontend): add Projects list page and components for #54

Implement the projects CRUD page with:
- ProjectCard: Card component with status badge, progress, metrics, actions
- ProjectFilters: Search, status filter, complexity, sort controls
- ProjectsGrid: Grid/list view toggle with loading and empty states
- useProjects hook: Mock data with filtering, sorting, pagination

Features include:
- Debounced search (300ms)
- Quick filters (status) and extended filters (complexity, sort)
- Grid and list view toggle
- Click navigation to project detail

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

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

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

@@ -0,0 +1,145 @@
+/**
+ * Projects List Page
+ *
+ * Displays all projects with filtering, sorting, and search.
+ * Supports grid and list view modes.
+ *
+ * @see Issue #54
+ */
+
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/lib/i18n/routing';
+import { ProjectFilters, ProjectsGrid } from '@/components/projects';
+import type { ViewMode, SortBy, SortOrder, Complexity } from '@/components/projects';
+import type { ProjectStatus } from '@/components/projects/types';
+import { useProjects, type ProjectListItem } from '@/lib/api/hooks/useProjects';
+import { useDebounce } from '@/lib/hooks/useDebounce';
+
+export default function ProjectsPage() {
+  const router = useRouter();
+
+  // Filter state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<ProjectStatus | 'all'>('all');
+  const [complexityFilter, setComplexityFilter] = useState<Complexity>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('recent');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+  const [viewMode, setViewMode] = useState<ViewMode>('grid');
+
+  // Debounce search for API calls
+  const debouncedSearch = useDebounce(searchQuery, 300);
+
+  // Fetch projects
+  const { data, isLoading, error } = useProjects({
+    search: debouncedSearch || undefined,
+    status: statusFilter,
+    complexity: complexityFilter !== 'all' ? complexityFilter : undefined,
+    sortBy,
+    sortOrder,
+    page: 1,
+    limit: 50,
+  });
+
+  // Check if any filters are active (for empty state message)
+  const hasFilters = useMemo(() => {
+    return searchQuery !== '' || statusFilter !== 'all' || complexityFilter !== 'all';
+  }, [searchQuery, statusFilter, complexityFilter]);
+
+  // Handle project card click
+  const handleProjectClick = useCallback(
+    (project: ProjectListItem) => {
+      router.push(`/projects/${project.id}`);
+    },
+    [router]
+  );
+
+  // Handle project action
+  const handleProjectAction = useCallback(
+    (project: ProjectListItem, action: 'archive' | 'pause' | 'resume' | 'delete') => {
+      // TODO: Implement actual API calls
+      switch (action) {
+        case 'archive':
+          toast.success(`Archived: ${project.name}`);
+          break;
+        case 'pause':
+          toast.info(`Paused: ${project.name}`);
+          break;
+        case 'resume':
+          toast.success(`Resumed: ${project.name}`);
+          break;
+        case 'delete':
+          toast.error(`Deleted: ${project.name}`);
+          break;
+      }
+    },
+    []
+  );
+
+  // Show error toast if fetch fails
+  if (error) {
+    toast.error('Failed to load projects', {
+      description: 'Please try again later',
+    });
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-6">
+      {/* Header */}
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Projects</h1>
+          <p className="text-muted-foreground">Manage and monitor your projects</p>
+        </div>
+        <Button asChild>
+          <Link href="/projects/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Project
+          </Link>
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <ProjectFilters
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        statusFilter={statusFilter}
+        onStatusFilterChange={setStatusFilter}
+        complexityFilter={complexityFilter}
+        onComplexityFilterChange={setComplexityFilter}
+        sortBy={sortBy}
+        onSortByChange={setSortBy}
+        sortOrder={sortOrder}
+        onSortOrderChange={setSortOrder}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        className="mb-6"
+      />
+
+      {/* Projects Grid */}
+      <ProjectsGrid
+        projects={data?.data ?? []}
+        isLoading={isLoading}
+        viewMode={viewMode}
+        onProjectClick={handleProjectClick}
+        onProjectAction={handleProjectAction}
+        hasFilters={hasFilters}
+      />
+
+      {/* Pagination - TODO: Add when more than 50 projects */}
+      {data && data.pagination.totalPages > 1 && (
+        <div className="mt-6 flex items-center justify-between text-sm text-muted-foreground">
+          <span>
+            Showing {data.data.length} of {data.pagination.total} projects
+          </span>
+          {/* TODO: Add pagination controls */}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/projects/ProjectCard.tsx

@@ -0,0 +1,199 @@
+/**
+ * ProjectCard Component
+ *
+ * Displays a project card for the projects grid view.
+ * Shows project status, progress, metrics, and quick info.
+ *
+ * @see Issue #54
+ */
+
+'use client';
+
+import { Bot, CircleDot, Clock, MoreVertical, Archive, Play, Pause } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import { ProjectStatusBadge } from './StatusBadge';
+import { ProgressBar } from './ProgressBar';
+import type { ProjectListItem } from '@/lib/api/hooks/useProjects';
+
+export interface ProjectCardProps {
+  /** Project data */
+  project: ProjectListItem;
+  /** Called when card is clicked */
+  onClick?: () => void;
+  /** Called when action menu item is selected */
+  onAction?: (action: 'archive' | 'pause' | 'resume' | 'delete') => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Complexity indicator dots
+ */
+function ComplexityIndicator({ complexity }: { complexity: 'low' | 'medium' | 'high' }) {
+  const levels = { low: 1, medium: 2, high: 3 };
+  const level = levels[complexity];
+
+  return (
+    <div className="flex items-center gap-0.5" title={`${complexity} complexity`}>
+      {[1, 2, 3].map((i) => (
+        <div
+          key={i}
+          className={cn(
+            'h-1.5 w-1.5 rounded-full',
+            i <= level ? 'bg-primary' : 'bg-muted'
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton for project cards
+ */
+export function ProjectCardSkeleton() {
+  return (
+    <Card className="h-[220px]">
+      <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" />
+        <Skeleton className="mt-2 h-4 w-full" />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Skeleton className="h-2 w-full" />
+        <div className="flex flex-wrap gap-1">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-20" />
+        </div>
+        <div className="flex justify-between">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ProjectCard({ project, onClick, onAction, className }: ProjectCardProps) {
+  return (
+    <Card
+      className={cn(
+        'group h-full cursor-pointer transition-all hover:border-primary hover:shadow-md',
+        className
+      )}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        /* istanbul ignore next -- keyboard handler */
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+    >
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <ProjectStatusBadge status={project.status} />
+          <div className="flex items-center gap-2">
+            <ComplexityIndicator complexity={project.complexity} />
+            {onAction && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                    <span className="sr-only">Project actions</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+                  {project.status === 'paused' ? (
+                    <DropdownMenuItem onClick={() => onAction('resume')}>
+                      <Play className="mr-2 h-4 w-4" />
+                      Resume Project
+                    </DropdownMenuItem>
+                  ) : project.status === 'active' ? (
+                    <DropdownMenuItem onClick={() => onAction('pause')}>
+                      <Pause className="mr-2 h-4 w-4" />
+                      Pause Project
+                    </DropdownMenuItem>
+                  ) : null}
+                  <DropdownMenuItem onClick={() => onAction('archive')}>
+                    <Archive className="mr-2 h-4 w-4" />
+                    Archive Project
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="text-destructive"
+                    onClick={() => onAction('delete')}
+                  >
+                    Delete Project
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+
+        <CardTitle className="mt-2 line-clamp-1 text-lg">{project.name}</CardTitle>
+
+        {project.description && (
+          <p className="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>
+        )}
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        <ProgressBar value={project.progress} size="sm" showLabel />
+
+        {project.tags && project.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {project.tags.slice(0, 3).map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+            {project.tags.length > 3 && (
+              <Badge variant="outline" className="text-xs">
+                +{project.tags.length - 3}
+              </Badge>
+            )}
+          </div>
+        )}
+
+        <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}
+            </span>
+            <span className="flex items-center gap-1">
+              <CircleDot className="h-3 w-3" />
+              {project.openIssues}
+            </span>
+          </div>
+          <span className="flex items-center gap-1">
+            <Clock className="h-3 w-3" />
+            {project.lastActivity}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/components/projects/ProjectFilters.tsx

@@ -0,0 +1,272 @@
+/**
+ * ProjectFilters Component
+ *
+ * Filter controls for the projects list including:
+ * - Search input with debounce
+ * - Status filter
+ * - Extended filters (complexity, etc.)
+ * - Sort controls
+ * - View mode toggle (grid/list)
+ *
+ * @see Issue #54
+ */
+
+'use client';
+
+import { useState } from 'react';
+import {
+  Search,
+  Filter,
+  LayoutGrid,
+  List,
+  ChevronDown,
+  X,
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import type { ProjectStatus } from './types';
+
+export type ViewMode = 'grid' | 'list';
+export type SortBy = 'recent' | 'name' | 'progress' | 'issues';
+export type SortOrder = 'asc' | 'desc';
+export type Complexity = 'low' | 'medium' | 'high' | 'all';
+
+export interface ProjectFiltersProps {
+  /** Current search query */
+  searchQuery: string;
+  /** Called when search changes */
+  onSearchChange: (query: string) => void;
+  /** Current status filter */
+  statusFilter: ProjectStatus | 'all';
+  /** Called when status filter changes */
+  onStatusFilterChange: (status: ProjectStatus | 'all') => void;
+  /** Current complexity filter */
+  complexityFilter: Complexity;
+  /** Called when complexity filter changes */
+  onComplexityFilterChange: (complexity: Complexity) => void;
+  /** Current sort field */
+  sortBy: SortBy;
+  /** Called when sort field changes */
+  onSortByChange: (sortBy: SortBy) => void;
+  /** Current sort order */
+  sortOrder: SortOrder;
+  /** Called when sort order changes */
+  onSortOrderChange: (order: SortOrder) => void;
+  /** Current view mode */
+  viewMode: ViewMode;
+  /** Called when view mode changes */
+  onViewModeChange: (mode: ViewMode) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const statusOptions: { value: ProjectStatus | 'all'; label: string }[] = [
+  { value: 'all', label: 'All Status' },
+  { value: 'active', label: 'Active' },
+  { value: 'paused', label: 'Paused' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'archived', label: 'Archived' },
+];
+
+const complexityOptions: { value: Complexity; label: string }[] = [
+  { value: 'all', label: 'All Complexity' },
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+];
+
+const sortOptions: { value: SortBy; label: string }[] = [
+  { value: 'recent', label: 'Most Recent' },
+  { value: 'name', label: 'Name' },
+  { value: 'progress', label: 'Progress' },
+  { value: 'issues', label: 'Issues' },
+];
+
+export function ProjectFilters({
+  searchQuery,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange,
+  complexityFilter,
+  onComplexityFilterChange,
+  sortBy,
+  onSortByChange,
+  sortOrder,
+  onSortOrderChange,
+  viewMode,
+  onViewModeChange,
+  className,
+}: ProjectFiltersProps) {
+  const [showExtended, setShowExtended] = useState(false);
+
+  // Check if any filters are active
+  const hasActiveFilters =
+    statusFilter !== 'all' || complexityFilter !== 'all' || searchQuery !== '';
+
+  // Count active filters for badge
+  const activeFilterCount =
+    (statusFilter !== 'all' ? 1 : 0) +
+    (complexityFilter !== 'all' ? 1 : 0) +
+    (searchQuery !== '' ? 1 : 0);
+
+  const clearAllFilters = () => {
+    onSearchChange('');
+    onStatusFilterChange('all');
+    onComplexityFilterChange('all');
+  };
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Quick Filters Row */}
+      <div className="flex flex-col gap-4 sm:flex-row">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search projects..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9"
+            aria-label="Search projects"
+          />
+        </div>
+
+        {/* Status Filter */}
+        <Select
+          value={statusFilter}
+          onValueChange={(value) => onStatusFilterChange(value as ProjectStatus | 'all')}
+        >
+          <SelectTrigger className="w-full sm:w-40" aria-label="Filter by status">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            {statusOptions.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Extended Filters Toggle */}
+        <Button
+          variant="outline"
+          onClick={() => setShowExtended(!showExtended)}
+          className={cn(hasActiveFilters && 'border-primary')}
+        >
+          <Filter className="mr-2 h-4 w-4" />
+          Filters
+          {activeFilterCount > 0 && (
+            <Badge variant="secondary" className="ml-2">
+              {activeFilterCount}
+            </Badge>
+          )}
+          <ChevronDown
+            className={cn('ml-2 h-4 w-4 transition-transform', showExtended && 'rotate-180')}
+          />
+        </Button>
+
+        {/* View Mode Toggle */}
+        <div className="flex rounded-lg border">
+          <Button
+            variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
+            size="icon"
+            onClick={() => onViewModeChange('grid')}
+            aria-label="Grid view"
+            className="rounded-r-none"
+          >
+            <LayoutGrid className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+            size="icon"
+            onClick={() => onViewModeChange('list')}
+            aria-label="List view"
+            className="rounded-l-none"
+          >
+            <List className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Extended Filters */}
+      {showExtended && (
+        <Card className="p-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
+            {/* Complexity Filter */}
+            <div className="flex-1">
+              <label className="mb-2 block text-sm font-medium">Complexity</label>
+              <Select
+                value={complexityFilter}
+                onValueChange={(value) => onComplexityFilterChange(value as Complexity)}
+              >
+                <SelectTrigger aria-label="Filter by complexity">
+                  <SelectValue placeholder="Complexity" />
+                </SelectTrigger>
+                <SelectContent>
+                  {complexityOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Sort By */}
+            <div className="flex-1">
+              <label className="mb-2 block text-sm font-medium">Sort By</label>
+              <Select value={sortBy} onValueChange={(value) => onSortByChange(value as SortBy)}>
+                <SelectTrigger aria-label="Sort by">
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sortOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Sort Order */}
+            <div className="flex-1">
+              <label className="mb-2 block text-sm font-medium">Order</label>
+              <Select
+                value={sortOrder}
+                onValueChange={(value) => onSortOrderChange(value as SortOrder)}
+              >
+                <SelectTrigger aria-label="Sort order">
+                  <SelectValue placeholder="Order" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="desc">Descending</SelectItem>
+                  <SelectItem value="asc">Ascending</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Clear Filters */}
+            {hasActiveFilters && (
+              <Button variant="ghost" onClick={clearAllFilters} className="gap-2">
+                <X className="h-4 w-4" />
+                Clear Filters
+              </Button>
+            )}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

frontend/src/components/projects/ProjectsGrid.tsx

@@ -0,0 +1,119 @@
+/**
+ * ProjectsGrid Component
+ *
+ * Displays projects in either grid or list view with
+ * loading and empty states.
+ *
+ * @see Issue #54
+ */
+
+'use client';
+
+import { Folder, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/lib/i18n/routing';
+import { cn } from '@/lib/utils';
+import { ProjectCard, ProjectCardSkeleton } from './ProjectCard';
+import type { ProjectListItem } from '@/lib/api/hooks/useProjects';
+import type { ViewMode } from './ProjectFilters';
+
+export interface ProjectsGridProps {
+  /** Projects to display */
+  projects: ProjectListItem[];
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Current view mode */
+  viewMode?: ViewMode;
+  /** Called when a project card is clicked */
+  onProjectClick?: (project: ProjectListItem) => void;
+  /** Called when a project action is selected */
+  onProjectAction?: (project: ProjectListItem, action: 'archive' | 'pause' | 'resume' | 'delete') => void;
+  /** Whether filters are currently applied (affects empty state message) */
+  hasFilters?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Empty state component
+ */
+function EmptyState({ hasFilters }: { hasFilters: boolean }) {
+  return (
+    <div className="py-16 text-center">
+      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+        <Folder className="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 className="text-lg font-semibold">No projects found</h3>
+      <p className="mt-1 text-muted-foreground">
+        {hasFilters
+          ? 'Try adjusting your filters or search query'
+          : 'Get started by creating your first project'}
+      </p>
+      {!hasFilters && (
+        <Button asChild className="mt-4">
+          <Link href="/projects/new">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Project
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Loading skeleton grid
+ */
+function LoadingSkeleton({ viewMode }: { viewMode: ViewMode }) {
+  return (
+    <div
+      className={cn(
+        viewMode === 'grid'
+          ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
+          : 'space-y-4'
+      )}
+    >
+      {[1, 2, 3, 4, 5, 6].map((i) => (
+        <ProjectCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+export function ProjectsGrid({
+  projects,
+  isLoading = false,
+  viewMode = 'grid',
+  onProjectClick,
+  onProjectAction,
+  hasFilters = false,
+  className,
+}: ProjectsGridProps) {
+  if (isLoading) {
+    return <LoadingSkeleton viewMode={viewMode} />;
+  }
+
+  if (projects.length === 0) {
+    return <EmptyState hasFilters={hasFilters} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        viewMode === 'grid'
+          ? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'
+          : 'space-y-4',
+        className
+      )}
+    >
+      {projects.map((project) => (
+        <ProjectCard
+          key={project.id}
+          project={project}
+          onClick={() => onProjectClick?.(project)}
+          onAction={onProjectAction ? (action) => onProjectAction(project, action) : undefined}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,271 @@
+/**
+ * Projects List Hook
+ *
+ * Provides data for the projects list page with filtering,
+ * sorting, and pagination.
+ *
+ * Uses mock data until backend endpoints are available.
+ *
+ * @see Issue #54
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import type { ProjectStatus } from '@/components/projects/types';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ProjectListItem {
+  id: string;
+  name: string;
+  description?: string;
+  status: ProjectStatus;
+  complexity: 'low' | 'medium' | 'high';
+  progress: number;
+  openIssues: number;
+  activeAgents: number;
+  currentSprint?: string;
+  lastActivity: string;
+  createdAt: string;
+  owner: {
+    id: string;
+    name: string;
+  };
+  tags?: string[];
+}
+
+export interface ProjectsListParams {
+  search?: string;
+  status?: ProjectStatus | 'all';
+  complexity?: 'low' | 'medium' | 'high' | 'all';
+  sortBy?: 'recent' | 'name' | 'progress' | 'issues';
+  sortOrder?: 'asc' | 'desc';
+  page?: number;
+  limit?: number;
+}
+
+export interface ProjectsListResponse {
+  data: ProjectListItem[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const mockProjects: ProjectListItem[] = [
+  {
+    id: 'proj-001',
+    name: 'E-Commerce Platform Redesign',
+    description: 'Complete redesign of the e-commerce platform with modern UI/UX and improved checkout flow',
+    status: 'active',
+    complexity: 'high',
+    progress: 67,
+    openIssues: 12,
+    activeAgents: 4,
+    currentSprint: 'Sprint 3',
+    lastActivity: '2 minutes ago',
+    createdAt: '2025-11-15T10:00:00Z',
+    owner: { id: 'user-001', name: 'Felipe Cardoso' },
+    tags: ['e-commerce', 'frontend', 'ux'],
+  },
+  {
+    id: 'proj-002',
+    name: 'Mobile Banking App',
+    description: 'Native mobile app for banking services with biometric authentication and real-time notifications',
+    status: 'active',
+    complexity: 'high',
+    progress: 45,
+    openIssues: 8,
+    activeAgents: 5,
+    currentSprint: 'Sprint 2',
+    lastActivity: '15 minutes ago',
+    createdAt: '2025-11-20T09:00:00Z',
+    owner: { id: 'user-001', name: 'Felipe Cardoso' },
+    tags: ['mobile', 'fintech', 'security'],
+  },
+  {
+    id: 'proj-003',
+    name: 'Internal HR Portal',
+    description: 'Employee self-service portal for HR operations including leave requests and performance reviews',
+    status: 'paused',
+    complexity: 'medium',
+    progress: 23,
+    openIssues: 5,
+    activeAgents: 0,
+    currentSprint: 'Sprint 1',
+    lastActivity: '2 days ago',
+    createdAt: '2025-10-01T08:00:00Z',
+    owner: { id: 'user-002', name: 'Maria Santos' },
+    tags: ['internal', 'hr', 'portal'],
+  },
+  {
+    id: 'proj-004',
+    name: 'API Gateway Modernization',
+    description: 'Migrate legacy API gateway to cloud-native architecture with improved rate limiting and caching',
+    status: 'active',
+    complexity: 'high',
+    progress: 82,
+    openIssues: 3,
+    activeAgents: 2,
+    currentSprint: 'Sprint 4',
+    lastActivity: '1 hour ago',
+    createdAt: '2025-12-01T11:00:00Z',
+    owner: { id: 'user-001', name: 'Felipe Cardoso' },
+    tags: ['api', 'cloud', 'infrastructure'],
+  },
+  {
+    id: 'proj-005',
+    name: 'Customer Analytics Dashboard',
+    description: 'Real-time analytics dashboard for customer behavior insights with ML-powered predictions',
+    status: 'completed',
+    complexity: 'medium',
+    progress: 100,
+    openIssues: 0,
+    activeAgents: 0,
+    lastActivity: '2 weeks ago',
+    createdAt: '2025-09-01T10:00:00Z',
+    owner: { id: 'user-003', name: 'Alex Johnson' },
+    tags: ['analytics', 'ml', 'dashboard'],
+  },
+  {
+    id: 'proj-006',
+    name: 'DevOps Pipeline Automation',
+    description: 'Automate CI/CD pipelines with AI-assisted deployments and rollback capabilities',
+    status: 'active',
+    complexity: 'medium',
+    progress: 35,
+    openIssues: 6,
+    activeAgents: 3,
+    currentSprint: 'Sprint 1',
+    lastActivity: '30 minutes ago',
+    createdAt: '2025-12-10T14:00:00Z',
+    owner: { id: 'user-001', name: 'Felipe Cardoso' },
+    tags: ['devops', 'automation', 'ci-cd'],
+  },
+  {
+    id: 'proj-007',
+    name: 'Inventory Management System',
+    description: 'Warehouse inventory tracking with barcode scanning and automated reordering',
+    status: 'archived',
+    complexity: 'low',
+    progress: 100,
+    openIssues: 0,
+    activeAgents: 0,
+    lastActivity: '1 month ago',
+    createdAt: '2025-06-15T08:00:00Z',
+    owner: { id: 'user-002', name: 'Maria Santos' },
+    tags: ['inventory', 'warehouse', 'logistics'],
+  },
+  {
+    id: 'proj-008',
+    name: 'Customer Support Chatbot',
+    description: 'AI-powered chatbot for 24/7 customer support with sentiment analysis',
+    status: 'active',
+    complexity: 'medium',
+    progress: 58,
+    openIssues: 4,
+    activeAgents: 2,
+    currentSprint: 'Sprint 2',
+    lastActivity: '45 minutes ago',
+    createdAt: '2025-12-05T09:00:00Z',
+    owner: { id: 'user-003', name: 'Alex Johnson' },
+    tags: ['ai', 'chatbot', 'support'],
+  },
+];
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Fetches projects list with filtering, sorting, and pagination
+ */
+export function useProjects(params: ProjectsListParams = {}) {
+  const {
+    search = '',
+    status = 'all',
+    complexity = 'all',
+    sortBy = 'recent',
+    sortOrder = 'desc',
+    page = 1,
+    limit = 50,
+  } = params;
+
+  return useQuery<ProjectsListResponse>({
+    queryKey: ['projects', { search, status, complexity, sortBy, sortOrder, page, limit }],
+    queryFn: async () => {
+      // Simulate network delay
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // Filter projects
+      let filtered = [...mockProjects];
+
+      // Search filter
+      if (search) {
+        const searchLower = search.toLowerCase();
+        filtered = filtered.filter(
+          (p) =>
+            p.name.toLowerCase().includes(searchLower) ||
+            p.description?.toLowerCase().includes(searchLower) ||
+            p.tags?.some((t) => t.toLowerCase().includes(searchLower))
+        );
+      }
+
+      // Status filter
+      if (status !== 'all') {
+        filtered = filtered.filter((p) => p.status === status);
+      }
+
+      // Complexity filter
+      if (complexity !== 'all') {
+        filtered = filtered.filter((p) => p.complexity === complexity);
+      }
+
+      // Sort
+      filtered.sort((a, b) => {
+        let comparison = 0;
+        switch (sortBy) {
+          case 'name':
+            comparison = a.name.localeCompare(b.name);
+            break;
+          case 'progress':
+            comparison = a.progress - b.progress;
+            break;
+          case 'issues':
+            comparison = a.openIssues - b.openIssues;
+            break;
+          case 'recent':
+          default:
+            comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+            break;
+        }
+        return sortOrder === 'asc' ? comparison : -comparison;
+      });
+
+      // Pagination
+      const total = filtered.length;
+      const totalPages = Math.ceil(total / limit);
+      const start = (page - 1) * limit;
+      const end = start + limit;
+      const paginatedData = filtered.slice(start, end);
+
+      return {
+        data: paginatedData,
+        pagination: {
+          page,
+          limit,
+          total,
+          totalPages,
+        },
+      };
+    },
+    staleTime: 30000,
+  });
+}