feat: pagina Impostazioni redesign Quiet Luxury — sezioni tokenizzate + PoolManager tassonomie dual-mode
- impostazioni/page.tsx: sezione Analytics con input tariffa bordato (€/h, font-mono) + header uppercase - TaxonomyManager: card sezione tokenizzata, griglie Offerte (2col) / Catalogo (3col) - PoolManager: box bg-muted, badge conteggio mono, chip valori, add su Enter, delete cascade confermata - DESIGN-SYSTEM.md: note pagina Impostazioni Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -303,6 +303,31 @@ header `bg-muted/50` uppercase muted, righe `hover:bg-muted/40` + `divide-y divi
|
|||||||
- **Redditività**: `null` (0h tracciate) → `—` muted; `>0` → emerald bold con dot
|
- **Redditività**: `null` (0h tracciate) → `—` muted; `>0` → emerald bold con dot
|
||||||
`bg-emerald-500`; `=0` → mono muted. Footer "Mostrando N di N progetti attivi".
|
`bg-emerald-500`; `=0` → mono muted. Footer "Mostrando N di N progetti attivi".
|
||||||
|
|
||||||
|
### Impostazioni notes
|
||||||
|
|
||||||
|
`/admin/impostazioni` migrata a "Quiet Luxury" (replica `design-reference/pagina-impostazioni`).
|
||||||
|
Pagina a sezioni impilate (`space-y-8`), ogni sezione è una card
|
||||||
|
`rounded-xl border-border-light bg-card shadow-card p-6`.
|
||||||
|
|
||||||
|
- **Header**: `PageHeader` "Impostazioni" + sottotitolo ("Configura le tariffe target e gestisci
|
||||||
|
le tassonomie globali del sistema").
|
||||||
|
- **Titoli sezione**: `text-xs font-bold uppercase tracking-wider text-foreground`, sottotitolo
|
||||||
|
`text-xs text-tertiary`. Le sezioni tassonomia hanno un'icona (`Tag`/`BookOpen`) in un box
|
||||||
|
`h-9 w-9 rounded-lg border-border-light bg-muted text-muted-foreground`.
|
||||||
|
- **Analytics Profittabilità**: form server-action con input `type=number` in un gruppo bordato
|
||||||
|
`focus-within:border-primary focus-within:ring-1 ring-primary`, prefisso `€`/suffisso `/h`
|
||||||
|
muted assoluti, valore `font-mono`; bottone "Salva" `bg-primary text-primary-foreground`.
|
||||||
|
- **Griglie tassonomia** (`TaxonomyManager`): `border-t border-border-light pt-4` + grid
|
||||||
|
`gap-6` — Offerte `md:grid-cols-2`, Catalogo `md:grid-cols-2 lg:grid-cols-3`.
|
||||||
|
- **PoolManager** (box campo): `rounded-xl border-border-light bg-muted/40 p-5 flex flex-col
|
||||||
|
justify-between`. Testata = label uppercase muted + badge conteggio mono
|
||||||
|
(`bg-card border-border-light text-tertiary`, sempre visibile anche a 0). Valori = chip
|
||||||
|
`bg-card border-border/60 text-foreground shadow-sm` con `X` (hover destructive → cascade
|
||||||
|
delete confermata via `window.confirm`). Vuoto → "Nessun valore inserito" italic muted.
|
||||||
|
Aggiunta = input full-width `bg-card border-border` con Enter (no bottone `+`); duplicati
|
||||||
|
bloccati con errore inline `text-destructive`.
|
||||||
|
- **Footer**: nota `text-xs text-tertiary` sulla sincronizzazione bidirezionale dei valori.
|
||||||
|
|
||||||
### Client Portal restyle notes
|
### Client Portal restyle notes
|
||||||
|
|
||||||
The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens
|
The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens
|
||||||
|
|||||||
@@ -0,0 +1,377 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Impostazioni — Luxury Admin CRM</title>
|
||||||
|
<!-- Google Fonts: Plus Jakarta Sans -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<!-- Tailwind CSS CDN -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Plus Jakarta Sans', 'sans-serif'],
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
dark: '#1A463C', /* Verde scuro lusso */
|
||||||
|
darkHover: '#13342D', /* Variante scura per hover */
|
||||||
|
active: 'rgba(255, 255, 255, 0.08)',
|
||||||
|
bg: '#F8F9FA',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.sidebar-transition {
|
||||||
|
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-brand-bg font-sans text-slate-800 antialiased min-h-screen flex overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside id="sidebar" class="w-64 bg-brand-dark text-white flex flex-col justify-between p-6 border-r border-emerald-950/20 shrink-0 sidebar-transition relative z-10">
|
||||||
|
<div class="overflow-hidden">
|
||||||
|
<!-- Logo e Intestazione -->
|
||||||
|
<div class="mb-10 px-2 flex items-center justify-between">
|
||||||
|
<span id="sidebar-logo-text" class="text-lg font-bold tracking-wider text-emerald-50 whitespace-nowrap transition-opacity duration-300">iamcavalli</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigazione Principale -->
|
||||||
|
<nav class="space-y-1">
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a.598.598 0 01-.73-.578 5.672 5.672 0 011.02-3.155A8.72 8.72 0 013 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Conversazioni</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Lead</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Clienti</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Progetti</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Preventivi</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M7 7h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Offerte</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Catalogo</span>
|
||||||
|
</a>
|
||||||
|
<!-- Stato Attivo su Impostazioni -->
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-brand-active font-medium transition-all duration-200 shadow-sm">
|
||||||
|
<svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066-1.543.94-3.31-.826-2.37-2.37 1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||||
|
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Impostazioni</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Area Inferiore Sidebar -->
|
||||||
|
<div class="border-t border-white/10 pt-4 space-y-3 overflow-hidden">
|
||||||
|
<div class="flex items-center justify-between px-3 py-1 text-xs text-emerald-200/50 whitespace-nowrap">
|
||||||
|
<span class="sidebar-text transition-opacity duration-300">Tema</span>
|
||||||
|
<button class="p-1 rounded-full bg-white/5 hover:bg-white/10 text-emerald-200 hover:text-white transition-all duration-200">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M14 12a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-300/80 hover:text-red-200 hover:bg-red-950/20 transition-all duration-200 whitespace-nowrap">
|
||||||
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
|
||||||
|
<span class="sidebar-text transition-opacity duration-300">Esci</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- SEZIONE PRINCIPALE -->
|
||||||
|
<div class="flex-1 flex flex-col min-w-0">
|
||||||
|
|
||||||
|
<!-- BARRA DI INTESTAZIONE SUPERIORE -->
|
||||||
|
<header class="h-16 border-b border-slate-100 bg-white px-8 flex items-center justify-between shrink-0">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<!-- Pulsante Apri/Chiudi Sidebar -->
|
||||||
|
<button id="sidebar-toggle" class="p-2 -ml-2 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-800 transition-colors focus:outline-none" title="Espandi/Comprimi Sidebar">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h16"/></svg>
|
||||||
|
</button>
|
||||||
|
<span class="text-xs text-slate-400 font-medium">Configurazione Sistema</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-xs font-semibold text-slate-700 bg-slate-100 px-2.5 py-1 rounded-full">Admin Panel</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- AREA DEL CONTENUTO -->
|
||||||
|
<main class="flex-1 p-8 lg:p-10 max-w-[1400px] w-full mx-auto flex flex-col gap-8 overflow-y-auto">
|
||||||
|
|
||||||
|
<!-- INTESTAZIONE SEZIONE -->
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-semibold text-slate-900 tracking-tight">Impostazioni</h1>
|
||||||
|
<p class="text-xs text-slate-400 mt-1">Configura le tariffe target e gestisci le tassonomie globali del sistema</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SEZIONE 1: ANALYTICS PROFITTABILITÀ -->
|
||||||
|
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6">
|
||||||
|
<div class="max-w-2xl">
|
||||||
|
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider mb-1">Analytics Profittabilità</h2>
|
||||||
|
<p class="text-xs text-slate-400 mb-6">Tariffa oraria target (€/h). Usata per calcolare il costo ideale e il delta profitto/perdita per ogni progetto.</p>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="relative rounded-lg border border-slate-200 focus-within:border-brand-dark focus-within:ring-1 focus-within:ring-brand-dark transition-all duration-150">
|
||||||
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-xs font-medium text-slate-400 pointer-events-none">
|
||||||
|
€
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value="100,00"
|
||||||
|
class="bg-transparent text-xs font-semibold font-mono text-slate-800 pl-7 pr-12 py-2.5 w-36 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<span class="absolute inset-y-0 right-0 pr-3 flex items-center text-[11px] font-medium text-slate-400 pointer-events-none">
|
||||||
|
/h
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottone Salva -->
|
||||||
|
<button class="bg-brand-dark hover:bg-brand-darkHover text-white text-xs font-medium px-5 py-2.5 rounded-lg transition-colors shadow-sm">
|
||||||
|
Salva
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SEZIONE 2: TASSONOMIE OFFERTE -->
|
||||||
|
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6">
|
||||||
|
<div class="flex items-start gap-3 mb-6">
|
||||||
|
<div class="p-2 bg-slate-50 border border-slate-100 rounded-lg text-slate-500">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a2.25 2.25 0 003.182 0l5.174-5.173a2.25 2.25 0 000-3.181L12.016 3.659A2.25 2.25 0 0010.425 3h-.857zM10.5 7.5h.008v.008H10.5V7.5z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider">Tassonomie Offerte</h2>
|
||||||
|
<p class="text-xs text-slate-400 mt-0.5">Valori dei campi Categoria, Ticket, Tipo e Obiettivo dell'editor offerte.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-50">
|
||||||
|
|
||||||
|
<!-- Categoria -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Categoria</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">3</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Entry Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Retainer Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Signature Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ticket -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Ticket</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">3</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
High Ticket <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Low Ticket <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Mid Ticket <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tipo -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Tipo</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">3</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Audit <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Consulenza <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Done For You <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Obiettivo -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Obiettivo</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">7</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Aumento LTV <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Caso Studio <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Fatturato <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Lead Generation <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SEZIONE 3: TASSONOMIE CATALOGO -->
|
||||||
|
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6">
|
||||||
|
<div class="flex items-start gap-3 mb-6">
|
||||||
|
<div class="p-2 bg-slate-50 border border-slate-100 rounded-lg text-slate-500">
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider">Tassonomie Catalogo</h2>
|
||||||
|
<p class="text-xs text-slate-400 mt-0.5">Valori dei campi Fase, Offerta e Pacchetto del catalogo servizi.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-4 border-t border-slate-50">
|
||||||
|
|
||||||
|
<!-- Box: Fase -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Fase</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Fase 1 ➔ Onboarding <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Fase 2 ➔ Analisi <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Fase 3 ➔ Esecuzione <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Box: Offerta -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Offerta</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">3</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Entry Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Retainer Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-white border border-slate-200/60 text-slate-700 shadow-sm">
|
||||||
|
Signature Offer <button class="text-slate-400 hover:text-slate-800">×</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Box: Pacchetto -->
|
||||||
|
<div class="bg-slate-50/50 border border-slate-100 rounded-xl p-5 flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-3">
|
||||||
|
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Pacchetto</span>
|
||||||
|
<span class="text-[10px] font-bold text-slate-400 font-mono bg-white border border-slate-100 px-1.5 py-0.5 rounded">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-6 text-slate-400 text-xs italic">
|
||||||
|
Nessun valore inserito
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Aggiungi valore..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs placeholder-slate-400 focus:outline-none focus:border-brand-dark transition-colors" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- NOTA IN BASSO -->
|
||||||
|
<footer class="text-xs text-slate-400 max-w-4xl px-2 leading-relaxed">
|
||||||
|
I valori si sincronizzano ovunque: creandone uno dall'editor offerte o dal catalogo comparirà qui automaticamente. Eliminando un valore da qui viene rimosso ovunque sia usato.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SCRIPT DI LOGICA (Gestione Sidebar) -->
|
||||||
|
<script>
|
||||||
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
const toggleButton = document.getElementById('sidebar-toggle');
|
||||||
|
const logoText = document.getElementById('sidebar-logo-text');
|
||||||
|
const sidebarTexts = document.querySelectorAll('.sidebar-text');
|
||||||
|
|
||||||
|
toggleButton.addEventListener('click', () => {
|
||||||
|
const isCollapsed = sidebar.classList.contains('w-20');
|
||||||
|
|
||||||
|
if (isCollapsed) {
|
||||||
|
sidebar.classList.remove('w-20');
|
||||||
|
sidebar.classList.add('w-64');
|
||||||
|
setTimeout(() => {
|
||||||
|
logoText.classList.remove('opacity-0');
|
||||||
|
sidebarTexts.forEach(text => text.classList.remove('opacity-0'));
|
||||||
|
}, 150);
|
||||||
|
} else {
|
||||||
|
logoText.classList.add('opacity-0');
|
||||||
|
sidebarTexts.forEach(text => text.classList.add('opacity-0'));
|
||||||
|
sidebar.classList.remove('w-64');
|
||||||
|
sidebar.classList.add('w-20');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -17,26 +17,27 @@ export default async function ImpostazioniPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-8">
|
||||||
<PageHeader title="Impostazioni" />
|
<PageHeader
|
||||||
|
title="Impostazioni"
|
||||||
|
subtitle="Configura le tariffe target e gestisci le tassonomie globali del sistema"
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="space-y-6 max-w-4xl">
|
<section className="rounded-xl border border-border-light bg-card p-6 shadow-card">
|
||||||
<div className="bg-white rounded-xl border border-[#e5e7eb] p-6 max-w-md">
|
<div className="max-w-2xl">
|
||||||
<h2 className="text-base font-semibold text-[#1a1a1a] mb-4">Analytics Profittabilità</h2>
|
<h2 className="mb-1 text-xs font-bold uppercase tracking-wider text-foreground">
|
||||||
|
Analytics Profittabilità
|
||||||
<form action={handleSave} className="space-y-4">
|
</h2>
|
||||||
<div>
|
<p className="mb-6 text-xs text-tertiary">
|
||||||
<label
|
Tariffa oraria target (€/h). Usata per calcolare il costo ideale e il delta
|
||||||
htmlFor="target_hourly_rate"
|
profitto/perdita per ogni progetto.
|
||||||
className="block text-sm font-medium text-[#1a1a1a] mb-1"
|
|
||||||
>
|
|
||||||
Tariffa oraria target (€/h)
|
|
||||||
</label>
|
|
||||||
<p className="text-xs text-[#71717a] mb-2">
|
|
||||||
Usata per calcolare il costo ideale e il delta profitto/perdita per ogni progetto.
|
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-[#71717a]">€</span>
|
<form action={handleSave} className="flex items-center gap-3">
|
||||||
|
<div className="relative rounded-lg border border-border transition-all duration-150 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
|
||||||
|
<span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-xs font-medium text-tertiary">
|
||||||
|
€
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
id="target_hourly_rate"
|
id="target_hourly_rate"
|
||||||
name="target_hourly_rate"
|
name="target_hourly_rate"
|
||||||
@@ -44,23 +45,25 @@ export default async function ImpostazioniPage() {
|
|||||||
step="0.01"
|
step="0.01"
|
||||||
min="0"
|
min="0"
|
||||||
defaultValue={targetRate.toFixed(2)}
|
defaultValue={targetRate.toFixed(2)}
|
||||||
className="border border-[#e5e7eb] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1A463C]/20 w-32"
|
aria-label="Tariffa oraria target"
|
||||||
|
className="w-36 bg-transparent py-2.5 pl-7 pr-12 font-mono text-xs font-semibold text-foreground focus:outline-none"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm text-[#71717a]">/h</span>
|
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-[11px] font-medium text-tertiary">
|
||||||
</div>
|
/h
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-[#1A463C] text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#1A463C]/90 transition-colors"
|
className="rounded-lg bg-primary px-5 py-2.5 text-xs font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
|
||||||
>
|
>
|
||||||
Salva
|
Salva
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<TaxonomyManager pools={pools} />
|
<TaxonomyManager pools={pools} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useTransition } from "react";
|
import { useState, useTransition } from "react";
|
||||||
import { X, Plus } from "lucide-react";
|
import { X } from "lucide-react";
|
||||||
|
|
||||||
export function PoolManager({
|
export function PoolManager({
|
||||||
label,
|
label,
|
||||||
@@ -18,8 +18,6 @@ export function PoolManager({
|
|||||||
const [isPending, startTransition] = useTransition();
|
const [isPending, startTransition] = useTransition();
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const canAdd = input.trim().length > 0;
|
|
||||||
|
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
const trimmed = input.trim();
|
const trimmed = input.trim();
|
||||||
if (!trimmed) return;
|
if (!trimmed) return;
|
||||||
@@ -51,32 +49,37 @@ export function PoolManager({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`rounded-lg border border-[#ececee] bg-[#fafafa] p-3.5 transition-opacity ${
|
className={`flex flex-col justify-between rounded-xl border border-border-light bg-muted/40 p-5 transition-opacity ${
|
||||||
isPending ? "opacity-60" : ""
|
isPending ? "opacity-60" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between mb-2.5">
|
<div>
|
||||||
<p className="text-sm font-medium text-[#1a1a1a]">{label}</p>
|
<div className="mb-3 flex items-center justify-between">
|
||||||
{pool.length > 0 && (
|
<span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
||||||
<span className="text-[11px] text-[#a1a1aa] tabular-nums">{pool.length}</span>
|
{label}
|
||||||
)}
|
</span>
|
||||||
|
<span className="rounded border border-border-light bg-card px-1.5 py-0.5 font-mono text-[10px] font-bold tabular-nums text-tertiary">
|
||||||
|
{pool.length}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-1.5 mb-3 min-h-[26px]">
|
<div className="mb-4 flex flex-wrap gap-1.5">
|
||||||
{pool.length === 0 ? (
|
{pool.length === 0 ? (
|
||||||
<span className="text-xs text-[#a1a1aa] italic">Nessun valore</span>
|
<div className="w-full py-6 text-center text-xs italic text-tertiary">
|
||||||
|
Nessun valore inserito
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
pool.map((v) => (
|
pool.map((v) => (
|
||||||
<span
|
<span
|
||||||
key={v}
|
key={v}
|
||||||
className="group inline-flex items-center gap-1 rounded-md border border-[#e5e7eb] bg-white pl-2.5 pr-1 py-1 text-xs text-[#27272a] shadow-[0_1px_1px_rgba(0,0,0,0.02)]"
|
className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-card py-1 pl-2.5 pr-1.5 text-[11px] font-semibold text-foreground shadow-sm"
|
||||||
>
|
>
|
||||||
{v}
|
{v}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleRemove(v)}
|
onClick={() => handleRemove(v)}
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
className="rounded p-0.5 text-[#c4c4c8] transition-colors hover:bg-red-50 hover:text-red-500 disabled:opacity-50"
|
className="rounded p-0.5 text-tertiary transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
|
||||||
aria-label={`Elimina ${v}`}
|
aria-label={`Elimina ${v}`}
|
||||||
title={`Elimina "${v}" ovunque`}
|
title={`Elimina "${v}" ovunque`}
|
||||||
>
|
>
|
||||||
@@ -86,8 +89,8 @@ export function PoolManager({
|
|||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={input}
|
value={input}
|
||||||
@@ -96,22 +99,12 @@ export function PoolManager({
|
|||||||
setError(null);
|
setError(null);
|
||||||
}}
|
}}
|
||||||
onKeyDown={onKeyDown}
|
onKeyDown={onKeyDown}
|
||||||
placeholder="Aggiungi valore"
|
placeholder="Aggiungi valore..."
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
aria-label={`Aggiungi valore a ${label}`}
|
aria-label={`Aggiungi valore a ${label}`}
|
||||||
className="h-8 w-full rounded-md border border-[#e5e7eb] bg-white pl-3 pr-9 text-sm text-[#1a1a1a] placeholder:text-[#a1a1aa] transition-shadow focus:border-[#1A463C]/30 focus:outline-none focus:ring-2 focus:ring-[#1A463C]/15 disabled:opacity-50"
|
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-xs text-foreground transition-colors placeholder:text-tertiary focus:border-primary focus:outline-none disabled:opacity-50"
|
||||||
/>
|
/>
|
||||||
<button
|
{error && <p className="mt-1.5 text-xs text-destructive">{error}</p>}
|
||||||
type="button"
|
|
||||||
onClick={handleAdd}
|
|
||||||
disabled={isPending || !canAdd}
|
|
||||||
aria-label={`Conferma aggiunta a ${label}`}
|
|
||||||
className="absolute right-1 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded text-[#1A463C] transition-colors hover:bg-[#1A463C]/10 disabled:text-[#c4c4c8] disabled:hover:bg-transparent"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{error && <p className="mt-1.5 text-xs text-red-500">{error}</p>}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,26 +25,28 @@ function Section({
|
|||||||
subtitle,
|
subtitle,
|
||||||
fields,
|
fields,
|
||||||
pools,
|
pools,
|
||||||
|
gridClass,
|
||||||
}: {
|
}: {
|
||||||
icon: React.ReactNode;
|
icon: React.ReactNode;
|
||||||
title: string;
|
title: string;
|
||||||
subtitle: string;
|
subtitle: string;
|
||||||
fields: FieldDef[];
|
fields: FieldDef[];
|
||||||
pools: Record<string, string[]>;
|
pools: Record<string, string[]>;
|
||||||
|
gridClass: string;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
|
<section className="rounded-xl border border-border-light bg-card p-6 shadow-card">
|
||||||
<div className="flex items-start gap-3 mb-5">
|
<div className="mb-6 flex items-start gap-3">
|
||||||
<div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-[#1A463C]/8 text-[#1A463C]">
|
<div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border-light bg-muted text-muted-foreground">
|
||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-base font-semibold text-[#1a1a1a] leading-tight">{title}</h2>
|
<h2 className="text-xs font-bold uppercase tracking-wider text-foreground">{title}</h2>
|
||||||
<p className="text-xs text-[#71717a] mt-0.5">{subtitle}</p>
|
<p className="mt-0.5 text-xs text-tertiary">{subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
<div className={`grid gap-6 border-t border-border-light pt-4 ${gridClass}`}>
|
||||||
{fields.map((f) => (
|
{fields.map((f) => (
|
||||||
<PoolManager
|
<PoolManager
|
||||||
key={f.id}
|
key={f.id}
|
||||||
@@ -55,28 +57,30 @@ function Section({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TaxonomyManager({ pools }: { pools: Record<string, string[]> }) {
|
export function TaxonomyManager({ pools }: { pools: Record<string, string[]> }) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-8">
|
||||||
<Section
|
<Section
|
||||||
icon={<Tag className="h-[18px] w-[18px]" />}
|
icon={<Tag className="h-5 w-5" />}
|
||||||
title="Tassonomie Offerte"
|
title="Tassonomie Offerte"
|
||||||
subtitle="Valori dei campi Categoria, Ticket, Tipo e Obiettivo dell'editor offerte."
|
subtitle="Valori dei campi Categoria, Ticket, Tipo e Obiettivo dell'editor offerte."
|
||||||
fields={OFFER_FIELDS}
|
fields={OFFER_FIELDS}
|
||||||
pools={pools}
|
pools={pools}
|
||||||
|
gridClass="grid-cols-1 md:grid-cols-2"
|
||||||
/>
|
/>
|
||||||
<Section
|
<Section
|
||||||
icon={<BookOpen className="h-[18px] w-[18px]" />}
|
icon={<BookOpen className="h-5 w-5" />}
|
||||||
title="Tassonomie Catalogo"
|
title="Tassonomie Catalogo"
|
||||||
subtitle="Valori dei campi Fase, Offerta e Pacchetto del catalogo servizi."
|
subtitle="Valori dei campi Fase, Offerta e Pacchetto del catalogo servizi."
|
||||||
fields={CATALOG_FIELDS}
|
fields={CATALOG_FIELDS}
|
||||||
pools={pools}
|
pools={pools}
|
||||||
|
gridClass="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
|
||||||
/>
|
/>
|
||||||
<p className="text-xs text-[#a1a1aa] leading-relaxed">
|
<p className="max-w-4xl px-2 text-xs leading-relaxed text-tertiary">
|
||||||
I valori si sincronizzano ovunque: creandone uno dall'editor offerte o dal catalogo
|
I valori si sincronizzano ovunque: creandone uno dall'editor offerte o dal catalogo
|
||||||
comparirà qui automaticamente. Eliminando un valore da qui viene rimosso ovunque sia usato.
|
comparirà qui automaticamente. Eliminando un valore da qui viene rimosso ovunque sia usato.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user