# 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** ✅