simone
86e1499e8f
- 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>
405 lines
22 KiB
Plaintext
405 lines
22 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lead Pipeline — Luxury Redesign</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>
|
|
/* Transizione fluida per l'apertura/chiusura della sidebar */
|
|
.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);
|
|
}
|
|
/* Stile per l'effetto di trascinamento nel Kanban */
|
|
.dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.98);
|
|
}
|
|
.drag-over {
|
|
background-color: rgba(26, 70, 60, 0.03);
|
|
border-color: rgba(26, 70, 60, 0.2);
|
|
}
|
|
</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-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="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" 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>
|
|
</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 (Contiene i controlli globali) -->
|
|
<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 Minimal per Aprire/Chiudere la 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 DINAMICO -->
|
|
<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">Lead Pipeline</h1>
|
|
<p class="text-xs text-slate-400 mt-1">Gestisci e monitora i tuoi contatti commerciali</p>
|
|
</div>
|
|
|
|
<!-- Pulsante Nuovo Lead -->
|
|
<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>
|
|
Nuovo Lead
|
|
</button>
|
|
</div>
|
|
|
|
<!-- AZIONI: BARRA DI RICERCA & SELETTORE VISTA -->
|
|
<div class="flex flex-col md:flex-row justify-between md:items-center gap-4">
|
|
<!-- Barra di ricerca -->
|
|
<div class="relative w-full md:w-80">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Cerca lead..."
|
|
class="w-full pl-10 pr-4 py-2.5 bg-white text-sm text-slate-800 placeholder-slate-400 border border-slate-200/80 rounded-lg focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all duration-200"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Selettore Vista (Lista vs Kanban) -->
|
|
<div class="bg-slate-200/50 p-1 rounded-lg flex gap-1 self-start md:self-auto">
|
|
<button id="btn-view-list" class="px-5 py-1.5 rounded-md text-xs font-medium bg-white text-slate-800 shadow-sm transition-all duration-200">
|
|
Lista
|
|
</button>
|
|
<button id="btn-view-kanban" class="px-5 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-800 transition-all duration-200">
|
|
Kanban
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VISTA 1: TABELLA (Default) -->
|
|
<div id="view-list" class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] overflow-hidden transition-opacity duration-300">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-slate-100/80 bg-slate-50/50 text-slate-400 text-[11px] font-semibold uppercase tracking-wider">
|
|
<th class="py-4 px-6">Nome</th>
|
|
<th class="py-4 px-6">Email</th>
|
|
<th class="py-4 px-6">Telefono</th>
|
|
<th class="py-4 px-6">Azienda</th>
|
|
<th class="py-4 px-6 text-center">Stato</th>
|
|
<th class="py-4 px-6">Prossima Azione</th>
|
|
<th class="py-4 px-6 text-center">Tag</th>
|
|
<th class="py-4 px-6 text-right">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100/60 text-sm">
|
|
<tr class="hover:bg-slate-50/30 transition-all duration-150">
|
|
<td class="py-4 px-6 font-medium text-slate-900">Nome Cognome</td>
|
|
<td class="py-4 px-6 text-slate-500 text-xs">test@gmail.com</td>
|
|
<td class="py-4 px-6 text-slate-500 text-xs font-mono">+39 444 3322111</td>
|
|
<td class="py-4 px-6 text-slate-600">Azienda Srl</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-semibold tracking-wide bg-purple-50 text-purple-600 border border-purple-100 uppercase">
|
|
qualified
|
|
</span>
|
|
</td>
|
|
<td class="py-4 px-6 text-slate-400">—</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<button class="inline-flex items-center justify-center w-6 h-6 rounded-full border border-dashed border-slate-200 text-slate-400 hover:text-slate-600 hover:border-slate-400 transition-all duration-200">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
</button>
|
|
</td>
|
|
<td class="py-4 px-6 text-right">
|
|
<a href="#" class="text-xs font-medium text-brand-dark hover:text-brand-darkHover inline-flex items-center gap-1 group transition-colors">
|
|
Dettagli
|
|
<svg class="w-3 h-3 transform group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="border-t border-slate-100 px-6 py-4 flex items-center justify-between text-xs text-slate-400">
|
|
<span>Mostrando 1 di 1 lead</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VISTA 2: KANBAN (Nascosta all'avvio) -->
|
|
<div id="view-kanban" class="hidden grid grid-cols-1 md:grid-cols-4 gap-6 transition-opacity duration-300">
|
|
|
|
<!-- Colonna 1: Nuovo -->
|
|
<div class="kanban-column bg-slate-50/75 rounded-xl border border-slate-100 p-4 flex flex-col gap-4 min-h-[450px]" data-status="new">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Nuovo</span>
|
|
<span class="text-xs font-medium bg-slate-200/60 text-slate-600 px-2 py-0.5 rounded-full count">0</span>
|
|
</div>
|
|
<div class="cards-container flex-1 flex flex-col gap-3">
|
|
<!-- Esempio di lead spostabile -->
|
|
<div id="lead-card-2" class="kanban-card bg-white p-4 rounded-lg border border-slate-200/80 shadow-sm cursor-grab active:cursor-grabbing hover:border-brand-dark/30 hover:shadow-md transition-all duration-200" draggable="true">
|
|
<div class="flex justify-between items-start gap-2 mb-2">
|
|
<h4 class="text-xs font-semibold text-slate-800">Marco Rossi</h4>
|
|
<span class="text-[9px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100 px-1.5 py-0.5 rounded uppercase">New</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-400 mb-3">rossi@azienda.it</p>
|
|
<div class="flex justify-between items-center text-[10px] text-slate-500">
|
|
<span class="font-medium">Rossi Consulting</span>
|
|
<span>Tag +</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonna 2: Contattato -->
|
|
<div class="kanban-column bg-slate-50/75 rounded-xl border border-slate-100 p-4 flex flex-col gap-4 min-h-[450px]" data-status="contacted">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Contattato</span>
|
|
<span class="text-xs font-medium bg-slate-200/60 text-slate-600 px-2 py-0.5 rounded-full count">0</span>
|
|
</div>
|
|
<div class="cards-container flex-1 flex flex-col gap-3"></div>
|
|
</div>
|
|
|
|
<!-- Colonna 3: Qualificato -->
|
|
<div class="kanban-column bg-slate-50/75 rounded-xl border border-slate-100 p-4 flex flex-col gap-4 min-h-[450px]" data-status="qualified">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Qualificato</span>
|
|
<span class="text-xs font-medium bg-slate-200/60 text-slate-600 px-2 py-0.5 rounded-full count">1</span>
|
|
</div>
|
|
<div class="cards-container flex-1 flex flex-col gap-3">
|
|
|
|
<!-- Lead proveniente dalla lista originale -->
|
|
<div id="lead-card-1" class="kanban-card bg-white p-4 rounded-lg border border-slate-200/80 shadow-sm cursor-grab active:cursor-grabbing hover:border-brand-dark/30 hover:shadow-md transition-all duration-200" draggable="true">
|
|
<div class="flex justify-between items-start gap-2 mb-2">
|
|
<h4 class="text-xs font-semibold text-slate-800">Nome Cognome</h4>
|
|
<span class="text-[9px] font-semibold bg-purple-50 text-purple-600 border border-purple-100 px-1.5 py-0.5 rounded uppercase">Qualified</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-400 mb-3">test@gmail.com</p>
|
|
<div class="flex justify-between items-center text-[10px] text-slate-500">
|
|
<span class="font-medium">Azienda Srl</span>
|
|
<span>Tag +</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonna 4: In Trattativa -->
|
|
<div class="kanban-column bg-slate-50/75 rounded-xl border border-slate-100 p-4 flex flex-col gap-4 min-h-[450px]" data-status="negotiation">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-2">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Trattativa</span>
|
|
<span class="text-xs font-medium bg-slate-200/60 text-slate-600 px-2 py-0.5 rounded-full count">0</span>
|
|
</div>
|
|
<div class="cards-container flex-1 flex flex-col gap-3"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- SCRIPT LOGICA (Gestione Sidebar e Kanban) -->
|
|
<script>
|
|
// --- GESTIONE SIDEBAR COLLASSABILE ---
|
|
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', () => {
|
|
// Verifica lo stato attuale
|
|
const isCollapsed = sidebar.classList.contains('w-20');
|
|
|
|
if (isCollapsed) {
|
|
// Espandi
|
|
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 {
|
|
// Collassa
|
|
logoText.classList.add('opacity-0');
|
|
sidebarTexts.forEach(text => text.classList.add('opacity-0'));
|
|
sidebar.classList.remove('w-64');
|
|
sidebar.classList.add('w-20');
|
|
}
|
|
});
|
|
|
|
// --- INTERRUTTORE DI VISTA (LISTA / KANBAN) ---
|
|
const btnViewList = document.getElementById('btn-view-list');
|
|
const btnViewKanban = document.getElementById('btn-view-kanban');
|
|
const viewList = document.getElementById('view-list');
|
|
const viewKanban = document.getElementById('view-kanban');
|
|
|
|
btnViewList.addEventListener('click', () => {
|
|
// Attiva vista Lista
|
|
viewKanban.classList.add('hidden');
|
|
viewList.classList.remove('hidden');
|
|
|
|
// Regola stili pulsanti
|
|
btnViewList.className = "px-5 py-1.5 rounded-md text-xs font-medium bg-white text-slate-800 shadow-sm transition-all duration-200";
|
|
btnViewKanban.className = "px-5 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-800 transition-all duration-200";
|
|
});
|
|
|
|
btnViewKanban.addEventListener('click', () => {
|
|
// Attiva vista Kanban
|
|
viewList.classList.add('hidden');
|
|
viewKanban.classList.remove('hidden');
|
|
|
|
// Regola stili pulsanti
|
|
btnViewKanban.className = "px-5 py-1.5 rounded-md text-xs font-medium bg-white text-slate-800 shadow-sm transition-all duration-200";
|
|
btnViewList.className = "px-5 py-1.5 rounded-md text-xs font-medium text-slate-500 hover:text-slate-800 transition-all duration-200";
|
|
});
|
|
|
|
// --- FUNZIONALITÀ DRAG AND DROP KANBAN ---
|
|
const cards = document.querySelectorAll('.kanban-card');
|
|
const columns = document.querySelectorAll('.kanban-column');
|
|
|
|
cards.forEach(card => {
|
|
card.addEventListener('dragstart', () => {
|
|
card.classList.add('dragging');
|
|
});
|
|
|
|
card.addEventListener('dragend', () => {
|
|
card.classList.remove('dragging');
|
|
updateColumnCounts();
|
|
});
|
|
});
|
|
|
|
columns.forEach(column => {
|
|
const container = column.querySelector('.cards-container');
|
|
|
|
column.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
column.classList.add('drag-over');
|
|
});
|
|
|
|
column.addEventListener('dragleave', () => {
|
|
column.classList.remove('drag-over');
|
|
});
|
|
|
|
column.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
column.classList.remove('drag-over');
|
|
|
|
const draggingCard = document.querySelector('.dragging');
|
|
if (draggingCard) {
|
|
container.appendChild(draggingCard);
|
|
|
|
// Cambia visivamente il badge interno dello stato in base alla destinazione
|
|
const badge = draggingCard.querySelector('span');
|
|
const status = column.getAttribute('data-status');
|
|
|
|
if (status === 'new') {
|
|
badge.innerText = 'New';
|
|
badge.className = 'text-[9px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100 px-1.5 py-0.5 rounded uppercase';
|
|
} else if (status === 'contacted') {
|
|
badge.innerText = 'Contacted';
|
|
badge.className = 'text-[9px] font-semibold bg-blue-50 text-blue-600 border border-blue-100 px-1.5 py-0.5 rounded uppercase';
|
|
} else if (status === 'qualified') {
|
|
badge.innerText = 'Qualified';
|
|
badge.className = 'text-[9px] font-semibold bg-purple-50 text-purple-600 border border-purple-100 px-1.5 py-0.5 rounded uppercase';
|
|
} else if (status === 'negotiation') {
|
|
badge.innerText = 'In Trattativa';
|
|
badge.className = 'text-[9px] font-semibold bg-amber-50 text-amber-600 border border-amber-100 px-1.5 py-0.5 rounded uppercase';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Funzione d'appoggio per aggiornare il conteggio numerico nelle colonne
|
|
function updateColumnCounts() {
|
|
columns.forEach(column => {
|
|
const countBadge = column.querySelector('.count');
|
|
const cardCount = column.querySelector('.cards-container').children.length;
|
|
countBadge.innerText = cardCount;
|
|
});
|
|
}
|
|
|
|
// Esegui inizialmente per impostare i corretti conteggi
|
|
updateColumnCounts();
|
|
</script>
|
|
</body>
|
|
</html> |