feat: improve alerts screen ui

frontend/src/app/alerts.tsx

@@ -1,15 +1,67 @@
-import { View, Text } from "react-native";
+import { ScrollView, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { COLORS } from "../constants/colors";
+
+import SectionTitle from "../components/SectionTitle";
+import AlertItem from "@/components/Alertltem";
 
 export default function AlertsScreen() {
     return (
-        <View
+        <SafeAreaView
             style={{
                 flex: 1,
-                justifyContent: "center",
-                alignItems: "center",
+                backgroundColor: COLORS.background,
             }}
         >
-        <Text>Alertas</Text>
-        </View>
+            <ScrollView
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={{
+                    padding: 20,
+                    paddingBottom: 120,
+                }}
+            >
+                <SectionTitle title="Alertas" />
+
+                <Text
+                    style={{
+                        color: "#6B7280",
+                        fontSize: 14,
+                        marginBottom: 24,
+                        marginLeft: 12,
+                    }}
+                >   
+                    Estado actual de recolección
+                </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"
+                />
+            </ScrollView>
+        </SafeAreaView>
     );
 }   

frontend/src/app/index.tsx

@@ -1,15 +1,56 @@
-import { View, Text } from "react-native";
+import { ScrollView, View, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { COLORS } from "../constants/colors";
+
+import SectionTitle from "../components/SectionTitle";
+import EtaCard from "../components/EtaCard";
+import QuickAction from "../components/QuickAction";
 
 export default function HomeScreen() {
   return (
-    <View
+    <SafeAreaView
       style={{
         flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
+        backgroundColor: COLORS.background,
       }}
     >
-      <Text>Inicio</Text>
-    </View>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{
+          padding: 20,
+          paddingBottom: 120,
+        }}
+      >
+        <SectionTitle title="EcoRuta" />
+
+        <Text
+          style={{
+            color: "#6B7280",
+            fontSize: 14,
+            marginBottom: 20,
+            marginLeft: 12,
+          }}
+        >
+          Monitoreo inteligente de recolección
+        </Text>
+
+        <EtaCard />
+
+        <SectionTitle title="Acciones rápidas" />
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginTop: 10,
+          }}
+        >
+          <QuickAction title="Alertas" icon="notifications-outline" />
+
+          <QuickAction title="Reportar" icon="warning-outline" />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }

frontend/src/components/Alertltem.tsx

@@ -1,59 +1,183 @@
-import { View, Text, StyleSheet } from 'react-native';
-import { Colors, Spacing } from '../constants/theme';
+import {
+  View,
+  Text,
+  StyleSheet,
+} from "react-native";
+
+import { Ionicons } from "@expo/vector-icons";
+
+import { Colors, Spacing } from "../constants/theme";
 
 type AlertItemProps = {
-  message: string;
-  type?: 'success' | 'warning' | 'danger';
+  title: string;
+  description: string;
+  time: string;
+  type?: "started" | "near" | "danger" | "completed";
 };
 
 export default function AlertItem({
-  message,
-  type = 'success',
+  title,
+  description,
+  time,
+  type = "started",
 }: AlertItemProps) {
-
   const theme = Colors.light;
 
   const getColor = () => {
-    switch (type) {
-      case 'success':
-        return '#22C55E';
-      case 'warning':
-        return '#FACC15';
-      case 'danger':
-        return '#EF4444';
-      default:
-        return theme.textSecondary;
-    }
-  };
+  switch (type) {
+    case "started":
+      return "#B8C4BE";
+
+    case "near":
+      return "#22C55E";
+
+    case "danger":
+      return "#EF4444";
+
+    case "completed":
+      return "#B8C4BE";
+
+    default:
+      return "#9CA3AF";
+  }
+};
+
+const getIcon = () => {
+  switch (type) {
+    case "started":
+      return "navigate";
+
+    case "near":
+      return "time-outline";
+
+    case "danger":
+      return "warning-outline";
+
+    case "completed":
+      return "checkmark-done";
+
+    default:
+      return "notifications";
+  }
+};
 
   return (
-    <View style={styles.container}>
-      <View style={[styles.bar, { backgroundColor: getColor() }]} />
-      <Text style={[styles.text, { color: theme.text }]}>
-        {message}
-      </Text>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: "#FFFFFF",
+        },
+      ]}
+    >
+      <View
+        style={[
+          styles.iconContainer,
+          {
+            backgroundColor: `${getColor()}20`,
+          },
+        ]}
+      >
+        <Ionicons
+          name={getIcon()}
+          size={22}
+          color={getColor()}
+        />
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text
+            style={[
+              styles.title,
+              {
+                color: theme.text,
+              },
+            ]}
+          >
+            {title}
+          </Text>
+
+          <Text style={styles.time}>
+            {time}
+          </Text>
+        </View>
+
+        <Text
+          style={[
+            styles.description,
+            {
+              color: theme.textSecondary,
+            },
+          ]}
+        >
+          {description}
+        </Text>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    padding: Spacing.three,
-    marginHorizontal: Spacing.three,
-    marginVertical: Spacing.one,
-    borderRadius: 12,
-    backgroundColor: '#F0F0F3',
-    alignItems: 'center',
+    flexDirection: "row",
+
+    padding: 18,
+
+    marginBottom: 16,
+
+    borderRadius: 22,
+
+    alignItems: "flex-start",
+
+    shadowColor: "#000",
+
+    shadowOffset: {
+      width: 0,
+      height: 6,
+    },
+
+    shadowOpacity: 0.05,
+
+    shadowRadius: 10,
+
+    elevation: 4,
   },
-  bar: {
-    width: 6,
-    height: '100%',
-    borderRadius: 4,
-    marginRight: Spacing.two,
+
+  iconContainer: {
+    width: 42,
+    height: 42,
+
+    borderRadius: 21,
+
+    justifyContent: "center",
+    alignItems: "center",
+
+    marginRight: 14,
   },
-  text: {
-    fontSize: 14,
+
+  content: {
     flex: 1,
   },
+
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 6,
+  },
+
+  title: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+
+  time: {
+    fontSize: 12,
+    color: "#9CA3AF",
+  },
+
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
 });

frontend/src/components/QuickAction.tsx

@@ -3,13 +3,15 @@ import {
   Text,
   StyleSheet,
   View,
-} from 'react-native';
+} from "react-native";
 
-import { Colors, Spacing } from '../constants/theme';
+import { Ionicons } from "@expo/vector-icons";
+
+import { Colors, Spacing } from "../constants/theme";
 
 type QuickActionProps = {
   title: string;
-  icon: string;
+  icon: any;
   onPress?: () => void;
 };
 
@@ -18,7 +20,6 @@ export default function QuickAction({
   icon,
   onPress,
 }: QuickActionProps) {
-
   const theme = Colors.light;
 
   return (
@@ -32,9 +33,11 @@ export default function QuickAction({
       onPress={onPress}
     >
       <View style={styles.iconContainer}>
-        <Text style={styles.icon}>
-          {icon}
-        </Text>
+        <Ionicons
+          name={icon}
+          size={30}
+          color="#0E8A61"
+        />
       </View>
 
       <Text
@@ -53,24 +56,24 @@ export default function QuickAction({
 
 const styles = StyleSheet.create({
   container: {
-    width: 100,
-    padding: Spacing.three,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
+    width: 150,
+
+    paddingVertical: 20,
+    paddingHorizontal: 12,
+
+    borderRadius: 18,
+
+    alignItems: "center",
+    justifyContent: "center",
   },
 
   iconContainer: {
     marginBottom: Spacing.two,
   },
 
-  icon: {
-    fontSize: 28,
-  },
-
   title: {
     fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
+    fontWeight: "600",
+    textAlign: "center",
   },
 });