feat(frontend): Implement Projects list page with filtering and search #54

New Issue

cardosofelipe · 2026-01-01T12:04:41Z

cardosofelipe commented

2026-01-01 12:04:41 +00:00

Summary

Create the Projects list page at (authenticated)/projects/page.tsx for CRUD-style project management. This complements the Dashboard (#53) which shows a summary view.

Requirements

Layout

+------------------------------------------------+
|  Projects                    [+ Create Project] |
|  Manage your projects                           |
+------------------------------------------------+
|  [Search...] [Status ▼] [Filters] [Grid|List]  |
+------------------------------------------------+
|  [Extended Filters - collapsible]               |
+------------------------------------------------+
|  +--------+  +--------+  +--------+             |
|  | Proj 1 |  | Proj 2 |  | Proj 3 |             |
|  +--------+  +--------+  +--------+             |
+------------------------------------------------+
|  [Pagination if > 50]                           |
+------------------------------------------------+

Features

Full projects list with grid/list view toggle
Search with debounce (300ms)
Quick filters: Status (all, active, paused, completed, archived)
Extended filters (collapsible): Complexity, date range, owner
Sorting: Recent activity, name, progress, issues count
Pagination (if > 50 projects)
Loading skeletons
Empty state with create action
Click navigates to /projects/[id]

Pattern Reference

Follow AgentTypeList patterns from /components/agents/:

Grid layout: 3-column responsive
Card structure with status badges
Filter pattern: quick + extended collapsible
Debounced search
Empty state with create action

Components to Create

ProjectCard.tsx - Project card for grid view
ProjectFilters.tsx - Filter controls
ProjectsGrid.tsx - Grid/list container with view toggle

Files to Create

frontend/src/app/[locale]/(authenticated)/projects/page.tsx
frontend/src/components/projects/ProjectCard.tsx
frontend/src/components/projects/ProjectFilters.tsx
frontend/src/components/projects/ProjectsGrid.tsx
frontend/src/lib/api/hooks/useProjects.ts
Tests for all components
E2E test for projects page

Data Strategy

Use mock data initially (demo mode), following patterns in /features/issues/mocks.ts. API hooks ready for backend integration.

Dashboard (#53) links here via "View all projects"
Project detail page already exists at /projects/[id]
Project creation wizard exists at /projects/new

Acceptance Criteria

Projects list page renders at /projects
Grid/list view toggle works
Search with debounce works
Status filter works
Extended filters expand/collapse
Sorting works correctly
Pagination shows when > 50 projects
Empty state displays for no projects
Click navigates to project detail
All components have unit tests
E2E test passes
Follows design system guidelines

## Summary Create the Projects list page at `(authenticated)/projects/page.tsx` for CRUD-style project management. This complements the Dashboard (#53) which shows a summary view. ## Requirements ### Layout ``` +------------------------------------------------+ | Projects [+ Create Project] | | Manage your projects | +------------------------------------------------+ | [Search...] [Status ▼] [Filters] [Grid|List] | +------------------------------------------------+ | [Extended Filters - collapsible] | +------------------------------------------------+ | +--------+ +--------+ +--------+ | | | Proj 1 | | Proj 2 | | Proj 3 | | | +--------+ +--------+ +--------+ | +------------------------------------------------+ | [Pagination if > 50] | +------------------------------------------------+ ``` ### Features - Full projects list with grid/list view toggle - Search with debounce (300ms) - Quick filters: Status (all, active, paused, completed, archived) - Extended filters (collapsible): Complexity, date range, owner - Sorting: Recent activity, name, progress, issues count - Pagination (if > 50 projects) - Loading skeletons - Empty state with create action - Click navigates to `/projects/[id]` ### Pattern Reference Follow `AgentTypeList` patterns from `/components/agents/`: - Grid layout: 3-column responsive - Card structure with status badges - Filter pattern: quick + extended collapsible - Debounced search - Empty state with create action ### Components to Create - `ProjectCard.tsx` - Project card for grid view - `ProjectFilters.tsx` - Filter controls - `ProjectsGrid.tsx` - Grid/list container with view toggle ### Files to Create 1. `frontend/src/app/[locale]/(authenticated)/projects/page.tsx` 2. `frontend/src/components/projects/ProjectCard.tsx` 3. `frontend/src/components/projects/ProjectFilters.tsx` 4. `frontend/src/components/projects/ProjectsGrid.tsx` 5. `frontend/src/lib/api/hooks/useProjects.ts` 6. Tests for all components 7. E2E test for projects page ## Data Strategy Use mock data initially (demo mode), following patterns in `/features/issues/mocks.ts`. API hooks ready for backend integration. ## Related - Dashboard (#53) links here via "View all projects" - Project detail page already exists at `/projects/[id]` - Project creation wizard exists at `/projects/new` ## Acceptance Criteria - [ ] Projects list page renders at /projects - [ ] Grid/list view toggle works - [ ] Search with debounce works - [ ] Status filter works - [ ] Extended filters expand/collapse - [ ] Sorting works correctly - [ ] Pagination shows when > 50 projects - [ ] Empty state displays for no projects - [ ] Click navigates to project detail - [ ] All components have unit tests - [ ] E2E test passes - [ ] Follows design system guidelines

cardosofelipe referenced this issue from a commit

2026-01-03 00:06:24 +00:00

feat(frontend): add Projects list page and components for #54

cardosofelipe closed this issue

2026-01-03 00:40:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cardosofelipe/syndarix#54