Faro & grafana improvements

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