simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
26d752892ae73260f0cb2b38bbc8e739f60dbaad
clienthub/design-reference/pagina-offerte
T
simone 86e1499e8f feat: Quiet Luxury design system + Pipeline (ex-Lead) redesign 
- Design system foundations: Plus Jakarta Sans font, shadow-card/radius
  tokens in @theme, design-reference/DESIGN-SYSTEM.md with component inventory
- Collapsible admin shell (AdminShell): smooth w-64<->w-20 sidebar, new top
  header with "Admin" + avatar placeholder, localStorage-persisted state
- Rename route /admin/leads -> /admin/pipeline (redirect stubs preserved),
  nav label Lead -> Pipeline; DB table unchanged
- Reusable primitives: StatusBadge, SearchInput, SegmentedToggle (dual-theme)
- Luxury restyle of lead table, kanban (6 stages + @dnd-kit intact), PageHeader
- Tokenize editable-cell / option-multi-select for dark-mode legibility

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-10 16:16:44 +02:00

366 lines
20 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offerte — 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 richiesto */
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="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 text-emerald-400" 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>
<!-- Stato Attivo su Offerte -->
<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="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>
</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">Area di Lavoro</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">Demo Account</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 class="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<div>
<h1 class="text-2xl font-semibold text-slate-900 tracking-tight">Offerte</h1>
<p class="text-xs text-slate-400 mt-1">Configura e gestisci i pacchetti di offerta commerciali</p>
</div>
<!-- Bottone Nuova Offerta -->
<button class="bg-brand-dark hover:bg-brand-darkHover text-white text-xs font-medium tracking-wide px-5 py-3 rounded-lg flex items-center gap-2 transition-all duration-200 shadow-sm self-start sm:self-auto">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
Nuova Offerta
</button>
</div>
<!-- BARRA FILTRI -->
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-4">
<!-- Selettori Categorie di Offerta -->
<div class="flex flex-wrap gap-2">
<button class="px-4 py-2 text-xs font-medium bg-brand-dark text-white rounded-lg transition-colors">
Tutti
</button>
<button class="px-4 py-2 text-xs font-medium bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 border border-slate-200/60 rounded-lg transition-all duration-200">
Entry Offer
</button>
<button class="px-4 py-2 text-xs font-medium bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 border border-slate-200/60 rounded-lg transition-all duration-200">
Retainer Offer
</button>
<button class="px-4 py-2 text-xs font-medium bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 border border-slate-200/60 rounded-lg transition-all duration-200">
Signature Offer
</button>
</div>
<!-- Checkbox Opzione Archiviati -->
<label class="flex items-center gap-2.5 cursor-pointer group text-xs text-slate-500 hover:text-slate-800 transition-colors">
<input type="checkbox" class="w-4 h-4 rounded text-brand-dark border-slate-300 focus:ring-brand-dark focus:ring-opacity-25 transition-all" />
<span class="select-none font-medium">Mostra offerte archiviate</span>
</label>
</div>
<!-- GRID CARDS DELLE OFFERTE -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Mantenimento -->
<div class="bg-white p-6 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.02)] transition-all duration-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start gap-4 mb-4">
<div>
<h3 class="text-sm font-semibold text-slate-900">Mantenimento</h3>
<p class="text-[11px] text-slate-400 mt-0.5">(nei clienti già attivi)</p>
</div>
<span class="px-2 py-1 rounded text-[9px] font-semibold bg-blue-50 text-blue-600 border border-blue-100 uppercase tracking-wider">
Retainer Offer
</span>
</div>
<!-- Listino Tabellare Opzioni -->
<div class="border border-slate-100 rounded-lg overflow-hidden my-6">
<table class="w-full text-[11px]">
<thead>
<tr class="bg-slate-50 border-b border-slate-100 text-slate-400 font-semibold uppercase">
<th class="py-2 px-3 text-left">Tier</th>
<th class="py-2 px-3 text-right">Servizi</th>
<th class="py-2 px-3 text-right">Pubblico</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600 font-mono">
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">A</td>
<td class="py-2 px-3 text-right">€200,00</td>
<td class="py-2 px-3 text-right text-slate-400">€200,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">B</td>
<td class="py-2 px-3 text-right">€300,00</td>
<td class="py-2 px-3 text-right text-slate-400">€300,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">C</td>
<td class="py-2 px-3 text-right">€400,00</td>
<td class="py-2 px-3 text-right text-slate-400">€400,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 2: Sblocca Business -->
<div class="bg-white p-6 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.02)] transition-all duration-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start gap-4 mb-4">
<div>
<h3 class="text-sm font-semibold text-slate-900">Sblocca Business</h3>
<p class="text-[11px] text-slate-400 mt-0.5">Avviamento strategico</p>
</div>
<span class="px-2 py-1 rounded text-[9px] font-semibold bg-purple-50 text-purple-600 border border-purple-100 uppercase tracking-wider">
Entry Offer
</span>
</div>
<!-- Listino Tabellare Opzioni -->
<div class="border border-slate-100 rounded-lg overflow-hidden my-6">
<table class="w-full text-[11px]">
<thead>
<tr class="bg-slate-50 border-b border-slate-100 text-slate-400 font-semibold uppercase">
<th class="py-2 px-3 text-left">Tier</th>
<th class="py-2 px-3 text-right">Servizi</th>
<th class="py-2 px-3 text-right">Pubblico</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600 font-mono">
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">A</td>
<td class="py-2 px-3 text-right">€2.600,00</td>
<td class="py-2 px-3 text-right text-slate-400">€400,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">B</td>
<td class="py-2 px-3 text-right">€3.300,00</td>
<td class="py-2 px-3 text-right text-slate-400">€600,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">C</td>
<td class="py-2 px-3 text-right">€3.900,00</td>
<td class="py-2 px-3 text-right text-slate-400">€1.200,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 3: Web Domination -->
<div class="bg-white p-6 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.02)] transition-all duration-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start gap-4 mb-4">
<div>
<h3 class="text-sm font-semibold text-slate-900">Web Domination</h3>
<p class="text-[11px] text-slate-400 mt-0.5">Soluzione enterprise omnicanale</p>
</div>
<span class="px-2 py-1 rounded text-[9px] font-semibold bg-amber-50 text-amber-700 border border-amber-100 uppercase tracking-wider">
Signature Offer
</span>
</div>
<!-- Listino Tabellare Opzioni -->
<div class="border border-slate-100 rounded-lg overflow-hidden my-6">
<table class="w-full text-[11px]">
<thead>
<tr class="bg-slate-50 border-b border-slate-100 text-slate-400 font-semibold uppercase">
<th class="py-2 px-3 text-left">Tier</th>
<th class="py-2 px-3 text-right">Servizi</th>
<th class="py-2 px-3 text-right">Pubblico</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600 font-mono">
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">A</td>
<td class="py-2 px-3 text-right">€9.800,00</td>
<td class="py-2 px-3 text-right text-slate-400">€6.000,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">B</td>
<td class="py-2 px-3 text-right">€20.250,00</td>
<td class="py-2 px-3 text-right text-slate-400">€9.000,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">C</td>
<td class="py-2 px-3 text-right">€25.250,00</td>
<td class="py-2 px-3 text-right text-slate-400">€12.000,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card 4: Business in Banca -->
<div class="bg-white p-6 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] hover:shadow-[0_8px_30px_rgba(0,0,0,0.02)] transition-all duration-200 flex flex-col justify-between">
<div>
<div class="flex justify-between items-start gap-4 mb-4">
<div>
<h3 class="text-sm font-semibold text-slate-900">Business in Banca</h3>
<p class="text-[11px] text-slate-400 mt-0.5">Controllo tesoreria integrato</p>
</div>
<span class="px-2 py-1 rounded text-[9px] font-semibold bg-blue-50 text-blue-600 border border-blue-100 uppercase tracking-wider">
Retainer Offer
</span>
</div>
<!-- Listino Tabellare Opzioni -->
<div class="border border-slate-100 rounded-lg overflow-hidden my-6">
<table class="w-full text-[11px]">
<thead>
<tr class="bg-slate-50 border-b border-slate-100 text-slate-400 font-semibold uppercase">
<th class="py-2 px-3 text-left">Tier</th>
<th class="py-2 px-3 text-right">Servizi</th>
<th class="py-2 px-3 text-right">Pubblico</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600 font-mono">
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">A</td>
<td class="py-2 px-3 text-right">€200,00</td>
<td class="py-2 px-3 text-right text-slate-400">€200,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">B</td>
<td class="py-2 px-3 text-right">€400,00</td>
<td class="py-2 px-3 text-right text-slate-400">€300,00</td>
</tr>
<tr>
<td class="py-2 px-3 font-semibold text-slate-800">C</td>
<td class="py-2 px-3 text-right">€900,00</td>
<td class="py-2 px-3 text-right text-slate-400">€500,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</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>
Reference in New Issue View Git Blame Copy Permalink