From 621525cb122e1e2a986ebd9f39866891ef78690b Mon Sep 17 00:00:00 2001
From: hack_21031301_c761d3 <21031301@itcelaya.edu.mx>
Date: Sat, 23 May 2026 01:48:23 -0600
Subject: [PATCH] feat: MVP completo - alertas operativas, notificaciones
 configurables, WebSockets

---
 frontend/App.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/App.js b/frontend/App.js
index e41a3cc..9fe4482 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -31,6 +31,7 @@ export default function App() {
     proximity: true,
     completed: true,
   });
+  const [alertaOperativa, setAlertaOperativa] = useState(null);
 
   useEffect(() => {
     cargarSesion();
@@ -238,6 +239,9 @@ export default function App() {
             `El camión de ${data.colonia} ha concluido su jornada.`);
         }
         setEta(data);
+        if (domicilioActivo?.route_id) {
+          verificarAlertas(domicilioActivo.route_id, t || token);
+        }
       }
     };
     ws.onerror = () => console.log('WS error, usando polling');
@@ -245,6 +249,17 @@ export default function App() {
     return ws;
   };
 
+  const verificarAlertas = async (routeId, t) => {
+    try {
+      const res = await fetch(`${API_URL}/alertas/operativa/activa?route_id=${routeId}`, {
+        headers: { 'Authorization': `Bearer ${t || token}` }
+      });
+      const data = await res.json();
+      if (data.activa) setAlertaOperativa(data);
+      else setAlertaOperativa(null);
+    } catch {}
+  };
+
   if (screen === 'splash') return (
     <View style={styles.splashContainer}>
       <Text style={styles.splashEmoji}>🚛</Text>
@@ -379,6 +394,12 @@ export default function App() {
           </View>
           <Text style={styles.coloniaText}>📍 {eta.colonia} · {eta.route_id}</Text>
         </View>
+        {alertaOperativa && (
+          <View style={styles.alertaBox}>
+            <Text style={styles.alertaTitulo}>⚠️ Alerta operativa</Text>
+            <Text style={styles.alertaMensaje}>{alertaOperativa.mensaje}</Text>
+          </View>
+        )}
         <View style={styles.privacyBox}>
           <Text style={styles.privacyText}>🔒 Solo ves la información de tu zona. No se muestra la ruta completa del camión.</Text>
         </View>
@@ -529,4 +550,7 @@ const styles = StyleSheet.create({
   notifItemActivo: { borderColor: '#1a7a4a', backgroundColor: '#e8f5ee' },
   notifLabel: { fontSize: 15, fontWeight: 'bold', color: '#333' },
   notifDesc: { fontSize: 12, color: '#666', marginTop: 2 },
+  alertaBox: { width: '100%', backgroundColor: '#fff3e0', borderRadius: 10, padding: 14, marginBottom: 16, borderWidth: 1, borderColor: '#ff9800' },
+  alertaTitulo: { fontSize: 14, fontWeight: 'bold', color: '#e65100', marginBottom: 4 },
+  alertaMensaje: { fontSize: 13, color: '#bf360c' },
 });
\ No newline at end of file