Skip to content

Enhance Medicine Type Dropdown to Include Powder, Drops, and Ointment

DALIBOINA SATISH requested to merge vitalcompletion-rate into develop

Overview

This MR enhances the medicine form by expanding the available medicine types in the dropdown. It improves usability by allowing users to select more real-world medicine forms beyond the currently limited options.

What does this MR do and why?

Currently, the frontend medicine form supports only a few medicine types (tablet, lotion, syrup), which restricts users from accurately representing different types of medicines.

Motivation: To improve the usability and completeness of the medicine entry process for shopkeepers/admin users.

Approach: Added additional medicine types (powder, drops, ointment) to the dropdown in the frontend form and ensured compatibility with existing API requests.

Trade-offs:

  • No backend validation changes were required (assumes backend already supports these values)
  • Minimal frontend-only change for quick enhancement

Changes Made

  • Updated medicine type dropdown options

  • Added new medicine types:

    • Powder
    • Drops
    • Ointment

  • Ensured selected values are correctly passed in API request

  • Updated constants/types file (if applicable)

Technical Details

Root Cause: The dropdown was hardcoded with limited medicine type options, missing commonly used categories.

Fix: Extended the dropdown options list and verified that selected values are properly handled in form state and API payload.

Component Updates:

  • Medicine Form Component → Updated dropdown options
  • Constants/Types (if present) → Added new enum values

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Closes #230 (closed)

Screenshots or Screen Recordings

Before After
Tablet, Lotion, Syrup Tablet, Lotion, Syrup, Powder, Drops, Ointment

How to Set Up and Validate Locally

  1. Pull this branch:

    git checkout vitalcompletion-rate
git pull origin develop

  2. Install dependencies:

    npm install

  3. Run development server:

    npm run dev

  4. Navigate to:

    http://localhost:5173/add-medicine

  5. Test steps:

    • Open "Add Medicine" form

    • Click medicine type dropdown

    • Verify new options are visible:

      • Powder
      • Drops
      • Ointment

    • Select each type and submit form

  6. Expected behavior:

    • All new types should be selectable
    • Selected value should be sent correctly in API request

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Dropdown opens Shows all medicine types ✅
Select Powder Value selected and submitted ✅
Select Drops Value selected and submitted ✅
Select Ointment Value selected and submitted ✅
API request Correct medicine type sent ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger statements
  • No unused code
  • No duplicate code
  • TypeScript types updated (if applicable)
  • ESLint and Prettier checks pass

React Best Practices

  • Components follow single responsibility
  • Proper state handling
  • No unnecessary re-renders

Component Patterns

  • Tailwind styling followed
  • Responsive design maintained

API & Data Fetching

  • API request unchanged and working correctly
  • No breaking changes in payload

Error Handling

  • No impact on existing error handling

Documentation

  • README.md updated (not required)
  • .env.example updated (not required)
  • CHANGELOG.md updated (optional)

Known Limitations / Technical Debt

  • Backend validation for new medicine types is assumed; not explicitly enforced
  • Future improvement: Fetch medicine types dynamically from backend instead of hardcoding

Additional Notes

This is a frontend-only enhancement focused on improving user experience and supporting real-world use cases. No backend changes were required.

MR Acceptance Checklist

Ready for review ✅

Edited by DALIBOINA SATISH

Merge request reports