252 lines
8.1 KiB
Markdown
252 lines
8.1 KiB
Markdown
# 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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```css
|
|
.tab-active {
|
|
border-bottom: 3px solid #005696;
|
|
color: #005696;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tab-inactive {
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
```
|
|
|
|
### Timeline Styles
|
|
|
|
```css
|
|
.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** ✅
|