Missing files from commit

apps/frontend-mobile/app/medicine/[id].tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
 import { getMedicine, getMedicinePharmacies } from '../../services/medicines';
 import { StockBadge } from '../../components/StockBadge';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
@@ -35,6 +36,11 @@ export default function MedicineDetailScreen() {
     fetchMedicine();
   }, [id]);
 
+  const handleDirections = (latitude: number, longitude: number) => {
+    const url = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;
+    Linking.openURL(url);
+  };
+
   if (isLoading) {
     return <LoadingSpinner message="Cargando medicamento..." />;
   }
@@ -74,20 +80,30 @@ export default function MedicineDetailScreen() {
           <Text style={styles.noPharmacies}>No hay farmacias con este medicamento</Text>
         ) : (
           pharmacies.map((pharm) => (
-            <TouchableOpacity
-              key={pharm.id}
-              style={styles.pharmacyCard}
-              onPress={() => router.push(`/pharmacy/${pharm.pharmacy_id}`)}
-            >
-              <View style={styles.pharmacyInfo}>
-                <Text style={styles.pharmacyName}>{pharm.pharmacy?.name}</Text>
-                <Text style={styles.pharmacyAddress}>{pharm.pharmacy?.address}</Text>
-              </View>
-              <View style={styles.pharmacyStock}>
-                <Text style={styles.price}>{pharm.price.toFixed(2)} €</Text>
-                <Text style={styles.stock}>Stock: {pharm.stock}</Text>
-              </View>
-            </TouchableOpacity>
+            <View key={pharm.id} style={styles.pharmacyCard}>
+              <TouchableOpacity
+                style={styles.pharmacyCardContent}
+                onPress={() => router.push(`/pharmacy/${pharm.pharmacy_id}`)}
+              >
+                <View style={styles.pharmacyInfo}>
+                  <Text style={styles.pharmacyName}>{pharm.pharmacy?.name}</Text>
+                  <Text style={styles.pharmacyAddress}>{pharm.pharmacy?.address}</Text>
+                </View>
+                <View style={styles.pharmacyStock}>
+                  <Text style={styles.price}>{pharm.price.toFixed(2)} €</Text>
+                  <Text style={styles.stock}>Stock: {pharm.stock}</Text>
+                </View>
+              </TouchableOpacity>
+              {pharm.pharmacy?.latitude != null && pharm.pharmacy?.longitude != null && (
+                <TouchableOpacity
+                  style={styles.directionsButton}
+                  onPress={() => handleDirections(pharm.pharmacy.latitude, pharm.pharmacy.longitude)}
+                >
+                  <Ionicons name="navigate" size={16} color={colors.primary} />
+                  <Text style={styles.directionsText}>Cómo llegar</Text>
+                </TouchableOpacity>
+              )}
+            </View>
           ))
         )}
       </View>
@@ -160,12 +176,15 @@ const styles = StyleSheet.create({
     padding: spacing.xl,
   },
   pharmacyCard: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
     backgroundColor: colors.card,
     borderRadius: borderRadius.md,
-    padding: spacing.md,
     marginBottom: spacing.sm,
+    overflow: 'hidden',
+  },
+  pharmacyCardContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: spacing.md,
   },
   pharmacyInfo: {
     flex: 1,
@@ -193,6 +212,20 @@ const styles = StyleSheet.create({
     color: colors.textSecondary,
     marginTop: spacing.xs,
   },
+  directionsButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.sm,
+    borderTopWidth: 1,
+    borderTopColor: colors.separator,
+  },
+  directionsText: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '600',
+  },
   errorContainer: {
     flex: 1,
     justifyContent: 'center',