Simone Cavalli
90 lines
3.6 KiB
Markdown
90 lines
3.6 KiB
Markdown
---
|
|
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 |