# TechTitans POS — IPTV Account Page · Elegant Colourful Redesign (V2)

**Date:** 2026-11-12 · **Branch:** `techtitans/integration` (backend + frontend) · Local commits only (no push/deploy).

**Scope:** a second, deeper **visual** pass over the IPTV *Account Details* page
(`frontend/src/pages/iptv/IptvDetailPage.tsx` + `frontend/src/pages/iptv/iptv.css`). No backend, API, DB
schema or business logic changed — renewal/expiry maths, free/pay credit, discounts, tax, payments,
invoice/quote/receipt, outstanding, permissions and tenant scope are all untouched. The focus of V2 is a
genuinely more colourful, elegant, balanced layout and a **significantly improved Account History**.

## What changed vs V1

### 1 · Layout & balance
- Desktop main columns rebalanced **≈50/50 → 40/60** (`.iptv-account-cols: grid-template-columns: 2fr 3fr`)
  so the taller Credit & Renewal form gets the width it needs and Connection Summary stays compact.
- The renewal **price summary and projected-expiry preview now sit side-by-side** on desktop
  (`.iptv-renewal-summary`, 2-col → 1-col under 680px), cutting page height and grouping "what you pay"
  next to "what service you get".

### 2 · Summary cards
- The three at-a-glance cards now use **soft tinted gradient backgrounds** with solid-fill coloured icon
  tiles (teal / dynamic expiry / coral) and larger coloured values — distinctly premium, still readable.
- Service Expiry remains **dynamic** (green active / amber expiring / red expired); Outstanding is
  **coral when owed, emerald when settled**, connection-specific.

### 3 · Account History — full redesign (the headline of V2)
- **Tabs** became pill tabs with an **icon, label and live count**: Invoices · Payments · Renewals/Credits ·
  Notes · Activity. Active tab is a navy gradient pill; inactive are light with a visible hover/focus state;
  40px min height for a comfortable target; they **wrap/scroll** on narrow screens. Counts are `aria-hidden`
  (decorative) so the tab's accessible name stays the clean label.
- **Invoices** table: *Invoice · Date · Total · Paid · Outstanding · Status · Document*. The order **Date** is
  recovered by cross-referencing the renewal that created each order (no schema change). Outstanding renders
  as a coral pill; Status as a coloured badge (paid→green, partial→amber, unpaid→red). Print Invoice retained
  (admin original behind `invoices.send`).
- **Payments** table: *Invoice · Date · Amount received · Outstanding · Status · Receipt*. Scoped to orders
  where money actually moved; **Record payment** only when an outstanding balance + renewal link + permission
  exist; **Print receipt** (A4 + 80 mm) only when a payment has been recorded. (Per-payment method/reference
  is not persisted in the billing-overview payload — backend intentionally unchanged.)
- **Renewals / Credits** table: *# · Event · Paid · Free · Previous expiry · New expiry · Invoice*. Event is a
  colour-coded tag (activation→teal, renewal→navy, free extension→emerald, date adjustment→amber); free
  months show a green pill; the related invoice number is surfaced where available.
- **Notes** & **Activity** became a proper **timeline**: coloured event dots with meaningful icons (renewal,
  activation, free credit, date change, charge change, status), navy titles, body text, and an
  employee · timestamp meta line. No credentials are ever exposed.
- **Mobile**: every history table collapses into **stacked record cards** (label/value rows via `data-label`)
  instead of a cramped horizontal scroll. Friendlier empty states with a secondary hint line.

### Preserved workflow
Quote · Invoice · Receipt only. **No** Pro Forma controls, **no** Branded Reprint, **no** View
Original/Branded Copy were (re)introduced; the admin-only exact-original action stays behind
`invoices.send`. Immutable historical records remain intact.

## Verification

### Live Playwright (real page, sub `IPTV-2026-0026`)
Before/after captured at desktop 1440, tablet 768, mobile 390, plus each history tab, plus zoom emulation at
125 % / 150 % / 200 %.

| Width | Horizontal overflow |
|---|---|
| Desktop 1440 | none |
| Tablet 768 | none |
| Mobile 390 | none (tables → stacked cards) |
| Zoom 125 % (1152) | none |
| Zoom 150 % (960) | none |
| Zoom 200 % (720) | none |

- **Console errors: 0.**
- All five history tabs render correctly; counts match row counts; Print Invoice / Print Receipt / Record
  payment gating unchanged; Review & Apply + Print Quote intact.
- Screenshots: `screenshots/iptv-elegant-v2/iptv-{before,after}-{desktop,tablet,mobile}.png` and
  `iptv-after-tab-{renewals,activity,payments,notes}.png`.

### Automated
- **Frontend** `IptvPages.test.tsx` → **25 passed** (one assertion relied on exact tab names; satisfied by
  keeping counts out of the accessible name).
- `tsc -b` clean · `eslint src/pages/iptv/IptvDetailPage.tsx` clean · `npm run build` succeeds (pre-existing
  bundle-size advisory only).

## Files changed

- **Frontend:** `src/pages/iptv/IptvDetailPage.tsx` (order-date + paid-orders memos, activity timeline
  icons/tones, redesigned history tabs/tables/timeline, renewal 2-col summary), `src/pages/iptv/iptv.css`
  (40/60 columns, soft-tinted summary cards, pill history tabs, airy colour-aware tables with mobile card
  stacking, event tags, timeline, renewal summary grid).
- **Backend (docs only):** this report + `screenshots/iptv-elegant-v2/`.

## Commits (no push)

- **Frontend:** `29ea2fa` — IPTV account elegant redesign V2 + Account History overhaul.
- **Backend:** this commit — V2 report + before/after/tab screenshots.