Projects overview page

[anneschuth]

Description

We want to create a 'Projects Overview' page that clearly displays the status of each project.
For this we need information to be included in the create projectpage, to be able to search on it.

Filter options included:

• Search bar on project name (already available). Example: 'WOZ' or 'luchtkwaliteit'
• Filter on publicatiecategorie as a dropdown. The options for the dropdown are in the systemcard under ai_act_profile - publication category. Information becomes available through the form or decisiontree on the 'New project' page. Example: 'Hoog-risico AI'
• Filter on 'Lifecycle' as a dropdown. Options from AK are used. These are stored in the systemcard under 'status'. Information becomes available through the form in the 'New project' page in other ticket. Example: 'Probleemanalyse' or 'Implementeren'

Filters can be combined and can be individually deleted by clicking on the cross. For now we do not have a 'reset' button to delete all filters at once.

Default sorting order of the projects:

1. Projectname (alphabetical)

Manual sorting of the projects:

• Include 'order-by' button as a drop-down including the projectname, lifecycle and last-edit in ascending and descending order. The order of the lifecycle can be found on AK.

1. Projectname: A-Z
2. Projectname: Z-A
3. Last edited: Oldest first
4. Last edited: Newest first
5. Lifecycle: Early to late
6. Lifecycle: Late to early

• Sorting should be maintained when filters are applied and vice versa.
• Button should be included instead of the "list/grid view" button.

Grid/List view:
Out of scope for this ticket: https://github.com/orgs/MinBZK/projects/7/views/9?pane=issue&itemId=82554715

Edge cases:

• If the combination of filters result in no match in projects there should be a clear message guiding the user:
  "No projects match your selected filters. Try adjusting your filters or clearing them to see more projects."
• If a project does not have a status or last-edit date. Fill with N/A and make sure that it ends at the bottom of the list at ascending order.

Designs

https://www.figma.com/design/AvpyJlrHjnc490HgyY7LTw/Project-overview?node-id=2184-3196&t=dxmGt6tgcgzRie05-4

Technical Implementation

• Infinite scroll: ordering and filtering is call to backend to get a new list with new ordering/filtering
• The UI must be responsive, adjusting to different screen sizes without affecting the functionality.

Implementation notes

• autosearch on stop typying after x seconds
• sort filter similair to AK
• Filter should be dropdown boxes, not typing
• Search filter should allow typing
• Different filter implemented than design above