Issue #9 - [FEATURE] Add Sorting and Filtering Functionality to Projects List

[rogelio-cmj]

Motivation

Currently, the projects list in the dashboard is only sorted by creation date (newest first), which becomes impractical when managing many projects. Users need the ability to organize their projects in different ways depending on their workflow.

Current Behavior

The projects dashboard displays all projects in a fixed order based on creation date. Users can search/filter projects by name or description, but cannot change the sort order.

Reproduction Steps

1. Navigate to the projects dashboard in Dokploy
2. Create or view multiple projects with different names, creation dates, and varying numbers of services
3. Observe that projects are always displayed in the same order (by creation date, newest first)
4. Try to find a way to sort projects alphabetically or by other criteria
5. Observe: No sorting controls are available, and the order cannot be changed

Expected Behavior

The projects list should provide sorting controls that allow users to organize projects by multiple criteria. The selected sort preference should persist across browser sessions using localStorage. Sorting should work seamlessly with the existing search/filter functionality, applying the sort order to filtered results.

Acceptance Criteria

• A sort control is added to the projects dashboard UI that allows selecting different sort criteria
• Users can sort projects by: name (alphabetically), creation date, and number of services
• Each sort criterion supports both ascending and descending order
• The selected sort preference is saved to localStorage and restored when the user returns to the page
• Sorting works correctly in combination with the search filter (sorted results reflect the current search query)
• The default sort order for new users is creation date descending (newest first)

Steps To Test

1. Navigate to the projects dashboard
2. Verify a sort control is visible and accessible
3. Select "Name (A–Z)" and verify projects are sorted alphabetically ascending
4. Select "Name (Z–A)" and verify projects are sorted alphabetically descending
5. Select "Creation Date (Newest)" and verify projects are sorted by creation date descending
6. Select "Creation Date (Oldest)" and verify projects are sorted by creation date ascending
7. Select "Services (Most)" and verify projects with more services appear first
8. Select "Services (Least)" and verify projects with fewer services appear first
9. Enter a search query and verify the filtered results maintain the selected sort order
10. Refresh the page and verify the sort preference is maintained

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx