Feat: Medicine List with PDF Download for Volunteers

#189 (closed)

Feature: Medicine List with PDF Download for Volunteers

Overview

This feature adds a new "Medicine List" page to the volunteer section of the EHRS Frontend. Volunteers can now:

• View a complete list of available medicines
• See medicines sorted numerically by their ID
• Download the list as a formatted PDF

---

Changes

🆕 New Files

• MedicineListPage.tsx
  The main page component for displaying the medicine table and handling PDF generation.

---

🛠️ Modified Files

• package.json
  Added jspdf and jspdf-autotable dependencies.

• src/types/api.ts
  Added the Medicine interface to maintain type safety.

• src/lib/api.ts
  Added the getMedicines API function to fetch data from /api/v1/medicines/.

• src/App.tsx
  Registered the new /volunteer/medicines route under ProtectedRoute.

• src/components/AppLayout.tsx
  Added "Medicines List" to the sidebar navigation for the volunteer role.

• src/pages/DashboardPage.tsx
  Added a "Medicines List" action button to the volunteer dashboard for quick access.

---

Implementation Details

1. Data Fetching & State Management

• Used TanStack Query (useQuery) for efficient data fetching and caching.
• Integrated with the existing Axios client in src/lib/api.ts.
• Implemented numerical sorting for the medicine_id field to ensure items appear in intuitive order (1, 2, 3... 10, 11...).

---

2. PDF Generation

• Utilized jsPDF and jsPDF-AutoTable for client-side PDF generation.
• The exported PDF includes:
  • A title
  • Current date
  • A neatly bordered table containing all required medicine details

---

3. UI/UX

• Followed modern design principles using Tailwind CSS and shadcn/ui components.
• Added a responsive table with loading and error states.
• Ensured consistent look and feel with the rest of the volunteer dashboard.

---

4. Security & Access Control

• Strictly enforced Role-Based Access Control (RBAC).
• Limited visibility to users with the volunteer role only.

---