import React, { useState, useEffect } from 'react'; import { LayoutDashboard, FileText, Cpu, ShieldAlert, Wrench, Activity, Video, CheckCircle2, AlertTriangle, Zap, MapPin, DollarSign, Layers, Clock, RefreshCw } from 'lucide-react'; export default function PMGDDashboard() { // Estado para la navegación del Sidebar Principal const [activeTab, setActiveTab] = useState('dashboard'); // Estado para las pestañas del Módulo Técnico (6 Estudios) const [activeStudy, setActiveStudy] = useState('flujo'); // Estado para simulación de telemetría SCADA en tiempo real const [scadaData, setScadaData] = useState({ power: 8.42, voltage: 23.1, frequency: 50.02, radiation: 845 }); // Simulación de actualización de datos en tiempo real (SCADA) useEffect(() => { const interval = setInterval(() => { setScadaData(prev => ({ power: +(prev.power + (Math.random() * 0.2 - 0.1)).toFixed(2), voltage: +(prev.voltage + (Math.random() * 0.1 - 0.05)).toFixed(1), frequency: +(50.00 + (Math.random() * 0.04 - 0.02)).toFixed(2), radiation: Math.floor(840 + Math.random() * 20) })); }, 3000); return () => clearInterval(interval); }, []); return ( <div className="flex h-screen bg-slate-950 text-slate-100 font-sans overflow-hidden"> {/* 1. SIDEBAR DE NAVEGACIÓN PRINCIPAL */} <aside className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col justify-between"> <div> <div className="p-5 border-b border-slate-800 flex items-center gap-3"> <Zap className="text-amber-500 h-6 w-6 animate-pulse" /> <div> <h1 className="font-bold text-sm tracking-wider uppercase text-amber-500">PMGD Control Hub</h1> <p className="text-xs text-slate-400">Plataforma Normativa v2.6</p> </div> </div> <nav className="p-4 space-y-1"> <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'dashboard' ? 'bg-amber-500/10 text-amber-500 border-l-4 border-amber-500' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`} > <LayoutDashboard size={18} /> Dashboard Principal </button> <button onClick={() => setActiveTab('regulatory')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'regulatory' ? 'bg-amber-500/10 text-amber-500 border-l-4 border-amber-500' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`} > <FileText size={18} /> Módulo Normativo </button> <button onClick={() => setActiveTab('technical')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'technical' ? 'bg-amber-500/10 text-amber-500 border-l-4 border-amber-500' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`} > <Cpu size={18} /> Módulo Técnico </button> <button onClick={() => setActiveTab('safety')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'safety' ? 'bg-amber-500/10 text-amber-500 border-l-4 border-amber-500' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`} > <ShieldAlert size={18} /> Seguridad y Riesgos </button> <button onClick={() => setActiveTab('om')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'om' ? 'bg-amber-500/10 text-amber-500 border-l-4 border-amber-500' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`} > <Wrench size={18} /> Operación y SCADA </button> </nav> </div> <div className="p-4 border-t border-slate-800 bg-slate-900/50"> <div className="text-xs text-slate-500 space-y-1"> <p>Asignatura: Normativa Aplicada</p> <p>Docente: José Segovia Andía</p> <p className="text-amber-500/70 font-semibold">Evaluación Sumativa 02 (2026)</p> </div> </div> </aside> {/* CONTENEDOR DE CONTENIDO PRINCIPAL */} <main className="flex-1 overflow-y-auto bg-slate-950 p-8"> {/* ================= PANTALLA PRINCIPAL ================= */} {activeTab === 'dashboard' && ( <div className="space-y-6"> <div className="flex justify-between items-start border-b border-slate-800 pb-4"> <div> <span className="text-xs font-semibold uppercase bg-amber-500/10 text-amber-400 px-2.5 py-1 rounded-full">Proyecto Asignado</span> <h2 className="text-3xl font-extrabold tracking-tight mt-2 text-white">Doña Carmen Solar</h2> <p className="text-slate-400 text-sm mt-1">Análisis Integral y Cumplimiento Normativo del Medio de Generación</p> </div> <div className="flex items-center gap-2 bg-emerald-500/10 text-emerald-400 px-3 py-1.5 rounded-lg border border-emerald-500/20 text-sm font-medium"> <Activity size={16} className="animate-pulse" /> Estado: Operativo / Interconectado </div> </div> {/* Tarjetas de Ficha Técnica Principal */} <div className="grid grid-cols-1 md:grid-cols-4 gap-4"> <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 flex items-center gap-4"> <div className="p-3 bg-slate-800 rounded-lg text-amber-500"><Zap size={24} /></div> <div> <p className="text-xs text-slate-400 font-medium uppercase">Potencia Nominal</p> <p className="text-xl font-bold text-slate-100">~ 9.0 MW</p> </div> </div> <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 flex items-center gap-4"> <div className="p-3 bg-slate-800 rounded-lg text-blue-500"><MapPin size={24} /></div> <div> <p className="text-xs text-slate-400 font-medium uppercase">Ubicación / Región</p> <p className="text-xl font-bold text-slate-100">Región Metropolitana</p> </div> </div> <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 flex items-center gap-4"> <div className="p-3 bg-slate-800 rounded-lg text-purple-500"><Layers size={24} /></div> <div> <p className="text-xs text-slate-400 font-medium uppercase">Categoría Proyecto</p> <p className="text-xl font-bold text-slate-100">PMGD (Reglamento DS 88)</p> </div> </div> <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 flex items-center gap-4"> <div className="p-3 bg-slate-800 rounded-lg text-emerald-500"><DollarSign size={24} /></div> <div> <p className="text-xs text-slate-400 font-medium uppercase">Costo Inversión Est.</p> <p className="text-xl font-bold text-slate-100">$9,500,000 USD</p> </div> </div> </div> {/* Gráfico y Video Placeholder */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="lg:col-span-2 bg-slate-900 p-6 rounded-xl border border-slate-800"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-4">Curva de Generación Diaria Promedio (MWh)</h3> <div className="h-64 flex items-end justify-between gap-2 pt-6 px-2 border-b border-slate-700"> {[20, 35, 55, 75, 95, 100, 98, 85, 60, 40, 15, 5].map((val, i) => ( <div key={i} className="w-full flex flex-col items-center gap-2 group"> <div style={{ height: `${val}%` }} className="w-full bg-gradient-to-t from-amber-600 to-amber-400 rounded-t group-hover:from-amber-500 group-hover:to-amber-300 transition-all duration-300 relative" > <span className="absolute -top-7 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] px-1 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10"> {Math.isInteger(val*0.09) ? (val*0.09) : (val*0.09).toFixed(1)} MW </span> </div> <span className="text-[10px] text-slate-500 font-medium mt-1">{i + 7}h</span> </div> ))} </div> </div> {/* Contenedor del Video de 2 Minutos */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800 flex flex-col justify-between"> <div> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-2">Video Explicativo del Proyecto</h3> <p className="text-xs text-slate-500">Duración máxima reglamentaria: 2 minutos.</p> </div> <div className="my-4 flex-1 min-h-[140px] bg-slate-950 rounded-lg border border-dashed border-slate-700 flex flex-col items-center justify-center p-4 text-center group hover:border-amber-500/50 transition-colors"> <div className="p-4 bg-slate-900 rounded-full text-slate-400 group-hover:text-amber-500 transition-colors mb-2"> <Video size={28} /> </div> <span className="text-xs font-semibold text-slate-300">Insertar MP4 / Enlace Exposición</span> <span className="text-[11px] text-slate-500 mt-1">Evidencia obligatoria de defensa técnica grupal</span> </div> <div className="text-[11px] text-amber-500/80 bg-amber-500/5 p-2 rounded border border-amber-500/10"> ⚠️ Máximo 5 min. totales de presentación oral por grupo. </div> </div> </div> </div> )} {/* ================= MÓDULO NORMATIVO ================= */} {activeTab === 'regulatory' && ( <div className="space-y-6"> <div className="border-b border-slate-800 pb-4"> <h2 className="text-2xl font-bold text-white">Marco Regulatorio y Legal Aplicado</h2> <p className="text-slate-400 text-sm">Validación del cumplimiento legal eléctrico para inyección energética en Chile.</p> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {/* Card DFL 4 */} <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 space-y-2"> <div className="flex justify-between items-center"> <h4 className="text-sm font-bold text-amber-400 uppercase">DFL 4 — Ley General de Servicios Eléctricos</h4> <span className="text-[10px] bg-blue-500/10 text-blue-400 border border-blue-500/20 px-2 py-0.5 rounded">CNE</span> </div> <p className="text-xs text-slate-300 leading-relaxed"> Establece el marco general normativo de los sistemas de generación, transmisión y distribución. Rige las concesiones y define las condiciones de libre acceso a las redes eléctricas chilenas. </p> </div> {/* Card DS 88 */} <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 space-y-2"> <div className="flex justify-between items-center"> <h4 className="text-sm font-bold text-amber-400 uppercase">DS N°88 — Reglamento PMGD</h4> <span className="text-[10px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded">Vigente 2026</span> </div> <p className="text-xs text-slate-300 leading-relaxed"> Regula la conexión, operación y estabilización de precios de los Pequeños Medios de Generación Distribuida (≤ 9MW). Determina los plazos técnicos críticos y el proceso de autodeclaración. </p> </div> {/* Card Ley 20.571 / 21.118 */} <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 space-y-2"> <div className="flex justify-between items-center"> <h4 className="text-sm font-bold text-amber-400 uppercase">Leyes N°20.571 y N°21.118</h4> <span className="text-[10px] bg-purple-500/10 text-purple-400 border border-purple-500/20 px-2 py-0.5 rounded">Net Billing</span> </div> <p className="text-xs text-slate-300 leading-relaxed"> Normas de generación distribuida residencial y comercial. Aunque el proyecto opera como PMGD corporativo, se evalúa su alcance normativo comparado frente a límites de escala técnica de autoconsumo. </p> </div> {/* Card NTCO */} <div className="bg-slate-900 p-5 rounded-xl border border-slate-800 space-y-2"> <div className="flex justify-between items-center"> <h4 className="text-sm font-bold text-amber-400 uppercase">NTCO — Norma Técnica Conexión y Operación</h4> <span className="text-[10px] bg-amber-500/10 text-amber-400 border border-amber-500/20 px-2 py-0.5 rounded">Exigencia Distribución</span> </div> <p className="text-xs text-slate-300 leading-relaxed"> Regulación técnica dictada por la CNE que define los parámetros de calidad de producto, confiabilidad de red, protocolos de comunicación SCADA y protecciones mínimas de acoplamiento. </p> </div> </div> {/* Checklist SEC y RIC */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-4 flex items-center gap-2"> <CheckCircle2 size={16} className="text-emerald-500" /> Lista de Verificación Obligatoria de Seguridad SEC (Pliegos RIC) </h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs"> {[ { code: 'RIC N°01', desc: 'Empalmes y límites de propiedad con la empresa distribuidora' }, { code: 'RIC N°05', desc: 'Medidas de protección contra tensiones peligrosas y shock eléctrico' }, { code: 'RIC N°06', desc: 'Sistemas de puesta a tierra (mallas de media y baja tensión validadas)' }, { code: 'RIC N°14', desc: 'Exigencias operativas para sistemas de generación de emergencia y paralelos' }, ].map((ric, idx) => ( <div key={idx} className="flex items-start gap-3 p-3 bg-slate-950 rounded-lg border border-slate-800"> <input type="checkbox" defaultChecked className="mt-0.5 rounded border-slate-700 text-amber-500 focus:ring-amber-500 bg-slate-900" /> <div> <span className="font-bold text-amber-500 block">{ric.code}</span> <span className="text-slate-400">{ric.desc}</span> </div> </div> ))} </div> </div> </div> )} {/* ================= MÓDULO TÉCNICO ================= */} {activeTab === 'technical' && ( <div className="space-y-6"> <div className="border-b border-slate-800 pb-4"> <h2 className="text-2xl font-bold text-white">Ingeniería del Proyecto e Infraestructura</h2> <p className="text-slate-400 text-sm">Detalles de conexión en Media Tensión y estado de los 6 estudios de red obligatorios.</p> </div> {/* Diagrama de Conexión en Bloques CSS */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-4">Diagrama de Bloques General de Inyección a Red</h3> <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-center text-center text-xs font-semibold"> <div className="bg-amber-500/10 text-amber-400 p-4 rounded-lg border border-amber-500/20"> <p className="text-[10px] opacity-70">Generación DC</p> <p className="font-bold text-sm">Campos FV</p> </div> <div className="text-slate-600 font-bold text-lg hidden md:block">➔</div> <div className="bg-blue-500/10 text-blue-400 p-4 rounded-lg border border-blue-500/20"> <p className="text-[10px] opacity-70">Conversión AC (0.4kV)</p> <p className="font-bold text-sm">Inversores Centrales</p> </div> <div className="text-slate-600 font-bold text-lg hidden md:block">➔</div> <div className="bg-purple-500/10 text-purple-400 p-4 rounded-lg border border-purple-500/20"> <p className="text-[10px] opacity-70">Subestación Elevadora</p> <p className="font-bold text-sm">Trafo 0.4 / 23 kV</p> </div> </div> <p className="text-[11px] text-slate-500 mt-4"> * Conexión final: Distribución de Media Tensión (23 kV) regulado estrictamente por la Norma Técnica NTCO. </p> </div> {/* Pestañas de los 6 Estudios Técnicos */} <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden"> <div className="bg-slate-800/50 p-2 flex flex-wrap gap-1 border-b border-slate-800"> {[ { id: 'flujo', title: 'Flujo de Carga' }, { id: 'corto', title: 'Cortocircuito' }, { id: 'calidad', title: 'Calidad de Energía' }, { id: 'protec', title: 'Protecciones' }, { id: 'isla', title: 'Anti-Isla' }, { id: 'scada_t', title: 'SCADA / Telemetría' } ].map((t) => ( <button key={t.id} onClick={() => setActiveStudy(t.id)} className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-colors ${activeStudy === t.id ? 'bg-amber-500 text-slate-950 shadow' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'}`} > {t.title} </button> ))} </div> <div className="p-6 text-xs bg-slate-900"> {activeStudy === 'flujo' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio de Flujo de Carga (Load Flow)</h4> <p className="text-slate-400 leading-relaxed"> Determina los perfiles de tensión en las barras de la planta y evalúa que no se causen sobretensiones en el alimentador de la Distribuidora en el escenario de máxima inyección solar. </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} {activeStudy === 'corto' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio de Cortocircuito simétrico y asimétrico</h4> <p className="text-slate-400 leading-relaxed"> Analiza los aportes de corriente de falla del proyecto PMGD y de la red exterior para calcular la capacidad de ruptura y dimensionamiento de los interruptores de potencia. </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} {activeStudy === 'calidad' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio de Calidad de Energía (Flicker, Armónicos y Desbalances)</h4> <p className="text-slate-400 leading-relaxed"> Garantiza que la distorsión armónica total de corriente (THDi) inyectada por los inversores fotovoltaicos cumpla con los límites estrictos fijados en el capítulo de calidad de producto de la NTCO. </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} {activeStudy === 'protec' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio de Coordinación de Protecciones</h4> <p className="text-slate-400 leading-relaxed"> Define los parámetros de ajuste de los relés en el punto de acoplamiento común (PAC). Incluye funciones de protección de sobre/subtensión (59/27) y sobre/subfrecuencia (81O/81U). </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} {activeStudy === 'isla' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio y Protocolo de Protección Anti-Isla</h4> <p className="text-slate-400 leading-relaxed"> Verificación obligatoria de desconexión automática del PMGD en menos de 2 segundos en caso de pérdida de tensión de la red externa. Protege la vida de las brigadas de mantenimiento de la distribuidora. </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} {activeStudy === 'scada_t' && ( <div className="space-y-2"> <h4 className="text-sm font-bold text-slate-200">Estudio de Integración SCADA e Infraestructura de Telemetría</h4> <p className="text-slate-400 leading-relaxed"> Estructura los canales de comunicación de datos en tiempo real con el Coordinador Eléctrico Nacional (CEN) mediante protocolos normalizados (DNP3 / IEC 60870-5-104). </p> <span className="inline-block mt-2 text-[10px] bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded border border-emerald-500/20">Estado: Aprobado por la Distribuidora</span> </div> )} </div> </div> </div> )} {/* ================= SECCIÓN DE SEGURIDAD Y RIESGOS ================= */} {activeTab === 'safety' && ( <div className="space-y-6"> <div className="border-b border-slate-800 pb-4"> <h2 className="text-2xl font-bold text-white">Módulo de Seguridad Eléctrica y Responsabilidad Civil</h2> <p className="text-slate-400 text-sm">Identificación predictiva de riesgos operativos críticos y límites de responsabilidad legal.</p> </div> {/* Matriz Interactiva de Riesgos */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400 mb-4 flex items-center gap-2"> <AlertTriangle size={16} className="text-amber-500" /> Matriz de Mitigación de Riesgos Eléctricos en Planta </h3> <div className="overflow-x-auto"> <table className="w-full text-left text-xs text-slate-300"> <thead className="bg-slate-950 text-[10px] font-bold uppercase text-slate-400 border-b border-slate-800"> <tr> <th className="p-3">Riesgo Identificado</th> <th className="p-3">Severidad / Probabilidad</th> <th className="p-3">Mecanismo de Mitigación / Protocolo Técnico</th> </tr> </thead> <tbody className="divide-y divide-slate-800"> <tr> <td className="p-3 font-semibold text-slate-200">Arco Eléctrico en Cajas de Combinación DC</td> <td className="p-3"><span className="px-2 py-0.5 bg-red-500/10 text-red-400 rounded">Alto</span></td> <td className="p-3 text-slate-400">Inversores con protección AFCI (Arc Fault Circuit Interrupter) integrada según estándar técnico.</td> </tr> <tr> <td className="p-3 font-semibold text-slate-200">Descargas Atmosféricas Directas en Estructuras</td> <td className="p-3"><span className="px-2 py-0.5 bg-amber-500/10 text-amber-400 rounded">Medio</span></td> <td className="p-3 text-slate-400">Instalación de pararrayos activos en el perímetro de la planta y descargadores de sobretensión DPS tipo 1 y 2.</td> </tr> <tr> <td className="p-3 font-semibold text-slate-200">Retorno de Tensión aguas arriba en Maniobras</td> <td className="p-3"><span className="px-2 py-0.5 bg-red-500/10 text-red-400 rounded">Crítico</span></td> <td className="p-3 text-slate-400">Aplicación obligatoria de las 5 Reglas de Oro de la Electricidad antes de intervenir celdas de MT.</td> </tr> </tbody> </table> </div> </div> {/* Responsabilidades Legales */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800 space-y-4"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400">Responsabilidad Civil y Legal del Instalador Eléctrico Autorizado</h3> <p className="text-xs text-slate-300 leading-relaxed"> De acuerdo con la legislación de la Superintendencia de Electricidad y Combustibles (SEC), el instalador eléctrico clase A que firma la declaración del proyecto asume la total responsabilidad civil y criminal sobre las condiciones de seguridad del montaje técnico. </p> <div className="p-4 bg-slate-950 rounded-lg border border-l-4 border-l-red-500 border-slate-800 text-xs text-slate-400"> <strong>Nota Legal:</strong> El profesional está obligado a mantener un aprendizaje continuo ante las actualizaciones de los pliegos técnicos RIC y responde ante la ley en caso de fallas catastróficas imputables a negligencia de diseño o mala coordinación protectora. </div> </div> </div> )} {/* ================= OPERACIÓN Y MANTENIMIENTO (SCADA) ================= */} {activeTab === 'om' && ( <div className="space-y-6"> <div className="border-b border-slate-800 pb-4"> <h2 className="text-2xl font-bold text-white">Centro de Operación Remota (Simulador SCADA)</h2> <p className="text-slate-400 text-sm">Monitoreo simulado en tiempo real y rutinas de conservación de la planta.</p> </div> {/* Layout de Panel SCADA en Vivo */} <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="bg-slate-900 p-4 rounded-xl border border-slate-800 text-center"> <span className="text-[10px] text-slate-400 font-bold uppercase block mb-1">Potencia Activa</span> <span className="text-2xl font-black text-amber-400 tracking-tight">{scadaData.power} <span className="text-xs">MW</span></span> </div> <div className="bg-slate-900 p-4 rounded-xl border border-slate-800 text-center"> <span className="text-[10px] text-slate-400 font-bold uppercase block mb-1">Tensión de Barra MT</span> <span className="text-2xl font-black text-blue-400 tracking-tight">{scadaData.voltage} <span className="text-xs">kV</span></span> </div> <div className="bg-slate-900 p-4 rounded-xl border border-slate-800 text-center"> <span className="text-[10px] text-slate-400 font-bold uppercase block mb-1">Frecuencia de Red</span> <span className="text-2xl font-black text-purple-400 tracking-tight">{scadaData.frequency} <span className="text-xs">Hz</span></span> </div> <div className="bg-slate-900 p-4 rounded-xl border border-slate-800 text-center"> <span className="text-[10px] text-slate-400 font-bold uppercase block mb-1">Irradiación Global</span> <span className="text-2xl font-black text-emerald-400 tracking-tight">{scadaData.radiation} <span className="text-xs">W/m²</span></span> </div> </div> {/* Tabla O&M Planificación */} <div className="bg-slate-900 p-6 rounded-xl border border-slate-800"> <div className="flex justify-between items-center mb-4"> <h3 className="text-sm font-bold uppercase tracking-wider text-slate-400">Plan de Mantenimiento Preventivo vs Correctivo</h3> <span className="text-[10px] flex items-center gap-1 text-slate-400"><Clock size={12} /> Frecuencia Comercial Ajustada</span> </div> <div className="overflow-x-auto text-xs"> <table className="w-full text-left text-slate-300"> <thead className="bg-slate-950 text-[10px] font-bold uppercase text-slate-400 border-b border-slate-800"> <tr> <th className="p-3">Tipo Actividad</th> <th className="p-3">Acción Operativa</th> <th className="p-3">Frecuencia Obligatoria</th> </tr> </thead> <tbody className="divide-y divide-slate-800"> <tr> <td className="p-3 font-semibold text-emerald-400">Preventivo</td> <td className="p-3 text-slate-300">Termografía aérea con drones en paneles e inspección visual de hot-spots en strings de inversores.</td> <td className="p-3 text-slate-400">Semestral</td> </tr> <tr> <td className="p-3 font-semibold text-emerald-400">Preventivo</td> <td className="p-3 text-slate-300">Pruebas de resistencia de aislamiento y ensayo dieléctrico del aceite del transformador principal.</td> <td className="p-3 text-slate-400">Anual</td> </tr> <tr> <td className="p-3 font-semibold text-amber-400">Correctivo</td> <td className="p-3 text-slate-300">Reemplazo de fusibles DC en cajas de combinación ante disparo por sobrecorriente severa.</td> <td className="p-3 text-slate-400">Inmediato ante Falla SCADA</td> </tr> </tbody> </table> </div> </div> </div> )} </main> </div> ); }