---
phase: 01-foundation-client-dashboard
plan: 04
subsystem: client-portal-ui
tags: [nextjs, tailwind-v4, shadcn-ui, server-components, client-dashboard, responsive]

requires:
  - 01-01 (Next.js 16 bootstrap, Tailwind v4, shadcn/ui)
  - 01-02 (schema DB: clients, phases, tasks, deliverables, payments, documents, notes)
  - 01-03 (ClientView interface + getClientView(), route /c/[token] operativa)
provides:
  - src/components/client-dashboard.tsx (layout wrapper completo)
  - src/components/phase-timeline.tsx (timeline laterale con progress bar per fase)
  - src/components/payment-status.tsx (stato pagamenti senza importi singoli)
  - src/components/documents-section.tsx (link documenti esterni)
  - src/components/notes-section.tsx (log decisioni read-only)
  - src/app/globals.css (design token Tailwind v4 — palette light & clean)
  - app/c/[token]/page.tsx (Server Component che renderizza ClientDashboard)
affects:
  - 01-05-seed-deploy (la dashboard e' completa — il seed popola i dati, il deploy la espone)

tech-stack:
  added: []
  patterns:
    - "Tailwind v4: design token via @theme inline in globals.css (NON tailwind.config.ts)"
    - "Colori arbitrari inline con sintassi [#hex] — compatibile Tailwind v4"
    - "SVG inline al posto di lucide-react — compatibilita' massima con bundle size ridotto"
    - "Server Components puri per tutti i componenti dashboard (nessun 'use client')"
    - "React.cache() in page.tsx per deduplicare getClientView() tra generateMetadata e render"

key-files:
  created:
    - src/components/client-dashboard.tsx (99 righe — wrapper con header, progress, sezioni)
    - src/components/phase-timeline.tsx (201 righe — timeline laterale con task e deliverable)
    - src/components/payment-status.tsx (98 righe — totale + righe stato, zero importi singoli)
    - src/components/documents-section.tsx (75 righe — link esterni sicuri)
    - src/components/notes-section.tsx (68 righe — log decisioni read-only)
  modified:
    - src/app/globals.css (token Tailwind v4: primary, secondary, tertiary, bg-subtle, border-light, accent, success, warning, info)
    - src/app/c/[token]/page.tsx (import ClientDashboard, generateMetadata dinamico, React.cache)

key-decisions:
  - "Tailwind v4 usa @theme in globals.css — tailwind.config.ts non esiste in questo progetto"
  - "SVG inline invece di lucide-react — evita dipendenza da icone e garantisce compatibilita'"
  - "Colori arbitrari [#hex] in classi Tailwind invece di classi custom — piu' esplicito e manutenibile"
  - "Server Components puri — nessun 'use client' necessario per componenti read-only"
  - "React.cache() per deduplicare le due chiamate getClientView in generateMetadata + ClientPage"

duration: 45min
completed: 2026-05-14
---

# Phase 1 Plan 04: Client Dashboard UI — Vertical Slice completo

**Tutti i componenti UI della dashboard cliente renderizzati come Server Components con design light & clean in Tailwind v4: header con logo iamcavalli + brand name cliente, progress bar globale, timeline laterale delle fasi con barre per fase e task list, sezione pagamenti con badge stato (zero importi singoli), link documenti esterni e log note read-only.**

## Performance

- **Duration:** ~45 min
- **Started:** 2026-05-14T19:35:00Z
- **Completed:** 2026-05-14T20:20:00Z
- **Tasks:** 5/5
- **Files creati:** 5
- **Files modificati:** 2

## Accomplishments

- **globals.css**: Token di design Tailwind v4 via `@theme inline` — palette light & clean con 9 variabili colore (primary, secondary, tertiary, bg-subtle, border-light, accent, success, warning, info). Adattamento critico: il progetto usa Tailwind v4 che non ha `tailwind.config.ts`.

- **app/c/[token]/page.tsx**: Server Component aggiornato con `ClientDashboard`, `generateMetadata` dinamico (titolo con brand_name), `React.cache()` per deduplicare le due chiamate a `getClientView`.

- **client-dashboard.tsx**: Layout wrapper completo. Header sticky con "iamcavalli" in angolo sinistro (xs, tracking-widest) e `brand_name` centrato e prominente (D-06). Progress bar globale con percentuale (D-09). Brief con accent bar sinistra. Sezioni ordinate: PhaseTimeline, PaymentStatus (sempre visibile — D-10), Documents e Notes (condizionali). Footer con avviso link privato.

- **phase-timeline.tsx**: Timeline laterale a due colonne (D-07). Colonna sinistra: cerchio con icona SVG per stato (checkmark verde per done, cerchio pieno blu per active, cerchio vuoto grigio per upcoming) + linea verticale tra fasi. Colonna destra: Card con badge stato, progress bar per fase con contatore "X di N task" (D-08), task list con icone stato e line-through per done. Deliverable annidati con badge "Approvato".

- **payment-status.tsx**: Card con `accepted_total` in EUR come unico importo visibile (vincolo LOCKED). Righe pagamento con dot colorato + badge stato semantico (blu=da_saldare, giallo=inviata, verde=saldato) — MAI importi singoli (T-04-001 mitigato, D-11 rispettato).

- **documents-section.tsx**: Link esterni con `target="_blank" rel="noopener noreferrer"` (T-04-002). Icone SVG inline per documento ed external link. Hover state con transizione colore accent.

- **notes-section.tsx**: Note read-only con timestamp in locale it-IT. Empty state informativo. Server Component puro (D-12: admin scrive in Phase 2, cliente legge).

- **npm run build**: completato senza errori TypeScript. 1 warning CSS da Lightning CSS optimizer (selettore con caratteri speciali) — noto, non bloccante, non dipendente dal nostro codice.

## Task Commits

1. **Task 1: Design tokens + wire page.tsx** — `4e703d7`
2. **Task 2: ClientDashboard wrapper** — `debd391`
3. **Task 3: PhaseTimeline** — `5d5c8ea`
4. **Task 4: PaymentStatus** — `a4e2de0`
5. **Task 5: DocumentsSection + NotesSection** — `8602bfa`

## Files Created/Modified

- `src/app/globals.css` — @theme con 9 token colore light & clean
- `src/app/c/[token]/page.tsx` — ClientDashboard + generateMetadata + React.cache
- `src/components/client-dashboard.tsx` — layout wrapper completo
- `src/components/phase-timeline.tsx` — timeline laterale con progress per fase
- `src/components/payment-status.tsx` — totale accettato + badge stato (nessun importo)
- `src/components/documents-section.tsx` — link esterni sicuri
- `src/components/notes-section.tsx` — note read-only con timestamp italiano

## Decisions Made

- **Tailwind v4 senza tailwind.config.ts:** Il piano originale assumeva Tailwind v3 con `tailwind.config.ts`. Il progetto usa Tailwind v4 che gestisce i token via `@theme inline` in globals.css. Adattamento automatico.
- **SVG inline invece di lucide-react:** Lucide-react v1.14 ha alcune icone con nomi diversi. Usare SVG inline elimina la dipendenza ed e' compatibile con Server Components senza `'use client'`.
- **Server Components puri:** I componenti sono tutti read-only e non usano hooks React — nessun `'use client'` necessario, ottimizzazione del bundle.
- **Colori arbitrari [#hex]:** Usare classi come `text-[#1a1a1a]` invece di classi custom — piu' esplicito, nessun conflitto con shadcn/ui che usa le proprie variabili CSS (`bg-card`, `text-muted-foreground`, etc.).

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] tailwind.config.ts non esiste — Tailwind v4 usa @theme in globals.css**
- **Found during:** Task 1
- **Issue:** Il piano indicava di aggiornare `tailwind.config.ts` con i color token. Questo file non esiste perche' il progetto usa Tailwind v4, che utilizza CSS `@theme inline` in `globals.css` invece del file di configurazione JavaScript.
- **Fix:** Token definiti in `globals.css` via `@theme inline { --color-primary: #1a1a1a; ... }`. Tailwind v4 mappa automaticamente queste variabili come classi utilitarie.
- **Files modified:** src/app/globals.css
- **Commit:** 4e703d7

**2. [Rule 1 - Bug] lucide-react usato come 'use client' — rimpiazzato con SVG inline**
- **Found during:** Task 2/3 (design)
- **Issue:** Il piano importava `CheckCircle2`, `Circle`, `Clock`, `ExternalLink` da `lucide-react`. I componenti sono Server Components puri — aggiungere `'use client'` solo per le icone avrebbe spostato tutto il rendering lato client inutilmente.
- **Fix:** SVG inline (Heroicons style) al posto di lucide-react per tutti i componenti. Mantiene i componenti come Server Components puri.
- **Files modified:** phase-timeline.tsx, payment-status.tsx, documents-section.tsx
- **Commit:** 5d5c8ea, a4e2de0, 8602bfa

## Known Stubs

Nessuno stub. Tutti i componenti ricevono dati reali dalla `ClientView` e li renderizzano completamente. Gli empty state (no documenti, no note) sono stati implementati come stati legittimi — non stub.

## Threat Surface Scan

| Flag | File | Description |
|------|------|-------------|
| Verificato T-04-001 | payment-status.tsx | `amount` assente dalla query e dal componente — solo `accepted_total` e `status` per riga |
| Verificato T-04-002 | documents-section.tsx | `rel="noopener noreferrer"` su tutti i link esterni |

Nessuna nuova superficie di sicurezza non prevista dal threat model 01-04.

## Self-Check: PASSED

- [x] `src/app/globals.css` esiste con @theme e token colore
- [x] `src/app/c/[token]/page.tsx` renderizza ClientDashboard con generateMetadata
- [x] `src/components/client-dashboard.tsx` esiste (99 righe)
- [x] `src/components/phase-timeline.tsx` esiste (201 righe)
- [x] `src/components/payment-status.tsx` esiste (98 righe) — nessun campo `amount`
- [x] `src/components/documents-section.tsx` esiste (75 righe)
- [x] `src/components/notes-section.tsx` esiste (68 righe)
- [x] Commit `4e703d7` esiste (Task 1)
- [x] Commit `debd391` esiste (Task 2)
- [x] Commit `5d5c8ea` esiste (Task 3)
- [x] Commit `a4e2de0` esiste (Task 4)
- [x] Commit `8602bfa` esiste (Task 5)
- [x] `npm run build` completato senza errori TypeScript
- [x] `payment-status.tsx` non contiene il campo `amount`
- [x] `documents-section.tsx` contiene `rel="noopener noreferrer"`

## Next Phase Readiness

- Plan 05 (Seed script + DNS) puo' partire
- La dashboard e' pienamente funzionale: basta un cliente seedato per vederla operativa
- Il seed script deve inserire client, phases, tasks, deliverables, payments, documents, notes
- La route /c/[token] e' operativa dal Plan 03 — Plan 05 aggiunge il seed + configurazione DNS

---
*Phase: 01-foundation-client-dashboard*
*Completed: 2026-05-14*