Implement Doctor Dashboard Screen #23
Description
Description
Implement the main doctor dashboard with personalized welcome message, avatar, and insight cards.
Design Reference
Figma Frame: Dashboard (576:3049, 576:3032)
Requirements
- Personalized welcome text "Welcome Dr. [Name]"
- Doctor profile avatar (circular, tappable)
- Main statistics banner (large card)
- "Weekly Insights" section header
- Grid of insight cards (2 columns, 3 rows = 6 cards)
- Bottom navigation bar
- Pull-to-refresh functionality
- Smooth scrolling with scroll physics
- Tap on avatar to view/edit profile
- Skeleton loading states
Data to Display
- Doctor's name and avatar from profile
- Current statistics (appointments today, total patients, etc.)
- Weekly insights (appointments, new patients, prescriptions)
- Quick action cards (clickable to navigate)
API Integration
- Fetch dashboard data endpoint
- Load doctor profile
- Load statistics summary
- Load weekly insights/analytics
- Refresh on pull-to-refresh
Technical Notes
- Create in
docpilot_doctor/lib/features/dashboard/presentation/pages/ - Implement skeleton shimmer loading states
- Cache dashboard data locally
- Update data on pull-to-refresh
- Handle empty/error states
Dependencies
- Requires: Create Button and Navigation Components #17, Create Display and Layout Components #18 (UI components - navigation, cards, avatar)
Files to Create/Modify
lib/features/dashboard/presentation/pages/dashboard_page.dartlib/features/dashboard/presentation/widgets/welcome_header.dartlib/features/dashboard/presentation/widgets/insight_card.dartlib/features/dashboard/presentation/widgets/stats_banner.dartlib/features/dashboard/data/repositories/dashboard_repository.dart
Priority
Medium
Acceptance Criteria
- Dashboard loads with smooth animations
- All cards are tappable with navigation
- Pull-to-refresh updates data
- UI matches Figma design