diff --git a/frontend/src/app/[locale]/prototypes/main-dashboard/README.md b/frontend/src/app/[locale]/prototypes/main-dashboard/README.md new file mode 100644 index 0000000..ac78103 --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/main-dashboard/README.md @@ -0,0 +1,225 @@ +# Main Dashboard / Projects List - Design Prototype + +## Overview + +The Main Dashboard is the landing page users see after logging in to Syndarix. It provides a comprehensive overview of all their projects, real-time activity across the platform, and quick access to create new projects. This is the central hub from which users navigate to individual project dashboards. + +## User Stories + +- As a user, I want to see all my projects at a glance so I can quickly assess overall status +- As a user, I want to see real-time activity from my agents so I stay informed of progress +- As a user, I want to quickly create a new project without leaving the dashboard +- As a user, I want to filter and sort my projects to find specific ones easily +- As a user, I want to switch between grid and list views based on my preference +- As a new user, I want a clear call-to-action to create my first project + +## Key Screens + +### 1. Navigation Header +- Syndarix logo with link to prototypes index +- Global search bar (placeholder) for searching projects, issues, and agents +- Notifications bell with badge count for pending approvals +- User menu dropdown with profile, settings, and logout options + +### 2. Welcome Section +- Personalized welcome message with user name +- Quick summary stats (active projects, working agents) +- Prominent "New Project" button + +### 3. Quick Stats Cards +- Active Projects count with icon +- Agents Active count +- Open Issues total across all projects +- Pending Approvals requiring user action + +### 4. Projects Section +- **Grid View**: Card-based layout showing project details + - Project icon with status-based coloring + - Status badge (Active, Paused, Completed, Archived) + - Complexity indicator (3-dot system) + - Quick stats grid (issues, agents, current sprint) + - Progress bar with percentage + - Last activity timestamp +- **List View**: Compact row-based layout for data-dense viewing + - All key information in a single scannable row + - Responsive - hides some columns on smaller screens +- **Controls**: Filter by status, sort options, view toggle +- **Empty State**: For new users with no projects (toggle available for demo) + +### 5. Activity Feed (Right Sidebar) +- Real-time connection indicator (Live/Reconnecting) +- Chronological list of events across all projects +- Event types: agent messages, issue updates, sprint events, approvals +- Project attribution for each event +- Action buttons for pending approvals +- "View All Activity" link + +### 6. Performance Summary +- Average sprint velocity +- Issues resolved (7-day window) +- Agent uptime percentage +- Average approval response time + +## User Flow + +1. User logs in and lands on the main dashboard +2. User scans quick stats to get an overview of platform status +3. User reviews the projects list to see current work +4. User optionally switches between grid/list views or applies filters +5. User monitors activity feed for real-time updates +6. If notifications badge shows pending items, user reviews approvals +7. User clicks a project card to navigate to the project dashboard +8. Alternatively, user clicks "New Project" to start a new project + +## Design Decisions + +### Layout +- Responsive 4-column grid on desktop: 3 columns for main content, 1 for sidebar +- Sidebar collapses below main content on mobile +- Sticky navigation header for easy access to search and notifications + +### Project Cards (Grid View) +- Fixed height cards for visual consistency in grid +- Three-column quick stats (issues, agents, sprint) for rapid scanning +- Progress bar as the main visual indicator of project health +- Complexity indicator uses a 3-dot system (low/medium/high) + +### Project Rows (List View) +- All critical information visible without scrolling +- Progressive disclosure: less info on smaller screens +- Clear click affordance with hover states and chevron + +### Status Colors +- Active: Green (positive, working) +- Paused: Yellow (attention, on hold) +- Completed: Blue (success, finished) +- Archived: Gray (inactive, historical) + +### Activity Feed +- Live connection indicator gives confidence in real-time updates +- Events grouped by time (relative timestamps) +- Action items (approvals) highlighted with yellow background +- Limited to 8 items with "View All" for full history + +### Empty State +- Friendly message for new users +- Clear call-to-action to create first project +- Dashed border to indicate "fill me" visually + +## States + +### Loading +- Skeleton cards in grid view +- Skeleton rows in list view +- Activity feed shows loading placeholders +- Stats cards show placeholder numbers + +### Empty +- "No projects yet" message with illustration +- Encouragement text explaining the value proposition +- Prominent "Create Your First Project" button +- Toggle available in prototype to switch between empty/populated + +### Error +- Toast notification for failed operations +- Retry buttons where applicable +- Activity feed shows "Connection lost" with reconnection status + +### Real-time Updates +- Activity feed updates every 30 seconds (simulated in prototype) +- Connection status indicator shows Live/Reconnecting +- New events animate into the feed at the top + +## Responsive Breakpoints + +### Desktop (lg: 1024px+) +- 4-column layout (3 main + 1 sidebar) +- Grid view shows 3 project cards per row +- Full activity feed visible +- All stats and filters inline + +### Tablet (md: 768px) +- 3-column layout (main takes full width, sidebar below) +- Grid view shows 2 project cards per row +- Search visible in header +- Some list view columns hidden + +### Mobile (< 768px) +- Single column, vertical stack +- Grid view shows 1 project card per row +- Search hidden (accessible via icon) +- Compact quick stats (2x2 grid) +- Activity feed collapsible + +## Accessibility Notes + +- All interactive elements are keyboard navigable +- Status badges use both color AND text labels +- Complexity indicator has title attribute for screen readers +- Activity feed connection status announced to screen readers +- Focus states visible on all buttons and cards +- Color contrast meets WCAG AA standards +- View toggle buttons have aria-labels + +## Components Used + +- Card, CardHeader, CardTitle, CardContent, CardDescription +- Button (default, outline, ghost, secondary variants) +- Badge (default, secondary, outline variants) +- Input (for search) +- Avatar, AvatarFallback +- DropdownMenu components +- Select, SelectContent, SelectItem, SelectTrigger, SelectValue +- Separator +- Lucide icons for visual indicators + +## Interactive Features (Prototype) + +1. **View Toggle**: Switch between grid and list views +2. **Filter Dropdown**: Filter projects by status (all, active, paused, completed, archived) +3. **Sort Dropdown**: Sort by recent, name, progress, or issues +4. **Empty State Toggle**: Button to switch between empty and populated states for demo +5. **Simulated Activity Feed**: New events appear every 30 seconds +6. **Connection Status**: Randomly disconnects/reconnects to show the indicator +7. **Notifications Dropdown**: Shows pending approval items +8. **User Menu**: Dropdown with profile options + +## Questions for Review + +1. Is the 4-column layout optimal or should the activity feed take more/less space? +2. Should project cards show more or fewer quick stats? +3. Is the complexity indicator (3 dots) intuitive enough? +4. Should the activity feed show events from ALL projects or have a filter? +5. Is the empty state message compelling enough for new users? +6. Should there be a "pinned projects" feature for frequent access? +7. Is the search bar placement optimal or should it be more prominent? + +## How to View + +Navigate to: `/prototypes/main-dashboard` + +## Mock Data Summary + +### Projects (5 total) +- E-Commerce Platform Redesign (Active, High complexity) +- Mobile Banking App (Active, High complexity) +- Internal HR Portal (Paused, Medium complexity) +- API Gateway Modernization (Completed, High complexity) +- Customer Support Chatbot (Archived, Low complexity) + +### Activity Events (10 initial) +- Mix of agent messages, issue updates, sprint events, and approval requests +- Timestamps range from 2 minutes ago to 5 hours ago +- One pending approval request highlighted + +## Next Steps + +After approval: +1. Connect to real user authentication for personalized welcome +2. Implement actual project list API integration +3. Connect to SSE/WebSocket for real-time activity feed +4. Add project creation modal/wizard +5. Implement global search functionality +6. Add loading skeletons for all data sections +7. Implement persistent view preference (grid/list) +8. Add project quick actions (pause, archive) from dashboard diff --git a/frontend/src/app/[locale]/prototypes/main-dashboard/page.tsx b/frontend/src/app/[locale]/prototypes/main-dashboard/page.tsx new file mode 100644 index 0000000..6f02923 --- /dev/null +++ b/frontend/src/app/[locale]/prototypes/main-dashboard/page.tsx @@ -0,0 +1,927 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { Input } from '@/components/ui/input'; +import { Separator } from '@/components/ui/separator'; +import { Avatar, AvatarFallback } from '@/components/ui/avatar'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { + Plus, + Search, + Bell, + LayoutGrid, + List, + ChevronRight, + Bot, + CircleDot, + Clock, + Activity, + Settings, + User, + LogOut, + GitBranch, + MessageSquare, + PlayCircle, + CheckCircle2, + AlertTriangle, + Folder, + FolderOpen, + Zap, + Gauge, + Archive, + Pause, + Filter, + ArrowUpDown, +} from 'lucide-react'; + +// Mock data for projects +const mockProjects = [ + { + id: 'proj-001', + name: 'E-Commerce Platform Redesign', + description: 'Complete redesign of the e-commerce platform with modern UI/UX', + status: 'active', + complexity: 'high', + openIssues: 12, + activeAgents: 4, + currentSprint: 'Sprint 3', + lastActivity: '2 min ago', + progress: 67, + }, + { + id: 'proj-002', + name: 'Mobile Banking App', + description: 'Native mobile app for banking services with biometric authentication', + status: 'active', + complexity: 'high', + openIssues: 8, + activeAgents: 5, + currentSprint: 'Sprint 2', + lastActivity: '15 min ago', + progress: 45, + }, + { + id: 'proj-003', + name: 'Internal HR Portal', + description: 'Employee self-service portal for HR operations', + status: 'paused', + complexity: 'medium', + openIssues: 5, + activeAgents: 0, + currentSprint: 'Sprint 1', + lastActivity: '2 days ago', + progress: 23, + }, + { + id: 'proj-004', + name: 'API Gateway Modernization', + description: 'Migrate legacy API gateway to modern microservices architecture', + status: 'completed', + complexity: 'high', + openIssues: 0, + activeAgents: 0, + currentSprint: 'Sprint 5', + lastActivity: '1 week ago', + progress: 100, + }, + { + id: 'proj-005', + name: 'Customer Support Chatbot', + description: 'AI-powered chatbot for customer support automation', + status: 'archived', + complexity: 'low', + openIssues: 0, + activeAgents: 0, + currentSprint: 'Sprint 3', + lastActivity: '1 month ago', + progress: 100, + }, +]; + +// Mock activity events (simulated real-time) +const mockActivityEvents = [ + { + id: 'evt-001', + type: 'agent_message', + project: 'E-Commerce Platform Redesign', + projectId: 'proj-001', + agent: 'Product Owner', + message: 'Approved user story #42: Cart checkout flow', + timestamp: new Date(Date.now() - 2 * 60 * 1000), + icon: MessageSquare, + }, + { + id: 'evt-002', + type: 'issue_update', + project: 'Mobile Banking App', + projectId: 'proj-002', + agent: 'Backend Engineer', + message: 'Moved issue #38 to "In Review"', + timestamp: new Date(Date.now() - 8 * 60 * 1000), + icon: GitBranch, + }, + { + id: 'evt-003', + type: 'agent_status', + project: 'E-Commerce Platform Redesign', + projectId: 'proj-001', + agent: 'Frontend Engineer', + message: 'Started working on issue #45', + timestamp: new Date(Date.now() - 15 * 60 * 1000), + icon: PlayCircle, + }, + { + id: 'evt-004', + type: 'sprint_event', + project: 'Mobile Banking App', + projectId: 'proj-002', + agent: 'System', + message: 'Sprint 2 daily standup completed', + timestamp: new Date(Date.now() - 45 * 60 * 1000), + icon: CheckCircle2, + }, + { + id: 'evt-005', + type: 'approval_request', + project: 'E-Commerce Platform Redesign', + projectId: 'proj-001', + agent: 'Architect', + message: 'Requesting approval for API design document', + timestamp: new Date(Date.now() - 60 * 60 * 1000), + icon: AlertTriangle, + requiresAction: true, + }, + { + id: 'evt-006', + type: 'agent_message', + project: 'Mobile Banking App', + projectId: 'proj-002', + agent: 'QA Engineer', + message: 'Test suite passed: 142 tests, 0 failures', + timestamp: new Date(Date.now() - 90 * 60 * 1000), + icon: CheckCircle2, + }, + { + id: 'evt-007', + type: 'issue_update', + project: 'E-Commerce Platform Redesign', + projectId: 'proj-001', + agent: 'Backend Engineer', + message: 'Created PR #78 for payment integration', + timestamp: new Date(Date.now() - 120 * 60 * 1000), + icon: GitBranch, + }, + { + id: 'evt-008', + type: 'sprint_event', + project: 'E-Commerce Platform Redesign', + projectId: 'proj-001', + agent: 'System', + message: 'Sprint 3 started with 15 issues', + timestamp: new Date(Date.now() - 180 * 60 * 1000), + icon: PlayCircle, + }, + { + id: 'evt-009', + type: 'agent_status', + project: 'Mobile Banking App', + projectId: 'proj-002', + agent: 'Architect', + message: 'Completed security audit review', + timestamp: new Date(Date.now() - 240 * 60 * 1000), + icon: CheckCircle2, + }, + { + id: 'evt-010', + type: 'issue_update', + project: 'Mobile Banking App', + projectId: 'proj-002', + agent: 'Frontend Engineer', + message: 'Resolved issue #32: Login screen layout', + timestamp: new Date(Date.now() - 300 * 60 * 1000), + icon: CheckCircle2, + }, +]; + +// Helper function to format relative time +function formatRelativeTime(date: Date): string { + const now = new Date(); + const diffMs = now.getTime() - date.getTime(); + const diffMins = Math.floor(diffMs / (1000 * 60)); + const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); + const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); + + if (diffMins < 1) return 'Just now'; + if (diffMins < 60) return `${diffMins} min ago`; + if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`; + return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`; +} + +// Project status badge component +function ProjectStatusBadge({ status }: { status: string }) { + const variants: Record = { + active: { + label: 'Active', + className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', + icon: PlayCircle, + }, + paused: { + label: 'Paused', + className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', + icon: Pause, + }, + completed: { + label: 'Completed', + className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', + icon: CheckCircle2, + }, + archived: { + label: 'Archived', + className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300', + icon: Archive, + }, + }; + + const variant = variants[status] || variants.active; + const Icon = variant.icon; + + return ( + + + {variant.label} + + ); +} + +// Complexity indicator component +function ComplexityIndicator({ complexity }: { complexity: string }) { + const variants: Record = { + low: { label: 'Low', dots: 1, color: 'bg-green-500' }, + medium: { label: 'Medium', dots: 2, color: 'bg-yellow-500' }, + high: { label: 'High', dots: 3, color: 'bg-red-500' }, + }; + + const variant = variants[complexity] || variants.medium; + + return ( +
+ {[1, 2, 3].map((i) => ( +
+ ))} +
+ ); +} + +// Progress bar component +function ProgressBar({ value, size = 'default' }: { value: number; size?: 'default' | 'sm' }) { + const height = size === 'sm' ? 'h-1.5' : 'h-2'; + return ( +
+
+
+ ); +} + +// Project card component (Grid view) +function ProjectCardGrid({ + project, +}: { + project: (typeof mockProjects)[0]; +}) { + return ( + + + +
+
+ {project.status === 'archived' ? ( + + ) : project.status === 'completed' ? ( + + ) : ( + + )} +
+
+ + +
+
+ {project.name} + {project.description} + + +
+ {/* Quick stats */} +
+
+
+ + {project.openIssues} +
+
Issues
+
+
+
+ + {project.activeAgents} +
+
Agents
+
+
+
{project.currentSprint}
+
Current
+
+
+ + {/* Progress */} +
+
+ Progress + {project.progress}% +
+ +
+ + {/* Last activity */} +
+
+ + Last activity +
+ {project.lastActivity} +
+
+ + + + ); +} + +// Project row component (List view) +function ProjectRowList({ + project, +}: { + project: (typeof mockProjects)[0]; +}) { + return ( + +
+
+ {project.status === 'archived' ? ( + + ) : project.status === 'completed' ? ( + + ) : ( + + )} +
+ +
+
+

{project.name}

+ +
+

+ {project.description} +

+
+ +
+
+ + {project.openIssues} + issues +
+
+ + {project.activeAgents} + agents +
+
+
{project.progress}%
+ +
+
+ +
+ + {project.lastActivity} +
+ + +
+ + ); +} + +// Empty state component +function EmptyState() { + return ( + + +
+ +
+

No projects yet

+

+ Get started by creating your first project. Syndarix will help you assemble a team of AI + agents to build your software. +

+ + + + ); +} + +// Activity event component +function ActivityEvent({ + event, +}: { + event: (typeof mockActivityEvents)[0]; +}) { + const Icon = event.icon; + + return ( +
+
+ +
+
+

+ {event.agent}{' '} + {event.message} +

+
+ {event.project} + - + {formatRelativeTime(event.timestamp)} +
+ {event.requiresAction && ( + + )} +
+
+ ); +} + +export default function MainDashboardPrototype() { + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); + const [showEmptyState, setShowEmptyState] = useState(false); + const [statusFilter, setStatusFilter] = useState('all'); + const [sortBy, setSortBy] = useState('recent'); + const [activityEvents, setActivityEvents] = useState(mockActivityEvents); + const [isConnected, setIsConnected] = useState(true); + + // Simulate real-time activity feed updates + useEffect(() => { + const interval = setInterval(() => { + // Randomly add a new event every 30 seconds + const eventTypes = ['agent_message', 'issue_update', 'agent_status']; + const agents = ['Product Owner', 'Backend Engineer', 'Frontend Engineer', 'QA Engineer']; + const messages = [ + 'Updated documentation for module #12', + 'Completed code review for PR #89', + 'Started implementing feature #34', + 'Resolved merge conflict in main branch', + 'Added unit tests for auth module', + ]; + const projects = mockProjects.filter((p) => p.status === 'active'); + + if (projects.length > 0 && Math.random() > 0.7) { + const newEvent = { + id: `evt-${Date.now()}`, + type: eventTypes[Math.floor(Math.random() * eventTypes.length)], + project: projects[Math.floor(Math.random() * projects.length)].name, + projectId: projects[Math.floor(Math.random() * projects.length)].id, + agent: agents[Math.floor(Math.random() * agents.length)], + message: messages[Math.floor(Math.random() * messages.length)], + timestamp: new Date(), + icon: MessageSquare, + requiresAction: false, + }; + + setActivityEvents((prev) => [newEvent, ...prev.slice(0, 9)]); + } + }, 30000); + + return () => clearInterval(interval); + }, []); + + // Simulate connection status + useEffect(() => { + const interval = setInterval(() => { + // Randomly disconnect for demo purposes (rare) + if (Math.random() > 0.95) { + setIsConnected(false); + setTimeout(() => setIsConnected(true), 3000); + } + }, 10000); + + return () => clearInterval(interval); + }, []); + + // Filter and sort projects + const filteredProjects = mockProjects + .filter((project) => { + if (statusFilter === 'all') return true; + return project.status === statusFilter; + }) + .sort((a, b) => { + switch (sortBy) { + case 'name': + return a.name.localeCompare(b.name); + case 'progress': + return b.progress - a.progress; + case 'issues': + return b.openIssues - a.openIssues; + default: // recent + return 0; // Keep original order (already sorted by recent) + } + }); + + const activeProjectsCount = mockProjects.filter((p) => p.status === 'active').length; + const totalAgentsActive = mockProjects.reduce((sum, p) => sum + p.activeAgents, 0); + const pendingApprovals = activityEvents.filter((e) => e.requiresAction).length; + + return ( +
+ {/* Navigation Header */} + + +
+
+ {/* Main Content */} +
+ {/* Welcome Header */} +
+
+

Welcome back, John

+

+ {activeProjectsCount} active project{activeProjectsCount !== 1 ? 's' : ''},{' '} + {totalAgentsActive} agent{totalAgentsActive !== 1 ? 's' : ''} working +

+
+ +
+ + {/* Quick Stats */} +
+ + +
+ +
+
+
{activeProjectsCount}
+
Active Projects
+
+ + + + +
+ +
+
+
{totalAgentsActive}
+
Agents Active
+
+ + + + +
+ +
+
+
+ {mockProjects.reduce((sum, p) => sum + p.openIssues, 0)} +
+
Open Issues
+
+ + + + +
+ +
+
+
{pendingApprovals}
+
Pending Approvals
+
+ + +
+ + {/* Projects Section */} + + +
+
+ Projects + + Manage your software projects and track AI agent progress + +
+
+ {/* Demo toggle for empty state */} + + + + + {/* Filter */} + + + {/* Sort */} + + + {/* View Toggle */} +
+ + +
+
+
+ + + {showEmptyState ? ( + + ) : viewMode === 'grid' ? ( +
+ {filteredProjects.map((project) => ( + + ))} +
+ ) : ( +
+ {filteredProjects.map((project) => ( + + ))} +
+ )} + + {filteredProjects.length === 0 && !showEmptyState && ( +
+ No projects match the selected filters +
+ )} + + +
+ + {/* Right Sidebar - Activity Feed */} +
+ + +
+ + + Activity Feed + +
+ {isConnected ? ( + + + Live + + ) : ( + + + Reconnecting... + + )} +
+
+ Real-time updates from all projects + + +
+ {activityEvents.slice(0, 8).map((event) => ( + + ))} +
+ + + + + {/* Quick Performance Stats */} + + + + + Performance + + + +
+
+ Avg. Sprint Velocity + 24 pts +
+
+ Issues Resolved (7d) + 42 +
+
+ Agent Uptime + 99.8% +
+
+ Approval Response + 2.3 hrs avg +
+
+ + +
+
+
+
+ ); +} diff --git a/frontend/src/app/[locale]/prototypes/page.tsx b/frontend/src/app/[locale]/prototypes/page.tsx index b01870a..8166c75 100644 --- a/frontend/src/app/[locale]/prototypes/page.tsx +++ b/frontend/src/app/[locale]/prototypes/page.tsx @@ -15,9 +15,26 @@ import { CircleDot, Activity, ChevronRight, + Home, } from 'lucide-react'; const prototypes = [ + { + id: 'main-dashboard', + title: 'Main Dashboard', + description: 'Landing page with projects list, activity feed, and quick stats overview', + icon: Home, + issue: '#47', + status: 'ready', + features: [ + 'Projects grid/list view with status badges', + 'Real-time activity feed', + 'Quick stats overview', + 'Filter and sort controls', + 'Empty state for new users', + 'Responsive layout', + ], + }, { id: 'project-dashboard', title: 'Project Dashboard',