Faro & grafana improvements

apps/frontend-mobile/.mimocode/.cron-lock

@@ -0,0 +1 @@
+{"pid":1390854,"startedAt":1783459832497}

apps/frontend-mobile/app/(tabs)/_layout.tsx

@@ -1,9 +1,11 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colors, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 function ScanIcon({ color, size }: { color: string; size: number }) {
   return (
     <View style={styles.fabContainer}>
@@ -16,6 +18,8 @@ function ScanIcon({ color, size }: { color: string; size: number }) {
 
 export default function TabLayout() {
   const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
 
   return (
@@ -24,14 +28,20 @@ export default function TabLayout() {
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
         tabBarStyle: {
-          ...styles.tabBar,
-          height: 60 + bottomPadding,
+          ...(isTablet ? styles.tabBarTablet : styles.tabBar),
+          height: (isTablet ? 64 : 60) + bottomPadding,
           paddingBottom: bottomPadding,
         },
-        tabBarLabelStyle: styles.tabBarLabel,
+        tabBarLabelStyle: {
+          ...styles.tabBarLabel,
+          ...(isTablet ? styles.tabBarLabelTablet : {}),
+        },
         headerStyle: styles.header,
         headerTintColor: colors.primary,
-        headerTitleStyle: styles.headerTitle,
+        headerTitleStyle: {
+          ...styles.headerTitle,
+          ...(isTablet ? styles.headerTitleTablet : {}),
+        },
       }}
     >
       <Tabs.Screen
@@ -94,10 +104,19 @@ const styles = StyleSheet.create({
     borderTopColor: colors.border,
     paddingTop: 8,
   },
+  tabBarTablet: {
+    backgroundColor: colors.card,
+    borderTopColor: colors.border,
+    paddingTop: 10,
+    paddingHorizontal: 24,
+  },
   tabBarLabel: {
     fontSize: 11,
     fontWeight: '500',
   },
+  tabBarLabelTablet: {
+    fontSize: 13,
+  },
   header: {
     backgroundColor: colors.card,
     shadowColor: '#000',
@@ -111,6 +130,9 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: 17,
   },
+  headerTitleTablet: {
+    fontSize: 20,
+  },
   fabContainer: {
     position: 'absolute',
     top: -16,

apps/frontend-mobile/app/(tabs)/alerts.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 
+const TABLET_MIN_WIDTH = 768;
+
 interface NotificationItem {
   scope: string;
   id: number;
@@ -16,6 +18,8 @@ interface NotificationItem {
 }
 
 export default function AlertsScreen() {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const [items, setItems] = useState<NotificationItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -127,15 +131,15 @@ export default function AlertsScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.title}>Notificaciones Guardadas</Text>
-        <Text style={styles.subtitle}>
+      <View style={[styles.header, isTablet && styles.headerTablet]}>
+        <Text style={[styles.title, isTablet && styles.titleTablet]}>Notificaciones Guardadas</Text>
+        <Text style={[styles.subtitle, isTablet && styles.subtitleTablet]}>
           Recibe avisos cuando medicamentos sin stock se repongan
         </Text>
       </View>
 
       {error && (
-        <View style={styles.errorContainer}>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
           <Text style={styles.errorText}>{error}</Text>
           <TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
             <Text style={styles.retryText}>Reintentar</Text>
@@ -145,9 +149,9 @@ export default function AlertsScreen() {
 
       {!error && items.length === 0 && (
         <View style={styles.emptyContainer}>
-          <Ionicons name="notifications-off-outline" size={64} color={colors.border} />
-          <Text style={styles.emptyTitle}>Sin notificaciones</Text>
-          <Text style={styles.emptyText}>
+          <Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} />
+          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet]}>Sin notificaciones</Text>
+          <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet]}>
             Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.
           </Text>
         </View>
@@ -158,7 +162,7 @@ export default function AlertsScreen() {
           data={items}
           keyExtractor={(item) => `${item.scope}:${item.id}`}
           renderItem={renderItem}
-          contentContainerStyle={styles.list}
+          contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
           showsVerticalScrollIndicator={false}
         />
       )}
@@ -176,22 +180,39 @@ const styles = StyleSheet.create({
     paddingTop: spacing.lg,
     paddingBottom: spacing.md,
   },
+  headerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   title: {
     fontSize: 22,
     fontWeight: 'bold',
     color: colors.text,
   },
+  titleTablet: {
+    fontSize: 28,
+  },
   subtitle: {
     fontSize: 14,
     color: colors.textSecondary,
     marginTop: spacing.xs,
     lineHeight: 20,
   },
+  subtitleTablet: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
   list: {
     paddingHorizontal: spacing.lg,
     paddingBottom: spacing.xl,
     gap: spacing.sm,
   },
+  listTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   item: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -249,6 +270,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.sm,
   },
+  errorContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+  },
   errorText: {
     fontSize: 14,
     color: colors.danger,
@@ -275,10 +300,18 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: colors.text,
   },
+  emptyTitleTablet: {
+    fontSize: 24,
+  },
   emptyText: {
     fontSize: 14,
     color: colors.textSecondary,
     textAlign: 'center',
     lineHeight: 20,
   },
+  emptyTextTablet: {
+    fontSize: 16,
+    maxWidth: 400,
+    lineHeight: 24,
+  },
 });

apps/frontend-mobile/app/(tabs)/home.tsx

@@ -1,51 +1,55 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function HomeScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   return (
     <View style={styles.container}>
-      <View style={styles.hero}>
+      <View style={[styles.hero, isTablet && styles.heroTablet]}>
         <Image
           source={require('../../assets/farmaclic_logo.png')}
-          style={styles.logo}
+          style={[styles.logo, isTablet && styles.logoTablet]}
           resizeMode="contain"
         />
-        <Text style={styles.brandName}>FarmaClic</Text>
-        <Text style={styles.description}>
+        <Text style={[styles.brandName, isTablet && styles.brandNameTablet]}>FarmaClic</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
           Encuentra tus medicamentos en farmacias cercanas
         </Text>
       </View>
 
-      <View style={styles.cards}>
+      <View style={[styles.cards, isTablet && styles.cardsTablet]}>
         <TouchableOpacity
-          style={styles.card}
+          style={[styles.card, isTablet && styles.cardTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/(tabs)')}
         >
           <View style={[styles.cardIcon, styles.cardIconSearch]}>
-            <Ionicons name="search" size={24} color={colors.onPrimaryContainer} />
+            <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
           </View>
           <View style={styles.cardContent}>
-            <Text style={styles.cardLabel}>Buscar Medicamento</Text>
+            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet]}>Buscar Medicamento</Text>
             <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>
 
         <TouchableOpacity
-          style={[styles.card, styles.cardScan]}
+          style={[styles.card, styles.cardScan, isTablet && styles.cardTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/scanner')}
         >
           <View style={[styles.cardIcon, styles.cardIconScan]}>
-            <Ionicons name="scan" size={24} color="#ffffff" />
+            <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
           </View>
           <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, styles.cardLabelScan]}>Escanear TSI</Text>
+            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
             <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>
@@ -68,17 +72,27 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
     marginBottom: spacing.md,
   },
+  heroTablet: {
+    marginBottom: spacing.xl,
+  },
   logo: {
     width: 120,
     height: 120,
     marginBottom: spacing.xs,
   },
+  logoTablet: {
+    width: 160,
+    height: 160,
+  },
   brandName: {
     fontSize: 28,
     fontWeight: 'bold',
     color: colors.text,
     letterSpacing: -0.5,
   },
+  brandNameTablet: {
+    fontSize: 36,
+  },
   description: {
     fontSize: 16,
     color: colors.textSecondary,
@@ -86,11 +100,19 @@ const styles = StyleSheet.create({
     maxWidth: 260,
     lineHeight: 24,
   },
+  descriptionTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+    lineHeight: 28,
+  },
   cards: {
     width: '100%',
     maxWidth: 320,
     gap: spacing.md,
   },
+  cardsTablet: {
+    maxWidth: 480,
+  },
   card: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -101,6 +123,10 @@ const styles = StyleSheet.create({
     minHeight: 64,
     ...shadows.card,
   },
+  cardTablet: {
+    padding: spacing.lg,
+    minHeight: 72,
+  },
   cardScan: {
     backgroundColor: colors.scanButton,
   },
@@ -131,6 +157,9 @@ const styles = StyleSheet.create({
     color: colors.onPrimaryContainer,
     lineHeight: 24,
   },
+  cardLabelTablet: {
+    fontSize: 20,
+  },
   cardLabelScan: {
     color: '#ffffff',
   },

apps/frontend-mobile/app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { SearchBar } from '../../components/SearchBar';
@@ -11,13 +11,17 @@ import { colors, spacing, borderRadius } from '../../constants/theme';
 import { Medicine } from '../../types';
 import { config } from '../../constants/config';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function HomeScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<Medicine[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  
+
   const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
 
   useEffect(() => {
@@ -49,7 +53,7 @@ export default function HomeScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.searchContainer}>
+      <View style={[styles.searchContainer, isTablet && styles.searchContainerTablet]}>
         <SearchBar
           onSearch={handleSearch}
           value={query}
@@ -62,26 +66,26 @@ export default function HomeScreen() {
           <Ionicons name="scan" size={22} color="#ffffff" />
         </TouchableOpacity>
       </View>
-      
+
       {isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
-      
+
       {error && (
-        <View style={styles.errorContainer}>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
           <Text style={styles.errorText}>{error}</Text>
         </View>
       )}
-      
+
       {!isLoading && !error && results.length === 0 && query.length >= 2 && (
         <View style={styles.emptyContainer}>
           <Text style={styles.emptyText}>No se encontraron medicamentos</Text>
         </View>
       )}
-      
+
       <FlatList
         data={results}
         keyExtractor={(item) => item.nregistro}
         renderItem={({ item }) => <MedicineCard medicine={item} />}
-        contentContainerStyle={styles.list}
+        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
         showsVerticalScrollIndicator={false}
       />
     </View>
@@ -98,6 +102,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingRight: spacing.lg,
   },
+  searchContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   scannerButton: {
     width: 44,
     height: 44,
@@ -114,12 +123,21 @@ const styles = StyleSheet.create({
   list: {
     paddingBottom: spacing.xl,
   },
+  listTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   errorContainer: {
     padding: spacing.md,
     marginHorizontal: spacing.lg,
     backgroundColor: colors.dangerContainer,
     borderRadius: borderRadius.lg,
   },
+  errorContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+  },
   errorText: {
     color: colors.danger,
     textAlign: 'center',

apps/frontend-mobile/app/(tabs)/profile.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert, TextInput, ScrollView, Image, ActivityIndicator, Modal, Pressable } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Alert, TextInput, ScrollView, Image, ActivityIndicator, Modal, Pressable, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import { useAuth } from '../../hooks/useAuth';
 import { colors, spacing, borderRadius } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 const AVATARS = [
   require('../../assets/avatars/avatar1.png'),
   require('../../assets/avatars/avatar2.png'),
@@ -44,6 +46,8 @@ interface Address {
 
 export default function ProfileScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth();
 
   const [firstName, setFirstName] = useState(user?.first_name || '');
@@ -388,16 +392,16 @@ export default function ProfileScreen() {
     return (
       <View style={styles.container}>
         <View style={styles.authPrompt}>
-          <Ionicons name="person-outline" size={64} color={colors.textSecondary} />
-          <Text style={styles.authTitle}>Inicia Sesión</Text>
-          <Text style={styles.authSubtitle}>
+          <Ionicons name="person-outline" size={isTablet ? 80 : 64} color={colors.textSecondary} />
+          <Text style={[styles.authTitle, isTablet && styles.authTitleTablet]}>Inicia Sesión</Text>
+          <Text style={[styles.authSubtitle, isTablet && styles.authSubtitleTablet]}>
             Inicia sesión para acceder a todas las funcionalidades
           </Text>
           <TouchableOpacity
-            style={styles.button}
+            style={[styles.button, isTablet && styles.buttonTablet]}
             onPress={() => router.push('/auth/login')}
           >
-            <Text style={styles.buttonText}>Iniciar Sesión</Text>
+            <Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar Sesión</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.linkButton}
@@ -413,12 +417,12 @@ export default function ProfileScreen() {
   return (
     <ScrollView style={styles.container}>
       {/* Avatar Section */}
-      <View style={styles.avatarSection}>
-        <TouchableOpacity style={styles.avatarContainer} onPress={() => setShowAvatarModal(true)}>
+      <View style={[styles.avatarSection, isTablet && styles.avatarSectionTablet]}>
+        <TouchableOpacity style={[styles.avatarContainer, isTablet && styles.avatarContainerTablet]} onPress={() => setShowAvatarModal(true)}>
           {avatarUrl ? (
-            <Image source={{ uri: avatarUrl }} style={styles.avatarImage} />
+            <Image source={{ uri: avatarUrl }} style={[styles.avatarImage, isTablet && styles.avatarImageTablet]} />
           ) : (
-            <Ionicons name="person" size={40} color={colors.primary} />
+            <Ionicons name="person" size={isTablet ? 50 : 40} color={colors.primary} />
           )}
           <View style={styles.avatarOverlay}>
             <Ionicons name="camera" size={24} color="white" />
@@ -428,7 +432,7 @@ export default function ProfileScreen() {
       </View>
 
       {/* Read-only Name Section */}
-      <View style={styles.infoSection}>
+      <View style={[styles.infoSection, isTablet && styles.infoSectionTablet]}>
         <View style={styles.infoCard}>
           <Text style={styles.infoLabel}>Nombre</Text>
           <Text style={styles.infoValue}>{firstName || '—'}</Text>
@@ -440,7 +444,7 @@ export default function ProfileScreen() {
       </View>
 
       {/* Menu Section */}
-      <View style={styles.menuSection}>
+      <View style={[styles.menuSection, isTablet && styles.menuSectionTablet]}>
         <TouchableOpacity style={styles.menuItem} onPress={openConfig}>
           <Ionicons name="settings" size={24} color={colors.textSecondary} />
           <Text style={styles.menuText}>Configuración</Text>
@@ -459,7 +463,7 @@ export default function ProfileScreen() {
             {searchHistory.map((item) => (
               <View key={item.id} style={styles.searchItem}>
                 <Text style={styles.searchAddress}>{item.address}</Text>
-                <TouchableOpacity 
+                <TouchableOpacity
                   onPress={() => handleDeleteSearch(item.id)}
                   style={styles.searchDelete}
                 >
@@ -480,7 +484,7 @@ export default function ProfileScreen() {
       </View>
 
       {/* Logout Button */}
-      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+      <TouchableOpacity style={[styles.logoutButton, isTablet && styles.logoutButtonTablet]} onPress={handleLogout}>
         <Ionicons name="log-out" size={20} color={colors.danger} />
         <Text style={styles.logoutText}>Cerrar Sesión</Text>
       </TouchableOpacity>

apps/frontend-mobile/app/(tabs)/scan.tsx

@@ -1,29 +1,33 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function ScanTabScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   return (
     <View style={styles.container}>
-      <View style={styles.content}>
-        <View style={styles.iconContainer}>
-          <Ionicons name="scan" size={64} color={colors.scanButton} />
+      <View style={[styles.content, isTablet && styles.contentTablet]}>
+        <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet]}>
+          <Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
         </View>
-        <Text style={styles.title}>Escanear TSI</Text>
-        <Text style={styles.description}>
+        <Text style={[styles.title, isTablet && styles.titleTablet]}>Escanear TSI</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
           Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos
         </Text>
         <TouchableOpacity
-          style={[styles.button, shadows.scanButton]}
+          style={[styles.button, shadows.scanButton, isTablet && styles.buttonTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/scanner')}
         >
-          <Ionicons name="scan" size={24} color="#ffffff" />
-          <Text style={styles.buttonText}>Iniciar escaneo</Text>
+          <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
+          <Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar escaneo</Text>
         </TouchableOpacity>
       </View>
     </View>
@@ -42,6 +46,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xl,
     gap: spacing.md,
   },
+  contentTablet: {
+    gap: spacing.lg,
+  },
   iconContainer: {
     width: 100,
     height: 100,
@@ -51,11 +58,19 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: spacing.sm,
   },
+  iconContainerTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   title: {
     fontSize: 22,
     fontWeight: 'bold',
     color: colors.text,
   },
+  titleTablet: {
+    fontSize: 28,
+  },
   description: {
     fontSize: 15,
     color: colors.textSecondary,
@@ -63,6 +78,11 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     maxWidth: 280,
   },
+  descriptionTablet: {
+    fontSize: 17,
+    maxWidth: 420,
+    lineHeight: 26,
+  },
   button: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -73,9 +93,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.xl,
     marginTop: spacing.md,
   },
+  buttonTablet: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.xl * 1.5,
+  },
   buttonText: {
     fontSize: 17,
     fontWeight: '600',
     color: '#ffffff',
   },
+  buttonTextTablet: {
+    fontSize: 20,
+  },
 });

apps/frontend-mobile/hooks/useResponsive.ts

@@ -0,0 +1,29 @@
+import { useWindowDimensions } from 'react-native';
+
+const TABLET_MIN_WIDTH = 768;
+
+export function useResponsive() {
+  const { width, height } = useWindowDimensions();
+
+  const isTablet = width >= TABLET_MIN_WIDTH;
+  const isLandscape = width > height;
+
+  // Scale factor for tablet: 1.0 on phone, ~1.2 on tablet
+  const scale = isTablet ? 1.2 : 1.0;
+
+  // Max content width to prevent stretching on large screens
+  const maxContentWidth = isTablet ? Math.min(600, width * 0.6) : width;
+
+  // Horizontal padding: more on tablets to center content
+  const horizontalPadding = isTablet ? 48 : 24;
+
+  return {
+    width,
+    height,
+    isTablet,
+    isLandscape,
+    scale,
+    maxContentWidth,
+    horizontalPadding,
+  };
+}

apps/frontend/src/App.jsx

@@ -9,6 +9,7 @@ import AdminView from './views/AdminView';
 import LoginModal from './components/LoginModal';
 import SavedNotifications from './components/SavedNotifications';
 import BottomNav from './components/BottomNav';
+import { getFaro } from './utils/faro';
 
 function App() {
   const [screen, setScreen] = useState('home');
@@ -40,7 +41,10 @@ function App() {
     fetch('/api/auth/check')
       .then(r => r.json())
       .then(data => { if (data.authenticated) setCurrentUser(data.user); })
-      .catch(() => {})
+      .catch((err) => {
+        console.warn('[auth/check]', err);
+        getFaro()?.pushError(err, { type: 'network', url: '/api/auth/check' });
+      })
       .finally(() => setAuthChecked(true));
 
     window.addEventListener('resize', handleResize);
@@ -57,7 +61,10 @@ function App() {
         const count = (data.global?.length || 0) + (data.pharmacy?.length || 0);
         setBadgeCount(count);
       })
-      .catch(() => {});
+      .catch((err) => {
+        console.warn('[notifications/mine]', err);
+        getFaro()?.pushError(err, { type: 'network', url: '/api/notifications/mine' });
+      });
     return () => { cancelled = true; };
   }, [currentUser]);
 
@@ -69,7 +76,10 @@ function App() {
         if (!data) return;
         setBadgeCount((data.global?.length || 0) + (data.pharmacy?.length || 0));
       })
-      .catch(() => {});
+      .catch((err) => {
+        console.warn('[refreshBadge]', err);
+        getFaro()?.pushError(err, { type: 'network', url: '/api/notifications/mine' });
+      });
   }
 
   function handleLogin(user) {

apps/frontend/src/components/ErrorBoundary.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    // Report to Faro if available
+    try {
+      const faro = window.__faro;
+      if (faro?.api?.pushError) {
+        faro.api.pushError(error, { type: 'react-boundary', componentStack: info.componentStack });
+      }
+    } catch {
+      // Faro reporting must never break the app
+    }
+    console.error('[ErrorBoundary]', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          padding: '2rem',
+          textAlign: 'center',
+          fontFamily: 'system-ui, sans-serif',
+          color: '#333',
+        }}>
+          <h2>Algo salió mal</h2>
+          <p style={{ color: '#666' }}>Ha ocurrido un error inesperado. Por favor, recarga la página.</p>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1.5rem',
+              backgroundColor: '#27633a',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+            }}
+          >
+            Recargar
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

apps/frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
 import './index.css';
 import { initNativeShell } from './utils/native';
 import { initFaro } from './utils/faro';
@@ -9,9 +10,19 @@ import { initFaro } from './utils/faro';
 // No-op if VITE_FARO_ENDPOINT is not configured.
 initFaro();
 
+// Global unhandled promise rejection handler — report to Faro
+window.addEventListener('unhandledrejection', (event) => {
+  console.warn('[unhandledrejection]', event.reason);
+  try {
+    window.__faro?.api?.pushError(event.reason, { type: 'unhandled-rejection' });
+  } catch { /* Faro must never break the app */ }
+});
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );
 

apps/frontend/src/utils/faro.js

@@ -17,6 +17,11 @@ import { TracingInstrumentation } from '@grafana/faro-web-tracing';
 import { OtlpHttpTransport } from '@grafana/faro-transport-otlp-http';
 
 let initialized = false;
+let faroApi = null;
+
+export function getFaro() {
+  return faroApi;
+}
 
 export function initFaro() {
   if (initialized) return;
@@ -34,7 +39,7 @@ export function initFaro() {
   const version = import.meta.env.VITE_FARO_APP_VERSION || '1.0.0';
 
   try {
-    initializeFaro({
+    const faro = initializeFaro({
       url: `${endpoint.replace(/\/$/, '')}/v1/traces`,
       app: {
         name: appName,
@@ -61,6 +66,9 @@ export function initFaro() {
         url: `${endpoint.replace(/\/$/, '')}/v1/traces`,
       }),
     });
+    faroApi = faro.api;
+    // Expose for ErrorBoundary and manual reporting
+    window.__faro = faro;
   } catch (err) {
     // Never let Faro init failure break the app.
     // eslint-disable-next-line no-console