clienthub/.planning/phases/03-service-catalog-quote-builder/03-UI-SPEC.md

phase, title, status, date, source

phase	title	status	date	source
3	Service Catalog & Quote Builder — UI Design Contract	approved	2026-05-17	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