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:
194
frontend/src/components/projects/IssueSummary.tsx
Normal file
194
frontend/src/components/projects/IssueSummary.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Issue Summary Component
|
||||
*
|
||||
* Sidebar component showing issue counts by status.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import {
|
||||
GitBranch,
|
||||
CircleDot,
|
||||
PlayCircle,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import type { IssueSummary as IssueSummaryType } from './types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface IssueSummaryProps {
|
||||
/** Issue summary data */
|
||||
summary: IssueSummaryType | null;
|
||||
/** Whether data is loading */
|
||||
isLoading?: boolean;
|
||||
/** Callback when "View All Issues" is clicked */
|
||||
onViewAllIssues?: () => void;
|
||||
/** Additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface StatusRowProps {
|
||||
icon: React.ElementType;
|
||||
iconColor: string;
|
||||
label: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Subcomponents
|
||||
// ============================================================================
|
||||
|
||||
function StatusRow({ icon: Icon, iconColor, label, count }: StatusRowProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={cn('h-4 w-4', iconColor)} aria-hidden="true" />
|
||||
<span className="text-sm">{label}</span>
|
||||
</div>
|
||||
<span className="font-medium">{count}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueSummarySkeleton() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-8" />
|
||||
</div>
|
||||
))}
|
||||
<Skeleton className="h-px w-full" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-4 w-4" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-8" />
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export function IssueSummary({
|
||||
summary,
|
||||
isLoading = false,
|
||||
onViewAllIssues,
|
||||
className,
|
||||
}: IssueSummaryProps) {
|
||||
if (isLoading) {
|
||||
return <IssueSummarySkeleton />;
|
||||
}
|
||||
|
||||
if (!summary) {
|
||||
return (
|
||||
<Card className={className} data-testid="issue-summary">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<GitBranch className="h-5 w-5" aria-hidden="true" />
|
||||
Issue Summary
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-4 text-center text-muted-foreground">
|
||||
<CircleDot className="mb-2 h-6 w-6" aria-hidden="true" />
|
||||
<p className="text-sm">No issues found</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={className} data-testid="issue-summary">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<GitBranch className="h-5 w-5" aria-hidden="true" />
|
||||
Issue Summary
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3" role="list" aria-label="Issue counts by status">
|
||||
<StatusRow
|
||||
icon={CircleDot}
|
||||
iconColor="text-blue-500"
|
||||
label="Open"
|
||||
count={summary.open}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={PlayCircle}
|
||||
iconColor="text-yellow-500"
|
||||
label="In Progress"
|
||||
count={summary.in_progress}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={Clock}
|
||||
iconColor="text-purple-500"
|
||||
label="In Review"
|
||||
count={summary.in_review}
|
||||
/>
|
||||
<StatusRow
|
||||
icon={AlertCircle}
|
||||
iconColor="text-red-500"
|
||||
label="Blocked"
|
||||
count={summary.blocked}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<StatusRow
|
||||
icon={CheckCircle2}
|
||||
iconColor="text-green-500"
|
||||
label="Completed"
|
||||
count={summary.done}
|
||||
/>
|
||||
|
||||
{onViewAllIssues && (
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
size="sm"
|
||||
onClick={onViewAllIssues}
|
||||
>
|
||||
View All Issues ({summary.total})
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user