Skip to content

fix: Refine Volunteer Queue Navigation & Staff Attendance UI

Suma Pullaiahgari requested to merge bug-fix into fix/develop

Merge Request Description

Overview

This MR consolidates volunteer queue pages into a unified queues page with tab-based navigation and refines the Staff Attendance interface.

What does this MR do and why?

  • Queue Navigation Consolidation: Redirects all individual volunteer queue pages (/volunteer/vitals-queue, /volunteer/prescriptions-queue, etc.) to a single /volunteer/queues page with tab navigation via query parameters. This simplifies the UI and reduces code duplication.
  • Staff Attendance UI Refinement: Restricts staff list to Admin and Coordinator roles only, replaces "Mark Present" action with "Logout" button, and removes automatic navigation to profile pages to prevent accidental redirects.
  • Volunteer Workflow: Adjusts "Assign Doctor" completion to redirect to Patient Registration page for seamless next patient handling.

Changes Made

after Screenshot_from_2026-05-01_09-49-07

Queue Redirection (Main Changes)

  • Modified: src/App.tsx
    • Added Navigate redirects for all queue routes to /volunteer/queues?tab=xxx
    • Removed unused imports for queue page components
  • Modified: src/pages/volunteer/QueuesPage.tsx
    • Added URL query parameter support for tab navigation
    • Tab values: vitals-waiting, vitals, waiting, consultation, prescriptions, medicine-pickup, dispatched, counseling
  • Modified: src/hooks/usePatientStatus.ts
    • Updated STATUS_STEPS paths to use new queue URLs (except doctor_assigning)
  • Modified: src/components/PatientStatusTracker.tsx
    • Added query param handling for navigation
  • Modified: src/pages/volunteer/PatientStatus.tsx
    • Updated paths and navigation logic
  • Modified: src/pages/DashboardPage.tsx
    • Updated all volunteer queue navigation buttons to use new queue URLs

Individual Page Completion Navigation

  • Modified: src/pages/volunteer/RecordVitalsPage.tsx - Navigate to queues?tab=waiting after save
  • Modified: src/pages/volunteer/UpdatePrescriptionPage.tsx - Navigate to queues?tab=prescriptions or medicine-pickup
  • Modified: src/pages/volunteer/VerifyMedicinesPage.tsx - Navigate to queues?tab=dispatched after verify
  • Modified: src/pages/volunteer/AssignDoctorPage.tsx - Navigate to /volunteer/patient-registration after assign (fix)

Staff Attendance UI

  • Modified: src/pages/admin/StaffAttendancePage.tsx
    • Restricted STAFF_ROLES to ['admin', 'coordinator'] (volunteers not shown)
    • Replaced "Mark Present" with "Logout" button only
    • No redirect to profile page on logout (fix)

Test Updates

  • Updated all test files to match new navigation paths

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

  • Related to volunteer queue management simplification
  • Related to staff attendance workflow improvements

How to Set Up and Validate Locally

  1. Pull this branch.
  2. Install dependencies: npm install (or bun install)
  3. Run development server: npm run dev (or bun dev)
  4. Validate Queue Navigation:
    • Visit old queue URLs like /volunteer/vitals-queue
    • Should redirect to /volunteer/queues?tab=vitals
    • Click on different steps in PatientStatus/PatientStatusTracker
    • Should navigate to correct queue tab
  5. Validate Staff Attendance:
    • Navigate to /admin/staff-attendance
    • Verify only Admin and Coordinator users are visible (no volunteers)
    • Click "Logout" on a card - should mark attendance without redirecting to profile
  6. Validate Volunteer Flow:
    • Complete doctor assignment
    • Should redirect to /volunteer/patient-registration

Testing Done

  • Manual testing completed
  • Unit tests added/updated
  • All 1691 tests pass
  • Lint passes (0 errors)
  • Build passes

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger statements
  • No unused imports or variables
  • TypeScript types properly defined
  • ESLint checks pass

React Best Practices

  • Components properly split
  • Hooks follow rules
  • State management appropriate

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach

API & Data Fetching

  • TanStack Query used for server state
  • Loading and error states handled

Known Limitations / Technical Debt

  • KYP queue (know_your_patient status) falls back to vitals tab as no exact match exists
  • /volunteer/update-prescription and /volunteer/verify-medicines remain as standalone pages (not redirected)

Additional Notes

  • doctor_assigning step in PatientStatus/PatientStatusTracker still navigates to /volunteer/select-specialization (intentional)
  • All redirect tab values verified to match QUEUE_TABS in QueuesPage.tsxScreencast_from_2026-05-01_16-42-18
Edited by Suma Pullaiahgari

Merge request reports