Skip to content

fix: handle zero stock medicines with proper error message and UI indication

Rajuldev Vandana requested to merge fix/replace-medicines into fix/develop

Overview

This MR improves the medicine selection experience by adding stock-based visual indicators in the dropdown and fixing incorrect validation messages for out-of-stock medicines.

What does this MR do and why?

Currently, medicines in the dropdown do not indicate stock availability, and selecting a medicine with zero stock shows a misleading error: "exceeds available stock".

This MR:

  • Adds visual cues to help users understand stock availability directly in the dropdown
  • Introduces correct error messaging for zero-stock medicines
  • Ensures validation logic is accurate and context-aware

This improves usability and prevents confusion during prescription entry.

Changes Made

  • Updated medicine dropdown UI to include stock-based color indicators
  • Added validation logic for zero-stock medicines
  • Refined existing quantity validation logic

Technical Details

Root Cause:

  • No differentiation in UI for stock levels
  • Validation logic treated zero-stock cases the same as quantity overflow

Fix:

  • Conditional styling applied based on stock value:
    • stock === 0 → red
    • 1 <= stock <= 30 → yellow
  • Added separate validation check for zero-stock selection
  • Restricted "exceeds available stock" error only to valid overflow scenarios

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 #323 (closed) closes #324 (closed)

Screenshots or Screen Recordings

Before After
No stock indication in dropdown Color-coded dropdown (Red/Yellow/Default)
Incorrect "exceeds available stock" error Proper "Out of stock" error

image image image

How to Set Up and Validate Locally

  1. Pull this branch / checkout MR
  2. Install dependencies: bun install
  3. Run development server: bun dev
  4. Navigate to: http://localhost:5173/volunteer/update-prescription
  5. Test scenarios:
    • Select medicine with stock = 0 → should show "Out of stock"
    • Select medicine with stock 1–30 → should appear in yellow
    • Select medicine with stock >30 → default appearance
    • Enter quantity > stock → should show "exceeds available stock"

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Select 0 stock medicine Shows "Out of stock" error ✅
Dropdown display for 0 stock Red color ✅
Dropdown display for low stock Yellow color ✅
Quantity exceeds stock Shows correct error ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() left
  • No unused code
  • No duplicate code
  • TypeScript types properly used
  • ESLint and Prettier pass

React Best Practices

  • Components are clean and reusable
  • Proper state handling
  • No unnecessary re-renders

Error Handling

  • Proper error messages displayed
  • User-friendly validation

Documentation

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

Known Limitations / Technical Debt

  • Color indication is only in dropdown (not yet reflected in other UI areas)

Additional Notes

This is a frontend-only change. No backend modifications required.

Edited by Rajuldev Vandana

Merge request reports