Skip to content

Fix/queues mobileview

Vandana reddy Balannagari requested to merge fix/queues-mobileview into develop

Overview

This MR improves the Volunteer dashboard by consolidating multiple queue cards into a single Queues section with tab navigation, improving queue search behavior, and enhancing mobile responsiveness.

Previously, queue actions were scattered across several cards and sidebar links, which made the interface cluttered and harder to use during medical camps.

This change introduces a Unified Queue Dashboard where all queues are accessible from one place while keeping the existing functionality intact.

What does this MR do and why?

The previous UI displayed multiple queue cards such as:

  • Vitals Waiting Queue
  • Vitals Queue
  • Consultation Queue
  • Prescriptions Queue
  • Medicine Pickup Queue
  • Verify Medicines Queue
  • Counseling Queue

This made the dashboard visually cluttered and required volunteers to check multiple sections to locate a patient.

This MR restructures the UI by:

  • Grouping all queues into a single Queues section
  • Displaying queues as tabs on desktop
  • Showing queues as a dropdown selector on mobile
  • Highlighting the queue where a searched patient exists
  • Displaying queue counts beside queue names

Additionally, the search logic has been improved so that searching the same Book Number repeatedly still updates the queue highlight.

The sidebar navigation has also been simplified to avoid duplication of dashboard functionality.

These improvements make the system easier to use for volunteers during patient intake and queue management.

Changes Made

Queue Dashboard Improvements

  • Consolidated multiple queue cards into a single Queues section
  • Implemented tab-based navigation for desktop
  • Implemented dropdown queue selector for mobile view
  • Added queue count badges beside each queue
  • Improved queue tab alignment and spacing

Queue Search Improvements

  • Added Book Number search highlighting the queue where the patient exists
  • Displayed message showing which queue contains the searched patient
  • Fixed search behavior so the same Book Number can be searched repeatedly
  • Enter key now triggers search even when the value has not changed

Mobile UI Improvements

  • Added responsive queue selector for smaller screens
  • Replaced queue tabs with dropdown selector on mobile
  • Fixed dropdown alignment issues
  • Ensured dropdown remains inside the container and aligned properly

Sidebar Improvements

Removed redundant volunteer navigation items from the sidebar:

  • Register Patient
  • Assign Doctor
  • Queue-related submenu items
  • Record Vitals
  • Know Your Patient
  • Prescriptions
  • Verify Medicines
  • Patient Status
  • Quick Search
  • Medicines List
  • Family Grouping

These workflows remain accessible through dashboard cards, so no functionality was removed.

Technical Details

Root Cause of Queue Search Issue

The queue search logic was previously triggered only when the input value changed. When the same Book Number was entered again, the search logic did not execute unless the input was cleared first.

Solution

The search handler now triggers when:

  • The user presses Enter
  • The search action is triggered manually

This ensures queue highlighting runs every time a search is performed.

Architecture

  • Existing queue components were reused
  • No queue processing logic was modified
  • Queue tabs act as a container that renders existing queue views
  • Mobile dropdown selector reuses the same queue state logic

Type of Change

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

Related Issues / References

closes #305 (closed)

Screenshots or Screen Recordings

Before After
Multiple queue cards displayed on dashboard Single unified Queues section with tabs
Queue tabs collapsed on mobile Mobile dropdown selector for queues
Search required clearing input before re-search Search works repeatedly for same Book Number

How to Set Up and Validate Locally

  1. Checkout the branch
git checkout fix/queues-mobileview
  1. Install dependencies
bun install
  1. Run the development server
bun dev
  1. Navigate to the Volunteer dashboard
http://localhost:5173/role=volunteer
  1. Validate the following:
  • Dashboard shows only main workflow cards
  • Clicking Queues opens unified queue dashboard
  • All queues appear as tabs on desktop
  • Mobile view shows dropdown selector
  • Queue counts display correctly
  • Searching Book Number highlights correct queue
  • Pressing Enter re-runs search with the same Book Number
  • Sidebar navigation is simplified

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Open queue dashboard All queues visible as tabs ✅
Search by Book Number Correct queue tab highlighted ✅
Search same number again Search refreshes without clearing input ✅
Mobile view Queue dropdown selector works ✅
Sidebar navigation Dashboard cards still navigate correctly ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger statements left
  • No unused imports or variables
  • No duplicate code
  • i18n check passed
  • TypeScript types properly defined
  • ESLint and formatting checks pass

React Best Practices

  • Components follow single-responsibility
  • Hooks follow React rules
  • State management handled appropriately
  • No unnecessary re-renders

Documentation

  • README.md updated
  • .env.example updated
  • CHANGELOG.md updated

Known Limitations / Technical Debt

Currently, queue highlighting indicates the queue where the patient exists but does not automatically scroll to that queue tab if it is outside the visible area. This may be improved in future updates.

Additional Notes

This MR focuses on improving usability for volunteers during patient intake and queue management. By consolidating queue functionality and improving mobile responsiveness, the workflow becomes simpler and more efficient without changing existing functionality.

MR Acceptance Checklist

Evaluate this MR against the GitLab MR acceptance checklist.

Merge request reports