Skip to content

Combine all queues into single queue dashboard

Issue Summary

Unified Queue Dashboard with Queue Tab Highlighting

Currently the volunteer dashboard displays multiple queue cards (Vitals Waiting, Vitals, Consultation, Prescription, etc.). This makes the interface cluttered and harder to navigate.

The expected behavior is to combine all queues into a single queue dashboard where each queue is represented as a tab. When searching by Book Number, the system should highlight the tab corresponding to the patient’s current queue, without automatically switching the active tab.

Problem Statement

Currently:

  • Multiple queue cards are displayed separately.
  • Users must manually check each queue to locate a patient.
  • Searching for a patient does not clearly indicate which queue they are in.

Affected users:

  • Volunteers
  • Coordinators

Impact:

  • Slower patient lookup
  • Poor user experience during medical camps
  • Increased confusion in queue navigation

Example reproduction:

  1. Register a patient.
  2. Move the patient to a queue (e.g., Consultation).
  3. Try searching using the Book Number.
  4. The UI does not clearly indicate the patient’s queue.

Proposed Solution

Create a Unified Queue Dashboard.

Approach:

  • Combine all queues into a single section.

  • Display queues as tabs.

  • Add a search by Book Number feature.

  • When a patient is found:

    • Identify the patient's current queue.
    • Highlight the corresponding queue tab.
    • Do not automatically switch tabs.

Components/files likely affected:

  • Volunteer dashboard queue components
  • Queue rendering logic
  • Search functionality
  • Queue tab UI component

Dependencies:

  • Queue API providing patient queue status.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: View unified queue dashboard

Given the volunteer opens the queue dashboard
When the page loads
Then all queues should be displayed as tabs
And the user should be able to switch between queues using tabs

Scenario 2: Search patient by book number

Given a patient exists in a queue
When the volunteer searches using the patient book number
Then the system should detect the patient's current queue
And the corresponding queue tab should be highlighted

Scenario 3: Do not change active tab

Given the volunteer is currently viewing a specific queue tab
When the volunteer searches for a patient
Then the current tab should remain open
And only the tab containing the patient should be highlighted

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Display unified queue tabs Volunteer logged in 1. Open dashboard
2. Navigate to queue section		 All queues appear as tabs High
TC-002 Highlight queue on search Patient exists in queue 1. Enter book number
2. Click search		 Correct queue tab highlighted High
TC-003 Ensure tab does not switch Volunteer viewing different tab 1. Search patient
2. Observe UI		 Active tab remains unchanged Medium

Unit Test Requirements

Components/Functions to Test

Module/Component Function/Hook Test Cases to Cover
QueueTabs.tsx renderQueueTabs TC-001
SearchPatient.tsx handleSearch TC-002
QueueTabs.tsx highlightQueueTab TC-003

Test Assertions Required

  • Renders queue tabs correctly
  • Handles search input correctly
  • Highlights correct queue tab
  • Does not switch current tab automatically
  • Updates UI state appropriately

Implementation Details

Files to Change

File Path Action Purpose
src/components/queue/QueueTabs.tsx Create/Modify Display queue tabs
src/components/queue/SearchPatient.tsx Modify Search by book number
src/pages/VolunteerDashboard.tsx Modify Integrate unified queue view
src/__tests__/queue/QueueTabs.test.tsx Create Unit tests

Technical Considerations

  • Use React state to track highlighted queue.
  • Ensure search does not change active tab.
  • Maintain queue data structure for efficient lookup.
  • Implement reusable queue tab component.

UI/UX Requirements

Expected UI behavior:

  • Single Queue Dashboard section
  • Queue categories displayed as tabs
  • Search bar for Book Number
  • When patient found → highlight queue tab
  • Current tab should remain unchanged.

Example UI:

Search Book No: [____]

[Vitals Waiting] [Vitals] [Consultation] [In Consultation] [Prescription]

Highlighted tab shows patient queue.

Testing Strategy

Manual Testing

Test Environment:

  • Browser: Chrome / Firefox
  • Viewport: Desktop
  • User Role: Volunteer

Manual Steps:

  1. Login as volunteer
  2. Navigate to queue dashboard
  3. Search for a book number
  4. Verify queue tab highlight

Automated Testing

Unit Tests:

  • Component render tests
  • Search interaction tests
  • Queue highlight logic tests

Integration Tests:

  • Search + queue highlighting interaction

Definition of Done

  • Acceptance criteria satisfied
  • All test cases pass
  • Unit tests implemented
  • Manual testing completed
  • Code review approved
  • UI verified
  • No console errors
  • ESLint checks pass

Additional Context

Related Issues:

  • Related to queue management improvements

Notes: This enhancement improves patient tracking efficiency during medical camps by allowing volunteers to quickly identify the queue location of patients.