Fix Android APK Issues Phase 2

src/screens/main/HomeScreen.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, SafeAreaView, ImageBackground } from 'react-native';
-import { NavigationProp } from '@react-navigation/native';
-import { Navigation } from 'lucide-react-native'; // Closest to MapPin with outline
-import { Clock } from 'lucide-react-native';
+import React, { useState, useCallback } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ImageBackground, Alert, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { NavigationProp, useFocusEffect } from '@react-navigation/native';
+import { Navigation, Clock, MapPin } from 'lucide-react-native';
 import { colors } from '../../utils/colors';
 import { useAuth } from '../../contexts/AuthContext';
+import { supabase } from '../../services/supabase';
 
 interface Props {
   navigation: NavigationProp<any>;
@@ -15,6 +16,43 @@ export default function HomeScreen({ navigation }: Props) {
   const userName = user?.user_metadata?.name || 'Viajante';
   const initial = userName.charAt(0).toUpperCase();
 
+  const [trips, setTrips] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchTrips = useCallback(async () => {
+    setLoading(true);
+    try {
+      console.log('[HomeScreen] Fetching trips. User exists:', !!user);
+      let query = supabase.from('trips').select('*').order('created_at', { ascending: false });
+      
+      if (user) {
+        query = query.or(`user_id.eq.${user.id},user_id.is.null`);
+      } else {
+        query = query.is('user_id', null);
+      }
+      
+      const { data, error } = await query;
+      
+      if (error) {
+        console.error('[HomeScreen] Supabase error fetching trips:', error);
+        throw error;
+      }
+      
+      console.log(`[HomeScreen] Fetched ${data?.length || 0} trips`);
+      setTrips(data || []);
+    } catch (error: any) {
+      console.error('[HomeScreen] Error loading trips:', error.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [user]);
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchTrips();
+    }, [fetchTrips])
+  );
+
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
@@ -27,20 +65,55 @@ export default function HomeScreen({ navigation }: Props) {
           </View>
         </View>
 
-        {/* Main Trip Card (Removed hardcoded data - empty state below) */}
-        {/* Prompt Card */}
-        <View style={styles.promptCard}>
-          <Text style={styles.promptTitle}>Pronto para a próxima?</Text>
-          <Text style={styles.promptSubtitle}>
-            Descobre a melhor rota e a banda sonora{'\n'}perfeita para o caminho.
-          </Text>
-          <TouchableOpacity 
-            style={styles.promptButton}
-            onPress={() => navigation.navigate('NewTripModal')}
-          >
-            <Text style={styles.promptButtonText}>Criar Nova Viagem</Text>
-          </TouchableOpacity>
-        </View>
+        {loading ? (
+          <ActivityIndicator size="large" color={colors.primary} style={{ marginTop: 40 }} />
+        ) : trips.length > 0 ? (
+          trips.map(trip => (
+            <View key={trip.id} style={styles.mainTripCard}>
+              <View style={[styles.tripImage, { backgroundColor: colors.inputBackground, borderTopLeftRadius: 24, borderTopRightRadius: 24 }]} />
+              <View style={styles.tripContent}>
+                <Text style={styles.tripTitle}>{trip.title}</Text>
+                
+                <View style={styles.statsRow}>
+                  <View style={styles.statItem}>
+                    <Navigation color={colors.primary} size={16} />
+                    <Text style={styles.statText}>{trip.distance}</Text>
+                  </View>
+                  <View style={styles.statDot} />
+                  <View style={styles.statItem}>
+                    <Clock color={colors.primary} size={16} />
+                    <Text style={styles.statText}>{trip.duration}</Text>
+                  </View>
+                </View>
+                
+                <View style={styles.itinerarySnippet}>
+                  <View style={styles.timeline}>
+                    <View style={styles.dot} />
+                    <View style={styles.line} />
+                    <View style={[styles.dot, styles.dotEmpty]} />
+                  </View>
+                  <View style={styles.locations}>
+                    <Text style={styles.locationText}>{trip.origin}</Text>
+                    <Text style={styles.locationText}>{trip.destination}</Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          ))
+        ) : (
+          <View style={styles.promptCard}>
+            <Text style={styles.promptTitle}>Pronto para a próxima?</Text>
+            <Text style={styles.promptSubtitle}>
+              Descobre a melhor rota e a banda sonora{'\n'}perfeita para o caminho.
+            </Text>
+            <TouchableOpacity 
+              style={styles.promptButton}
+              onPress={() => navigation.navigate('NewTripModal')}
+            >
+              <Text style={styles.promptButtonText}>Criar Nova Viagem</Text>
+            </TouchableOpacity>
+          </View>
+        )}
 
       </ScrollView>
     </SafeAreaView>