HH/COMPLAINT_DETAIL_LAYOUT_UPDATE.md

Complaint Detail Page - Layout Update

Date: February 17, 2026
Status: ✅ Complete

---

Overview

The complaint detail page has been completely redesigned based on the template layout (templates/temp/complaint_detail_temp.html). The new design features:

1. Two-column layout (8 columns content + 4 columns sidebar)
2. Horizontal tab navigation with active state indicator
3. Quick Actions grid in sidebar
4. Staff Assignment widget in sidebar
5. Assignment Info card (navy background) in sidebar
6. Clean, modern card-based design

---

Layout Structure

┌─────────────────────────────────────────────────────────────┐
│  Breadcrumb & Header (Resolve Case button, PDF View)       │
├─────────────────────────────────────────────────────────────┤
│  [Details] [Departments] [Staff] [Timeline] [Attachments]  │
│  [Actions] [AI Analysis] [Explanation] [Resolution]        │
├──────────────────────────────┬──────────────────────────────┤
│                              │                              │
│   CONTENT AREA (col-span-8)  │   SIDEBAR (col-span-4)       │
│                              │                              │
│  ┌────────────────────────┐  │  ┌────────────────────────┐  │
│  │ Details/Dept/Staff/    │  │  │ Quick Actions          │  │
│  │ Timeline/etc panels    │  │  │ [Resolve] [Assign]     │  │
│  │                        │  │  │ [Follow]  [Escalate]   │  │
│  └────────────────────────┘  │  └────────────────────────┘  │
│                              │                              │
│                              │  ┌────────────────────────┐  │
│                              │  │ Staff Assignment       │  │
│                              │  │ • Staff names          │  │
│                              │  │ • View all link        │  │
│                              │  └────────────────────────┘  │
│                              │                              │
│                              │  ┌────────────────────────┐  │
│                              │  │ Assignment Info        │  │
│                              │  │ (Navy background)      │  │
│                              │  │ • Main Dept            │  │
│                              │  │ • Assigned To          │  │
│                              │  │ • TAT Goal             │  │
│                              │  └────────────────────────┘  │
│                              │                              │
└──────────────────────────────┴──────────────────────────────┘

---

Key Changes

1. Header Redesign

Before:

• Gradient header with complaint info
• Status badges mixed with title

After:

• Clean breadcrumb navigation
• Bold title with status badge
• Action buttons (PDF View, Resolve Case) aligned right

2. Tab Navigation

Before:

• Tab buttons with icons
• Active state used CSS class tab-btn active

After:

• Minimal text-only tabs
• Active state has bottom border (3px solid #005696)
• JavaScript function switchTab(tabName) handles switching

3. Two-Column Layout

Before:

• Single column with tabs
• Sidebar actions at bottom

After:

• Main content: col-span-8
• Sidebar: col-span-4
• Sticky sidebar with key info

4. Quick Actions

New Component in sidebar:

• 2x2 grid of action buttons
• Resolve, Assign, Follow Up, Escalate
• Hover effects with color transitions

5. Staff Assignment Widget

New Component in sidebar:

• Shows up to 3 assigned staff
• Avatar initials
• "View all" link if more than 3

6. Assignment Info Card

New Component in sidebar:

• Navy background (#005696)
• Key info: Main Dept, Assigned To, TAT Goal, Status

---

Tab System

JavaScript Implementation

function switchTab(tabName) {
    // Hide all panels
    document.querySelectorAll('.tab-panel').forEach(panel => {
        panel.classList.add('hidden');
    });
    
    // Show selected panel
    document.getElementById('panel-' + tabName).classList.remove('hidden');
    
    // Update tab styles
    document.querySelectorAll('nav button').forEach(tab => {
        tab.classList.remove('tab-active');
        tab.classList.add('tab-inactive');
    });
    
    document.getElementById('tab-' + tabName).classList.add('tab-active');
}

Available Tabs

Tab	ID	Content
Details	details	Complaint info, classification, patient info
Departments	departments	Involved departments list
Staff	staff	Involved staff list
Timeline	timeline	Activity timeline
Attachments	attachments	File attachments grid
PX Actions	actions	Related PX actions
AI Analysis	ai	Emotion analysis, AI summary
Explanation	explanation	Staff explanations
Resolution	resolution	Resolution status & form

---

Partial Templates

The content is split into partial templates for maintainability:

templates/complaints/partials/
├── departments_panel.html    # Involved departments
├── staff_panel.html          # Involved staff
├── timeline_panel.html       # Activity timeline
├── attachments_panel.html    # File attachments
├── actions_panel.html        # PX actions
├── ai_panel.html            # AI analysis
├── explanation_panel.html    # Staff explanations
└── resolution_panel.html     # Resolution status

---

CSS Classes

Tab Styles

.tab-active {
    border-bottom: 3px solid #005696;
    color: #005696;
    font-weight: 700;
}

.tab-inactive {
    color: #64748b;
    font-weight: 500;
}

Timeline Styles

.timeline { /* vertical line */ }
.timeline-item { /* item with dot */ }
.timeline-item.status_change::before { border-color: #f97316; }
.timeline-item.assignment::before { border-color: #3b82f6; }
.timeline-item.escalation::before { border-color: #ef4444; }
.timeline-item.note::before { border-color: #22c55e; }

---

Color Palette

All colors use the Al Hammadi brand:

Color	Hex	Usage
Navy	#005696	Primary buttons, active tabs, headings
Blue	#007bbd	Accents, gradients, links
Light	#eef6fb	Backgrounds, badges
Slate	#64748b	Secondary text

---

Testing Checklist

• Tab switching works correctly
• Details tab shows complaint info
• Departments tab lists involved departments
• Staff tab lists involved staff
• Timeline shows activity history
• Attachments display correctly
• Quick Action buttons are clickable
• Staff Assignment widget shows staff
• Assignment Info card displays correctly
• All buttons use correct navy/blue colors
• Responsive layout works on different screen sizes

---

Files Modified

templates/complaints/
└── complaint_detail.html          # Complete redesign

new: templates/complaints/partials/
├── departments_panel.html
├── staff_panel.html
├── timeline_panel.html
├── attachments_panel.html
├── actions_panel.html
├── ai_panel.html
├── explanation_panel.html
└── resolution_panel.html

---

Implementation Complete ✅