Skip to content

Fix: Pending queue count not displayed for assigned doctors in UI

Currently, after assigning patients to doctors, the pending queue count per doctor is not visible in the UI, even though the backend response contains the correct data.

The expected behavior is that each doctor card should display the live pending queue count based on assigned patients.

Problem Statement

After assigning patients to doctors, the UI does not reflect the number of assigned patients per doctor.

  • What is broken? The pending queue count is not displayed in the doctor card/component.

  • Who is affected? Admins or users managing doctor assignments.

  • Impact:

    • Lack of visibility into doctor workload
    • Inefficient patient distribution
    • Poor user experience

  • How to reproduce:

    1. Go to doctor assignment page
    2. Assign a patient to any doctor
    3. Check the doctor card
    4. Observe that pending queue count is not shown

Proposed Solution

  • Extract the pending queue count from backend API response
  • Map the value correctly to frontend state
  • Display the count in the doctor card UI
  • Ensure UI updates dynamically after assignment

Files/components involved:

  • Doctor card component
  • Assignment page logic
  • API response mapping
  • Test files for validation

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Display pending count after assignment

Given a doctor has assigned patients
 When the assignment is completed
 Then the doctor card should display the updated pending queue count
  And the count should match the backend response

Scenario 2: Multiple doctor assignments

Given multiple doctors with assigned patients
 When patients are assigned to different doctors
 Then each doctor card should show their respective pending queue count

Scenario 3: UI update after assignment

Given a patient is newly assigned to a doctor
 When the UI refreshes or state updates
 Then the pending count should increase accordingly

Scenario 4: No assigned patients

Given a doctor has no assigned patients
 When the doctor card is displayed
 Then the pending queue count should show 0 or be empty

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Assign patient and check count Doctor exists 1. Assign patient
2. View doctor card		 Count is displayed correctly High
TC-002 Multiple assignments Multiple doctors 1. Assign patients
2. Check each card		 Each doctor shows correct count High
TC-003 API response mapping Backend returns count 1. Fetch data
2. Render UI		 UI matches backend count High
TC-004 No patients assigned Doctor exists 1. Open page Count shows 0/empty Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component Function/Hook Test Cases to Cover
DoctorCard.tsx render logic TC-001, TC-004
AssignDoctorPage.tsx state update logic TC-001, TC-002
API handling response mapping TC-003

Test Assertions Required:

  • Renders correctly with initial state
  • Updates UI after assignment
  • Correctly maps API response
  • Displays correct pending count
  • Handles empty/zero state

Implementation Details

Files to Change

File Path Action Purpose
src/components/DoctorCard.tsx Modify Display pending queue count
src/pages/AssignDoctorPage.tsx Modify Handle state update after assignment
src/types/api.ts Modify Ensure correct typing for count
src/__tests__/DoctorCard.test.tsx Create Unit tests

Technical Considerations

  • Ensure correct mapping of API response fields
  • Maintain state consistency after assignment
  • Avoid unnecessary re-renders
  • Keep component reusable and clean

UI/UX Requirements

  • Display pending queue count clearly in doctor card
  • Ensure visibility and readability
  • Handle zero/empty state gracefully
  • Maintain responsive design

Testing Strategy

Manual Testing

Test Environment:

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

Manual Test Steps:

  1. Open doctor assignment page
  2. Assign patients to a doctor
  3. Verify pending count updates
  4. Test multiple assignments

Automated Testing

Unit Tests:

  • Component render tests
  • UI update tests
  • API mapping tests
  • Error handling tests

Test Data Requirements

const mockTestData = {
  doctors: [
    { id: 1, name: "Dr. A", pendingCount: 2 },
    { id: 2, name: "Dr. B", pendingCount: 0 }
  ]
}

Definition of Done

  • Acceptance criteria met
  • All test cases passing
  • Unit tests written and passing
  • Manual testing completed
  • Code reviewed
  • UI updated correctly
  • No console errors
  • Type safety ensured
  • Lint checks passed
  • CHANGELOG updated

Additional Context

Related Issues

  • Related to: Doctor assignment UI improvements

Notes

  • Backend already provides correct data
  • Issue is purely frontend rendering and state handling
  • Future improvement: add real-time updates using polling/websockets