Add new alert architecture

frontend/src/components/alerts/AlertStats.tsx

@@ -0,0 +1,102 @@
+// 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>
+  );
+};