243 lines
7.2 KiB
Markdown
243 lines
7.2 KiB
Markdown
# Complaint List Page - Layout Update
|
|
|
|
**Date:** February 17, 2026
|
|
**Status:** ✅ Complete
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
The complaint list page has been completely redesigned based on the template layout (`templates/temp/complaint_list_temp.html`). The new design features:
|
|
|
|
1. **Clean header** with search and New Case button
|
|
2. **4 Stats Cards** in a row (Total, Resolved, Pending, TAT Alert)
|
|
3. **Filter tabs** for quick filtering (All, Pending, Escalated, Resolved)
|
|
4. **Advanced Filters** (collapsible)
|
|
5. **Clean table** with status badges and priority dots
|
|
6. **Hover actions** on table rows
|
|
7. **Pagination** at the bottom
|
|
|
|
---
|
|
|
|
## Layout Structure
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Complaints Registry [Search] [+ New Case] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ [Total 689] [Resolved 678] [Pending 11] [TAT Alert 3] │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ [All Cases] [Pending] [Escalated] [Resolved] | [Filters] │
|
|
│ Showing: 1-10 of 689 │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ┌─────────────────────────────────────────────────────┐ │
|
|
│ │ ID Patient Source Dept Status Pri Act│ │
|
|
│ ├─────────────────────────────────────────────────────┤ │
|
|
│ │ #8842 John Doe MOH ER Invest. ● 👁 👤│ │
|
|
│ │ #8841 Sarah J CHI Billing Resolv. ● 👁 👤│ │
|
|
│ │ #8839 Abdullah Hospital Internal New ● 👁 👤│ │
|
|
│ └─────────────────────────────────────────────────────┘ │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Showing 10 of 689 [<] [1] [2] [3] [>] │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Key Features
|
|
|
|
### 1. Statistics Cards
|
|
|
|
Four cards showing key metrics:
|
|
- **Total Received** - Total complaints count
|
|
- **Resolved** - Resolved count with percentage
|
|
- **Pending** - Open/in progress count
|
|
- **TAT Alert** - Overdue complaints (>72h)
|
|
|
|
### 2. Filter Tabs
|
|
|
|
Quick filter buttons:
|
|
- All Cases (default)
|
|
- Pending
|
|
- Escalated
|
|
- Resolved
|
|
|
|
Active tab has navy background, inactive tabs have border.
|
|
|
|
### 3. Advanced Filters
|
|
|
|
Collapsible section with:
|
|
- Priority dropdown
|
|
- Department dropdown
|
|
- Apply/Clear buttons
|
|
|
|
### 4. Complaints Table
|
|
|
|
Columns:
|
|
| Column | Description |
|
|
|--------|-------------|
|
|
| Complaint ID | Reference number (e.g., #8842) |
|
|
| Patient Name | Patient name + MRN |
|
|
| Source | MOH, CHI, Hospital App, etc. |
|
|
| Department | Involved department |
|
|
| Status | Badge with custom colors |
|
|
| Priority | Color dot (red/orange/green) |
|
|
| Actions | View, Assign buttons (hover) |
|
|
|
|
### 5. Status Badges
|
|
|
|
Custom CSS classes for status colors:
|
|
```css
|
|
.status-resolved { background: #dcfce7; color: #166534; }
|
|
.status-pending { background: #fef9c3; color: #854d0e; }
|
|
.status-investigation { background: #e0f2fe; color: #075985; }
|
|
.status-escalated { background: #fee2e2; color: #991b1b; }
|
|
```
|
|
|
|
### 6. Priority Dots
|
|
|
|
- **Critical**: Red + pulse animation
|
|
- **High**: Red
|
|
- **Medium**: Orange
|
|
- **Low**: Green
|
|
|
|
### 7. Row Hover Actions
|
|
|
|
Action buttons (View, Assign) appear on row hover with smooth opacity transition.
|
|
|
|
### 8. Pagination
|
|
|
|
- Page numbers with navy active state
|
|
- Previous/Next arrows
|
|
- Shows range (e.g., "Showing 1-10 of 689")
|
|
|
|
---
|
|
|
|
## Color Palette
|
|
|
|
All using Al Hammadi brand colors:
|
|
|
|
| Color | Hex | Usage |
|
|
|-------|-----|-------|
|
|
| Navy | `#005696` | Primary buttons, active tabs, headings |
|
|
| Blue | `#007bbd` | Accents, links, hover states |
|
|
| Light | `#eef6fb` | Row hover background |
|
|
| Slate | `#64748b` | Secondary text |
|
|
|
|
---
|
|
|
|
## JavaScript Functions
|
|
|
|
```javascript
|
|
// Toggle advanced filters
|
|
function toggleFilters() {
|
|
document.getElementById('advancedFilters').classList.toggle('hidden');
|
|
}
|
|
|
|
// Search on Enter key
|
|
// Redirects to ?search={value}
|
|
```
|
|
|
|
---
|
|
|
|
## i18n Support
|
|
|
|
All text wrapped in `{% trans %}` tags:
|
|
- "Complaints Registry"
|
|
- "Manage and monitor patient feedback in real-time"
|
|
- "Search ID, Name or Dept..."
|
|
- "New Case"
|
|
- "Total Received", "Resolved", "Pending", "TAT Alert"
|
|
- "All Cases", "Pending", "Escalated", "Resolved"
|
|
- "Advanced Filters"
|
|
- "Showing: X of Y"
|
|
- Table headers: "Complaint ID", "Patient Name", etc.
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
```
|
|
templates/complaints/
|
|
└── complaint_list.html # Complete redesign (372 → ~370 lines)
|
|
|
|
Added i18n to:
|
|
templates/complaints/
|
|
└── complaint_pdf.html # Added {% load i18n %}
|
|
```
|
|
|
|
---
|
|
|
|
## Comparison: Before vs After
|
|
|
|
### Before
|
|
- 6 stat cards (Total, Open, In Progress, Overdue, Complaints, Appreciations)
|
|
- Filter dropdowns in a panel
|
|
- Status badges with different colors
|
|
- Full buttons always visible
|
|
|
|
### After
|
|
- 4 stat cards (Total, Resolved, Pending, TAT Alert)
|
|
- Tab-based quick filters + Advanced Filters
|
|
- Custom status badge colors
|
|
- Hover-reveal action buttons
|
|
- Cleaner typography
|
|
- Better spacing
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Stats cards display correct numbers
|
|
- [ ] Filter tabs work correctly
|
|
- [ ] Advanced Filters toggle works
|
|
- [ ] Department filter dropdown populates
|
|
- [ ] Priority filter works
|
|
- [ ] Table rows are clickable
|
|
- [ ] Hover actions appear
|
|
- [ ] Status badges show correct colors
|
|
- [ ] Priority dots show correct colors
|
|
- [ ] Pagination works
|
|
- [ ] Search input works on Enter
|
|
- [ ] "New Case" button links correctly
|
|
- [ ] All text is translatable
|
|
- [ ] Responsive layout on mobile
|
|
|
|
---
|
|
|
|
## API/Backend Requirements
|
|
|
|
The template expects these context variables:
|
|
|
|
```python
|
|
{
|
|
'complaints': Page object,
|
|
'stats': {
|
|
'total': int,
|
|
'resolved': int,
|
|
'resolved_percentage': float,
|
|
'pending': int,
|
|
'overdue': int,
|
|
},
|
|
'status_filter': str, # optional
|
|
'priority_filter': str, # optional
|
|
'department_filter': str, # optional
|
|
'departments': QuerySet, # for filter dropdown
|
|
'can_edit': bool,
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Table row is clickable (links to detail page)
|
|
- Hover effects use `group-hover:opacity-100`
|
|
- Priority dots use `animate-pulse` for critical
|
|
- All colors match Al Hammadi brand palette
|
|
- Clean, modern design with proper spacing
|
|
|
|
---
|
|
|
|
**Implementation Complete** ✅
|