cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

[DESIGN] Main Dashboard / Projects List Page #47

New Issue
Closed
opened 2025-12-30 17:30:10 +00:00 by cardosofelipe · 2 comments
cardosofelipe commented 2025-12-30 17:30:10 +00:00
Owner
Copy Link

Description

Design interactive React prototype for the main dashboard / projects list page - the first page users see after login.

Requirements

Page Sections

  1. Header: Welcome message, global search, notifications bell, user menu
  2. Projects List: Grid/List view of all user's projects with:
    • Project name, status badge, complexity indicator
    • Quick stats (open issues, active agents, current sprint)
    • Last activity timestamp
    • Click to navigate to project dashboard
  3. Activity Feed: Recent activity across all projects (uses SSE EventBus)
  4. Quick Actions:
    • "Create New Project" button (prominent)
    • View toggle (grid/list)
    • Filter/sort controls

Features

  • Real-time activity feed (connected to SSE)
  • Project status badges (Active, Paused, Completed, Archived)
  • Empty state for new users (no projects yet)
  • Responsive grid layout

Interactions

  • Click project card → Navigate to /projects/{slug}
  • Click "Create New Project" → Navigate to /projects/new
  • Filter by status
  • Sort by name/activity/created date
  • View toggle (grid ↔ list)

Responsive Design

  • Desktop: 3-4 column grid with sidebar activity feed
  • Tablet: 2 column grid, activity below
  • Mobile: Single column, collapsible sections

Deliverables

  • frontend/prototypes/main-dashboard/page.tsx
  • frontend/prototypes/main-dashboard/README.md
  • Screenshots in issue comments

Acceptance Criteria

  • Prototype navigable in browser
  • Project list with mock data
  • Activity feed simulated with realistic events
  • "Create New Project" button visible
  • Responsive breakpoints working
  • Empty state designed
  • User approval obtained

Technical Notes

  • Use existing SSE hooks (useProjectEvents) for activity feed
  • Follow design system guidelines
  • Reuse patterns from project-dashboard prototype

Assignable To

ui-designer agent

## Description Design interactive React prototype for the main dashboard / projects list page - the first page users see after login. ## Requirements ### Page Sections 1. **Header**: Welcome message, global search, notifications bell, user menu 2. **Projects List**: Grid/List view of all user's projects with: - Project name, status badge, complexity indicator - Quick stats (open issues, active agents, current sprint) - Last activity timestamp - Click to navigate to project dashboard 3. **Activity Feed**: Recent activity across all projects (uses SSE EventBus) 4. **Quick Actions**: - "Create New Project" button (prominent) - View toggle (grid/list) - Filter/sort controls ### Features - Real-time activity feed (connected to SSE) - Project status badges (Active, Paused, Completed, Archived) - Empty state for new users (no projects yet) - Responsive grid layout ### Interactions - Click project card → Navigate to `/projects/{slug}` - Click "Create New Project" → Navigate to `/projects/new` - Filter by status - Sort by name/activity/created date - View toggle (grid ↔ list) ### Responsive Design - Desktop: 3-4 column grid with sidebar activity feed - Tablet: 2 column grid, activity below - Mobile: Single column, collapsible sections ## Deliverables - `frontend/prototypes/main-dashboard/page.tsx` - `frontend/prototypes/main-dashboard/README.md` - Screenshots in issue comments ## Acceptance Criteria - [ ] Prototype navigable in browser - [ ] Project list with mock data - [ ] Activity feed simulated with realistic events - [ ] "Create New Project" button visible - [ ] Responsive breakpoints working - [ ] Empty state designed - [ ] **User approval obtained** ## Technical Notes - Use existing SSE hooks (`useProjectEvents`) for activity feed - Follow design system guidelines - Reuse patterns from project-dashboard prototype ## Assignable To ui-designer agent
cardosofelipe added the designfrontendphase-1 labels 2025-12-30 17:30:27 +00:00
cardosofelipe commented 2025-12-30 18:06:24 +00:00
Author
Owner
Copy Link

Prototype Available for Review

The main dashboard prototype is now available at:
http://localhost:3000/prototypes/main-dashboard

Key Features:

  • Projects grid/list view with status badges and progress indicators
  • Real-time activity feed with filtering
  • Quick stats overview (active projects, running agents, pending approvals)
  • Search and filter controls
  • Empty state for new users
  • Responsive layout for all screen sizes

PR: #51

Please review the prototype and provide feedback on the design.

**Prototype Available for Review** The main dashboard prototype is now available at: http://localhost:3000/prototypes/main-dashboard **Key Features:** - Projects grid/list view with status badges and progress indicators - Real-time activity feed with filtering - Quick stats overview (active projects, running agents, pending approvals) - Search and filter controls - Empty state for new users - Responsive layout for all screen sizes **PR:** #51 Please review the prototype and provide feedback on the design.
cardosofelipe commented 2025-12-30 21:43:19 +00:00
Author
Owner
Copy Link

Approved

Approved
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agents
Agent orchestration
 architecture
Architectural decisions
 backend
Backend work
 blocked
Blocked by dependency
 database
Database/migrations
 design
UI/UX design work
 devops
DevOps/Infrastructure work
 epic
Epic/parent issue
 frontend
Frontend work
 infrastructure
Infrastructure / DevOps
 mcp
MCP related
 phase-0
Phase 0: Foundation
 phase-1
Phase 1: Core Platform
 phase-2
Phase 2: MCP Integration
 priority:high
High priority
 spike
Architecture spike / research task
No Label design frontend phase-1
Milestone
No items
No Milestone
Assignees
Clear assignees
cardosofelipe
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cardosofelipe/syndarix#47
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?