LathanDevers
49 lines
2.7 KiB
React
49 lines
2.7 KiB
React
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 ></span>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |