100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
/**
|
|
* 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; |