feat: add api implementation

frontend/src/app/alerts.tsx

@@ -1,12 +1,22 @@
 import { ScrollView, Text } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { Redirect } from "expo-router";
 
 import { COLORS } from "../constants/colors";
 
 import SectionTitle from "../components/SectionTitle";
 import AlertItem from "@/components/Alertltem";
 
+import { useApp } from "../context/AppContext";
+import { notificationTypeToAlertType } from "../lib/notification-mapper";
+
 export default function AlertsScreen() {
+    const { user, notifications } = useApp();
+
+    if (!user) {
+        return <Redirect href="/login" />;
+    }
+
     return (
         <SafeAreaView
             style={{
@@ -30,38 +40,22 @@ export default function AlertsScreen() {
                         marginBottom: 24,
                         marginLeft: 12,
                     }}
-                >   
-                    Estado actual de recolección
+                >
+                    {notifications.length > 0
+                        ? `${notifications.length} notificaciones`
+                        : "Aún no hay alertas. Vuelve al inicio y desliza para actualizar."}
                 </Text>
 
-                <AlertItem
-                    title="Ruta iniciada"
-                    description="El vehículo de recolección ha comenzado la ruta matutina en tu distrito."
-                    time="Justo ahora"
-                    type="started"
-                />
-
-                <AlertItem
-                    title="Camión cerca"
-                    description="El camión está a 2 cuadras. Asegúrate de sacar tus contenedores."
-                    time="Hace 15m"
-                    type="near"
-                />
-
-                <AlertItem
-                    title="Retraso detectado"
-                    description="Congestión de tráfico en la zona principal puede causar retraso."
-                    time="Hace 1h"
-                    type="danger"
-                />
-
-                <AlertItem
-                    title="Ruta completada"
-                    description="¡Buen trabajo! Tu vecindario logró desviar residuos reciclables."
-                    time="Ayer"
-                    type="completed"
-                />
+                {notifications.map((n, i) => (
+                    <AlertItem
+                        key={`${n.userId}-${n.type}-${i}`}
+                        title={n.title}
+                        description={n.body}
+                        time="ahora"
+                        type={notificationTypeToAlertType(n.type)}
+                    />
+                ))}
             </ScrollView>
         </SafeAreaView>
     );
-}   
+}