docs(phase-03): complete phase execution — service catalog + quote builder verified

2026-05-19 23:12:59 +02:00
parent fe0a65ebeb
commit 67e4483b48
7 changed files with 1796 additions and 14 deletions
@@ -0,0 +1,90 @@
+---
+phase: 3
+title: Service Catalog & Quote Builder — UI Design Contract
+status: approved
+date: 2026-05-17
+source: land-book.com aesthetic + existing admin brand
+---
+
+# UI-SPEC: Phase 3 — Service Catalog & Quote Builder
+
+## Design Direction
+
+**Reference:** land-book.com — clean minimal white, card grid, dark typography, generous whitespace, subtle borders.
+**Brand accent:** #1A463C (green), #DEF168 (yellow) — used sparingly for CTAs and active states.
+**Base:** white backgrounds, #1a1a1a text, #e5e7eb borders, #f9f9f9 surface.
+
+## Pages
+
+### /admin/catalog — Service Catalog
+
+**Layout:**
+- Full-width table layout (same pattern as admin clients list)
+- Header row: "Catalogo Servizi" h1 + "+ Aggiungi servizio" button (primary green)
+- Table: bg-white, rounded-xl, border border-[#e5e7eb]
+- Columns: Nome | Descrizione | Prezzo | Stato | Azioni
+
+**Row design:**
+- Hover: bg-[#f9f9f9] transition
+- Inactive rows: opacity-50
+- Status badge: pill "Attivo" (bg-[#1A463C]/10 text-[#1A463C]) / "Disattivato" (bg-[#f4f4f5] text-[#71717a])
+- Inline edit: click → row expands into editable inputs, save/cancel buttons
+- Actions: "Disattiva" / "Riattiva" text button, no icons
+
+**Add service form:**
+- Slide-in panel (right side) OR inline row at top of table
+- Fields: Nome (text), Descrizione (textarea, optional), Prezzo unitario (number, EUR)
+- CTA: "+ Aggiungi" button primary
+
+### /admin/clients/[id] — Tab "Preventivo"
+
+**Tab navigation:**
+- Added as 5th tab after Documenti: Fasi | Pagamenti | Documenti | Note | Preventivo
+
+**Preventivo tab layout — two sections stacked:**
+
+**Section 1: Aggiungi voci**
+- Compact add-row UI: dropdown "Seleziona dal catalogo" + qty input + "Aggiungi" OR "Voce libera" toggle → text input + price + qty
+- Dropdown shows only active catalog items, sorted by name
+
+**Section 2: Voci preventivo** (card with border)
+- Table: Voce | Qty | Prezzo unitario | Subtotale | Rimuovi
+- Footer row: "Totale calcolato" bold right-aligned
+- Below table: separator + "Totale accettato dal cliente" label + editable EUR input + "Salva" button (primary)
+- Small helper text: "Il cliente vede solo questo importo, non le singole voci."
+
+**Empty state:**
+- Centered text: "Nessuna voce aggiunta. Seleziona dal catalogo per iniziare."
+
+## Components
+
+| Component | Type | Location |
+|-----------|------|---------|
+| ServiceTable | Server+Client | `components/admin/catalog/ServiceTable.tsx` |
+| ServiceForm | Client | `components/admin/catalog/ServiceForm.tsx` |
+| QuoteTab | Client | `components/admin/tabs/QuoteTab.tsx` |
+| CatalogSelector | Client (inside QuoteTab) | inline |
+
+## Interaction Rules
+
+- Add service: inline form row at top OR slide panel — no full page redirect
+- Edit service: inline row expansion, save with Server Action
+- Disable/enable: single click, optimistic toggle, Server Action confirm
+- Add quote item: instant append to list, no page reload
+- Remove quote item: instant remove, no confirmation (items not locked)
+- "Salva totale accettato": saves `accepted_total` via Server Action, shows success state (green border flash)
+
+## Typography & Spacing
+
+- Section headings: `text-xs font-bold text-[#71717a] uppercase tracking-wider` (same as existing admin)
+- Table headers: `text-sm font-medium text-[#71717a]`
+- Prices: `tabular-nums` monospace-aligned
+- Whitespace: `gap-6` between sections, `py-3 px-4` for table cells
+- All cards: `rounded-xl border border-[#e5e7eb] bg-white`
+
+## What NOT to do
+
+- No modals/dialogs — prefer inline editing
+- No full-page forms for simple CRUD — stay in context
+- No icon-heavy buttons — text labels only (consistent with existing admin)
+- No complex animations — only `transition-colors` on hover