# Activity Logs Visual Guide ## Dashboard View - Patient Timeline This guide shows what the Activity Logs feature looks like on the doctor's dashboard. ### Layout Structure ``` ╔══════════════════════════════════════════════════════════════════════╗ ║ DOCTOR DASHBOARD ║ ╠══════════════════════════════════════════════════════════════════════╣ ║ ║ ║ Dashboard ║ ║ Welcome back, Dr. House ║ ║ ║ ║ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ║ ║ │ 1,245 │ │ 42 │ │ 892 │ │ 5 │ ║ ║ │ Patients │ │Pending RX│ │ Approved │ │ Needs │ ║ ║ │ │ │ │ │ │ │Attention │ ║ ║ └──────────┘ └──────────┘ └──────────┘ └──────────┘ ║ ║ ║ ║ ┌────────────────────────────────────────────────────────────────┐ ║ ║ │ Patient Timeline Clinical Actions │ ║ ║ ├────────────────────────────────────────────────────────────────┤ ║ ║ │ │ ║ ║ │ ● Prescription for Amoxicillin sent to pharmacy │ ║ ║ │ SM Sarah Martinez • RX #9425 [✓] │ ║ ║ │ Amoxicillin 500mg - 3x daily for 10 days │ ║ ║ │ 🕐 Jan 20, 10:00 AM • 5 minutes ago │ ║ ║ │ │ ║ ║ │ ● Lab Results Reviewed by Dr. Smith │ ║ ║ │ DC David Chen • LAB #8821 [✓] │ ║ ║ │ Complete Blood Count - All values normal │ ║ ║ │ 🕐 Jan 19, 2:00 PM • 15 minutes ago │ ║ ║ │ │ ║ ║ │ ● Intake Form Updated by Nurse Jones │ ║ ║ │ ER Emily Rodriguez • INT #4512 [✓] │ ║ ║ │ Updated allergy information and current medications │ ║ ║ │ 🕐 Jan 19, 1:45 PM • 25 minutes ago │ ║ ║ │ │ ║ ║ │ ● Prescription for Lisinopril sent to Walgreens │ ║ ║ │ RT Robert Thompson • RX #9424 [✓] │ ║ ║ │ Lisinopril 10mg - 1x daily │ ║ ║ │ 🕐 Jan 20, 9:00 AM • 1 hour ago │ ║ ║ │ │ ║ ║ │ ● Prescription pending review │ ║ ║ │ JW Jessica Williams • RX #9423 [⏱] │ ║ ║ │ Metformin 1000mg - Awaiting approval │ ║ ║ │ 🕐 Jan 20, 8:00 AM • 2 hours ago │ ║ ║ │ │ ║ ║ ├────────────────────────────────────────────────────────────────┤ ║ ║ │ View All Activity → │ ║ ║ └────────────────────────────────────────────────────────────────┘ ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════╝ ``` ## Activity Log Entry Components Each activity entry consists of: ### 1. Patient Avatar (Initials Circle) - **Visual**: Circular badge with patient initials - **Colors**: Varied background colors for visual distinction - **Example**: `SM` for Sarah Martinez ### 2. Primary Description - **Visual**: Bold text describing the action - **Format**: "[Action] for [Item] [Details]" - **Example**: "Prescription for Amoxicillin sent to pharmacy" ### 3. Patient Info & Reference - **Visual**: Secondary text with patient name and ID - **Format**: "[Patient Name] • [Reference Number]" - **Example**: "Sarah Martinez • RX #9425" ### 4. Details Line - **Visual**: Muted text with additional information - **Content**: Medication, dosage, test results, etc. - **Example**: "Amoxicillin 500mg - 3x daily for 10 days" ### 5. Timestamp - **Visual**: Small muted text with clock icon - **Format**: "MMM DD, h:mm AM/PM • relative time" - **Example**: "Jan 20, 10:00 AM • 5 minutes ago" ### 6. Status Badge - **Visual**: Color-coded badge on the right - **Colors**: - Green (✓) - Approved/Completed - Yellow (⏱) - Pending - Red (✕) - Cancelled/Declined - Blue (ℹ) - Informational ## Color Coding ### Status Colors | Status | Badge Color | Background | Text Color | Icon | |--------|-------------|------------|------------|------| | Approved | Green | `bg-success bg-opacity-25` | `text-success` | ✓ | | Pending | Yellow | `bg-warning bg-opacity-25` | `text-warning` | ⏱ | | Cancelled | Red | `bg-danger bg-opacity-25` | `text-danger` | ✕ | | Completed | Blue | `bg-info bg-opacity-25` | `text-info` | ✓ | ### Avatar Colors Avatar backgrounds use Bootstrap's color system with opacity: - Primary (Blue): `bg-primary bg-opacity-10` - Purple: `rgba(128, 0, 128, 0.1)` - Pink: `rgba(255, 192, 203, 0.3)` ## Activity Types & Visual Examples ### 1. Prescription Sent ✅ ``` ● Prescription for Amoxicillin sent to CVS SM Sarah Martinez • RX #9425 [Approved] Amoxicillin 500mg - 3x daily for 10 days 🕐 Jan 20, 10:00 AM • 5 minutes ago ``` ### 2. Lab Results Reviewed ✅ ``` ● Lab Results Reviewed by Dr. Smith DC David Chen • LAB #8821 [Completed] Complete Blood Count - All values normal 🕐 Jan 19, 2:00 PM • 2 hours ago ``` ### 3. Intake Form Updated ✅ ``` ● Intake Form Updated by Nurse Jones ER Emily Rodriguez • INT #4512 [Completed] Updated allergy information and current medications 🕐 Jan 19, 1:45 PM • 3 hours ago ``` ### 4. Prescription Pending ⏱ ``` ● Prescription pending review JW Jessica Williams • RX #9423 [Pending] Metformin 1000mg - Awaiting approval 🕐 Jan 20, 8:00 AM • 2 hours ago ``` ### 5. Prescription Cancelled ✕ ``` ● Prescription cancelled at patient request KM Kevin Martinez • RX #9421 [Cancelled] Patient no longer needs medication 🕐 Jan 19, 2:00 PM • 8 hours ago ``` ### 6. Consultation Completed ✅ ``` ● Virtual consultation completed MB Michael Brown • CONS #2201 [Completed] Follow-up for hypertension management 🕐 Jan 20, 7:00 AM • 3 hours ago ``` ## Responsive Design ### Desktop View (>768px) - Full width activity cards - Multi-column layout possible - All details visible - Horizontal status badges ### Mobile View (<768px) - Stacked layout - Condensed information - Touch-friendly spacing - Scrollable activity list ## Empty State When no activities exist: ``` ┌────────────────────────────────────────────────┐ │ Patient Timeline Clinical Actions │ ├────────────────────────────────────────────────┤ │ │ │ 📋 │ │ │ │ No activity recorded yet │ │ │ └────────────────────────────────────────────────┘ ``` ## Interactive Elements ### Hover States - Activity rows: Light background highlight - "View All Activity" link: Underline appears - Patient initials: Subtle scale effect ### Click Actions - Click activity row: View full details (future enhancement) - Click patient name: Navigate to patient profile (future enhancement) - Click "View All Activity": Navigate to full activity log page ## Accessibility ### Screen Reader Support - Semantic HTML structure - ARIA labels for icons - Alt text for visual elements - Proper heading hierarchy ### Keyboard Navigation - Tab through activities - Focus indicators - Enter/Space to activate links ### Color Contrast - WCAG AA compliant text contrast - Status badges readable - Muted text still legible ## Performance Optimization ### Current Implementation - Load last 10 activities only - Single database query - Efficient rendering - Minimal JavaScript ### Future Optimizations - Lazy loading for "View All" - Caching frequently accessed data - Real-time WebSocket updates - Virtualized scrolling for long lists ## Integration Points The activity timeline integrates with: 1. **Prescription Workflow**: Auto-logs when prescriptions are approved/sent 2. **Lab Review System**: Logs when lab results are reviewed 3. **Intake Forms**: Logs updates to patient intake information 4. **Consultation System**: Logs completed consultations 5. **Request Management**: Logs info requests and declines ## Summary The Activity Logs feature provides doctors with a clean, clinical view of patient-related actions in a timeline format. It emphasizes: - **Clarity**: Easy to scan and understand - **Clinical Focus**: Shows medical actions, not technical details - **Collaboration**: Helps team members see what's been done - **Timeliness**: Recent activities shown first with relative timestamps