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:
171
frontend/src/components/projects/wizard/steps/AgentChatStep.tsx
Normal file
171
frontend/src/components/projects/wizard/steps/AgentChatStep.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Step 5: Agent Chat Placeholder
|
||||
*
|
||||
* Preview of the requirements discovery chat interface.
|
||||
* This will be fully implemented in Phase 4.
|
||||
*/
|
||||
|
||||
import { Bot, User, MessageSquare, Sparkles } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface MockMessage {
|
||||
id: number;
|
||||
role: 'agent' | 'user';
|
||||
name: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
const mockMessages: MockMessage[] = [
|
||||
{
|
||||
id: 1,
|
||||
role: 'agent',
|
||||
name: 'Product Owner Agent',
|
||||
message:
|
||||
"Hello! I'm your Product Owner agent. I'll help you define what we're building. Can you tell me more about your project goals?",
|
||||
timestamp: '10:00 AM',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
role: 'user',
|
||||
name: 'You',
|
||||
message:
|
||||
'I want to build an e-commerce platform for selling handmade crafts. It should have user accounts, a product catalog, and checkout.',
|
||||
timestamp: '10:02 AM',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
role: 'agent',
|
||||
name: 'Product Owner Agent',
|
||||
message:
|
||||
"Great! Let me break this down into user stories. For the MVP, I'd suggest focusing on: user registration/login, product browsing with categories, and a simple cart checkout. Should we also include seller accounts or just a single store?",
|
||||
timestamp: '10:03 AM',
|
||||
},
|
||||
];
|
||||
|
||||
export function AgentChatStep() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-2xl font-bold">Requirements Discovery</h2>
|
||||
<Badge variant="secondary">Coming in Phase 4</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
In the full version, you'll chat with our Product Owner agent here to define
|
||||
requirements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="border-b pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
|
||||
<Bot className="h-5 w-5 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">Product Owner Agent</CardTitle>
|
||||
<CardDescription>Requirements discovery and sprint planning</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
Preview Only
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{/* Chat Messages Area */}
|
||||
<div
|
||||
className="max-h-80 space-y-4 overflow-y-auto p-4"
|
||||
role="log"
|
||||
aria-label="Chat preview messages"
|
||||
>
|
||||
{mockMessages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={cn('flex gap-3', msg.role === 'user' ? 'flex-row-reverse' : '')}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
|
||||
msg.role === 'agent' ? 'bg-primary/10' : 'bg-muted'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{msg.role === 'agent' ? (
|
||||
<Bot className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'max-w-[80%] rounded-lg px-4 py-2',
|
||||
msg.role === 'agent' ? 'bg-muted' : 'bg-primary text-primary-foreground'
|
||||
)}
|
||||
>
|
||||
<p className="text-sm">{msg.message}</p>
|
||||
<p
|
||||
className={cn(
|
||||
'mt-1 text-xs',
|
||||
msg.role === 'agent' ? 'text-muted-foreground' : 'text-primary-foreground/70'
|
||||
)}
|
||||
>
|
||||
{msg.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Chat Input Area (disabled preview) */}
|
||||
<div className="border-t p-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Type your message... (disabled in preview)"
|
||||
disabled
|
||||
className="flex-1"
|
||||
aria-label="Chat input (disabled in preview)"
|
||||
/>
|
||||
<Button disabled aria-label="Send message (disabled in preview)">
|
||||
<MessageSquare className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-2 text-center text-xs text-muted-foreground">
|
||||
This chat interface is a preview. Full agent interaction will be available in Phase 4.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-dashed bg-muted/30">
|
||||
<CardContent className="flex items-center gap-4 p-6">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||||
<Sparkles className="h-6 w-6 text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium">What to Expect in the Full Version</h4>
|
||||
<ul className="mt-2 space-y-1 text-sm text-muted-foreground">
|
||||
<li>- Interactive requirements gathering with AI Product Owner</li>
|
||||
<li>- Architecture spike with BA and Architect agents</li>
|
||||
<li>- Collaborative backlog creation and prioritization</li>
|
||||
<li>- Real-time refinement of user stories</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user