HH/COMPLAINT_LIST_LAYOUT_UPDATE.md

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:

.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

// 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:

{
    '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 ✅