HH/COMPLAINT_FORM_FIXES_SUMMARY.md

Complaint Form Fixes Summary

Issue Description

The patient records were not appearing in the complaint form, and several AJAX endpoints were pointing to incorrect URLs.

Root Causes Identified

1. Incorrect AJAX Endpoint URLs

The JavaScript was calling non-existent API endpoints:

• /api/departments/ - Does not exist
• /complaints/ajax/get-staff-by-department/ - Wrong endpoint name
• /api/patients/ - Does not exist

2. Incorrect API Response Parsing

JavaScript was expecting data in results property, but backend returns different formats:

• Departments: returns data.departments
• Patients: returns data.patients
• Staff: returns data.staff

3. Missing Classification Section

The form was missing the Classification section (Category, Subcategory, Source) required by the model.

Fixes Applied

File: templates/complaints/complaint_form.html

1. Fixed AJAX Endpoint URLs

Before:

fetch(`/api/departments/?hospital=${hospitalId}`)
fetch(`/complaints/ajax/get-staff-by-department/?department_id=${departmentId}`)
fetch(`/api/patients/?search=${encodeURIComponent(searchTerm)}`)

After:

fetch(`/complaints/ajax/departments/?hospital=${hospitalId}`)
fetch(`/complaints/ajax/physicians/?department_id=${departmentId}`)
fetch(`/complaints/ajax/search-patients/?q=${encodeURIComponent(searchTerm)}`)

2. Fixed Data Response Parsing

Before:

data.results.forEach(dept => { ... })
data.results.forEach(patient => { ... })

After:

data.departments.forEach(dept => { ... })
data.patients.forEach(patient => { ... })
data.staff.forEach(staff => { ... })

3. Added Patient Search Input

Added a text input and search button for searching patients by MRN or name:

• Search input field with placeholder
• Search button with icon
• Patient select dropdown populated on search
• Minimum 2 characters required for search

4. Added Classification Section

Added missing form fields:

• Category dropdown (required)
• Subcategory dropdown (optional)
• Source dropdown (required) with options: Email, Phone, Walk-in, Online, Social Media, Third Party, Other

5. Improved User Experience

• Added patient search on Enter key
• Added patient search on button click
• Validation for minimum 2 characters for patient search
• Better error messages for loading failures

URL Configuration

All endpoints are correctly configured in apps/complaints/urls.py:

• /complaints/ajax/departments/ → get_departments_by_hospital
• /complaints/ajax/physicians/ → get_staff_by_department
• /complaints/ajax/search-patients/ → search_patients
• /complaints/public/api/load-categories/ → api_load_categories

Backend View Responses

search_patients (ui_views.py)

Returns: {'patients': [...]}

results = [
    {
        'id': str(p.id),
        'mrn': p.mrn,
        'name': p.get_full_name(),
        'phone': p.phone,
        'email': p.email,
    }
    for p in patients
]
return JsonResponse({'patients': results})

get_staff_by_department (ui_views.py)

Returns: {'staff': [...]}

get_departments_by_hospital (ui_views.py)

Returns: {'departments': [...]}

Testing Instructions

1. Navigate to the complaint form: /complaints/new/
2. Test Hospital Selection: Select a hospital - departments and categories should load
3. Test Department Selection: Select a department - staff should load
4. Test Category Selection: Select a category - subcategories should load
5. Test Patient Search:
   • Enter at least 2 characters in search field
   • Click search button or press Enter
   • Patient dropdown should populate with matching results
   • Select a patient from the dropdown

Expected Behavior

✅ Hospitals load from template context ✅ Departments load via AJAX when hospital is selected ✅ Staff/Physicians load via AJAX when department is selected ✅ Categories load via AJAX when hospital is selected ✅ Subcategories load via AJAX when category is selected ✅ Patients search via AJAX when search button is clicked ✅ All dropdowns populate correctly with data ✅ Form can be submitted with all required fields filled

Related Files

• apps/complaints/urls.py - URL patterns
• apps/complaints/ui_views.py - AJAX endpoint views
• apps/complaints/models.py - Complaint model definition
• config/urls.py - Main URL configuration

Notes

• Patient search requires minimum 2 characters
• Patient dropdown populates on focus with initial results if empty
• All AJAX requests use the correct endpoint URLs
• Data is properly parsed from backend response format
• Classification section is complete and functional