102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
// frontend/src/components/alerts/AlertStats.tsx
|
|
/**
|
|
* Statistics display for alerts and recommendations
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface AlertStatsProps {
|
|
urgentCount: number;
|
|
highCount: number;
|
|
recCount: number;
|
|
totalItems: number;
|
|
activeItems: number;
|
|
}
|
|
|
|
export const AlertStats: React.FC<AlertStatsProps> = ({
|
|
urgentCount,
|
|
highCount,
|
|
recCount,
|
|
totalItems,
|
|
activeItems
|
|
}) => {
|
|
const stats = [
|
|
{
|
|
name: 'Alertas Urgentes',
|
|
value: urgentCount,
|
|
icon: '🚨',
|
|
color: urgentCount > 0 ? 'text-red-600' : 'text-gray-600',
|
|
bgColor: urgentCount > 0 ? 'bg-red-50' : 'bg-gray-50',
|
|
borderColor: urgentCount > 0 ? 'border-red-200' : 'border-gray-200'
|
|
},
|
|
{
|
|
name: 'Alertas Altas',
|
|
value: highCount,
|
|
icon: '⚠️',
|
|
color: highCount > 0 ? 'text-orange-600' : 'text-gray-600',
|
|
bgColor: highCount > 0 ? 'bg-orange-50' : 'bg-gray-50',
|
|
borderColor: highCount > 0 ? 'border-orange-200' : 'border-gray-200'
|
|
},
|
|
{
|
|
name: 'Recomendaciones',
|
|
value: recCount,
|
|
icon: '💡',
|
|
color: recCount > 0 ? 'text-blue-600' : 'text-gray-600',
|
|
bgColor: recCount > 0 ? 'bg-blue-50' : 'bg-gray-50',
|
|
borderColor: recCount > 0 ? 'border-blue-200' : 'border-gray-200'
|
|
},
|
|
{
|
|
name: 'Total Activos',
|
|
value: activeItems,
|
|
icon: '📊',
|
|
color: 'text-gray-600',
|
|
bgColor: 'bg-gray-50',
|
|
borderColor: 'border-gray-200'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="bg-white border-b border-gray-200">
|
|
<div className="px-6 py-4">
|
|
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{stats.map((stat) => (
|
|
<div
|
|
key={stat.name}
|
|
className={`relative overflow-hidden rounded-lg border ${stat.borderColor} ${stat.bgColor} p-4 transition-all duration-200 hover:shadow-md`}
|
|
>
|
|
<dt className="flex items-center text-sm font-medium text-gray-600">
|
|
<span className="text-lg mr-2">{stat.icon}</span>
|
|
{stat.name}
|
|
</dt>
|
|
<dd className={`mt-1 text-2xl font-semibold ${stat.color}`}>
|
|
{stat.value}
|
|
</dd>
|
|
|
|
{/* Pulse animation for urgent alerts */}
|
|
{stat.name === 'Alertas Urgentes' && urgentCount > 0 && (
|
|
<div className="absolute inset-0 rounded-lg border-2 border-red-400 animate-pulse opacity-50"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
{/* Summary text */}
|
|
<div className="mt-4 text-sm text-gray-600">
|
|
{totalItems === 0 ? (
|
|
<p className="flex items-center">
|
|
<span className="text-green-500 mr-2">✅</span>
|
|
Todos los sistemas funcionan correctamente
|
|
</p>
|
|
) : (
|
|
<p>
|
|
Mostrando {totalItems} elementos total{totalItems !== 1 ? 'es' : ''}
|
|
{activeItems > 0 && (
|
|
<>, {activeItems} activo{activeItems !== 1 ? 's' : ''}</>
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |