feat: MVP completo - alertas operativas, notificaciones configurables, WebSockets

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' },
 });