feat: display picked by volunteer in patient cards

Issue Summary

Add support to display the volunteer who picked the patient in the queue UI.

Currently, the backend provides a picked_by field in the API response, but the frontend does not consistently render this information across all queue cards. The expected behavior is to display “Picked by: ” for each patient if available.

---

Problem Statement

The backend now sends a picked_by object containing details of the volunteer who picked the patient. However, this information is either not displayed or inconsistently shown in the frontend UI.

• Missing or inconsistent display of picker information
• Users (volunteers/coordinators) cannot easily identify who handled the patient
• Reduces transparency in workflow

This affects all users interacting with the queue UI.

---

Proposed Solution

• Update queue/patient card components to display picker information
• Use picked_by.user_name from API response
• Add null-safe rendering (only show if available)
• Ensure consistent UI styling across all queue cards

---

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Display picked by when available

Given a patient queue item has picked_by data
When the queue is displayed
Then the UI should show "Picked by: <user_name>"

Scenario 2: Do not display when data is missing

Given a patient queue item does not have picked_by data
When the queue is displayed
Then the "Picked by" label should not be shown

---

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Display picked by name	API returns picked_by	1. Load queue 2. View card	Shows "Picked by: Name"	High
TC-002	Hide when null	picked_by is null	1. Load queue	No label shown	High
TC-003	UI consistency	Multiple cards	1. Load list	All cards show consistent style	Medium

---

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases to Cover
QueueCard.jsx	renderPickedBy	TC-001, TC-002
QueueList.jsx	mapping data	TC-003

Test Assertions Required:

• Renders correctly with initial state
• Handles API data correctly
• Displays picked_by when present
• Hides when not present
• Updates UI correctly

---

Implementation Details

Files to Change

File Path	Action	Purpose
src/components/QueueCard.jsx	Modify	Add picked_by display
src/pages/VolunteerQueues.jsx	Modify	Ensure data is passed correctly
src/types/queue.ts	Modify	Add picked_by type
src/__tests__/QueueCard.test.jsx	Create	Unit tests

---

Technical Considerations

• Use optional chaining (picked_by?.user_name)
• Ensure no UI crash if field is missing
• Maintain consistent styling
• No API changes required

---

UI/UX Requirements

• Display below doctor/book info
• Format: Picked by:
• Use subtle styling (small text / badge)
• Should not affect layout

---

Testing Strategy

Manual Testing

Test Environment:

• Browser: Chrome / Firefox
• Viewport: Desktop
• User Role: Volunteer

Manual Test Steps:

1. Open queue page
2. Verify patient cards
3. Check “Picked by” label
4. Verify behavior when data missing

---

Automated Testing

Unit Tests:

• Component render
• Conditional rendering
• API data handling

---

Test Data Requirements

const mockTestData = {
  picked_by: {
    user_id: "123",
    user_name: "Vandana",
    user_phone_no: "9999999999"
  }
}

---

Definition of Done

• Picked by displayed correctly
• Works for all queue cards
• No UI break
• No console errors
• Code reviewed
• Styling consistent

---

Additional Context

Related Issues

• Related to backend update: picker tracking feature

Notes

This feature improves visibility and collaboration by showing which volunteer picked the patient.