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

feat(frontend): Implement main Dashboard as authenticated homepage #53

New Issue
Closed
opened 2026-01-01 12:04:14 +00:00 by cardosofelipe · 0 comments
cardosofelipe commented 2026-01-01 12:04:14 +00:00
Owner
Copy Link

Summary

Create the main Dashboard page as the authenticated homepage at (authenticated)/page.tsx. This was originally prototyped in #47 but never implemented as a route.

Background

The prototype was approved but the implementation commit (#48) created the ProjectDashboard (single project view) instead of the main Dashboard (projects overview). This issue addresses that gap.

Requirements

Layout

+------------------------------------------+------------------+
|  Welcome back, {user}                    |   ACTIVITY       |
+------------------------------------------+   FEED           |
|  QUICK STATS (4 cards)                   |   SIDEBAR        |
|  [Projects] [Agents] [Issues] [Approvals]|                  |
+------------------------------------------+                  |
|  RECENT PROJECTS              [View all] |                  |
|  [Card] [Card] [Card] (dynamic: 3-6)     |                  |
+------------------------------------------+                  |
|  PENDING APPROVALS (if any)              |                  |
+------------------------------------------+------------------+

Features

  • Welcome message with user's name
  • Quick stats: Active Projects, Running Agents, Open Issues, Pending Approvals
  • Recent projects: Dynamic count (3 mobile, 6 desktop) with "View all" link to /projects
  • Pending approvals section (conditional, shows items needing attention)
  • Activity feed sidebar (real-time SSE)
  • Empty state for new users with CTA to create first project
  • Create Project button

Components to Create

  • Dashboard.tsx - Main orchestrator
  • DashboardQuickStats.tsx - Stats cards row
  • RecentProjects.tsx - Project cards with "View all" link
  • PendingApprovals.tsx - Approval requests list
  • WelcomeHeader.tsx - Personalized greeting

Reusable Components

  • StatCard from /components/admin/
  • ActivityFeed from /components/activity/
  • StatusBadge, ProgressBar from /components/projects/

Files to Create

  1. frontend/src/app/[locale]/(authenticated)/page.tsx
  2. frontend/src/components/dashboard/Dashboard.tsx
  3. frontend/src/components/dashboard/DashboardQuickStats.tsx
  4. frontend/src/components/dashboard/RecentProjects.tsx
  5. frontend/src/components/dashboard/PendingApprovals.tsx
  6. frontend/src/components/dashboard/WelcomeHeader.tsx
  7. frontend/src/components/dashboard/index.ts
  8. frontend/src/lib/api/hooks/useDashboard.ts
  9. Tests for all components

Acceptance Criteria

  • Dashboard is the authenticated homepage
  • Shows personalized welcome with user name
  • Quick stats display correctly
  • Recent projects show 3 on mobile, 6 on desktop
  • "View all" links to /projects page
  • Pending approvals section shows when approvals exist
  • Activity feed sidebar with real-time updates
  • Empty state for users with no projects
  • All components have unit tests
  • Follows design system guidelines
## Summary Create the main Dashboard page as the authenticated homepage at `(authenticated)/page.tsx`. This was originally prototyped in #47 but never implemented as a route. ## Background The prototype was approved but the implementation commit (#48) created the ProjectDashboard (single project view) instead of the main Dashboard (projects overview). This issue addresses that gap. ## Requirements ### Layout ``` +------------------------------------------+------------------+ | Welcome back, {user} | ACTIVITY | +------------------------------------------+ FEED | | QUICK STATS (4 cards) | SIDEBAR | | [Projects] [Agents] [Issues] [Approvals]| | +------------------------------------------+ | | RECENT PROJECTS [View all] | | | [Card] [Card] [Card] (dynamic: 3-6) | | +------------------------------------------+ | | PENDING APPROVALS (if any) | | +------------------------------------------+------------------+ ``` ### Features - Welcome message with user's name - Quick stats: Active Projects, Running Agents, Open Issues, Pending Approvals - Recent projects: Dynamic count (3 mobile, 6 desktop) with "View all" link to /projects - Pending approvals section (conditional, shows items needing attention) - Activity feed sidebar (real-time SSE) - Empty state for new users with CTA to create first project - Create Project button ### Components to Create - `Dashboard.tsx` - Main orchestrator - `DashboardQuickStats.tsx` - Stats cards row - `RecentProjects.tsx` - Project cards with "View all" link - `PendingApprovals.tsx` - Approval requests list - `WelcomeHeader.tsx` - Personalized greeting ### Reusable Components - `StatCard` from `/components/admin/` - `ActivityFeed` from `/components/activity/` - `StatusBadge`, `ProgressBar` from `/components/projects/` ### Files to Create 1. `frontend/src/app/[locale]/(authenticated)/page.tsx` 2. `frontend/src/components/dashboard/Dashboard.tsx` 3. `frontend/src/components/dashboard/DashboardQuickStats.tsx` 4. `frontend/src/components/dashboard/RecentProjects.tsx` 5. `frontend/src/components/dashboard/PendingApprovals.tsx` 6. `frontend/src/components/dashboard/WelcomeHeader.tsx` 7. `frontend/src/components/dashboard/index.ts` 8. `frontend/src/lib/api/hooks/useDashboard.ts` 9. Tests for all components ## Acceptance Criteria - [ ] Dashboard is the authenticated homepage - [ ] Shows personalized welcome with user name - [ ] Quick stats display correctly - [ ] Recent projects show 3 on mobile, 6 on desktop - [ ] "View all" links to /projects page - [ ] Pending approvals section shows when approvals exist - [ ] Activity feed sidebar with real-time updates - [ ] Empty state for users with no projects - [ ] All components have unit tests - [ ] Follows design system guidelines
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
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#53
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?