Faro & grafana improvements 2

apps/frontend-mobile/components/MedicineCard.tsx

@@ -1,46 +1,54 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius } from '../constants/theme';
 import { StockBadge } from './StockBadge';
 import { Medicine } from '../types';
 
+const TABLET_MIN_WIDTH = 768;
+
 interface MedicineCardProps {
   medicine: Medicine;
 }
 
 export function MedicineCard({ medicine }: MedicineCardProps) {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   const handlePress = () => {
     router.push(`/medicine/${medicine.nregistro}`);
   };
 
   return (
-    <TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
+    <TouchableOpacity
+      style={[styles.card, isTablet && styles.cardTablet]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
       <View style={styles.header}>
-        <Text style={styles.name} numberOfLines={2}>
+        <Text style={[styles.name, isTablet && styles.nameTablet]} numberOfLines={2}>
           {medicine.nombre}
         </Text>
         <StockBadge stock={medicine.stock} />
       </View>
-      
+
       <Text style={styles.principioActivo} numberOfLines={1}>
         {medicine.principioActivo}
       </Text>
-      
+
       <View style={styles.footer}>
         <View style={styles.priceContainer}>
           <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
-          <Text style={styles.price}>
+          <Text style={[styles.price, isTablet && styles.priceTablet]}>
             {medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
           </Text>
         </View>
-        
+
         <View style={styles.labContainer}>
           <Ionicons name="business" size={14} color={colors.textSecondary} />
-          <Text style={styles.laboratorio} numberOfLines={1}>
+          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet]} numberOfLines={1}>
             {medicine.laboratorio}
           </Text>
         </View>
@@ -62,6 +70,12 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
   },
+  cardTablet: {
+    padding: spacing.lg,
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -75,6 +89,9 @@ const styles = StyleSheet.create({
     color: colors.text,
     marginRight: spacing.sm,
   },
+  nameTablet: {
+    fontSize: 18,
+  },
   principioActivo: {
     fontSize: 14,
     color: colors.textSecondary,
@@ -95,6 +112,9 @@ const styles = StyleSheet.create({
     color: colors.primary,
     marginLeft: spacing.xs,
   },
+  priceTablet: {
+    fontSize: 16,
+  },
   labContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -107,4 +127,8 @@ const styles = StyleSheet.create({
     marginLeft: spacing.xs,
     maxWidth: 120,
   },
+  laboratorioTablet: {
+    fontSize: 14,
+    maxWidth: 200,
+  },
 });