feat: Dashboard admin redesign to Quiet Luxury + client profitability widget
Replica il mock design-reference/pagina-dashboard: layout condensato a schermata singola (4 KPI + griglia 2/3-1/3), token semantici per dual-theme. - Nuova query getClientProfitability(year): valore orario reale per cliente (contrattualizzato / ore tracciate) con badge margine, target 100 €/h - Nuovo widget ClientProfitability "Analisi Oraria & Redditività Clienti" - Rewrite /admin: KPI strip + Cashflow + Redditività | Follow-up + Offerte Più Richieste. Rimossi chart mensile, card extra, barre ore/cliente - Tokenizzati ForecastChart, OffersSoldChart, FollowUpWidget, YearSelector (ora pill interattiva); rimosso MonthlyChart e prop availableYears inutile - DESIGN-SYSTEM.md: inventario + note dashboard (applied 2026-07-11) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -148,6 +148,8 @@ across all future admin pages.
|
||||
| `LeadsViewToggle` | `src/components/admin/leads/LeadsViewToggle.tsx` | Wires `SearchInput` + `SegmentedToggle` together with the table/kanban views. |
|
||||
| `MilestoneStepper` | `src/components/client/MilestoneStepper.tsx` | Client-portal horizontal milestone stepper: one node per real phase, connecting line filled by `global_progress_pct`. Done = filled `bg-primary` ✓, active = `border-primary` outline, upcoming = `bg-muted`. |
|
||||
| `LeadDetail` | `src/components/admin/leads/LeadDetail.tsx` | Lead detail page (`/admin/pipeline/[id]`): bespoke header (name + inline `StatusBadge` + action bar), asymmetric `lg:grid-cols-3` layout (1/3 profile card w/ icon-chip rows + tags, 2/3 Note/Follow-up + unified timeline). |
|
||||
| `ClientProfitability` | `src/components/admin/dashboard/ClientProfitability.tsx` | Dashboard widget: valore orario reale per cliente (`getClientProfitability` → contrattualizzato ÷ ore tracciate) con badge margine (Ottimo `bg-primary/10 text-primary` / In Linea `bg-muted`). |
|
||||
| `YearSelector` | `src/components/admin/YearSelector.tsx` | Selettore anno restilizzato a pill (`rounded-full border-border bg-card shadow-card`), frecce ←/→, valore `font-mono`. Guida i dati year-scoped della dashboard via `?year=`. |
|
||||
|
||||
**Unified timeline pattern**: activities + transcripts merged into one
|
||||
reverse-chronological "Storico delle Interazioni". Vertical connector = absolute
|
||||
@@ -157,6 +159,24 @@ expandable (`line-clamp-2` → "Mostra tutto/meno"); activity nodes are muted
|
||||
(`bg-muted border-border`). Dates are `font-mono` — activities relative
|
||||
(`formatDistanceToNow`), transcripts absolute (`d MMMM yyyy`).
|
||||
|
||||
### Admin Dashboard restyle notes
|
||||
|
||||
The `/admin` dashboard was migrated to "Quiet Luxury" (applied 2026-07-11),
|
||||
replicating `design-reference/pagina-dashboard`. It is a condensed single-screen
|
||||
layout: no in-`<main>` `PageHeader` (sidebar + shell header carry the chrome).
|
||||
|
||||
- **KPI strip**: 4 `bg-card` metric cards (Clienti Attivi · Contrattualizzato ·
|
||||
Incassato Reale · Ore Tracciate). Value `text-2xl font-bold font-mono`, label
|
||||
`text-[10px] uppercase text-muted-foreground`. Positive delta uses
|
||||
`text-emerald-600 dark:text-emerald-400`.
|
||||
- **Griglia `lg:grid-cols-3`**: 2/3 col = `ForecastChart` (istogramma flussi 12
|
||||
mesi, mese prossimo evidenziato `bg-primary`) + `ClientProfitability`; 1/3 col =
|
||||
`FollowUpWidget` (count pill amber) + `OffersSoldChart` ("Offerte Più Richieste").
|
||||
- **Year selector** interattivo (`YearSelector`) in una toolbar top-right; governa
|
||||
i KPI year-scoped + redditività. Il forecast è rolling-12-mesi (non year-scoped).
|
||||
- Widget rimossi dal legacy: chart incassi mensili, card "Da incassare"/"Clienti
|
||||
acquisiti", barre "Ore per cliente" (sostituite dalla redditività oraria).
|
||||
|
||||
### Client Portal restyle notes
|
||||
|
||||
The `/client/[token]` portal was migrated to the same "Quiet Luxury" tokens
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard — 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',
|
||||
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">
|
||||
<!-- Stato Attivo su Dashboard -->
|
||||
<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="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>
|
||||
<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="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 text-emerald-400" 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>
|
||||
<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="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.066c-1.543.94-3.31-.826-2.37-2.37a1.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">Panoramica Aziendale</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 DASHBOARD -->
|
||||
<main class="flex-1 p-8 lg:p-10 max-w-[1400px] w-full mx-auto flex flex-col gap-8 overflow-y-auto">
|
||||
|
||||
<!-- STRISCIA METRICHE CHIAVE (KPI STRIP) -->
|
||||
<section class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<!-- Metric 1 -->
|
||||
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
|
||||
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Clienti Attivi</span>
|
||||
<div class="flex items-baseline gap-2 mt-1">
|
||||
<span class="text-2xl font-bold text-slate-900">4</span>
|
||||
<span class="text-xs text-emerald-600 font-medium">+1 questo mese</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metric 2 -->
|
||||
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
|
||||
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Contrattualizzato</span>
|
||||
<div class="flex items-baseline gap-2 mt-1">
|
||||
<span class="text-2xl font-bold text-slate-900">19.000€</span>
|
||||
<span class="text-xs text-slate-400">Totale anno 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metric 3 -->
|
||||
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
|
||||
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Incassato Reale</span>
|
||||
<div class="flex items-baseline gap-2 mt-1">
|
||||
<span class="text-2xl font-bold text-slate-900 text-emerald-800">5.300€</span>
|
||||
<span class="text-xs text-slate-400">28% del totale</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metric 4 -->
|
||||
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
|
||||
<span class="text-[10px] uppercase font-bold text-slate-400 tracking-wider">Ore Tracciate</span>
|
||||
<div class="flex items-baseline gap-2 mt-1">
|
||||
<span class="text-2xl font-bold text-slate-900">31.5h</span>
|
||||
<span class="text-xs text-slate-400">Su progetti attivi</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- SEZIONE CENTRALE: GRIGLIA CONTENUTI -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- COLONNA COMPLESSA (2/3): Grafico Cashflow & Analisi Profitto -->
|
||||
<div class="lg:col-span-2 flex flex-col gap-8">
|
||||
|
||||
<!-- Grafico Cashflow Previsionale (12 Mesi) -->
|
||||
<div class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Previsione Flussi di Cassa (12 Mesi)</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Stima basata su retainer attivi e saldi dilazionati</p>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-slate-800 bg-slate-50 px-2.5 py-1 rounded border border-slate-100 font-mono">2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Istogramma Semplificato (Rappresentazione SVG pulita per stabilità di rendering) -->
|
||||
<div class="h-48 flex items-end justify-between gap-2 pt-4 border-b border-slate-100">
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Lug: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Lug</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-brand-dark rounded-t h-40 hover:bg-brand-dark transition-all" title="Ago: €1.200"></div>
|
||||
<span class="text-[10px] text-slate-900 font-bold">Ago</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-24 hover:bg-brand-dark transition-all" title="Set: €400"></div>
|
||||
<span class="text-[10px] text-slate-400">Set</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Ott: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Ott</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Nov: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Nov</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Dic: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Dic</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Gen: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Gen</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-24 hover:bg-brand-dark transition-all" title="Feb: €450"></div>
|
||||
<span class="text-[10px] text-slate-400">Feb</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Mar: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Mar</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full bg-slate-200/80 rounded-t h-20 hover:bg-brand-dark transition-all" title="Apr: €200"></div>
|
||||
<span class="text-[10px] text-slate-400">Apr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analisi di Profitto Orario Effettivo (Nuovo Upgrade Strategico) -->
|
||||
<div class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Analisi Oraria & Redditività Clienti</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Item 1 -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-slate-100 bg-slate-50/30">
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-slate-800">Mario Rossi (Web Domination)</h4>
|
||||
<p class="text-[10px] text-slate-400">Tracciate: 30.0h — Valore Orario Target: €100/h</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-100">€233,33 /h Reali</span>
|
||||
<p class="text-[9px] text-slate-400 mt-1">Margine Ottimo</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="flex items-center justify-between p-3 rounded-lg border border-slate-100 bg-slate-50/30">
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-slate-800">Gianfranco Barban (Consulenza)</h4>
|
||||
<p class="text-[10px] text-slate-400">Tracciate: 1.5h — Valore Orario Target: €100/h</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-bold text-slate-700 bg-slate-100 px-2 py-0.5 rounded border border-slate-200">€133,33 /h Reali</span>
|
||||
<p class="text-[9px] text-slate-400 mt-1">In Linea</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COLONNA COMPATTA (1/3): Follow-up, Offerte più vendute -->
|
||||
<div class="lg:col-span-1 flex flex-col gap-8">
|
||||
|
||||
<!-- Box Operativo: Follow-up -->
|
||||
<div class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Follow-up Attivi</h3>
|
||||
<span class="text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-100 px-1.5 py-0.5 rounded-full">2</span>
|
||||
</div>
|
||||
|
||||
<!-- Lista Contatti da Richiamare -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 border border-slate-100 rounded-lg hover:border-slate-200 transition-colors">
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-slate-800">Nome Cognome</h4>
|
||||
<p class="text-[10px] text-slate-400">Azienda Srl — Contattare</p>
|
||||
</div>
|
||||
<a href="#" class="text-[11px] font-bold text-brand-dark hover:text-brand-darkHover inline-flex items-center gap-0.5">
|
||||
Apri ➔
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-3 border border-slate-100 rounded-lg hover:border-slate-200 transition-colors">
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-slate-800">Mario Rossi</h4>
|
||||
<p class="text-[10px] text-slate-400">Fissare Kickoff</p>
|
||||
</div>
|
||||
<a href="#" class="text-[11px] font-bold text-brand-dark hover:text-brand-darkHover inline-flex items-center gap-0.5">
|
||||
Apri ➔
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Distrubuzione Offerte Vendute -->
|
||||
<div class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-5">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Offerte Più Richieste</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between text-xs text-slate-600 mb-1">
|
||||
<span class="font-semibold text-slate-800">Web Domination (Tier B)</span>
|
||||
<span class="font-mono">1</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-brand-dark h-full" style="width: 50%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between text-xs text-slate-600 mb-1">
|
||||
<span class="font-semibold text-slate-800">Mantenimento (Tier A)</span>
|
||||
<span class="font-mono">1</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-brand-dark h-full" style="width: 50%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</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
Block a user