HH/.opencode/plans/style-appreciation-review.md

Plan: Style Appreciation Review Pages to Match App Theme

Current State

The review pages (review_list.html and review_detail.html) use generic Tailwind classes without the custom CSS that the existing appreciation_list.html uses. This makes them visually inconsistent.

Target Design (from appreciation_list.html)

The existing appreciation page uses custom CSS classes:

• .page-header-gradient — Navy gradient (#005696 → #007bbd), white text, rounded-xl
• .section-card — White bg, 2px slate-200 border, rounded-xl, hover:border-navy, shadow
• .section-header — Gradient bg (#f8fafc → #f1f5f9), border-bottom, flex with icon
• .section-icon — 40px square, rounded-xl, colored bg (blue-100, green-100, etc.)
• Typography — text-xs font-bold uppercase tracking-wider for labels, text-2xl font-black text-navy for counts
• Stats cards — 4-column grid with icon + label + value

Issues to Fix

Field Names (will cause errors)

• Hospital.name_en → Hospital.name
• Staff.name_en → Staff.name
• AppreciationCategory.name_en — KEEP (this field exists)

review_list.html Changes

1. Add extra_css block with custom CSS classes matching appreciation_list.html
2. Header: Change emerald gradient → navy .page-header-gradient
3. Add stats row: Show "Total Pending" count with icon
4. Filter card: Use .section-card with .section-header
5. Appreciation cards: Use .section-card instead of raw Tailwind
6. Fix field names: h.name_en → h.name, s.name_en → s.name

review_detail.html Changes

1. Add extra_css block with custom CSS classes
2. Header: Change emerald gradient → navy .page-header-gradient
3. Patient Info card: Use .section-card with .section-header and .section-icon
4. Message card: Use .section-card
5. Activation form card: Use .section-card with .section-header
6. Fix field names: appreciation.hospital.name_en → appreciation.hospital.name, s.name_en → s.name

Files to Edit

1. templates/appreciation/review_list.html
2. templates/appreciation/review_detail.html

No Schema Changes Needed

The AppreciationCategory model does have name_en, so those references stay. Only Hospital and Staff use name (not name_en).