fix: sort medicines list on Verify Medicines page for better usability

Overview

This MR fixes the issue where medicines on the "Verify Medicines" page were displayed in a random order. The change ensures medicines are shown in a consistent sorted order, improving usability and verification speed.

---

What does this MR do and why?

Currently, medicines appear without any defined order, which makes it difficult for users to verify items efficiently, especially on mobile devices.

This MR introduces sorting of medicines (by ID in ascending order) before rendering them on the UI. This ensures a predictable and structured display, making the verification process faster and reducing user effort.

---

Changes Made

• Added sorting logic to medicines list before rendering
• Ensured immutability by creating a copy of the medicines array
• Updated Verify Medicines page component

Technical Details

Root Cause: Medicines were rendered directly from the API/state without applying any sorting logic.

Fix: A sorted copy of the medicines array is created using Array.sort() before rendering:

const sortedMedicines = [...medicines].sort((a, b) =>
  a.id.localeCompare(b.id)
);

This ensures:

• Stable and consistent ordering
• No mutation of original state

---

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 #302 (closed)

---

Screenshots or Screen Recordings

| Before |

| After |

How to Set Up and Validate Locally

1. Checkout this branch

2. Install dependencies:

   bun install

3. Run the development server:

   bun dev

4. Navigate to Verify Medicines page

5. Observe the medicines list

Expected behavior: Medicines should be displayed in ascending order (by ID), making verification easier and faster.

---

Testing Done

• Manual testing completed
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
Medicines list loads	Medicines are displayed	✅
Medicines ordering	Medicines appear in sorted order (ID ascending)	✅
Page refresh	Order remains consistent	✅

---

Code Quality Checklist

Code Standards

• Code follows project conventions
• No console.log() or debugger statements left
• No unused imports or variables
• No duplicate code
• ESLint and Prettier checks pass

React Best Practices

• Proper state handling (no mutation)
• No unnecessary re-renders
• Clean and readable component logic

---

Documentation

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

---

Known Limitations / Technical Debt

• Sorting currently depends on medicine ID format consistency
• If ID format changes, fallback sorting may be needed

---

Additional Notes

This change improves usability significantly for mobile users, where quick verification is important. The implementation is lightweight and does not impact performance.

---