[Feature] Projects Management | View Projects in Grid and List View

[ariefgp]

[DON'T WORK ON THIS YET UNTIL FURTHER INSTRUCTION]

Related document:

• Document 1
• Document 2

Related User Stories

---

As a manager, I want to seamlessly toggle between grid and list views for projects so that I can efficiently analyze and manage projects based on different visualization needs

Description: View Toggle

Implement a flexible project visualization system that allows managers to switch between grid and list views, optimizing the display of project information for different use cases. The view toggle should persist user preferences while maintaining consistent data representation and interaction capabilities across both views.

Flow:

• Manager accesses the project list page
• System loads default view based on user's last preference, if no then the List view will be the default
• Manager can toggle between views via prominent view switch control
• System transitions smoothly while maintaining:
  • Active filters
  • Current sort order
  • Search criteria
• Each view updates in real-time when underlying data changes

Acceptance Criteria:

General Requirements

• View toggle control must:
  • Be persistently visible in the top-right corner
  • Show active view state
  • Work across all project list pages
  • Maintain state across sessions
• Transition between views must complete within 300ms

Grid View Display

• Project cards must show:
  • Project title (max 2 lines)
  • Status with visual indicator
  • Date range (start - end)
  • Budget type with icon
  • Team members preview (up to 5 avatars + count)
  • Project managers' avatars (up to 3 + count)
  • Teams (up to 3 + count)

List View Display

• Tabular format showing:
  • Project title (with link)
  • Status (with color coding)
  • Start date
  • End date
  • Budget type
  • Team members preview (5 + count)
  • Teams (up to 3 + count)
  • Project managers
  • Quick actions column

Interaction Requirements

• Both views must support:
  • Hover states with key metrics
  • Quick actions menu
  • Selection for bulk actions
  • Click-through to project details