Felipe Cardoso
5b1e2852ea
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>
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'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>
|
|
);
|
|
}
|