git Merge branch 'main' of https://git.onlinces.net/onlinces/hackathon-opti-1a67c90779374919b2f9ca0914dcd4b4

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/ui": "~56.0.11",
+        "@expo/vector-icons": "^15.1.1",
         "expo": "~56.0.3",
         "expo-constants": "~56.0.14",
         "expo-device": "~56.0.4",
@@ -1659,6 +1660,17 @@
         }
       }
     },
+    "node_modules/@expo/vector-icons": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.1.1.tgz",
+      "integrity": "sha512-Iu2VkcoI5vygbtYngm7jb4ifxElNVXQYdDrYkT7UCEIiKLeWnQY0wf2ZhHZ+Wro6Sc5TaumpKUOqDRpLi5rkvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo-font": ">=14.0.4",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@expo/ws-tunnel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@expo/ws-tunnel/-/ws-tunnel-1.0.6.tgz",
@@ -5196,9 +5208,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5219,9 +5228,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5242,9 +5248,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5265,9 +5268,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [

frontend/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "dependencies": {
     "@expo/ui": "~56.0.11",
+    "@expo/vector-icons": "^15.1.1",
     "expo": "~56.0.3",
     "expo-constants": "~56.0.14",
     "expo-device": "~56.0.4",

frontend/src/app/_layout.tsx

@@ -1,15 +1,64 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
-import { useColorScheme } from 'react-native';
+import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
 
-import { AnimatedSplashOverlay } from '@/components/animated-icon';
-import AppTabs from '@/components/app-tabs';
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
+export default function Layout() {
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <AnimatedSplashOverlay />
-      <AppTabs />
-    </ThemeProvider>
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+
+        tabBarActiveTintColor: "#0E8A61",
+        tabBarInactiveTintColor: "#9CA3AF",
+
+        tabBarStyle: {
+          height: 70,
+          paddingBottom: 10,
+          paddingTop: 10,
+          backgroundColor: "#FFFFFF",
+          borderTopWidth: 0,
+          elevation: 8,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Inicio",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+
+      <Tabs.Screen
+        name="alerts"
+        options={{
+          title: "Alertas",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="notifications-outline" size={size} color={color} />
+          ),
+        }}
+      />
+
+      <Tabs.Screen
+        name="guide"
+        options={{
+          title: "Guía",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="leaf-outline" size={size} color={color} />
+          ),
+        }}
+      />
+
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Perfil",
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person-outline" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
   );
 }

frontend/src/app/alerts.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+
+export default function AlertsScreen() {
+    return (
+        <View
+            style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+        <Text>Alertas</Text>
+        </View>
+    );
+}

frontend/src/app/guide.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+
+export default function GuideScreen() {
+    return (
+        <View
+            style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+        <Text>Guía</Text>
+        </View>
+    );
+}

frontend/src/app/index.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+
+export default function HomeScreen() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Inicio</Text>
+    </View>
+  );
+}

frontend/src/app/profile.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+
+export default function ProfileScreen() {
+    return (
+        <View
+            style={{
+                    flex: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                }}
+            >
+            <Text>Perfil</Text>
+        </View>
+    );
+}

frontend/src/components/EtaCard.tsx

@@ -0,0 +1,54 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors } from '../constants/theme';
+
+type EtaCardProps = {
+  minutes?: number;
+  status?: string;
+};
+
+export default function EtaCard({
+  minutes = 12,
+  status = 'En Camino',
+}: EtaCardProps) {
+
+  const theme = Colors.light;
+
+  return (
+    <View style={[styles.card, { backgroundColor: theme.backgroundElement }]}>
+      
+      <Text style={[styles.label, { color: theme.textSecondary }]}>
+        ETA estimado
+      </Text>
+
+      <Text style={[styles.time, { color: theme.text }]}>
+        {minutes} min
+      </Text>
+
+      <Text style={[styles.status, { color: theme.textSecondary }]}>
+        {status}
+      </Text>
+
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 15,
+    padding: 20,
+    borderRadius: 16,
+  },
+  label: {
+    fontSize: 12,
+    marginBottom: 6,
+  },
+  time: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginBottom: 6,
+  },
+  status: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});