fix: prevent repeat medicine & specialization conflict (!441) · Merge requests · HealthTech / Medical Camp / eHRS-Frontend

Pilli Murali Krishna requested to merge fix/consultation-selection into develop May 21, 2026

Overview

This Merge Request (MR) resolves a conflict in the patient registration and consultation queue flows where users could select both a Specialization and the Repeat Medicine option at the same time. The change enforces mutual exclusion between these two selections.

What does this MR do and why?

In the previous implementation, when checking in a patient or assigning/reassigning them to a doctor, users could select a specialization (such as General Medicine, Pediatrics, etc.) and also toggle "Repeat Medicine". This led to inconsistent states in the consultation flow.

Approach taken:

Updated the SpecializationSelector component to accept the controlled selection state from the parent component.
Implemented visual indicators (opacity-50 and cursor-not-allowed) to make it clear when options are disabled.
Disallowed selection of specialization cards when "Repeat Medicine" is checked.
Disallowed checking "Repeat Medicine" when a normal specialization card is selected.
Modified AssignDoctorPage to pass down the correct controlled state.
Wrote unit and integration tests covering the new behavior.
Added suppression comments for the react-hooks/set-state-in-effect lint warning on the required synchronization effects.

Changes Made

Key Changes

Modified: src/components/SpecializationSelector.tsx
- Added controlled props selectedSpecialization and isRepeatMedicine.
- Added logic in handlers to prevent toggling/selecting conflicting options.
- Added visual styling for disabled states.
Modified: src/pages/volunteer/AssignDoctorPage.tsx
- Enforced passing selectedSpecialization to sync selections.
- Resolved pre-existing react-hooks/set-state-in-effect warnings.
Modified: tests/unit/components/SpecializationSelector.test.tsx
- Added test case: "disables specialization selection when repeat medicine is checked"
- Added test case: "disables repeat medicine toggle when a specialization is selected"
Modified: tests/unit/components/AssignDoctorPage.test.tsx
- Updated SpecializationSelector mock.
- Added test case: "correctly synchronizes selectedSpecialization and isRepeatMedicine with SpecializationSelector"

Technical Details

Bug Root Cause: The parent component (AssignDoctorPage) and the child component (SpecializationSelector) had independent, uncontrolled states managing the selected specialization and repeat medicine status. Clicking one did not automatically lock out or disable the other.

Solution: Synchronized the state between parent and child via controlled props. Disabled clicks on the respective cards/checkboxes when the conflicting option is active.

Type of Change

Related Issues

closes #351 (closed)

Screenshots or Screen Recordings

before

after

How to Set Up and Validate Locally

Pull the branch:
```
git checkout fix/consultation-selection
```
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Navigate to the Assign Doctor page for any patient (e.g., /volunteer/assign-doctor?patientId=1001):
- Toggle Repeat Medicine ON: Verify all Specialization cards become semi-transparent and cannot be clicked.
- Toggle Repeat Medicine OFF: Verify Specialization cards become clickable again.
- Click a Specialization card: Verify the Repeat Medicine option is disabled and cannot be clicked.
- Click the selected Specialization card again to deselect: Verify the Repeat Medicine option becomes clickable again.

Testing Done

Manual testing completed
Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
Select Repeat Medicine	Specialization cards are disabled	✅ Passed
Select a Specialization card	Repeat Medicine is disabled	✅ Passed
State synchronization in parent page	State is correctly managed and passes to API request	✅ Passed

Code Quality Checklist

Code Standards

Code follows project conventions (naming, structure, formatting)
No console.log() or debugger statements left in code
No unused imports, variables, or functions
No duplicate code and use of existing components for reusability
i18n check passed with no hardcoded strings in codebase for i18n support
TypeScript types are properly defined (no any unless justified)
ESLint and Prettier checks pass
```
npm run lint
```

React Best Practices

Components are properly split and single-responsibility
Hooks follow rules (no conditional hooks, proper dependencies)
State management is appropriate (local vs global state)
No unnecessary re-renders (memoization used where needed)
Event handlers are properly cleaned up

Component Patterns

shadcn/ui components used correctly
Tailwind classes follow utility-first approach
Responsive design considered (mobile-first if applicable)
Accessibility attributes included (aria-*, role, etc.)
Icons from lucide-react used consistently

API & Data Fetching

TanStack Query used for server state (if applicable)
Loading and error states handled
API types defined in src/types/api.ts
Axios interceptors handle auth tokens correctly
Use of Zod for data validations

Error Handling

Errors are caught and handled gracefully
User-friendly error messages displayed
Errors are being toasted properly
Network failures handled appropriately

Documentation

README.md updated (if setup steps changed)
.env.example updated (if new env vars added)
CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

None.

Additional Notes