CRM_Data_Visualization_Component
Un composant de visualisation de données CRM complexe et réactif avec un style aquarelle/artistique, une palette de couleurs monochromatiques et une prise en charge du mode sombre. Conçu pour les outils professionnels.
HTML Code
<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;
}
-->Composants associés
Composant Composants de visualisation de données de commerce électronique
Un composant de visualisation de données pour le commerce électronique, stylisé avec les principes de conception matérielle, les tons terreux et la prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
Composant de visualisation des données (néon/lueur)
Un composant complexe de visualisation de données pour les applications SaaS avec des effets de néon/lueur, des couleurs neutres chaudes et une réactivité totale avec prise en charge du mode sombre.
Composants de visualisation de données
Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre