Skip to content

fix(queues): refresh highlight when searching same book number

Vandana reddy Balannagari requested to merge feature/unified-queue into develop

Overview

This MR refactors the Volunteer dashboard queue management by consolidating multiple queue cards into a single Queues section with tab navigation. It also improves the queue search behavior, enhances UI clarity, and simplifies the sidebar navigation.

The goal of this change is to provide a cleaner and more efficient workflow for volunteers during medical camps by making queue navigation easier and reducing UI clutter.

What does this MR do and why?

Previously, the Volunteer dashboard displayed several separate queue cards (Vitals Waiting, Consultation, Prescriptions, Medicine Pickup, etc.), which made the interface cluttered and harder to navigate.

This MR introduces a Unified Queue Dashboard where all queues are grouped into a single section and displayed as tabs.

Additional improvements include:

  • Highlighting the queue tab where a searched patient currently exists.
  • Allowing the same Book Number to be searched repeatedly without clearing the input.
  • Displaying queue counts beside each queue tab.
  • Simplifying the sidebar navigation so volunteers access workflows through dashboard cards.

These changes improve usability, reduce confusion, and make patient lookup faster during medical camps.

Changes Made

UI Improvements

  • Combined multiple queue cards into a single Queues section
  • Implemented tab-based navigation for all queues
  • Improved queue tab alignment and spacing for a cleaner layout
  • Increased tab size slightly for better readability
  • Added queue count badges beside each queue tab
  • Implemented professional highlight styling for the queue containing the searched patient

Queue Search Improvements

  • Added Book Number search highlighting the queue where the patient exists
  • Fixed search behavior so the same Book Number can be searched repeatedly without clearing the input
  • Pressing Enter now re-triggers the search even if the number is unchanged

Sidebar Simplification

Removed redundant navigation links from the sidebar for the Volunteer role:

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

These features remain accessible through the dashboard cards, ensuring functionality is unchanged while simplifying navigation.

Technical Details

Root Cause of the Search Issue

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

Fix

Search execution is now triggered on:

  • Enter key press
  • Search action

This ensures the queue detection and highlight logic runs every time a search is performed.

Architecture

  • Existing queue components were reused without modification.
  • Queue tabs act as a container rendering existing queue views.
  • No API logic or queue processing logic was modified.

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 issue: Unified Queue Dashboard with Queue Tab Highlighting

Screenshots or Screen Recordings

| Before | After | |image|image,image| | Multiple queue cards cluttering the dashboard | Single Queues section with tab navigation | | Manual checking of each queue | Search highlights correct queue tab |

How to Set Up and Validate Locally

  1. Checkout this branch
git checkout feature/unified-queue
  1. Install dependencies
bun install
  1. Start development server
bun dev
  1. Navigate to
http://localhost:5173/role=volunteer
  1. Validate the following:
  • Volunteer dashboard displays only the main action cards
  • Clicking Queues opens the unified queue dashboard
  • All queues appear as tabs
  • Queue count badges display correctly
  • Searching by Book Number highlights the correct queue
  • Pressing Enter re-runs search even with the same 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 appear as tabs ✅
Search by book number Correct queue tab highlighted ✅
Search same number again Search runs again without clearing input ✅
Sidebar navigation Only global items visible ✅
Dashboard cards navigation All cards work correctly ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log or debugger left
  • No unused imports or variables
  • No duplicate code
  • ESLint and formatting checks pass

React Best Practices

  • Components follow single responsibility
  • Hooks used correctly
  • State management handled appropriately
  • No unnecessary re-renders

Known Limitations / Technical Debt

Currently, queue search highlights the queue tab but does not automatically scroll to the highlighted tab if it is out of view. This may be improved in future enhancements.

Additional Notes

This MR focuses on improving usability for volunteers during medical camps by reducing dashboard clutter and making queue navigation faster and more intuitive.

All existing functionality and routing behavior remain unchanged.

closes #305 (closed)

Edited by Vandana reddy Balannagari

Merge request reports