when stock is 0, the medicine name dropdown should display red color

Issue Summary

When stock is 0, the medicine name in the dropdown should be displayed in red color to indicate unavailability.

Problem Statement

Currently, the medicine dropdown does not visually differentiate stock availability clearly.

  • When stock = 0, it appears the same as other medicines.
  • Users may accidentally select out-of-stock medicines.
  • There is no immediate visual feedback indicating stock status.

Impact:

  • Confusion for users during medicine selection.
  • Increased chances of selecting unavailable medicines.
  • Poor UX in critical workflows like prescribing/dispensing.

Proposed Solution

  • Apply conditional styling to the medicine dropdown options:
    • Stock = 0 → Red color
    • Stock between 1–10 → Yellow color
    • Stock > 10 → Default color
  • Ensure color coding is consistent across all dropdown instances.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Out-of-stock medicine appears in red

Given the medicine dropdown is displayed
 And a medicine has stock equal to 0
When the dropdown is opened
Then the medicine name should be displayed in red color
Edited by Rajuldev Vandana