Felipe Cardoso
551dbb7293
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
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
'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>
|
|
);
|
|
}
|