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 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
84
frontend/src/features/issues/components/ActivityTimeline.tsx
Normal file
84
frontend/src/features/issues/components/ActivityTimeline.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* ActivityTimeline Component
|
||||
*
|
||||
* Displays issue activity history.
|
||||
*
|
||||
* @module features/issues/components/ActivityTimeline
|
||||
*/
|
||||
|
||||
import { MessageSquare, Bot, User } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IssueActivity } from '../types';
|
||||
|
||||
interface ActivityTimelineProps {
|
||||
activities: IssueActivity[];
|
||||
onAddComment?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ActivityTimeline({
|
||||
activities,
|
||||
onAddComment,
|
||||
className,
|
||||
}: ActivityTimelineProps) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5" aria-hidden="true" />
|
||||
Activity
|
||||
</CardTitle>
|
||||
{onAddComment && (
|
||||
<Button variant="outline" size="sm" onClick={onAddComment}>
|
||||
Add Comment
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6" role="list" aria-label="Issue activity">
|
||||
{activities.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex gap-4"
|
||||
role="listitem"
|
||||
>
|
||||
<div className="relative flex flex-col items-center">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
|
||||
{item.actor.type === 'agent' ? (
|
||||
<Bot className="h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<User className="h-4 w-4" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
{index < activities.length - 1 && (
|
||||
<div className="absolute top-8 h-full w-px bg-border" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
<div className={cn('flex-1', index < activities.length - 1 && 'pb-6')}>
|
||||
<div className="flex flex-wrap items-baseline gap-2">
|
||||
<span className="font-medium">{item.actor.name}</span>
|
||||
<span className="text-sm text-muted-foreground">{item.message}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<time dateTime={item.timestamp}>{item.timestamp}</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activities.length === 0 && (
|
||||
<div className="py-8 text-center text-muted-foreground">
|
||||
No activity yet
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
70
frontend/src/features/issues/components/BulkActions.tsx
Normal file
70
frontend/src/features/issues/components/BulkActions.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* BulkActions Component
|
||||
*
|
||||
* Actions bar for bulk operations on selected issues.
|
||||
*
|
||||
* @module features/issues/components/BulkActions
|
||||
*/
|
||||
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface BulkActionsProps {
|
||||
selectedCount: number;
|
||||
onChangeStatus: () => void;
|
||||
onAssign: () => void;
|
||||
onAddLabels: () => void;
|
||||
onDelete: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function BulkActions({
|
||||
selectedCount,
|
||||
onChangeStatus,
|
||||
onAssign,
|
||||
onAddLabels,
|
||||
onDelete,
|
||||
className,
|
||||
}: BulkActionsProps) {
|
||||
if (selectedCount === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-4 rounded-lg border bg-muted/50 p-3',
|
||||
className
|
||||
)}
|
||||
role="toolbar"
|
||||
aria-label="Bulk actions for selected issues"
|
||||
>
|
||||
<span className="text-sm font-medium">
|
||||
{selectedCount} selected
|
||||
</span>
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={onChangeStatus}>
|
||||
Change Status
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={onAssign}>
|
||||
Assign
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={onAddLabels}>
|
||||
Add Labels
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={onDelete}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
163
frontend/src/features/issues/components/IssueDetailPanel.tsx
Normal file
163
frontend/src/features/issues/components/IssueDetailPanel.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* IssueDetailPanel Component
|
||||
*
|
||||
* Side panel showing issue details (assignee, labels, sprint, etc.)
|
||||
*
|
||||
* @module features/issues/components/IssueDetailPanel
|
||||
*/
|
||||
|
||||
import { GitBranch, GitPullRequest, Tag, Bot, User } from 'lucide-react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IssueDetail } from '../types';
|
||||
|
||||
interface IssueDetailPanelProps {
|
||||
issue: IssueDetail;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function IssueDetailPanel({ issue, className }: IssueDetailPanelProps) {
|
||||
return (
|
||||
<div className={cn('space-y-6', className)}>
|
||||
{/* Assignment Panel */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Assignee */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Assignee</p>
|
||||
{issue.assignee ? (
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
|
||||
{issue.assignee.avatar ||
|
||||
(issue.assignee.type === 'agent' ? (
|
||||
<Bot className="h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<User className="h-4 w-4" aria-hidden="true" />
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{issue.assignee.name}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">
|
||||
{issue.assignee.type}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-1 text-sm text-muted-foreground">Unassigned</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Reporter */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Reporter</p>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
|
||||
{issue.reporter.avatar ||
|
||||
(issue.reporter.type === 'agent' ? (
|
||||
<Bot className="h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<User className="h-4 w-4" aria-hidden="true" />
|
||||
))}
|
||||
</div>
|
||||
<p className="font-medium">{issue.reporter.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Sprint */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Sprint</p>
|
||||
<p className="font-medium">{issue.sprint || 'Backlog'}</p>
|
||||
</div>
|
||||
|
||||
{/* Story Points */}
|
||||
{issue.story_points !== null && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Story Points</p>
|
||||
<p className="font-medium">{issue.story_points}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Due Date */}
|
||||
{issue.due_date && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Due Date</p>
|
||||
<p className="font-medium">
|
||||
{new Date(issue.due_date).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Labels */}
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Labels</p>
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{issue.labels.map((label) => (
|
||||
<Badge
|
||||
key={label.id}
|
||||
variant="secondary"
|
||||
className="text-xs"
|
||||
style={
|
||||
label.color
|
||||
? { backgroundColor: `${label.color}20`, color: label.color }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Tag className="mr-1 h-3 w-3" aria-hidden="true" />
|
||||
{label.name}
|
||||
</Badge>
|
||||
))}
|
||||
{issue.labels.length === 0 && (
|
||||
<span className="text-sm text-muted-foreground">No labels</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Development */}
|
||||
{(issue.branch || issue.pull_request) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Development</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{issue.branch && (
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch
|
||||
className="h-4 w-4 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="font-mono text-sm">{issue.branch}</span>
|
||||
</div>
|
||||
)}
|
||||
{issue.pull_request && (
|
||||
<div className="flex items-center gap-2">
|
||||
<GitPullRequest
|
||||
className="h-4 w-4 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="text-sm">{issue.pull_request}</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Open
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
205
frontend/src/features/issues/components/IssueFilters.tsx
Normal file
205
frontend/src/features/issues/components/IssueFilters.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* IssueFilters Component
|
||||
*
|
||||
* Filter controls for the issue list.
|
||||
*
|
||||
* @module features/issues/components/IssueFilters
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, Filter } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IssueFilters as IssueFiltersType, IssueStatus, IssuePriority } from '../types';
|
||||
import { STATUS_ORDER, PRIORITY_ORDER, STATUS_CONFIG, PRIORITY_CONFIG } from '../constants';
|
||||
import { mockSprints, mockAssignees } from '../mocks';
|
||||
|
||||
interface IssueFiltersProps {
|
||||
filters: IssueFiltersType;
|
||||
onFiltersChange: (filters: IssueFiltersType) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function IssueFilters({ filters, onFiltersChange, className }: IssueFiltersProps) {
|
||||
const [showExtended, setShowExtended] = useState(false);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
onFiltersChange({ ...filters, search: value || undefined });
|
||||
};
|
||||
|
||||
const handleStatusChange = (value: string) => {
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
status: value as IssueStatus | 'all',
|
||||
});
|
||||
};
|
||||
|
||||
const handlePriorityChange = (value: string) => {
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
priority: value as IssuePriority | 'all',
|
||||
});
|
||||
};
|
||||
|
||||
const handleSprintChange = (value: string) => {
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
sprint: value as string | 'all' | 'backlog',
|
||||
});
|
||||
};
|
||||
|
||||
const handleAssigneeChange = (value: string) => {
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
assignee: value as string | 'all' | 'unassigned',
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
onFiltersChange({
|
||||
search: undefined,
|
||||
status: 'all',
|
||||
priority: 'all',
|
||||
sprint: 'all',
|
||||
assignee: 'all',
|
||||
labels: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
filters.search ||
|
||||
(filters.status && filters.status !== 'all') ||
|
||||
(filters.priority && filters.priority !== 'all') ||
|
||||
(filters.sprint && filters.sprint !== 'all') ||
|
||||
(filters.assignee && filters.assignee !== 'all');
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
{/* Search and Quick Filters */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<div className="relative flex-1">
|
||||
<Search
|
||||
className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Input
|
||||
id="issue-search"
|
||||
placeholder="Search issues..."
|
||||
value={filters.search || ''}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="pl-9"
|
||||
aria-label="Search issues"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Select value={filters.status || 'all'} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger className="w-32" aria-label="Filter by status">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
{STATUS_ORDER.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{STATUS_CONFIG[status].label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setShowExtended(!showExtended)}
|
||||
className={cn(showExtended && 'bg-muted')}
|
||||
aria-expanded={showExtended}
|
||||
aria-label="Toggle extended filters"
|
||||
>
|
||||
<Filter className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Extended Filters */}
|
||||
{showExtended && (
|
||||
<Card className="p-4">
|
||||
<div className="grid gap-4 sm:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="priority-filter">Priority</Label>
|
||||
<Select
|
||||
value={filters.priority || 'all'}
|
||||
onValueChange={handlePriorityChange}
|
||||
>
|
||||
<SelectTrigger id="priority-filter">
|
||||
<SelectValue placeholder="All" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
{PRIORITY_ORDER.map((priority) => (
|
||||
<SelectItem key={priority} value={priority}>
|
||||
{PRIORITY_CONFIG[priority].label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sprint-filter">Sprint</Label>
|
||||
<Select value={filters.sprint || 'all'} onValueChange={handleSprintChange}>
|
||||
<SelectTrigger id="sprint-filter">
|
||||
<SelectValue placeholder="All" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Sprints</SelectItem>
|
||||
{mockSprints.map((sprint) => (
|
||||
<SelectItem key={sprint} value={sprint}>
|
||||
{sprint}
|
||||
</SelectItem>
|
||||
))}
|
||||
<SelectItem value="backlog">Backlog</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="assignee-filter">Assignee</Label>
|
||||
<Select
|
||||
value={filters.assignee || 'all'}
|
||||
onValueChange={handleAssigneeChange}
|
||||
>
|
||||
<SelectTrigger id="assignee-filter">
|
||||
<SelectValue placeholder="All" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All</SelectItem>
|
||||
<SelectItem value="unassigned">Unassigned</SelectItem>
|
||||
{mockAssignees.map((assignee) => (
|
||||
<SelectItem key={assignee.id} value={assignee.id}>
|
||||
{assignee.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
{hasActiveFilters && (
|
||||
<Button variant="ghost" size="sm" onClick={handleClearFilters}>
|
||||
Clear Filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
265
frontend/src/features/issues/components/IssueTable.tsx
Normal file
265
frontend/src/features/issues/components/IssueTable.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* IssueTable Component
|
||||
*
|
||||
* Sortable table displaying issues with selection support.
|
||||
*
|
||||
* @module features/issues/components/IssueTable
|
||||
*/
|
||||
|
||||
import { ChevronUp, ChevronDown, MoreVertical, Bot, User, CircleDot } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import type { IssueSummary, IssueSort, IssueSortField, IssueSortDirection } from '../types';
|
||||
|
||||
/**
|
||||
* Convert our sort direction to ARIA sort value
|
||||
*/
|
||||
function toAriaSortValue(
|
||||
field: IssueSortField,
|
||||
currentField: IssueSortField,
|
||||
direction: IssueSortDirection
|
||||
): 'ascending' | 'descending' | 'none' | undefined {
|
||||
if (field !== currentField) return undefined;
|
||||
return direction === 'asc' ? 'ascending' : 'descending';
|
||||
}
|
||||
|
||||
import { StatusBadge } from './StatusBadge';
|
||||
import { PriorityBadge } from './PriorityBadge';
|
||||
import { SyncStatusIndicator } from './SyncStatusIndicator';
|
||||
|
||||
interface IssueTableProps {
|
||||
issues: IssueSummary[];
|
||||
selectedIssues: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
onIssueClick: (id: string) => void;
|
||||
sort: IssueSort;
|
||||
onSortChange: (sort: IssueSort) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function IssueTable({
|
||||
issues,
|
||||
selectedIssues,
|
||||
onSelectionChange,
|
||||
onIssueClick,
|
||||
sort,
|
||||
onSortChange,
|
||||
className,
|
||||
}: IssueTableProps) {
|
||||
const handleSelectAll = () => {
|
||||
if (selectedIssues.length === issues.length) {
|
||||
onSelectionChange([]);
|
||||
} else {
|
||||
onSelectionChange(issues.map((i) => i.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectIssue = (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (selectedIssues.includes(id)) {
|
||||
onSelectionChange(selectedIssues.filter((i) => i !== id));
|
||||
} else {
|
||||
onSelectionChange([...selectedIssues, id]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (field: IssueSortField) => {
|
||||
if (sort.field === field) {
|
||||
onSortChange({
|
||||
field,
|
||||
direction: sort.direction === 'asc' ? 'desc' : 'asc',
|
||||
});
|
||||
} else {
|
||||
onSortChange({ field, direction: 'desc' });
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ field }: { field: IssueSortField }) => {
|
||||
if (sort.field !== field) return null;
|
||||
return sort.direction === 'asc' ? (
|
||||
<ChevronUp className="ml-1 inline h-4 w-4" aria-hidden="true" />
|
||||
) : (
|
||||
<ChevronDown className="ml-1 inline h-4 w-4" aria-hidden="true" />
|
||||
);
|
||||
};
|
||||
|
||||
const allSelected = selectedIssues.length === issues.length && issues.length > 0;
|
||||
const someSelected = selectedIssues.length > 0 && !allSelected;
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={allSelected}
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
(el as unknown as HTMLInputElement).indeterminate = someSelected;
|
||||
}
|
||||
}}
|
||||
onCheckedChange={handleSelectAll}
|
||||
aria-label={allSelected ? 'Deselect all issues' : 'Select all issues'}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className="w-20 cursor-pointer select-none"
|
||||
onClick={() => handleSort('number')}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-sort={toAriaSortValue('number', sort.field, sort.direction)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('number')}
|
||||
>
|
||||
#
|
||||
<SortIcon field="number" />
|
||||
</TableHead>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead className="w-32">Status</TableHead>
|
||||
<TableHead
|
||||
className="w-24 cursor-pointer select-none"
|
||||
onClick={() => handleSort('priority')}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-sort={toAriaSortValue('priority', sort.field, sort.direction)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('priority')}
|
||||
>
|
||||
Priority
|
||||
<SortIcon field="priority" />
|
||||
</TableHead>
|
||||
<TableHead className="w-40">Assignee</TableHead>
|
||||
<TableHead className="w-28">Sprint</TableHead>
|
||||
<TableHead className="w-10">Sync</TableHead>
|
||||
<TableHead className="w-10">
|
||||
<span className="sr-only">Actions</span>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{issues.map((issue) => (
|
||||
<TableRow
|
||||
key={issue.id}
|
||||
className="cursor-pointer"
|
||||
onClick={() => onIssueClick(issue.id)}
|
||||
data-testid={`issue-row-${issue.id}`}
|
||||
>
|
||||
<TableCell onClick={(e) => handleSelectIssue(issue.id, e)}>
|
||||
<Checkbox
|
||||
checked={selectedIssues.includes(issue.id)}
|
||||
onCheckedChange={() => {}}
|
||||
aria-label={`Select issue ${issue.number}`}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm text-muted-foreground">
|
||||
{issue.number}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">{issue.title}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{issue.labels.slice(0, 3).map((label) => (
|
||||
<Badge key={label} variant="secondary" className="text-xs">
|
||||
{label}
|
||||
</Badge>
|
||||
))}
|
||||
{issue.labels.length > 3 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
+{issue.labels.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge status={issue.status} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<PriorityBadge priority={issue.priority} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{issue.assignee ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
|
||||
{issue.assignee.type === 'agent' ? (
|
||||
<Bot className="h-3 w-3" aria-hidden="true" />
|
||||
) : (
|
||||
<User className="h-3 w-3" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm">{issue.assignee.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">Unassigned</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{issue.sprint ? (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{issue.sprint}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">Backlog</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<SyncStatusIndicator status={issue.sync_status} />
|
||||
</TableCell>
|
||||
<TableCell onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
aria-label={`Actions for issue ${issue.number}`}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onIssueClick(issue.id)}>
|
||||
View Details
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem>Assign</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Sync with Tracker</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{issues.length === 0 && (
|
||||
<div className="py-12 text-center">
|
||||
<CircleDot className="mx-auto h-12 w-12 text-muted-foreground" aria-hidden="true" />
|
||||
<h3 className="mt-4 font-semibold">No issues found</h3>
|
||||
<p className="text-muted-foreground">Try adjusting your search or filters</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
29
frontend/src/features/issues/components/PriorityBadge.tsx
Normal file
29
frontend/src/features/issues/components/PriorityBadge.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* PriorityBadge Component
|
||||
*
|
||||
* Displays issue priority with appropriate styling.
|
||||
*
|
||||
* @module features/issues/components/PriorityBadge
|
||||
*/
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IssuePriority } from '../types';
|
||||
import { PRIORITY_CONFIG } from '../constants';
|
||||
|
||||
interface PriorityBadgeProps {
|
||||
priority: IssuePriority;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function PriorityBadge({ priority, className }: PriorityBadgeProps) {
|
||||
const config = PRIORITY_CONFIG[priority] || PRIORITY_CONFIG.medium;
|
||||
|
||||
return (
|
||||
<Badge className={cn(config.color, className)} variant="outline">
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
51
frontend/src/features/issues/components/StatusBadge.tsx
Normal file
51
frontend/src/features/issues/components/StatusBadge.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* StatusBadge Component
|
||||
*
|
||||
* Displays issue status with appropriate icon and color.
|
||||
*
|
||||
* @module features/issues/components/StatusBadge
|
||||
*/
|
||||
|
||||
import {
|
||||
CircleDot,
|
||||
PlayCircle,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IssueStatus } from '../types';
|
||||
import { STATUS_CONFIG } from '../constants';
|
||||
|
||||
const STATUS_ICONS = {
|
||||
open: CircleDot,
|
||||
in_progress: PlayCircle,
|
||||
in_review: Clock,
|
||||
blocked: AlertCircle,
|
||||
done: CheckCircle2,
|
||||
closed: XCircle,
|
||||
} as const;
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: IssueStatus;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, className, showLabel = true }: StatusBadgeProps) {
|
||||
const config = STATUS_CONFIG[status] || STATUS_CONFIG.open;
|
||||
const Icon = STATUS_ICONS[status] || CircleDot;
|
||||
|
||||
return (
|
||||
<div className={cn('flex items-center gap-1.5', config.color, className)}>
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
{showLabel && (
|
||||
<span className="text-sm font-medium">{config.label}</span>
|
||||
)}
|
||||
<span className="sr-only">{config.label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
frontend/src/features/issues/components/StatusWorkflow.tsx
Normal file
86
frontend/src/features/issues/components/StatusWorkflow.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* SyncStatusIndicator Component
|
||||
*
|
||||
* Displays sync status with external issue trackers.
|
||||
*
|
||||
* @module features/issues/components/SyncStatusIndicator
|
||||
*/
|
||||
|
||||
import { CheckCircle2, RefreshCw, AlertCircle, AlertTriangle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { SyncStatus } from '../types';
|
||||
import { SYNC_STATUS_CONFIG } from '../constants';
|
||||
|
||||
const SYNC_ICONS = {
|
||||
synced: CheckCircle2,
|
||||
pending: RefreshCw,
|
||||
conflict: AlertTriangle,
|
||||
error: AlertCircle,
|
||||
} as const;
|
||||
|
||||
interface SyncStatusIndicatorProps {
|
||||
status: SyncStatus;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export function SyncStatusIndicator({
|
||||
status,
|
||||
className,
|
||||
showLabel = false,
|
||||
}: SyncStatusIndicatorProps) {
|
||||
const config = SYNC_STATUS_CONFIG[status] || SYNC_STATUS_CONFIG.synced;
|
||||
const Icon = SYNC_ICONS[status] || CheckCircle2;
|
||||
const isPending = status === 'pending';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('flex items-center gap-1', className)}
|
||||
title={config.label}
|
||||
role="status"
|
||||
aria-label={`Sync status: ${config.label}`}
|
||||
>
|
||||
<Icon
|
||||
className={cn('h-3.5 w-3.5', config.color, isPending && 'animate-spin')}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{showLabel && <span className={cn('text-xs', config.color)}>{config.label}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
frontend/src/features/issues/components/index.ts
Normal file
15
frontend/src/features/issues/components/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Issue Management Components
|
||||
*
|
||||
* @module features/issues/components
|
||||
*/
|
||||
|
||||
export { StatusBadge } from './StatusBadge';
|
||||
export { PriorityBadge } from './PriorityBadge';
|
||||
export { SyncStatusIndicator } from './SyncStatusIndicator';
|
||||
export { IssueFilters } from './IssueFilters';
|
||||
export { IssueTable } from './IssueTable';
|
||||
export { BulkActions } from './BulkActions';
|
||||
export { StatusWorkflow } from './StatusWorkflow';
|
||||
export { ActivityTimeline } from './ActivityTimeline';
|
||||
export { IssueDetailPanel } from './IssueDetailPanel';
|
||||
Reference in New Issue
Block a user