CRM_Data_Visualization_Component
Un componente di visualizzazione dei dati CRM complesso e reattivo con uno stile acquerello/artistico, una combinazione di colori monocromatica e il supporto della modalità scura. Progettato per gli strumenti aziendali.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 sm:mb-10">
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight mb-2 sm:mb-0">
Customer Insights Dashboard
</h1>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="date" class="block w-full px-4 py-2 mt-1 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
</div>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300 ease-in-out">
Export Data
</button>
</div>
</div>
<!-- Main Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Sales Overview Card -->
<div class="col-span-1 lg:col-span-2 bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Total Sales Performance</h2>
<div class="flex flex-col md:flex-row items-center justify-between mb-6">
<div class="text-5xl font-extrabold text-blue-600 dark:text-blue-400 leading-none mb-4 md:mb-0">$12,450k</div>
<div class="flex items-center text-green-500 dark:text-green-400 text-lg font-semibold">
<svg class="w-6 h-6 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L11 2m7 17a3 3 0 01-6 0h-1m4 0a3 3 0 01-6 0m-4 0a3 3 0 01-6 0h1m4 0a3 3 0 01-6 0h-1m4 0a3 3 0 01-6 0"></path>
</svg>
+15.2% <span class="text-gray-500 dark:text-gray-400 text-sm ml-1">vs last month</span>
</div>
</div>
<!-- Placeholder for a complex sales chart - usually an SVG or JS canvas -->
<div class="w-full h-64 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-700 dark:to-blue-800 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-300 italic text-sm border border-blue-300 dark:border-blue-600 shadow-inner overflow-hidden relative">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/brushed-alum.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
Sales Trend Over Time (Chart Placeholder)
<div class="w-full h-full absolute inset-0 bg-gradient-to-t from-transparent to-white/5 dark:to-black/5"></div>
</div>
</div>
<!-- Customer Satisfaction Card -->
<div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Customer Satisfaction (CSAT)</h2>
<div class="flex flex-col items-center justify-center h-48">
<div class="relative w-36 h-36 border-4 border-blue-300 dark:border-blue-600 rounded-full flex items-center justify-center font-extrabold text-5xl text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20">
88<span class="text-2xl">%</span>
<div class="absolute inset-0 rounded-full border-4 border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);"></div>
<div class="absolute inset-0 rounded-full border-4 border-blue-100 dark:border-blue-800"></div>
</div>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-300">Excellent</p>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
Based on 1,234 recent responses.
</div>
</div>
<!-- Leads by Source Card -->
<div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Leads by Source</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-lg">Organic Search</span>
<div class="flex items-center">
<div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
<div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[70%]"></div>
</div>
<span class="font-semibold text-blue-600 dark:text-blue-400">70%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Social Media</span>
<div class="flex items-center">
<div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
<div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[45%]"></div>
</div>
<span class="font-semibold text-blue-600 dark:text-blue-400">45%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Referral</span>
<div class="flex items-center">
<div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
<div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[28%]"></div>
</div>
<span class="font-semibold text-blue-600 dark:text-blue-400">28%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Paid Ads</span>
<div class="flex items-center">
<div class="w-24 h-3 bg-blue-200 dark:bg-blue-700 rounded-full relative mr-2">
<div class="absolute h-full bg-blue-600 dark:bg-blue-400 rounded-full w-[15%]"></div>
</div>
<span class="font-semibold text-blue-600 dark:text-blue-400">15%</span>
</div>
</div>
</div>
</div>
<!-- Recent Activities Feed Card -->
<div class="col-span-1 md:col-span-2 bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Recent Customer Activities</h2>
<div class="space-y-5 max-h-96 overflow-y-auto pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-blue-600 dark:scrollbar-track-blue-900 scrollbar-thin">
<!-- Activity Item 1 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</span> updated <span class="font-semibold">Service Request #3456</span> status to <span class="font-semibold text-green-600 dark:text-green-400">'Resolved'</span>.
</p>
<p class="text-sm text-gray-500 mt-1 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Activity Item 2 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/men/24.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">John Smith</span> added a new prospect <span class="font-semibold">'Acme Corp'</span> to sales pipeline.
</p>
<p class="text-sm text-gray-500 mt-1 dark:text-gray-400">Yesterday</p>
</div>
</div>
<!-- Activity Item 3 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Sarah Lee</span> sent a marketing email campaign to <span class="font-semibold">'New Leads'</span> segment.
</p>
<p class="text-sm text-gray-500 mt-1 dark:text-gray-400">3 days ago</p>
</div>
</div>
<!-- Activity Item 4 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">David Kim</span> closed a deal with <span class="font-semibold">'Global Solutions Ltd.'</span> worth <span class="font-semibold text-blue-600 dark:text-blue-400">$8,500</span>.
</p>
<p class="text-sm text-gray-500 mt-1 dark:text-gray-400">4 days ago</p>
</div>
</div>
<!-- Activity Item 5 -->
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600 shadow-sm" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-blue-600 dark:text-blue-400">Emily Chen</span> scheduled a follow-up call with <span class="font-semibold">'Innovatech'</span> for next Tuesday.
</p>
<p class="text-sm text-gray-500 mt-1 dark:text-gray-400">5 days ago</p>
</div>
</div>
</div>
</div>
<!-- Top Performing Campaigns Card -->
<div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Top Performing Campaigns</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-lg">Q4 Marketing Blitz</span>
<span class="font-semibold text-blue-600 dark:text-blue-400">+22% ROI</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">New Product Launch</span>
<span class="font-semibold text-blue-600 dark:text-blue-400">+18% ROI</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Holiday Sale 2023</span>
<span class="font-semibold text-blue-600 dark:text-blue-400">+15% ROI</span>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Customer Retention</span>
<span class="font-semibold text-blue-600 dark:text-blue-400">+10% ROI</span>
</div>
</div>
</div>
<!-- Customer Churn Rate Card -->
<div class="bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.005] transition-all duration-300 ease-in-out">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply pointer-events-none"></div>
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Customer Churn Rate</h2>
<div class="flex flex-col items-center justify-center h-48">
<div class="text-5xl font-extrabold text-red-600 dark:text-red-400 leading-none mb-2">3.8<span class="text-2xl">%</span></div>
<p class="text-lg text-gray-600 dark:text-gray-300">Monthly Churn</p>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Target: <span class="font-semibold">3.0%</span></p>
</div>
</div>
</div>
</div>
<!-- To make the scrollbar styled, you might need to add this to your Tailwind config plugins or a custom CSS: -->
<!-- @layer components {
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--tw-blue-400) var(--tw-blue-100);
}
.scrollbar-thumb-blue-400 {
scrollbar-color: var(--tw-blue-400) var(--tw-blue-100);
}
.dark .scrollbar-thumb-blue-600 {
scrollbar-color: var(--tw-blue-600) var(--tw-blue-900);
}
/* For Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: theme('colors.blue.100');
}
.dark .scrollbar-thin::-webkit-scrollbar-track {
background: theme('colors.blue.900');
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: theme('colors.blue.400');
border-radius: 20px;
border: 2px solid theme('colors.blue.100');
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background-color: theme('colors.blue.600');
border: 2px solid theme('colors.blue.900');
}
}
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 3s linear infinite;
}
-->Componenti correlati
Componente di visualizzazione dei dati (neon/bagliore)
Un componente complesso per la visualizzazione dei dati per applicazioni SaaS con effetti neon/bagliore, colori neutri caldi e reattività completa con supporto della modalità scura.
Componente di visualizzazione dei dati
Componente di visualizzazione dei dati di neumorfismo con effetti reattivi e supporto per temi scuri.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati progettato in stile brutalista con Tailwind CSS, con layout reattivi e supporto per temi scuri.