fix: heatmap

Overview

This MR resolves the duplicate visit history view issue in the Patient Profile. It removes the redundant horizontal scroll checklist of visit dates and transforms the non-interactive yearly GitHub-style Activity Heatmap (AttendanceGrid) into a premium, interactive component.

Clicking any "present" (blue) cell inside the heatmap now highlights the cell with a high-fidelity visual ring, dynamically opens a detailed Consultations & Prescriptions panel below it, and automatically fetches and renders the medical diagnoses, doctor details, and medicine items for that month's visits.

---

What does this MR do and why?

Motivation & Approach

• Clean UI & Better UX: The profile page previously rendered two distinct visit history elements—a basic horizontal card listing and an inactive Yearly Activity Grid. We unified them into a single, cohesive GitHub-style heatmap interactive experience to streamline patient record navigation.
• Robust Verification & Coverage: To ensure absolute regression safety, we added high-fidelity unit tests for ProfilePage, AttendanceGrid, and VisitHistory components, meeting and exceeding the global repository branch coverage threshold of 90.00%.
• Modern Interactive Styling: Implemented premium CSS selectors (animations, outline highlights, glassmorphism shadows, and focus styles) that feel highly responsive and professional.

---

Changes Made

1. Refactored Profile Page

• Modified ProfilePage.tsx
  • Completely removed the redundant <VisitHistory> checklist import and component.
  • Implemented early-return null-safety check right after initialization to prevent transitional rendering crashes before navigation redirects complete.
  • Passed down isPatient status to dynamically adjust the details rendered under the selected month.

2. Interactive Heatmap Integration

• Modified AttendanceGrid.tsx
  • Added selection and selection-toggling state management.
  • Styled "present" (attended) cells to be interactive: cursor-pointer hover:scale-125 hover:bg-blue-600 dark:hover:bg-blue-400 hover:shadow-md.
  • Implemented dynamic outline rings when a cell is clicked: ring-2 ring-blue-600 dark:ring-blue-400 ring-offset-1 dark:ring-offset-slate-900 scale-125 z-10.
  • Created a new Selected Month Details Section that renders below the legend. For patients, it imports and mounts ConsultationsSection to showcase detailed consultation cards and prescriptions; for volunteers/doctors, it logs details of attended medical camps.

3. Reusable Consultation/Prescription Logs

• Modified VisitHistory.tsx
  • Exported the ConsultationsSection child component so it can be cleanly imported and instantiated inside the heatmap.

4. Fully Tested Harnesses (Adding >90% Repository Branch Coverage)

• New ProfilePage.test.tsx (covering unauthenticated redirects, edit profile dialog triggers, coordinator evaluates, and location state fallbacks).
• New AttendanceGrid.test.tsx (covering loading states, tooltips, click selections, multi-visit toggle selections, and error boundaries).
• New VisitHistory.test.tsx (covering cached query reads, empty fallback states, null date formatting, and complex replaced or dispensed medicine items).

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Refactor (no functional changes)
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Configuration change
• 🚨 Security fix

---

Related Issues / References

#317 (closed)

---

Screenshots or Screen Recordings

| Before | After

Horizontal checklists stacked on top of heatmap grid	Unified, highly interactive yearly heatmap where blue cells are clickable to dynamically pop open detailed consultation boxes and prescriptions below

---

How to Set Up and Validate Locally

1. Pull down this branch locally:

   git checkout Fix/Heatmap-profile