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

[ariefgp]

Related document:

• Document 1
• Document 2

Related User Stories

• [Feature] Projects Management | Search and Filter Project in the List Page #3312
• [Feature] Projects Management | Sort Project in the List Page #3314
• [Feature] Projects Management | Export Projects data #3315
• [Feature] Projects Management | Archive Active Project #3316
• [Feature] Projects Management | View Archived Project #3317
• [Feature] Projects Management | Restore Archived Project #3318
• [Feature] Projects Management | Manage Project's Team Member in Add and Edit Project Page #3319
• [Feature] Projects Management | Link Related Project in Add and Edit Project Page #3320
• [Feature] Projects Management | Delete Project #3321
• [Feature] Projects Management | Create New Project #3331
• [Feature] Projects Management | Edit Existing Project  #3332

---

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

Design

Figma Link: https://www.figma.com/design/80BIezvQ8KEwXakzfSFFie/Ever-Gauzy-Teams?node-id=12567-113177&t=NF7U8x6w4po9Ywqh-1

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

Technical

Available:

• API Documentation : https://api.gauzy.co/swg#/OrganizationProject/OrganizationProjectController_pagination
• Method : GET
• Sample Request URL: /api/organization-projects
• Sample Payload:

where[organizationId]: 37ca77b2-4112-4e45-92ad-c691359023ff
where[tenantId]: 978f9a77-ec1b-4483-b3c0-d1f20a2a4293
join[alias]: organization_project
join[leftJoin][tags]: organization_project.tags
relations[0]: organizationContact
relations[1]: members.employee.user
relations[2]: tags
relations[3]: teams
skip: 1
take: 10

• All data is available in the API