Skip to content

Feat/spec flow

Vandana reddy Balannagari requested to merge feat/spec-flow into develop

Overview

This MR refactors the frontend to align with the new specialization-based consultation workflow introduced in the backend.

It replaces the old doctor assignment approach with a structured flow that includes:

  • Specialization-based patient registration
  • Intelligent doctor suggestion
  • Manual doctor assignment via modal
  • Strict queue-based workflow transitions

This ensures better accuracy, control, and user experience across the medical camp system.

What does this MR do and why?

Motivation:

  • Remove incorrect early doctor assignment
  • Align frontend with backend validation rules
  • Improve workflow clarity for volunteers/admins
  • Enable specialization-driven consultation process

Approach:

  • Replaced doctor selection with specialization selection
  • Integrated new backend APIs for doctor suggestion
  • Introduced modal-based manual assignment
  • Implemented queue-based UI restrictions
  • Added real-time UI updates without reload

Trade-offs:

  • Increased UI complexity (modal interactions)
  • Additional API calls before assignment
  • Result: significantly improved control and correctness

Changes Made

  • Removed old "Assign Doctor" UI and logic

  • Added SpecializationSelector component

  • Integrated:

    • GET /api/v1/doctors/active-specializations
    • GET /api/v1/queue/suggest-doctor
    • PUT /api/v1/queue/status-update

  • Implemented Doctor Suggestion Modal

  • Added queue state validation (disable invalid actions)

  • Fixed duplicate API calls (registration)

  • Implemented real-time UI updates (no reload)

  • Enhanced search with highlight + queue sync

Technical Details

Architecture Decisions

  • Followed backend-driven workflow strictly
  • Removed auto-assignment → enforced manual confirmation
  • Implemented modal-based selection for controlled interaction

State Management

  • Local state used for:

    • selected specialization
    • selected doctor
    • modal visibility
    • queue data

  • Ensured UI updates immediately after API mutations

Data Flow

Select Specialization
→ Register Patient
→ Move to Vitals
→ Move to Consultation Queue
→ Start Consultation
→ Fetch Suggested Doctors
→ Show Modal
→ Select Doctor
→ Confirm Assignment

Key Fixes

  • Fixed duplicate register API calls
  • Fixed status-update being called without doctor_id
  • Fixed UI not updating until reload
  • Fixed search not syncing across queues

Type of Change

  • 🐛 Bug fix
  • ✨ New feature
  • 💥 Breaking change
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Aligns frontend with new backend consultation workflow
  • Removes legacy auto doctor assignment logic
  • Implements specialization-based patient routing

Screenshots or Screen Recordings

Screencast_from_2026-04-22_23-33-48

Before After
Doctor selection during registration Specialization selection
Direct consultation start Modal-based doctor selection
Manual reload needed Instant UI updates

How to Set Up and Validate Locally

  1. Pull this branch
  2. Install dependencies:
bun install
  1. Set backend URL:
VITE_SERVER_URL=http://localhost:8000
  1. Run frontend:
bun dev
  1. Test flow:
  • Register patient with specialization
  • Complete vitals
  • Move to consultation queue
  • Click "Start Consultation"
  • Select doctor in modal
  • Confirm assignment

Expected Behavior:

  • No doctor selection during registration
  • Modal opens on consultation start
  • Doctor assigned only after confirmation
  • UI updates instantly without reload
  • Search highlights patient across queues

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Register with specialization Success ✅
Duplicate register prevention No multiple calls ✅
Suggest doctor API call Modal opens ✅
Assign doctor with confirm Success ✅
Start consultation without doctor Blocked ✅
Queue update without reload Immediate UI update ✅
Search + highlight sync Correct queue ✅

Code Quality Checklist

Code Standards

  • Clean and structured code
  • No debug logs left
  • No unused variables
  • Reusable components used
  • TypeScript properly used
  • Lint checks pass

React Best Practices

  • Proper component separation
  • Hooks used correctly
  • State handled efficiently
  • No unnecessary re-renders

Component Patterns

  • Tailwind styling consistent
  • UI responsive and clean
  • Accessibility considered

API & Data Fetching

  • API calls handled properly
  • Loading states implemented
  • Error handling added

Error Handling

  • Errors handled gracefully
  • Toast messages used
  • API failures handled

Documentation

  • README update (optional)
  • CHANGELOG update (optional)

Known Limitations / Technical Debt

  • Requires backend to maintain strict queue state validation
  • Modal UX can be further enhanced
  • SocketIO real-time updates can be fully integrated

Additional Notes

  • This MR completes full frontend alignment with backend workflow
  • Ensures system behaves like a real-world medical queue system
  • Designed for scalability and maintainability

MR Acceptance Checklist

  • Functionality works correctly
  • No regressions introduced
  • Code is maintainable
  • UI/UX improved

Closes #315 (closed)

Edited by Vandana reddy Balannagari

Merge request reports