In the middle of this modal you see a list of tasks. Rework this list to show datetime for task creation and - if relevant - task completion. base your design on https://primer.style/
I'll create a redesigned task list modal following Primer design principles, with proper datetime display for task creation and completion.
I've redesigned the task list following Primer design principles with these key improvements:
Key Features:
DateTime Display: Each task now shows:
- Creation date and time with calendar icon
- Completion date and time (when applicable) with checkmark icon
- Formatted in a readable format (e.g., "Jul 9, 2024, 7:11 AM")
Primer-Inspired Design:
- Clean, minimal interface with proper spacing
- Subtle borders and hover states
- Consistent color palette using grays and semantic colors
- Proper typography hierarchy
Enhanced Status Indicators:
- Color-coded badges for task status (requested, completed, in-progress, overdue)
- Priority indicators (routine, urgent, high)
- Icons for better visual recognition
Improved Information Architecture:
- Clear task titles
- Assignee information
- Better visual separation between tasks
- Responsive layout
Accessibility:
- Proper ARIA labels
- Keyboard navigation support
- Screen reader friendly structure
- High contrast colors
The design maintains the healthcare context while providing a much cleaner, more organized view of task information with proper datetime tracking.
Now add the following:- A new->old / old->new sort- A filter on task statusYou can remove the "X total" pill and put the above in that location
I'll add sorting and filtering functionality to the task list, replacing the total count badge with these controls.
I've added the requested functionality:
New Features:
Sort Control:
- Dropdown with "New → Old" and "Old → New" options
- Sorts tasks by creation date
- Uses ArrowUpDown icon for clarity
Status Filter:
- Dropdown with "All Status", "Requested", "Completed", "In Progress", and "Overdue" options
- Filters tasks based on their current status
- Uses Filter icon for visual recognition
Improved Layout:
- Removed the "X total" badge as requested
- Placed both controls in the header area for easy access
- Compact design with small dropdowns that don't overwhelm the interface
Enhanced UX:
- Empty state message now differentiates between "no tasks" and "no tasks match filters"
- Controls are properly sized and aligned
- Maintains Primer design consistency
The controls are positioned where the total count badge was, providing easy access to sorting and filtering without cluttering the interface. Users can now quickly organize tasks by date and filter by status to focus on specific types of work.