Initial commit

components/dashboard/StatsCard.tsx

@@ -0,0 +1,100 @@
+/**
+ * Composant carte de statistiques pour le dashboard
+ */
+
+import React from 'react';
+import { Card } from 'primereact/card';
+import { Badge } from 'primereact/badge';
+import { Skeleton } from 'primereact/skeleton';
+
+interface StatsCardProps {
+  title: string;
+  value: number | string;
+  icon: string;
+  color: 'primary' | 'success' | 'info' | 'warning' | 'danger';
+  loading?: boolean;
+  subtitle?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+const StatsCard: React.FC<StatsCardProps> = ({
+  title,
+  value,
+  icon,
+  color,
+  loading = false,
+  subtitle,
+  trend
+}) => {
+  const getColorClass = (color: string) => {
+    switch (color) {
+      case 'primary': return 'text-blue-500';
+      case 'success': return 'text-green-500';
+      case 'info': return 'text-cyan-500';
+      case 'warning': return 'text-yellow-500';
+      case 'danger': return 'text-red-500';
+      default: return 'text-blue-500';
+    }
+  };
+
+  const getBgClass = (color: string) => {
+    switch (color) {
+      case 'primary': return 'bg-blue-100';
+      case 'success': return 'bg-green-100';
+      case 'info': return 'bg-cyan-100';
+      case 'warning': return 'bg-yellow-100';
+      case 'danger': return 'bg-red-100';
+      default: return 'bg-blue-100';
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card className="h-full">
+        <div className="flex align-items-center justify-content-between mb-3">
+          <Skeleton width="60%" height="1rem" />
+          <Skeleton width="2rem" height="2rem" borderRadius="50%" />
+        </div>
+        <Skeleton width="40%" height="2rem" className="mb-2" />
+        <Skeleton width="80%" height="1rem" />
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="h-full">
+      <div className="flex align-items-center justify-content-between mb-3">
+        <div>
+          <div className="text-500 font-medium text-xl mb-2">{title}</div>
+          <div className="text-900 font-bold text-2xl">
+            {typeof value === 'number' ? value.toLocaleString() : value}
+          </div>
+          {subtitle && (
+            <div className="text-500 text-sm mt-1">{subtitle}</div>
+          )}
+        </div>
+        <div className={`${getBgClass(color)} border-round-lg p-3`}>
+          <i className={`${icon} ${getColorClass(color)} text-2xl`} />
+        </div>
+      </div>
+      
+      {trend && (
+        <div className="flex align-items-center">
+          <Badge
+            value={`${trend.isPositive ? '+' : ''}${trend.value}%`}
+            severity={trend.isPositive ? 'success' : 'danger'}
+            className="mr-2"
+          />
+          <span className="text-500 text-sm">
+            {trend.isPositive ? 'Augmentation' : 'Diminution'} ce mois
+          </span>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default StatsCard;