# 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
