separate components

2026-06-25 09:16:47 +02:00
parent cb89b521ef
commit 323667e835
25 changed files with 921 additions and 1572 deletions
@@ -0,0 +1,49 @@
+import { Server, Database, Cloud, Globe } from 'lucide-react';
+
+export default function DashboardServiceCard({ order, onClick }) {
+    // Fonction Radar : Détecte le type de service selon son nom pour afficher la bonne icône
+    const getServiceIcon = (title) => {
+        const t = title.toLowerCase();
+        if (t.includes('vps') || t.includes('serveur')) return <Server className="w-10 h-10 text-cyan-400" />;
+        if (t.includes('cloud') || t.includes('nextcloud')) return <Cloud className="w-10 h-10 text-blue-400" />;
+        if (t.includes('db') || t.includes('base') || t.includes('sql')) return <Database className="w-10 h-10 text-purple-400" />;
+        return <Globe className="w-10 h-10 text-emerald-400" />; // Par défaut : Web / Hestia
+    };
+
+    // Fonction d'état : Formate le statut du service
+    const getStatusBadge = (status) => {
+        switch (status) {
+            case 'active': return <span className="px-2 py-1 text-xs text-green-400 bg-green-400/10 border border-green-400/20 rounded">ACTIF</span>;
+            case 'pending_setup': return <span className="px-2 py-1 text-xs text-orange-400 bg-orange-400/10 border border-orange-400/20 rounded">EN PRÉPARATION</span>;
+            case 'suspended': return <span className="px-2 py-1 text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded">SUSPENDU</span>;
+            default: return <span className="px-2 py-1 text-xs text-gray-400 bg-gray-400/10 border border-gray-400/20 rounded">{status.toUpperCase()}</span>;
+        }
+    };
+
+    return (
+        <div 
+            className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-cyan-400/50 transition-colors group cursor-pointer flex flex-col justify-between shadow-lg"
+            onClick={onClick}
+        >
+            <div>
+                <div className="flex justify-between items-start mb-4">
+                    <div className="p-3 bg-black/50 rounded-lg group-hover:scale-110 transition-transform">
+                        {getServiceIcon(order.title)}
+                    </div>
+                    {getStatusBadge(order.status)}
+                </div>
+                <h3 className="text-lg font-semibold text-white truncate" title={order.title}>
+                    {order.title}
+                </h3>
+                <p className="text-sm text-gray-500 mt-1">
+                    Facturation : {order.period}
+                </p>
+            </div>
+            
+            <div className="mt-6 pt-4 border-t border-gray-800 flex justify-between items-center text-sm">
+                <span className="text-gray-400">ID Réseau: #{order.id}</span>
+                <span className="text-cyan-400 group-hover:underline">Gérer &gt;</span>
+            </div>
+        </div>
+    );
+}