- {[
- ['Salud Promedio', '82%', 'fa-leaf', 'emerald'],
- ['Agua Utilizada', '1,240 L', 'fa-tint', 'sky'],
- ['Incidentes Plaga', '4 eventos', 'fa-bug', 'amber'],
- ['Ingresos Marketplace', '$3,840', 'fa-dollar-sign', 'teal'],
- ].map(([label, value, icon, tone]) => (
-
-
-
+
+
+ {/* ── Encabezado con controles ── */}
+
+
+
Centro de Inteligencia Agrícola · Datos sincronizados en tiempo real
+
Sistema de Reportes
+
+
+
+ {/* Selector de período */}
+
+ {(Object.keys(PERIOD_DAYS) as Period[]).map((p) => (
+
+ ))}
+
+
+ {/* Botón Excel */}
+
+
+ {/* Botón PDF */}
+
+
+ {/* Botón CSV rápido */}
+
+
+
+
+ {/* ── KPI Grid ── */}
+
+ {kpiGrid.map((kpi) => (
+
+
-
{label}
-
{value}
+
{kpi.label}
+
{kpi.value}
+
+
{kpi.sub}
))}
-
-
-
-
-
- | Parcela |
- Fertilidad |
- pH |
- Humedad |
- Temperatura |
-
-
-
- {[
- ['Parcela Norte', '94%', '6.8', '68%', '22°C'],
- ['Sector 2A', '87%', '7.1', '62%', '28°C'],
- ['Zona Crítica', '71%', '6.2', '34%', '31°C'],
- ['Parcela Sur', '89%', '7.2', '71%', '21°C'],
- ].map(([parcel, fertility, ph, humidity, temp]) => (
-
- | {parcel} |
- {fertility} |
- {ph} |
- {humidity} |
- {temp} |
-
+ {/* ── Pestañas ── */}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {/* ══════════ TAB: RESUMEN EJECUTIVO ══════════ */}
+
+
+
+ {[{ key: 'Humedad', color: '#38bdf8' }, { key: 'Temperatura', color: '#f59e0b' }, { key: 'pH', color: '#a78bfa' }].map((s) => (
+
+
+ {s.key}
+
+ ))}
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+ {alertDistribution.map((item) => (
+
+
{item.name}
+
+
a.value), 1)) * 100)}%`, background: item.color }} />
+
+
{item.value}
+
))}
-
+
+ {alertDistribution.map((item) => (
+
+
{item.value}
+
{item.name}
+
+ ))}
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
-
+
+
+ {/* ══════════ TAB: ANÁLISIS DE SENSORES ══════════ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {['ID', 'Nombre', 'Tipo', 'Ubicación', 'Placa Arduino', 'Lectura actual', 'Estado', 'Salud'].map((h) => (
+ | {h} |
+ ))}
+
+
+
+ {sensors.map((sensor) => {
+ const isOffline = sensor.value === '---';
+ const statusColors: Record = { OK: 'bg-emerald-500/10 text-emerald-300', 'Atención': 'bg-amber-500/10 text-amber-300', 'Crítico': 'bg-red-500/10 text-red-300' };
+ return (
+
+ | {sensor.id} |
+ {sensor.name} |
+ {sensor.type} |
+ {sensor.location} |
+ {sensor.arduinoId} |
+
+ {isOffline ? — Sin señal — : sensor.value}
+ |
+
+
+ {isOffline ? 'Offline' : sensor.status}
+
+ |
+
+ {!isOffline && (
+
+ )}
+ |
+
+ );
+ })}
+
+
+
+
+
+ {/* ══════════ TAB: REPORTE POR PARCELA ══════════ */}
+
+
+ {parcelaData.map((p) => {
+ const healthColor = p.saludPct >= 80 ? '#10b981' : p.saludPct >= 60 ? '#f59e0b' : '#ef4444';
+ return (
+
+
+
+
Parcela
+
{p.parcela}
+
+
+ {p.saludPct}%
+
+
+
Índice de salud
+
+
+ {[
+ { label: 'Humedad', value: p.humedad > 0 ? `${p.humedad}%` : 'N/A', icon: '💧', color: '#38bdf8' },
+ { label: 'Temperatura', value: p.temperatura > 0 ? `${p.temperatura}°C` : 'N/A', icon: '🌡️', color: '#f59e0b' },
+ { label: 'pH Suelo', value: p.ph > 0 ? p.ph.toString() : 'N/A', icon: '⚗️', color: '#a78bfa' },
+ { label: 'Sensores', value: p.sensores.toString(), icon: '📡', color: '#10b981' },
+ ].map((m) => (
+
+
{m.icon}{m.label}
+
{m.value}
+
+ ))}
+
+
+ {arduinos.filter(a => sensors.some(s => s.location === p.parcela && s.arduinoId === a.id)).map(a => (
+
+ {a.id}
+
+ ))}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
+
+
+
+
+
+ {['Parcela', 'Salud', 'Humedad', 'Temperatura', 'pH', 'Sensores', 'Estado'].map((h) => (
+ | {h} |
+ ))}
+
+
+
+ {parcelaData.map((p) => (
+
+ | {p.parcela} |
+
+
+
+ = 80 ? '#10b981' : p.saludPct >= 60 ? '#f59e0b' : '#ef4444' }} />
+
+ {p.saludPct}%
+
+ |
+ {p.humedad > 0 ? `${p.humedad}%` : '—'} |
+ {p.temperatura > 0 ? `${p.temperatura}°C` : '—'} |
+ {p.ph > 0 ? p.ph : '—'} |
+ {p.sensores} |
+ |
+
+ ))}
+
+
+
+
+
+ {/* ══════════ TAB: HISTORIAL DE ALERTAS ══════════ */}
+
+
+ {[
+ { label: 'Alertas Críticas', value: alerts.filter(a => a.severity === 'red').length, color: '#ef4444', icon: 'fa-fire' },
+ { label: 'Advertencias', value: alerts.filter(a => a.severity === 'amber').length, color: '#f59e0b', icon: 'fa-exclamation-circle' },
+ { label: 'Resueltas', value: alerts.filter(a => a.resolved).length, color: '#10b981', icon: 'fa-check-circle' },
+ ].map((k) => (
+
+
+
+
+
+
+
{k.value}
+
{k.label}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {alerts.map((alert) => (
+
+
+
+
{alert.emoji}
+
+
+ {alert.title}
+ {alert.resolved
+ ? Resuelta
+ :
+ {alert.severity === 'red' ? 'Crítico' : 'Advertencia'}
+
+ }
+
+
{alert.description}
+
+
+
{alert.time}
+
#{alert.id}
+
+
+
+ ))}
+ {alerts.length === 0 && (
+
+
🟢 No hay alertas registradas en el sistema.
+
+ )}
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+
+
);
-}
+}
\ No newline at end of file