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,8 +11,12 @@ 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);
@@ -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}
@@ -66,7 +70,7 @@ export default function HomeScreen() {
       {isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
 
       {error && (
-        <View style={styles.errorContainer}>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
           <Text style={styles.errorText}>{error}</Text>
         </View>
       )}
@@ -81,7 +85,7 @@ export default function HomeScreen() {
         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}

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,
+  };
+}