fix: display volunteer name for picked patients in queue (Picked by)

Overview

This MR adds support for displaying the "Picked by" information in the frontend queue UI. It reflects which volunteer has picked a patient, improving visibility and tracking in the workflow.

---

What does this MR do and why?

This change enables the frontend to consume and display the new picked_by field introduced in backend API responses.

Motivation:

Previously, there was no way to identify which volunteer picked a patient from the UI. This caused confusion during verification and coordination.

Approach:

• Read picked_by.user_name from API response
• Safely render it in the UI with null checks
• Display it within the patient card in a clear position

Trade-offs:

• Assumes backend always sends correct structure for picked_by
• If missing, UI safely ignores the field

---

Changes Made

• Updated queue card UI to display picker name
• Added null-safe rendering using optional chaining
• Integrated new backend field into frontend rendering logic

Technical Details

• Field accessed using: item.picked_by.user_name

• Null safety implemented using: {item.picked_by?.user_name && (...)}

• Placement:

  • Inside patient card
  • Below doctor/book info

• Data flow: Backend → API response → Frontend → UI render

---

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

• Depends on backend changes introducing picked_by field

---

Screenshots or Screen Recordings

How to Set Up and Validate Locally

1. Pull this branch:

   git checkout <branch-name>

2. Install dependencies:

   bun install

3. Ensure backend is running with updated API

4. Run frontend:

   bun dev

5. Navigate to queue page:

   • Verify patient cards

6. Expected behavior:

   • If picked_by exists → shows:

     Picked by: <name>

   • If not → nothing is displayed (no crash)

---

Testing Done

• Manual testing completed
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
picked_by present	Name displayed correctly	✅
picked_by null	No crash, no UI break	✅
Multiple queue cards	All show correct picker	✅

---

Code Quality Checklist

Code Standards

• Code follows project conventions
• No console.log/debugger
• No unused code
• No duplicate code
• i18n check considered (string can be externalized later)
• TypeScript types used properly
• ESLint & Prettier pass

React Best Practices

• Proper component structure
• Hooks used correctly
• Efficient rendering
• Clean event handling

Component Patterns

• UI consistent with existing design
• Tailwind used correctly
• Responsive design maintained

API & Data Fetching

• Handles optional API field
• No breaking API assumptions

Error Handling

• Null safety handled
• No runtime crashes

---

Documentation

• README.md updated
• .env changes not required
• CHANGELOG.md optional

---

Known Limitations / Technical Debt

• "Picked by" string is currently hardcoded (can be moved to i18n later)

---

Additional Notes

This completes the end-to-end flow:

• Volunteer picks patient
• Backend stores picker
• Backend sends picked_by
• Frontend displays it

---