Implement Patients List Screen

[xkaper001]

Description

Implement the patients list view with search, filter, and add patient functionality.

Design Reference

Figma Frame: Patients (576:3082, 576:3066)

Requirements

• "Patients" header text
• Filter button in header (opens filter dialog)
• Scrollable list of patient cards
• Horizontal patient card displaying:
  • Patient avatar (with placeholder if no image)
  • Patient name
  • Patient age and gender
  • Last visit date or status
  • Chevron/arrow for navigation
• Floating action button (FAB) to add new patient
• Bottom navigation bar
• Pull-to-refresh
• Search functionality (search bar at top)
• Filter functionality (by status, age range, gender, etc.)
• Empty state when no patients found
• Tap card to navigate to patient details/manage screen

Search & Filter

• Debounced search by patient name
• Filter by: gender, age range, recent visits
• Clear filters option
• Show active filter count

API Integration

• Fetch patients list with pagination
• Implement infinite scroll/pagination
• Search patients by name endpoint
• Filter patients endpoint
• Cache patient list

Technical Notes

• Create in docpilot_doctor/lib/features/patients/presentation/pages/
• Implement efficient list rendering (ListView.builder)
• Add debounced search (300ms delay)
• Lazy loading with pagination
• Cache and optimize images

Dependencies

• Requires: Create Button and Navigation Components #17, Create Display and Layout Components #18 (UI components - cards, navigation, FAB)

Files to Create/Modify

• lib/features/patients/presentation/pages/patients_list_page.dart
• lib/features/patients/presentation/widgets/patient_card.dart
• lib/features/patients/presentation/widgets/filter_dialog.dart
• lib/features/patients/presentation/widgets/empty_patients_state.dart
• lib/features/patients/data/repositories/patients_repository.dart

Priority

Medium

Acceptance Criteria

• List scrolls smoothly with many patients
• Search works with debouncing
• Filter dialog works correctly
• FAB navigates to add patient flow
• UI matches Figma design

[github-actions]

👋 Thanks for opening this issue and contributing!

Our reviewers will check it soon 🚀

📘 If you’d like to know more about contributing, please read our CONTRIBUTING.md.

[karan2527]

i want to work on this issue , can u assign it to me !