Ichitux/FarmaFinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): add bilingual support (Català / Castellano) #41

Merged
Ichitux merged 4 commits from feat/i18n-bilingual-ca-es into main 2026-07-17 08:40:15 +00:00
Conversation 0 Commits 4 Files Changed 47
+2142 -582
47 changed files with 2142 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend-mobile/app/(tabs)/_layout.tsx
+7 -5
View File
@@ -3,6 +3,7 @@ import { Ionicons } from '@expo/vector-icons';
import { View, StyleSheet, useWindowDimensions } from 'react-native'; import { View, StyleSheet, useWindowDimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { useTranslation } from '../../src/i18n';
import { shadows } from '../../constants/theme'; import { shadows } from '../../constants/theme';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -25,6 +26,7 @@ export default function TabLayout() {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
// Use safe area insets if available, otherwise use standard Android nav bar height // Use safe area insets if available, otherwise use standard Android nav bar height
const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT; const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT;
@@ -62,7 +64,7 @@ export default function TabLayout() {
<Tabs.Screen <Tabs.Screen
name="index" name="index"
options={{ options={{
title: 'Inicio', title: t('nav.home'),
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<Ionicons name="home" size={size} color={color} /> <Ionicons name="home" size={size} color={color} />
), ),
@@ -71,7 +73,7 @@ export default function TabLayout() {
<Tabs.Screen <Tabs.Screen
name="search" name="search"
options={{ options={{
title: 'Buscar', title: t('nav.search'),
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<Ionicons name="search" size={size} color={color} /> <Ionicons name="search" size={size} color={color} />
), ),
@@ -80,7 +82,7 @@ export default function TabLayout() {
<Tabs.Screen <Tabs.Screen
name="scan" name="scan"
options={{ options={{
title: 'Escanear', title: t('nav.scan'),
tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />, tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />,
tabBarLabel: () => null, tabBarLabel: () => null,
}} }}
@@ -88,7 +90,7 @@ export default function TabLayout() {
<Tabs.Screen <Tabs.Screen
name="alerts" name="alerts"
options={{ options={{
title: 'Avisos', title: t('nav.alerts'),
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<Ionicons name="notifications" size={size} color={color} /> <Ionicons name="notifications" size={size} color={color} />
), ),
@@ -103,7 +105,7 @@ export default function TabLayout() {
<Tabs.Screen <Tabs.Screen
name="profile" name="profile"
options={{ options={{
title: 'Perfil', title: t('nav.profile'),
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<Ionicons name="person" size={size} color={color} /> <Ionicons name="person" size={size} color={color} />
), ),
apps/frontend-mobile/app/(tabs)/alerts.tsx
+19 -17
View File
@@ -6,6 +6,7 @@ import { useThemeContext } from '../../components/ThemeProvider';
import { useAuth } from '../../hooks/useAuth'; import { useAuth } from '../../hooks/useAuth';
import { spacing, borderRadius, shadows } from '../../constants/theme'; import { spacing, borderRadius, shadows } from '../../constants/theme';
import { LoadingSpinner } from '../../components/LoadingSpinner'; import { LoadingSpinner } from '../../components/LoadingSpinner';
import { useTranslation } from '../../src/i18n';
import api from '../../services/api'; import api from '../../services/api';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -22,6 +23,7 @@ interface NotificationItem {
} }
export default function AlertsScreen() { export default function AlertsScreen() {
const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
@@ -54,7 +56,7 @@ export default function AlertsScreen() {
); );
setItems(merged); setItems(merged);
} catch (err: any) { } catch (err: any) {
setError(err.message || 'No se pudieron cargar las notificaciones'); setError(err.message || t('alerts.loadError'));
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -63,12 +65,12 @@ export default function AlertsScreen() {
async function handleDelete(item: NotificationItem) { async function handleDelete(item: NotificationItem) {
const key = `${item.scope}:${item.id}`; const key = `${item.scope}:${item.id}`;
Alert.alert( Alert.alert(
'Eliminar notificación', t('alerts.delete'),
`¿Eliminar la notificación de ${item.medicine_name || item.medicine_nregistro}?`, `${t('alerts.deleteConfirm')} ${item.medicine_name || item.medicine_nregistro}?`,
[ [
{ text: 'Cancelar', style: 'cancel' }, { text: t('alerts.cancel'), style: 'cancel' },
{ {
text: 'Eliminar', text: t('alerts.confirmDelete'),
style: 'destructive', style: 'destructive',
onPress: async () => { onPress: async () => {
setDeletingId(key); setDeletingId(key);
@@ -78,7 +80,7 @@ export default function AlertsScreen() {
}); });
setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id))); setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
} catch (err: any) { } catch (err: any) {
Alert.alert('Error', err.message || 'No se pudo eliminar'); Alert.alert('Error', err.message || t('alerts.deleteError'));
} finally { } finally {
setDeletingId(null); setDeletingId(null);
} }
@@ -105,8 +107,8 @@ export default function AlertsScreen() {
/> />
<Text style={[styles.chipText, { color: colors.onPrimaryContainer }]}> <Text style={[styles.chipText, { color: colors.onPrimaryContainer }]}>
{item.scope === 'pharmacy' {item.scope === 'pharmacy'
? item.pharmacy_name || `Farmacia #${item.pharmacy_id}` ? item.pharmacy_name || `${t('alerts.pharmacy')} #${item.pharmacy_id}`
: 'Cualquier farmacia'} : t('alerts.anyPharmacy')}
</Text> </Text>
</View> </View>
{item.pharmacy_address && ( {item.pharmacy_address && (
@@ -132,22 +134,22 @@ export default function AlertsScreen() {
} }
if (isLoading || authLoading) { if (isLoading || authLoading) {
return <LoadingSpinner message="Cargando notificaciones..." />; return <LoadingSpinner message={t('alerts.loading')} />;
} }
if (!isAuthenticated) { if (!isAuthenticated) {
return ( return (
<View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}> <View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}>
<Ionicons name="lock-closed-outline" size={64} color={colors.border} /> <Ionicons name="lock-closed-outline" size={64} color={colors.border} />
<Text style={[styles.loginTitle, { color: colors.text }]}>Inicia sesión para continuar</Text> <Text style={[styles.loginTitle, { color: colors.text }]}>{t('alerts.loginRequired')}</Text>
<Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}> <Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}>
Necesitas estar autenticado para ver tus notificaciones {t('alerts.loginDescription')}
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={[styles.loginButton, { backgroundColor: colors.primary }]} style={[styles.loginButton, { backgroundColor: colors.primary }]}
onPress={() => router.push('/auth/login')} onPress={() => router.push('/auth/login')}
> >
<Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text> <Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>{t('alerts.loginBtn')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
); );
@@ -156,9 +158,9 @@ export default function AlertsScreen() {
return ( return (
<View style={[styles.container, { backgroundColor: colors.background }]}> <View style={[styles.container, { backgroundColor: colors.background }]}>
<View style={[styles.header, isTablet && styles.headerTablet]}> <View style={[styles.header, isTablet && styles.headerTablet]}>
<Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Notificaciones Guardadas</Text> <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>{t('alerts.title')}</Text>
<Text style={[styles.subtitle, isTablet && styles.subtitleTablet, { color: colors.textSecondary }]}> <Text style={[styles.subtitle, isTablet && styles.subtitleTablet, { color: colors.textSecondary }]}>
Recibe avisos cuando medicamentos sin stock se repongan {t('alerts.description')}
</Text> </Text>
</View> </View>
@@ -166,7 +168,7 @@ export default function AlertsScreen() {
<View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}> <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
<Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text> <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
<TouchableOpacity onPress={loadNotifications} style={styles.retryButton}> <TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
<Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text> <Text style={[styles.retryText, { color: colors.primary }]}>{t('alerts.retry')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
@@ -174,9 +176,9 @@ export default function AlertsScreen() {
{!error && items.length === 0 && ( {!error && items.length === 0 && (
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
<Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} /> <Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} />
<Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>Sin notificaciones</Text> <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>{t('alerts.empty')}</Text>
<Text style={[styles.emptyText, isTablet && styles.emptyTextTablet, { color: colors.textSecondary }]}> <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet, { color: colors.textSecondary }]}>
Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga. {t('alerts.emptyDescription')}
</Text> </Text>
</View> </View>
)} )}
apps/frontend-mobile/app/(tabs)/index.tsx
+5 -3
View File
@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions }
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { useTranslation } from '../../src/i18n';
import { spacing, borderRadius, shadows } from '../../constants/theme'; import { spacing, borderRadius, shadows } from '../../constants/theme';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -12,6 +13,7 @@ export default function HomeScreen() {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
return ( return (
<View style={[styles.container, { backgroundColor: colors.background }]}> <View style={[styles.container, { backgroundColor: colors.background }]}>
@@ -23,7 +25,7 @@ export default function HomeScreen() {
/> />
<Text style={[styles.brandName, isTablet && styles.brandNameTablet, { color: colors.text }]}>FarmaClic</Text> <Text style={[styles.brandName, isTablet && styles.brandNameTablet, { color: colors.text }]}>FarmaClic</Text>
<Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}> <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
Encuentra tus medicamentos en farmacias cercanas {t('home.description')}
</Text> </Text>
</View> </View>
@@ -37,7 +39,7 @@ export default function HomeScreen() {
<Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} /> <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
</View> </View>
<View style={styles.cardContent}> <View style={styles.cardContent}>
<Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>Buscar Medicamento</Text> <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>{t('home.searchMedicine')}</Text>
<Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} /> <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@@ -51,7 +53,7 @@ export default function HomeScreen() {
<Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" /> <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
</View> </View>
<View style={styles.cardContent}> <View style={styles.cardContent}>
<Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text> <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>{t('home.scanTSI')}</Text>
<Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} /> <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
apps/frontend-mobile/app/(tabs)/profile.tsx
+81 -56
View File
@@ -6,6 +6,7 @@ import * as ImagePicker from 'expo-image-picker';
import { useAuth } from '../../hooks/useAuth'; import { useAuth } from '../../hooks/useAuth';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { useThemeStore, ThemeMode } from '../../store/themeStore'; import { useThemeStore, ThemeMode } from '../../store/themeStore';
import { useTranslation } from '../../src/i18n';
import { spacing, borderRadius, shadows } from '../../constants/theme'; import { spacing, borderRadius, shadows } from '../../constants/theme';
import api from '../../services/api'; import api from '../../services/api';
@@ -62,10 +63,10 @@ interface Address {
created_at: string; created_at: string;
} }
const THEME_OPTIONS: { mode: ThemeMode; label: string; icon: string }[] = [ const THEME_OPTIONS: { mode: ThemeMode; labelKey: string; icon: string }[] = [
{ mode: 'system', label: 'Sistema', icon: 'phone-portrait-outline' }, { mode: 'system', labelKey: 'profile.themeSystem', icon: 'phone-portrait-outline' },
{ mode: 'light', label: 'Claro', icon: 'sunny-outline' }, { mode: 'light', labelKey: 'profile.themeLight', icon: 'sunny-outline' },
{ mode: 'dark', label: 'Oscuro', icon: 'moon-outline' }, { mode: 'dark', labelKey: 'profile.themeDark', icon: 'moon-outline' },
]; ];
export default function ProfileScreen() { export default function ProfileScreen() {
@@ -74,6 +75,7 @@ export default function ProfileScreen() {
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth(); const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth();
const { colors, isDark } = useThemeContext(); const { colors, isDark } = useThemeContext();
const { t, lang, setLang } = useTranslation();
const themeMode = useThemeStore((s) => s.mode); const themeMode = useThemeStore((s) => s.mode);
const setThemeMode = useThemeStore((s) => s.setMode); const setThemeMode = useThemeStore((s) => s.setMode);
@@ -146,10 +148,10 @@ export default function ProfileScreen() {
}); });
setFirstName(res.data.first_name || ''); setFirstName(res.data.first_name || '');
setLastName(res.data.last_name || ''); setLastName(res.data.last_name || '');
setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' }); setConfigFeedback({ type: 'ok', text: t('profile.profileSaved') });
setTimeout(() => setShowConfig(false), 1200); setTimeout(() => setShowConfig(false), 1200);
} catch (err: any) { } catch (err: any) {
setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' }); setConfigFeedback({ type: 'err', text: err.message || t('profile.saveError') });
} finally { setConfigSaving(false); } } finally { setConfigSaving(false); }
} }
@@ -164,7 +166,7 @@ export default function ProfileScreen() {
async function handleTakePhoto() { async function handleTakePhoto() {
const { status } = await ImagePicker.requestCameraPermissionsAsync(); const { status } = await ImagePicker.requestCameraPermissionsAsync();
if (status !== 'granted') { Alert.alert('Permiso requerido', 'Necesitamos permiso para acceder a la cámara.'); return; } if (status !== 'granted') { Alert.alert(t('profile.cameraPermission'), t('profile.cameraPermissionDesc')); return; }
const result = await ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [1, 1], quality: 0.8, base64: true }); const result = await ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [1, 1], quality: 0.8, base64: true });
if (!result.canceled && result.assets[0]?.base64) { if (!result.canceled && result.assets[0]?.base64) {
const dataUri = `data:${result.assets[0].mimeType};base64,${result.assets[0].base64}`; const dataUri = `data:${result.assets[0].mimeType};base64,${result.assets[0].base64}`;
@@ -204,12 +206,12 @@ export default function ProfileScreen() {
async function handleAddressSave() { async function handleAddressSave() {
const addr = formAddress.trim(); const addr = formAddress.trim();
if (!addr) { setFormError('La dirección es obligatoria'); return; } if (!addr) { setFormError(t('profile.addressRequired')); return; }
setFormSaving(true); setFormError(''); setFormSaving(true); setFormError('');
try { try {
const url = editingAddressId ? `/api/addresses/${editingAddressId}` : '/api/addresses'; const url = editingAddressId ? `/api/addresses/${editingAddressId}` : '/api/addresses';
const res = await fetch(url, { method: editingAddressId ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ address: addr, label: formLabel.trim(), is_default: formDefault }) }); const res = await fetch(url, { method: editingAddressId ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ address: addr, label: formLabel.trim(), is_default: formDefault }) });
if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || 'Error al guardar'); } if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || t('profile.saveError')); }
setShowAddressForm(false); setEditingAddressId(null); loadAddresses(); setShowAddressForm(false); setEditingAddressId(null); loadAddresses();
} catch (err: any) { setFormError(err.message); } finally { setFormSaving(false); } } catch (err: any) { setFormError(err.message); } finally { setFormSaving(false); }
} }
@@ -223,9 +225,9 @@ export default function ProfileScreen() {
} }
const handleLogout = () => { const handleLogout = () => {
Alert.alert('Cerrar Sesión', '¿Estás seguro que deseas cerrar sesión?', [ Alert.alert(t('profile.logoutTitle'), t('profile.logoutConfirm'), [
{ text: 'Cancelar', style: 'cancel' }, { text: t('profile.logoutCancel'), style: 'cancel' },
{ text: 'Cerrar Sesión', style: 'destructive', onPress: async () => { await logout(); router.replace('/auth/login'); } }, { text: t('profile.logoutConfirmBtn'), style: 'destructive', onPress: async () => { await logout(); router.replace('/auth/login'); } },
]); ]);
}; };
@@ -246,12 +248,12 @@ export default function ProfileScreen() {
<View style={[styles.authIconCircle, { backgroundColor: colors.primaryContainer }]}> <View style={[styles.authIconCircle, { backgroundColor: colors.primaryContainer }]}>
<Ionicons name="person-outline" size={isTablet ? 60 : 48} color={colors.primary} /> <Ionicons name="person-outline" size={isTablet ? 60 : 48} color={colors.primary} />
</View> </View>
<Text style={[styles.authTitle, isTablet && styles.authTitleTablet, { color: colors.text }]}>Inicia Sesión</Text> <Text style={[styles.authTitle, isTablet && styles.authTitleTablet, { color: colors.text }]}>{t('profile.loginTitle')}</Text>
<Text style={[styles.authSubtitle, isTablet && styles.authSubtitleTablet, { color: colors.textSecondary }]}> <Text style={[styles.authSubtitle, isTablet && styles.authSubtitleTablet, { color: colors.textSecondary }]}>
Inicia sesión para acceder a tu perfil, notificaciones y más {t('profile.loginDescription')}
</Text> </Text>
<TouchableOpacity style={[styles.authButton, { backgroundColor: colors.primary }]} onPress={() => router.push('/auth/login')}> <TouchableOpacity style={[styles.authButton, { backgroundColor: colors.primary }]} onPress={() => router.push('/auth/login')}>
<Text style={[styles.authButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text> <Text style={[styles.authButtonText, { color: colors.onPrimaryContainer }]}>{t('profile.loginBtn')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@@ -287,15 +289,15 @@ export default function ProfileScreen() {
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}> <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
<View style={styles.cardHeader}> <View style={styles.cardHeader}>
<Ionicons name="person-outline" size={18} color={colors.primary} /> <Ionicons name="person-outline" size={18} color={colors.primary} />
<Text style={[styles.cardTitle, { color: colors.text }]}>Datos personales</Text> <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.personalData')}</Text>
</View> </View>
<View style={styles.infoGrid}> <View style={styles.infoGrid}>
<View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}>
<Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Nombre</Text> <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{t('profile.firstName')}</Text>
<Text style={[styles.infoValue, { color: colors.text }]}>{firstName || '—'}</Text> <Text style={[styles.infoValue, { color: colors.text }]}>{firstName || '—'}</Text>
</View> </View>
<View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}>
<Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Apellidos</Text> <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{t('profile.lastName')}</Text>
<Text style={[styles.infoValue, { color: colors.text }]}>{lastName || '—'}</Text> <Text style={[styles.infoValue, { color: colors.text }]}>{lastName || '—'}</Text>
</View> </View>
</View> </View>
@@ -306,7 +308,7 @@ export default function ProfileScreen() {
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}> <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
<View style={styles.cardHeader}> <View style={styles.cardHeader}>
<Ionicons name={getThemeModeIcon()} size={18} color={colors.primary} /> <Ionicons name={getThemeModeIcon()} size={18} color={colors.primary} />
<Text style={[styles.cardTitle, { color: colors.text }]}>Apariencia</Text> <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.appearance')}</Text>
</View> </View>
<View style={[styles.themePills, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.themePills, { backgroundColor: colors.surfaceLow }]}>
{THEME_OPTIONS.map((opt) => ( {THEME_OPTIONS.map((opt) => (
@@ -316,7 +318,30 @@ export default function ProfileScreen() {
onPress={() => setThemeMode(opt.mode)} onPress={() => setThemeMode(opt.mode)}
> >
<Ionicons name={opt.icon as any} size={16} color={themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary} /> <Ionicons name={opt.icon as any} size={16} color={themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary} />
<Text style={[styles.themePillText, { color: themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary }]}>{opt.label}</Text> <Text style={[styles.themePillText, { color: themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary }]}>{t(opt.labelKey)}</Text>
</TouchableOpacity>
))}
</View>
</View>
{/* Language card */}
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
<View style={styles.cardHeader}>
<Ionicons name="globe-outline" size={18} color={colors.primary} />
<Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.language')}</Text>
</View>
<View style={[styles.themePills, { backgroundColor: colors.surfaceLow }]}>
{[
{ value: 'ca' as const, labelKey: 'profile.languageCatalan', icon: 'language-outline' },
{ value: 'es' as const, labelKey: 'profile.languageSpanish', icon: 'language-outline' },
].map((opt) => (
<TouchableOpacity
key={opt.value}
style={[styles.themePill, lang === opt.value && { backgroundColor: colors.primary }]}
onPress={() => setLang(opt.value)}
>
<Ionicons name={opt.icon as any} size={16} color={lang === opt.value ? colors.onPrimaryContainer : colors.textSecondary} />
<Text style={[styles.themePillText, { color: lang === opt.value ? colors.onPrimaryContainer : colors.textSecondary }]}>{t(opt.labelKey)}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
@@ -328,7 +353,7 @@ export default function ProfileScreen() {
<View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
<Ionicons name="settings-outline" size={20} color={colors.primary} /> <Ionicons name="settings-outline" size={20} color={colors.primary} />
</View> </View>
<Text style={[styles.menuLabel, { color: colors.text }]}>Configuración</Text> <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.config')}</Text>
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} /> <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
@@ -338,7 +363,7 @@ export default function ProfileScreen() {
<View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
<Ionicons name="location-outline" size={20} color={colors.primary} /> <Ionicons name="location-outline" size={20} color={colors.primary} />
</View> </View>
<Text style={[styles.menuLabel, { color: colors.text }]}>Mis Direcciones</Text> <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.myAddresses')}</Text>
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} /> <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
@@ -349,7 +374,7 @@ export default function ProfileScreen() {
<View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
<Ionicons name="shield-outline" size={20} color={colors.primary} /> <Ionicons name="shield-outline" size={20} color={colors.primary} />
</View> </View>
<Text style={[styles.menuLabel, { color: colors.text }]}>Panel Admin</Text> <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.admin')}</Text>
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} /> <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
</> </>
@@ -361,7 +386,7 @@ export default function ProfileScreen() {
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}> <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
<View style={styles.cardHeader}> <View style={styles.cardHeader}>
<Ionicons name="time-outline" size={18} color={colors.primary} /> <Ionicons name="time-outline" size={18} color={colors.primary} />
<Text style={[styles.cardTitle, { color: colors.text }]}>Búsquedas recientes</Text> <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.recentSearches')}</Text>
</View> </View>
{searchHistory.map((item, i) => ( {searchHistory.map((item, i) => (
<React.Fragment key={item.id}> <React.Fragment key={item.id}>
@@ -381,7 +406,7 @@ export default function ProfileScreen() {
{/* Logout */} {/* Logout */}
<TouchableOpacity style={[styles.logoutCard, { backgroundColor: colors.card, borderColor: isDark ? '#5a2020' : '#fecaca' }]} onPress={handleLogout}> <TouchableOpacity style={[styles.logoutCard, { backgroundColor: colors.card, borderColor: isDark ? '#5a2020' : '#fecaca' }]} onPress={handleLogout}>
<Ionicons name="log-out-outline" size={20} color={colors.danger} /> <Ionicons name="log-out-outline" size={20} color={colors.danger} />
<Text style={[styles.logoutText, { color: colors.danger }]}>Cerrar Sesión</Text> <Text style={[styles.logoutText, { color: colors.danger }]}>{t('profile.logout')}</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={{ height: spacing.xl }} /> <View style={{ height: spacing.xl }} />
@@ -394,16 +419,16 @@ export default function ProfileScreen() {
<View style={[styles.modalSheet, { backgroundColor: colors.card }]}> <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
<View style={[styles.modalHandle, { backgroundColor: colors.border }]} /> <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
<View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}> <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
<Text style={[styles.modalTitle, { color: colors.text }]}>Cambiar Avatar</Text> <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.changeAvatar')}</Text>
<TouchableOpacity onPress={() => setShowAvatarModal(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}> <TouchableOpacity onPress={() => setShowAvatarModal(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Ionicons name="close" size={24} color={colors.textSecondary} /> <Ionicons name="close" size={24} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={[styles.avatarTabBar, { borderBottomColor: colors.surfaceLow }]}> <View style={[styles.avatarTabBar, { borderBottomColor: colors.surfaceLow }]}>
{(['presets', 'colors', 'upload'] as const).map((t) => ( {(['presets', 'colors', 'upload'] as const).map((tab) => (
<TouchableOpacity key={t} style={[styles.avatarTabBtn, avatarTab === t && { borderBottomColor: colors.primary }]} onPress={() => setAvatarTab(t)}> <TouchableOpacity key={tab} style={[styles.avatarTabBtn, avatarTab === tab && { borderBottomColor: colors.primary }]} onPress={() => setAvatarTab(tab)}>
<Ionicons name={t === 'presets' ? 'person-outline' : t === 'colors' ? 'color-palette-outline' : 'cloud-upload-outline'} size={18} color={avatarTab === t ? colors.primary : colors.textSecondary} /> <Ionicons name={tab === 'presets' ? 'person-outline' : tab === 'colors' ? 'color-palette-outline' : 'cloud-upload-outline'} size={18} color={avatarTab === tab ? colors.primary : colors.textSecondary} />
<Text style={[styles.avatarTabLabel, { color: avatarTab === t ? colors.primary : colors.textSecondary }]}>{t === 'presets' ? 'Prediseñado' : t === 'colors' ? 'Colores' : 'Subir'}</Text> <Text style={[styles.avatarTabLabel, { color: avatarTab === tab ? colors.primary : colors.textSecondary }]}>{tab === 'presets' ? t('profile.presetAvatar') : tab === 'colors' ? t('profile.colors') : t('profile.upload')}</Text>
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
@@ -433,8 +458,8 @@ export default function ProfileScreen() {
<Ionicons name="camera-outline" size={28} color={colors.primary} /> <Ionicons name="camera-outline" size={28} color={colors.primary} />
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[styles.uploadTitle, { color: colors.text }]}>Tomar foto</Text> <Text style={[styles.uploadTitle, { color: colors.text }]}>{t('profile.takePhoto')}</Text>
<Text style={[styles.uploadSub, { color: colors.textSecondary }]}>Usa la cámara de tu dispositivo</Text> <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>{t('profile.takePhotoDesc')}</Text>
</View> </View>
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} /> <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
@@ -443,8 +468,8 @@ export default function ProfileScreen() {
<Ionicons name="images-outline" size={28} color={colors.primary} /> <Ionicons name="images-outline" size={28} color={colors.primary} />
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[styles.uploadTitle, { color: colors.text }]}>Elegir de galería</Text> <Text style={[styles.uploadTitle, { color: colors.text }]}>{t('profile.chooseGallery')}</Text>
<Text style={[styles.uploadSub, { color: colors.textSecondary }]}>Selecciona una imagen existente</Text> <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>{t('profile.chooseGalleryDesc')}</Text>
</View> </View>
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} /> <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
@@ -461,28 +486,28 @@ export default function ProfileScreen() {
<View style={[styles.modalSheet, { backgroundColor: colors.card }]}> <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
<View style={[styles.modalHandle, { backgroundColor: colors.border }]} /> <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
<View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}> <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
<Text style={[styles.modalTitle, { color: colors.text }]}>Configuración</Text> <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.configTitle')}</Text>
<TouchableOpacity onPress={() => setShowConfig(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}> <TouchableOpacity onPress={() => setShowConfig(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Ionicons name="close" size={24} color={colors.textSecondary} /> <Ionicons name="close" size={24} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<ScrollView style={styles.modalBody} contentContainerStyle={{ paddingBottom: spacing.xl }}> <ScrollView style={styles.modalBody} contentContainerStyle={{ paddingBottom: spacing.xl }}>
{[ {[
{ label: 'Nombre', value: configFirstName, onChange: setConfigFirstName, placeholder: 'Tu nombre', icon: 'person-outline' }, { labelKey: 'profile.firstNameLabel', placeholderKey: 'profile.firstNamePlaceholder', value: configFirstName, onChange: setConfigFirstName, icon: 'person-outline' },
{ label: 'Apellidos', value: configLastName, onChange: setConfigLastName, placeholder: 'Tus apellidos', icon: 'person-outline' }, { labelKey: 'profile.lastNameLabel', placeholderKey: 'profile.lastNamePlaceholder', value: configLastName, onChange: setConfigLastName, icon: 'person-outline' },
{ label: 'Correo electrónico', value: configEmail, onChange: setConfigEmail, placeholder: 'tu@email.com', icon: 'mail-outline', keyboard: 'email-address' as const }, { labelKey: 'profile.email', placeholder: 'tu@email.com', value: configEmail, onChange: setConfigEmail, icon: 'mail-outline', keyboard: 'email-address' as const },
{ label: 'Ciudad', value: configCity, onChange: setConfigCity, placeholder: 'Tu ciudad', icon: 'business-outline' }, { labelKey: 'profile.city', placeholderKey: 'profile.cityPlaceholder', value: configCity, onChange: setConfigCity, icon: 'business-outline' },
{ label: 'Dirección', value: configAddress, onChange: setConfigAddress, placeholder: 'Calle Mayor 1, Madrid', icon: 'location-outline' }, { labelKey: 'profile.address', placeholderKey: 'profile.addressPlaceholder', value: configAddress, onChange: setConfigAddress, icon: 'location-outline' },
].map((field) => ( ].map((field) => (
<View key={field.label} style={styles.modalField}> <View key={field.labelKey} style={styles.modalField}>
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{field.label}</Text> <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t(field.labelKey)}</Text>
<View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}> <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name={field.icon as any} size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} /> <Ionicons name={field.icon as any} size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
<TextInput <TextInput
style={[styles.modalInput, { color: colors.text }]} style={[styles.modalInput, { color: colors.text }]}
value={field.value} value={field.value}
onChangeText={field.onChange} onChangeText={field.onChange}
placeholder={field.placeholder} placeholder={field.placeholderKey ? t(field.placeholderKey) : field.placeholder}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
keyboardType={field.keyboard} keyboardType={field.keyboard}
autoCapitalize="none" autoCapitalize="none"
@@ -501,10 +526,10 @@ export default function ProfileScreen() {
<View style={styles.modalActions}> <View style={styles.modalActions}>
<TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => setShowConfig(false)} disabled={configSaving}> <TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => setShowConfig(false)} disabled={configSaving}>
<Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text> <Text style={[styles.modalCancelText, { color: colors.text }]}>{t('profile.cancel')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, configSaving && { opacity: 0.6 }]} onPress={handleConfigSave} disabled={configSaving}> <TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, configSaving && { opacity: 0.6 }]} onPress={handleConfigSave} disabled={configSaving}>
{configSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>Guardar</Text>} {configSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{t('profile.save')}</Text>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView> </ScrollView>
@@ -518,7 +543,7 @@ export default function ProfileScreen() {
<View style={[styles.modalSheet, { backgroundColor: colors.card }]}> <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
<View style={[styles.modalHandle, { backgroundColor: colors.border }]} /> <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
<View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}> <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
<Text style={[styles.modalTitle, { color: colors.text }]}>Mis Direcciones</Text> <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.addressesTitle')}</Text>
<TouchableOpacity onPress={() => { setShowAddresses(false); setShowAddressForm(false); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}> <TouchableOpacity onPress={() => { setShowAddresses(false); setShowAddressForm(false); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Ionicons name="close" size={24} color={colors.textSecondary} /> <Ionicons name="close" size={24} color={colors.textSecondary} />
</TouchableOpacity> </TouchableOpacity>
@@ -527,22 +552,22 @@ export default function ProfileScreen() {
{showAddressForm ? ( {showAddressForm ? (
<View> <View>
<View style={styles.modalField}> <View style={styles.modalField}>
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Dirección</Text> <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t('profile.addressLabel')}</Text>
<View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}> <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name="location-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} /> <Ionicons name="location-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
<TextInput style={[styles.modalInput, { color: colors.text }]} value={formAddress} onChangeText={setFormAddress} placeholder="Calle Mayor 1, Madrid" placeholderTextColor={colors.textSecondary} editable={!formSaving} /> <TextInput style={[styles.modalInput, { color: colors.text }]} value={formAddress} onChangeText={setFormAddress} placeholder={t('profile.addressPlaceholder')} placeholderTextColor={colors.textSecondary} editable={!formSaving} />
</View> </View>
</View> </View>
<View style={styles.modalField}> <View style={styles.modalField}>
<Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Etiqueta (opcional)</Text> <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t('profile.addressOptional')}</Text>
<View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}> <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name="pricetag-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} /> <Ionicons name="pricetag-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
<TextInput style={[styles.modalInput, { color: colors.text }]} value={formLabel} onChangeText={setFormLabel} placeholder="Casa, Trabajo..." placeholderTextColor={colors.textSecondary} editable={!formSaving} /> <TextInput style={[styles.modalInput, { color: colors.text }]} value={formLabel} onChangeText={setFormLabel} placeholder={t('profile.addressLabelPlaceholder')} placeholderTextColor={colors.textSecondary} editable={!formSaving} />
</View> </View>
</View> </View>
<TouchableOpacity style={styles.checkboxRow} onPress={() => setFormDefault(!formDefault)} disabled={formSaving}> <TouchableOpacity style={styles.checkboxRow} onPress={() => setFormDefault(!formDefault)} disabled={formSaving}>
<Ionicons name={formDefault ? 'checkbox' : 'square-outline'} size={22} color={formDefault ? colors.primary : colors.textSecondary} /> <Ionicons name={formDefault ? 'checkbox' : 'square-outline'} size={22} color={formDefault ? colors.primary : colors.textSecondary} />
<Text style={[styles.checkboxLabel, { color: colors.text }]}>Dirección predeterminada</Text> <Text style={[styles.checkboxLabel, { color: colors.text }]}>{t('profile.defaultAddress')}</Text>
</TouchableOpacity> </TouchableOpacity>
{formError ? ( {formError ? (
<View style={[styles.modalFeedback, { backgroundColor: colors.dangerContainer, borderColor: isDark ? '#5a2020' : '#fecaca' }]}> <View style={[styles.modalFeedback, { backgroundColor: colors.dangerContainer, borderColor: isDark ? '#5a2020' : '#fecaca' }]}>
@@ -551,10 +576,10 @@ export default function ProfileScreen() {
) : null} ) : null}
<View style={styles.modalActions}> <View style={styles.modalActions}>
<TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}> <TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}>
<Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text> <Text style={[styles.modalCancelText, { color: colors.text }]}>{t('profile.cancel')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, formSaving && { opacity: 0.6 }]} onPress={handleAddressSave} disabled={formSaving}> <TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, formSaving && { opacity: 0.6 }]} onPress={handleAddressSave} disabled={formSaving}>
{formSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{editingAddressId ? 'Actualizar' : 'Añadir'}</Text>} {formSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{editingAddressId ? t('profile.update') : t('profile.add')}</Text>}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@@ -567,7 +592,7 @@ export default function ProfileScreen() {
{user?.address && ( {user?.address && (
<View style={[styles.addrCard, { borderColor: colors.primary, backgroundColor: isDark ? '#1a3a1c' : '#eaf7ec' }]}> <View style={[styles.addrCard, { borderColor: colors.primary, backgroundColor: isDark ? '#1a3a1c' : '#eaf7ec' }]}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[styles.addrBadge, { color: colors.primary }]}>Principal</Text> <Text style={[styles.addrBadge, { color: colors.primary }]}>{t('profile.mainAddress')}</Text>
<Text style={[styles.addrText, { color: colors.text }]}>{user.address}</Text> <Text style={[styles.addrText, { color: colors.text }]}>{user.address}</Text>
</View> </View>
<Ionicons name="checkmark-circle" size={20} color={colors.primary} /> <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
@@ -580,7 +605,7 @@ export default function ProfileScreen() {
<Text style={[styles.addrText, { color: colors.text }]}>{addr.address}</Text> <Text style={[styles.addrText, { color: colors.text }]}>{addr.address}</Text>
{!addr.is_default && ( {!addr.is_default && (
<TouchableOpacity onPress={() => handleSetDefault(addr.id)}> <TouchableOpacity onPress={() => handleSetDefault(addr.id)}>
<Text style={[styles.addrDefaultLink, { color: colors.primary }]}>Marcar como predeterminada</Text> <Text style={[styles.addrDefaultLink, { color: colors.primary }]}>{t('profile.setDefault')}</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
@@ -596,7 +621,7 @@ export default function ProfileScreen() {
))} ))}
<TouchableOpacity style={[styles.addAddrBtn, { borderColor: colors.border }]} onPress={openAddAddressForm}> <TouchableOpacity style={[styles.addAddrBtn, { borderColor: colors.border }]} onPress={openAddAddressForm}>
<Ionicons name="add-circle-outline" size={20} color={colors.primary} /> <Ionicons name="add-circle-outline" size={20} color={colors.primary} />
<Text style={[styles.addAddrText, { color: colors.primary }]}>Añadir dirección</Text> <Text style={[styles.addAddrText, { color: colors.primary }]}>{t('profile.addAddress')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
apps/frontend-mobile/app/(tabs)/scan.tsx
+19 -17
View File
@@ -4,6 +4,7 @@ import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import * as ImagePicker from 'expo-image-picker'; import * as ImagePicker from 'expo-image-picker';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { useTranslation } from '../../src/i18n';
import { spacing, borderRadius, shadows } from '../../constants/theme'; import { spacing, borderRadius, shadows } from '../../constants/theme';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -13,6 +14,7 @@ export default function ScanTabScreen() {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
const [manualNumber, setManualNumber] = useState(''); const [manualNumber, setManualNumber] = useState('');
const [selectedImage, setSelectedImage] = useState<string | null>(null); const [selectedImage, setSelectedImage] = useState<string | null>(null);
@@ -20,8 +22,8 @@ export default function ScanTabScreen() {
const { status } = await ImagePicker.requestCameraPermissionsAsync(); const { status } = await ImagePicker.requestCameraPermissionsAsync();
if (status !== 'granted') { if (status !== 'granted') {
Alert.alert( Alert.alert(
'Permiso requerido', t('scanner.cameraPermission'),
'Necesitamos acceso a la cámara para tomar fotos del dispositivo.' t('scanner.cameraPermissionDesc')
); );
return; return;
} }
@@ -41,8 +43,8 @@ export default function ScanTabScreen() {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') { if (status !== 'granted') {
Alert.alert( Alert.alert(
'Permiso requerido', t('scanner.galleryPermission'),
'Necesitamos acceso a la galería para seleccionar fotos.' t('scanner.galleryPermissionDesc')
); );
return; return;
} }
@@ -61,7 +63,7 @@ export default function ScanTabScreen() {
const handleManualSubmit = () => { const handleManualSubmit = () => {
const trimmed = manualNumber.trim(); const trimmed = manualNumber.trim();
if (trimmed.length === 0) { if (trimmed.length === 0) {
Alert.alert('Campo requerido', 'Por favor, introduce el número de la tarjeta.'); Alert.alert(t('scanner.fieldRequired'), t('scanner.fieldRequiredDesc'));
return; return;
} }
router.push(`/medicine/${trimmed}`); router.push(`/medicine/${trimmed}`);
@@ -76,9 +78,9 @@ export default function ScanTabScreen() {
<View style={[styles.iconContainer, isTablet && styles.iconContainerTablet, { backgroundColor: colors.primaryContainer }]}> <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet, { backgroundColor: colors.primaryContainer }]}>
<Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} /> <Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
</View> </View>
<Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Escanear TSI</Text> <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>{t('scanner.title')}</Text>
<Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}> <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos {t('scanner.description')}
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={[styles.primaryButton, shadows.scanButton, isTablet && styles.primaryButtonTablet]} style={[styles.primaryButton, shadows.scanButton, isTablet && styles.primaryButtonTablet]}
@@ -87,14 +89,14 @@ export default function ScanTabScreen() {
> >
<Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" /> <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
<Text style={[styles.primaryButtonText, isTablet && styles.primaryButtonTextTablet]}> <Text style={[styles.primaryButtonText, isTablet && styles.primaryButtonTextTablet]}>
Iniciar escaneo {t('scanner.startScan')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
{/* Separator */} {/* Separator */}
<View style={styles.separator}> <View style={styles.separator}>
<View style={[styles.separatorLine, { backgroundColor: colors.border }]} /> <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
<Text style={[styles.separatorText, { color: colors.textSecondary }]}>o</Text> <Text style={[styles.separatorText, { color: colors.textSecondary }]}>{t('scanner.or')}</Text>
<View style={[styles.separatorLine, { backgroundColor: colors.border }]} /> <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
</View> </View>
@@ -103,10 +105,10 @@ export default function ScanTabScreen() {
<Ionicons name="camera" size={24} color={colors.primary} /> <Ionicons name="camera" size={24} color={colors.primary} />
<View style={styles.optionTextContainer}> <View style={styles.optionTextContainer}>
<Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}> <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
Subir foto del dispositivo {t('scanner.uploadPhoto')}
</Text> </Text>
<Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}> <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
Toma o selecciona una foto del dispositivo sanitario {t('scanner.uploadDescription')}
</Text> </Text>
</View> </View>
</View> </View>
@@ -117,7 +119,7 @@ export default function ScanTabScreen() {
onPress={handleTakePhoto} onPress={handleTakePhoto}
> >
<Ionicons name="camera-outline" size={20} color={colors.primary} /> <Ionicons name="camera-outline" size={20} color={colors.primary} />
<Text style={[styles.photoButtonText, { color: colors.primary }]}>Tomar foto</Text> <Text style={[styles.photoButtonText, { color: colors.primary }]}>{t('scanner.takePhoto')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.photoButton, isTablet && styles.photoButtonTablet, { backgroundColor: colors.primaryContainer, borderColor: colors.primary }]} style={[styles.photoButton, isTablet && styles.photoButtonTablet, { backgroundColor: colors.primaryContainer, borderColor: colors.primary }]}
@@ -125,13 +127,13 @@ export default function ScanTabScreen() {
onPress={handleSelectFromGallery} onPress={handleSelectFromGallery}
> >
<Ionicons name="images-outline" size={20} color={colors.primary} /> <Ionicons name="images-outline" size={20} color={colors.primary} />
<Text style={[styles.photoButtonText, { color: colors.primary }]}>Galería</Text> <Text style={[styles.photoButtonText, { color: colors.primary }]}>{t('scanner.gallery')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{selectedImage && ( {selectedImage && (
<View style={styles.imagePreviewContainer}> <View style={styles.imagePreviewContainer}>
<Ionicons name="checkmark-circle" size={20} color={colors.success} /> <Ionicons name="checkmark-circle" size={20} color={colors.success} />
<Text style={[styles.imagePreviewText, { color: colors.success }]}>Foto seleccionada correctamente</Text> <Text style={[styles.imagePreviewText, { color: colors.success }]}>{t('scanner.photoSelected')}</Text>
</View> </View>
)} )}
@@ -140,17 +142,17 @@ export default function ScanTabScreen() {
<Ionicons name="keypad" size={24} color={colors.primary} /> <Ionicons name="keypad" size={24} color={colors.primary} />
<View style={styles.optionTextContainer}> <View style={styles.optionTextContainer}>
<Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}> <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
Introducir número manualmente {t('scanner.manualEntry')}
</Text> </Text>
<Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}> <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
Escribe el número de tu tarjeta sanitaria {t('scanner.manualDescription')}
</Text> </Text>
</View> </View>
</View> </View>
<View style={styles.manualInputRow}> <View style={styles.manualInputRow}>
<TextInput <TextInput
style={[styles.manualInput, isTablet && styles.manualInputTablet, { backgroundColor: colors.card, borderColor: colors.border, color: colors.text }]} style={[styles.manualInput, isTablet && styles.manualInputTablet, { backgroundColor: colors.card, borderColor: colors.border, color: colors.text }]}
placeholder="Introduce el número de tarjeta" placeholder={t('scanner.manualPlaceholder')}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
value={manualNumber} value={manualNumber}
onChangeText={setManualNumber} onChangeText={setManualNumber}
apps/frontend-mobile/app/(tabs)/search.tsx
+10 -8
View File
@@ -14,6 +14,7 @@ import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme'; import { spacing, borderRadius } from '../../constants/theme';
import { Medicine } from '../../types'; import { Medicine } from '../../types';
import { config } from '../../constants/config'; import { config } from '../../constants/config';
import { useTranslation } from '../../src/i18n';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -25,6 +26,7 @@ const suggestions = [
]; ];
export default function SearchScreen() { export default function SearchScreen() {
const { t } = useTranslation();
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
@@ -68,7 +70,7 @@ export default function SearchScreen() {
const data = await searchMedicines(debouncedQuery); const data = await searchMedicines(debouncedQuery);
setResults(data); setResults(data);
} catch (err) { } catch (err) {
setError('Error al buscar medicamentos'); setError(t('search.error'));
console.error(err); console.error(err);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@@ -106,7 +108,7 @@ export default function SearchScreen() {
{query.length >= 2 && (results.length + products.length) > 0 && ( {query.length >= 2 && (results.length + products.length) > 0 && (
<View style={styles.resultsSummary}> <View style={styles.resultsSummary}>
<Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}> <Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
{results.length + products.length} resultados encontrados {results.length + products.length} {t('search.resultsFound')}
</Text> </Text>
</View> </View>
)} )}
@@ -114,7 +116,7 @@ export default function SearchScreen() {
{showSuggestions && ( {showSuggestions && (
<> <>
<View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}> <View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Sugerencias</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.suggestions')}</Text>
<View style={styles.suggestionsGrid}> <View style={styles.suggestionsGrid}>
{suggestions.map((s) => ( {suggestions.map((s) => (
<TouchableOpacity <TouchableOpacity
@@ -134,7 +136,7 @@ export default function SearchScreen() {
{isAuthenticated && recentSearches.length > 0 && ( {isAuthenticated && recentSearches.length > 0 && (
<View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}> <View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Búsquedas recientes</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.recentSearches')}</Text>
{recentSearches.map((term) => ( {recentSearches.map((term) => (
<TouchableOpacity <TouchableOpacity
key={term} key={term}
@@ -154,7 +156,7 @@ export default function SearchScreen() {
</> </>
)} )}
{isLoading && <LoadingSpinner message="Buscando..." />} {isLoading && <LoadingSpinner message={t('search.loading')} />}
{error && ( {error && (
<View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}> <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
@@ -164,7 +166,7 @@ export default function SearchScreen() {
{!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && ( {!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && (
<View style={styles.emptyContainer}> <View style={styles.emptyContainer}>
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>No se encontraron resultados</Text> <Text style={[styles.emptyText, { color: colors.textSecondary }]}>{t('search.noResults')}</Text>
</View> </View>
)} )}
@@ -176,7 +178,7 @@ export default function SearchScreen() {
<> <>
{products.length > 0 && ( {products.length > 0 && (
<View style={styles.section}> <View style={styles.section}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.parapharmacy')}</Text>
{products.map((product) => ( {products.map((product) => (
<TouchableOpacity <TouchableOpacity
key={`${product.source}-${product.id || product._id}`} key={`${product.source}-${product.id || product._id}`}
@@ -187,7 +189,7 @@ export default function SearchScreen() {
<View style={styles.productInfo}> <View style={styles.productInfo}>
<View style={styles.badges}> <View style={styles.badges}>
<View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}> <View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
<Text style={styles.badgeText}>Parafarmacia</Text> <Text style={styles.badgeText}>{t('search.parapharmacy')}</Text>
</View> </View>
</View> </View>
<Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text> <Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
apps/frontend-mobile/app/_layout.tsx
+14 -10
View File
@@ -8,6 +8,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useAuthStore } from '../store/authStore'; import { useAuthStore } from '../store/authStore';
import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications'; import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
import { ThemeProvider, useThemeContext } from '../components/ThemeProvider'; import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
import { LanguageProvider, useTranslation } from '../src/i18n';
import { initFaro } from '../services/faro'; import { initFaro } from '../services/faro';
// Boot Faro RUM once, as early as possible. // Boot Faro RUM once, as early as possible.
@@ -21,6 +22,7 @@ const bgDark = require('../assets/bg_dark.png');
function RootLayoutInner() { function RootLayoutInner() {
const { checkAuth } = useAuthStore(); const { checkAuth } = useAuthStore();
const { colors, isDark } = useThemeContext(); const { colors, isDark } = useThemeContext();
const { t } = useTranslation();
const notificationListener = useRef<ReturnType<typeof addNotificationListener>>(); const notificationListener = useRef<ReturnType<typeof addNotificationListener>>();
const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>(); const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>();
@@ -56,30 +58,30 @@ function RootLayoutInner() {
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen <Stack.Screen
name="medicine/[id]" name="medicine/[id]"
options={{ title: 'Medicamento' }} options={{ title: t('stack.medicine') }}
/> />
<Stack.Screen <Stack.Screen
name="pharmacy/[id]" name="pharmacy/[id]"
options={{ title: 'Farmacia' }} options={{ title: t('stack.pharmacy') }}
/> />
<Stack.Screen <Stack.Screen
name="scanner" name="scanner"
options={{ options={{
title: 'Escanear', title: t('stack.scanner'),
headerShown: false, headerShown: false,
}} }}
/> />
<Stack.Screen <Stack.Screen
name="auth/login" name="auth/login"
options={{ options={{
title: 'Iniciar Sesión', title: t('stack.login'),
headerShown: false, headerShown: false,
}} }}
/> />
<Stack.Screen <Stack.Screen
name="auth/register" name="auth/register"
options={{ options={{
title: 'Registrarse', title: t('stack.register'),
headerShown: false, headerShown: false,
}} }}
/> />
@@ -112,11 +114,13 @@ export default function RootLayout() {
<GestureHandlerRootView style={styles.root}> <GestureHandlerRootView style={styles.root}>
<SafeAreaProvider> <SafeAreaProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ThemeProvider> <LanguageProvider>
<ThemedBackground> <ThemeProvider>
<RootLayoutInner /> <ThemedBackground>
</ThemedBackground> <RootLayoutInner />
</ThemeProvider> </ThemedBackground>
</ThemeProvider>
</LanguageProvider>
</QueryClientProvider> </QueryClientProvider>
</SafeAreaProvider> </SafeAreaProvider>
</GestureHandlerRootView> </GestureHandlerRootView>
apps/frontend-mobile/app/auth/login.tsx
+25 -23
View File
@@ -22,6 +22,7 @@ import {
saveBiometricCredentials, saveBiometricCredentials,
getBiometricUsername, getBiometricUsername,
} from '../../services/biometrics'; } from '../../services/biometrics';
import { useTranslation } from '../../src/i18n';
type Tab = 'login' | 'register'; type Tab = 'login' | 'register';
@@ -29,6 +30,7 @@ export default function LoginScreen() {
const router = useRouter(); const router = useRouter();
const { login } = useAuthStore(); const { login } = useAuthStore();
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
const [tab, setTab] = useState<Tab>('login'); const [tab, setTab] = useState<Tab>('login');
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
@@ -64,17 +66,17 @@ export default function LoginScreen() {
const handleSubmit = async () => { const handleSubmit = async () => {
if (!username.trim() || !password) { if (!username.trim() || !password) {
Alert.alert('Error', 'Por favor completa todos los campos'); Alert.alert(t('login.alert.error'), t('login.alert.fillFields'));
return; return;
} }
if (isRegister) { if (isRegister) {
if (password.length < 8) { if (password.length < 8) {
Alert.alert('Error', 'La contraseña debe tener al menos 8 caracteres'); Alert.alert(t('login.alert.error'), t('login.alert.passwordLength'));
return; return;
} }
if (password !== confirmPassword) { if (password !== confirmPassword) {
Alert.alert('Error', 'Las contraseñas no coinciden'); Alert.alert(t('login.alert.error'), t('login.alert.passwordMismatch'));
return; return;
} }
} }
@@ -83,8 +85,8 @@ export default function LoginScreen() {
try { try {
if (isRegister) { if (isRegister) {
await register(username.trim(), password); await register(username.trim(), password);
Alert.alert('Éxito', 'Cuenta creada correctamente', [ Alert.alert(t('login.alert.success'), t('login.alert.accountCreated'), [
{ text: 'OK', onPress: () => setTab('login') }, { text: t('login.alert.ok'), onPress: () => setTab('login') },
]); ]);
} else { } else {
await login(username.trim(), password); await login(username.trim(), password);
@@ -95,8 +97,8 @@ export default function LoginScreen() {
} }
} catch (error) { } catch (error) {
Alert.alert( Alert.alert(
'Error', t('login.alert.error'),
isRegister ? 'No se pudo crear la cuenta' : 'Credenciales incorrectas' isRegister ? t('login.alert.createError') : t('login.alert.wrongCredentials')
); );
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@@ -105,7 +107,7 @@ export default function LoginScreen() {
const handleBiometricLogin = async () => { const handleBiometricLogin = async () => {
if (!biometricUsername) { if (!biometricUsername) {
Alert.alert('Error', 'No hay credenciales biométricas guardadas'); Alert.alert(t('login.alert.error'), t('login.alert.noBiometrics'));
return; return;
} }
@@ -116,10 +118,10 @@ export default function LoginScreen() {
await login(biometricUsername, ''); await login(biometricUsername, '');
router.replace('/(tabs)'); router.replace('/(tabs)');
} else { } else {
Alert.alert('Error', 'Autenticación biométrica fallida'); Alert.alert(t('login.alert.error'), t('login.alert.biometricFailed'));
} }
} catch (error) { } catch (error) {
Alert.alert('Error', 'Error en la autenticación biométrica'); Alert.alert(t('login.alert.error'), t('login.alert.biometricError'));
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -158,7 +160,7 @@ export default function LoginScreen() {
!isRegister && styles.tabTextActive, !isRegister && styles.tabTextActive,
]} ]}
> >
Iniciar Sesión {t('login.tab.login')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
@@ -176,7 +178,7 @@ export default function LoginScreen() {
isRegister && styles.tabTextActive, isRegister && styles.tabTextActive,
]} ]}
> >
Crear Cuenta {t('login.tab.register')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@@ -185,12 +187,12 @@ export default function LoginScreen() {
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}> <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
{/* Header */} {/* Header */}
<Text style={[styles.title, { color: colors.text }]}> <Text style={[styles.title, { color: colors.text }]}>
{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'} {isRegister ? t('login.title.register') : t('login.title.login')}
</Text> </Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}> <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
{isRegister {isRegister
? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.' ? t('login.subtitle.register')
: 'Inicia sesión para gestionar tu perfil y notificaciones.'} : t('login.subtitle.login')}
</Text> </Text>
{/* Username */} {/* Username */}
@@ -200,7 +202,7 @@ export default function LoginScreen() {
style={[styles.input, { color: colors.text }]} style={[styles.input, { color: colors.text }]}
value={username} value={username}
onChangeText={setUsername} onChangeText={setUsername}
placeholder="Usuario" placeholder={t('login.username')}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
autoCapitalize="none" autoCapitalize="none"
autoCorrect={false} autoCorrect={false}
@@ -215,7 +217,7 @@ export default function LoginScreen() {
style={[styles.input, { color: colors.text }]} style={[styles.input, { color: colors.text }]}
value={password} value={password}
onChangeText={setPassword} onChangeText={setPassword}
placeholder="Contraseña" placeholder={t('login.password')}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
secureTextEntry secureTextEntry
autoComplete={isRegister ? 'new-password' : 'current-password'} autoComplete={isRegister ? 'new-password' : 'current-password'}
@@ -230,7 +232,7 @@ export default function LoginScreen() {
style={[styles.input, { color: colors.text }]} style={[styles.input, { color: colors.text }]}
value={confirmPassword} value={confirmPassword}
onChangeText={setConfirmPassword} onChangeText={setConfirmPassword}
placeholder="Confirmar contraseña" placeholder={t('login.confirmPassword')}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
secureTextEntry secureTextEntry
autoComplete="new-password" autoComplete="new-password"
@@ -242,10 +244,10 @@ export default function LoginScreen() {
{isRegister && ( {isRegister && (
<View style={styles.hints}> <View style={styles.hints}>
<Text style={[styles.hint, { color: colors.textSecondary }]}> <Text style={[styles.hint, { color: colors.textSecondary }]}>
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> 3-32 caracteres para el usuario <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> {t('login.hint.username')}
</Text> </Text>
<Text style={[styles.hint, { color: colors.textSecondary }]}> <Text style={[styles.hint, { color: colors.textSecondary }]}>
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> Mínimo 8 caracteres para la contraseña <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> {t('login.hint.password')}
</Text> </Text>
</View> </View>
)} )}
@@ -260,7 +262,7 @@ export default function LoginScreen() {
<Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} /> <Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} />
) : ( ) : (
<Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}> <Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}>
{isRegister ? 'Crear Cuenta' : 'Iniciar Sesión'} {isRegister ? t('login.tab.register') : t('login.tab.login')}
</Text> </Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
@@ -273,7 +275,7 @@ export default function LoginScreen() {
disabled={isLoading} disabled={isLoading}
> >
<Ionicons name="finger-print" size={22} color={colors.primary} /> <Ionicons name="finger-print" size={22} color={colors.primary} />
<Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text> <Text style={[styles.biometricText, { color: colors.primary }]}>{t('login.biometric')}</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
@@ -284,7 +286,7 @@ export default function LoginScreen() {
onPress={() => setTab(isRegister ? 'login' : 'register')} onPress={() => setTab(isRegister ? 'login' : 'register')}
> >
<Text style={[styles.linkText, { color: colors.primary }]}> <Text style={[styles.linkText, { color: colors.primary }]}>
{isRegister ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate'} {isRegister ? t('login.link.toLogin') : t('login.link.toRegister')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
apps/frontend-mobile/app/medicine/[id].tsx
+23 -21
View File
@@ -11,6 +11,7 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme'; import { spacing, borderRadius } from '../../constants/theme';
import { Medicine, PharmacyMedicine } from '../../types'; import { Medicine, PharmacyMedicine } from '../../types';
import { useTranslation } from '../../src/i18n';
function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number { function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
const R = 6371; const R = 6371;
@@ -43,6 +44,7 @@ export default function MedicineDetailScreen() {
const router = useRouter(); const router = useRouter();
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const { t } = useTranslation();
const [medicine, setMedicine] = useState<Medicine | null>(null); const [medicine, setMedicine] = useState<Medicine | null>(null);
const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]); const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -86,7 +88,7 @@ export default function MedicineDetailScreen() {
try { try {
const { status } = await Location.requestForegroundPermissionsAsync(); const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') { if (status !== 'granted') {
setLocationError('Permiso de ubicación denegado'); setLocationError(t('medicine.locationDenied'));
setLocating(false); setLocating(false);
return; return;
} }
@@ -95,7 +97,7 @@ export default function MedicineDetailScreen() {
setUserPosition({ lat: pos.coords.latitude, lon: pos.coords.longitude }); setUserPosition({ lat: pos.coords.latitude, lon: pos.coords.longitude });
setSortByDistance(true); setSortByDistance(true);
} catch { } catch {
setLocationError('No se pudo obtener tu ubicación'); setLocationError(t('medicine.locationError'));
} finally { } finally {
setLocating(false); setLocating(false);
} }
@@ -156,13 +158,13 @@ export default function MedicineDetailScreen() {
}; };
if (isLoading) { if (isLoading) {
return <LoadingSpinner message="Cargando medicamento..." />; return <LoadingSpinner message={t('medicine.loading')} />;
} }
if (!medicine) { if (!medicine) {
return ( return (
<View style={[styles.errorContainer, { backgroundColor: colors.background }]}> <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
<Text style={[styles.errorText, { color: colors.textSecondary }]}>Medicamento no encontrado</Text> <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('medicine.notFound')}</Text>
</View> </View>
); );
} }
@@ -190,23 +192,23 @@ export default function MedicineDetailScreen() {
</View> </View>
<View style={[styles.infoSection, { backgroundColor: colors.card }]}> <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
<InfoRow label="Principio activo" value={medicine.active_ingredient} colors={colors} /> <InfoRow label={t('medicine.activeIngredient')} value={medicine.active_ingredient} colors={colors} />
<InfoRow label="Laboratorio" value={medicine.laboratory} colors={colors} /> <InfoRow label={t('medicine.laboratory')} value={medicine.laboratory} colors={colors} />
<InfoRow label="Forma farmacéutica" value={medicine.form} colors={colors} /> <InfoRow label={t('medicine.form')} value={medicine.form} colors={colors} />
<InfoRow label="Dosificación" value={medicine.dosage} colors={colors} /> <InfoRow label={t('medicine.dosage')} value={medicine.dosage} colors={colors} />
<InfoRow <InfoRow
label="Precio" label={t('medicine.price')}
value={medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'No disponible'} value={medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : t('medicine.notAvailable')}
colors={colors} colors={colors}
/> />
<InfoRow label="Registro" value={medicine.nregistro} colors={colors} /> <InfoRow label={t('medicine.registration')} value={medicine.nregistro} colors={colors} />
</View> </View>
{locatedPharmacies.length > 0 && ( {locatedPharmacies.length > 0 && (
<View style={[styles.mapContainer, { backgroundColor: colors.surfaceVariant }]}> <View style={[styles.mapContainer, { backgroundColor: colors.surfaceVariant }]}>
<Ionicons name="map-outline" size={48} color={colors.textSecondary} /> <Ionicons name="map-outline" size={48} color={colors.textSecondary} />
<Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}> <Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}>
Mapa próximamente… {t('medicine.mapSoon')}
</Text> </Text>
</View> </View>
)} )}
@@ -214,7 +216,7 @@ export default function MedicineDetailScreen() {
<View style={styles.pharmaciesSection}> <View style={styles.pharmaciesSection}>
<View style={styles.pharmaciesHeader}> <View style={styles.pharmaciesHeader}>
<Text style={[styles.sectionTitle, { color: colors.text }]}> <Text style={[styles.sectionTitle, { color: colors.text }]}>
Farmacias ({sortedPharmacies.length}) {t('medicine.pharmacies')} ({sortedPharmacies.length})
</Text> </Text>
<TouchableOpacity <TouchableOpacity
style={[styles.sortButton, sortByDistance && styles.sortButtonActive, { backgroundColor: sortByDistance ? colors.primary : colors.primaryContainer, borderColor: colors.primary }]} style={[styles.sortButton, sortByDistance && styles.sortButtonActive, { backgroundColor: sortByDistance ? colors.primary : colors.primaryContainer, borderColor: colors.primary }]}
@@ -224,10 +226,10 @@ export default function MedicineDetailScreen() {
<Ionicons name="location" size={16} color={sortByDistance ? '#fff' : colors.primary} /> <Ionicons name="location" size={16} color={sortByDistance ? '#fff' : colors.primary} />
<Text style={[styles.sortButtonText, sortByDistance && styles.sortButtonTextActive, { color: sortByDistance ? '#fff' : colors.primary }]}> <Text style={[styles.sortButtonText, sortByDistance && styles.sortButtonTextActive, { color: sortByDistance ? '#fff' : colors.primary }]}>
{locating {locating
? 'Localizando…' ? t('medicine.locating')
: sortByDistance : sortByDistance
? 'Distancia · Reset' ? t('medicine.distanceReset')
: 'Ordenar por distancia'} : t('medicine.sortByDistance')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@@ -236,13 +238,13 @@ export default function MedicineDetailScreen() {
<View style={[styles.locationErrorContainer, { backgroundColor: colors.dangerContainer }]}> <View style={[styles.locationErrorContainer, { backgroundColor: colors.dangerContainer }]}>
<Text style={[styles.locationErrorText, { color: colors.danger }]}>{locationError}</Text> <Text style={[styles.locationErrorText, { color: colors.danger }]}>{locationError}</Text>
<TouchableOpacity onPress={handleSortByDistance}> <TouchableOpacity onPress={handleSortByDistance}>
<Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text> <Text style={[styles.retryText, { color: colors.primary }]}>{t('medicine.retry')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
{sortedPharmacies.length === 0 ? ( {sortedPharmacies.length === 0 ? (
<Text style={[styles.noPharmacies, { color: colors.textSecondary }]}>No hay farmacias disponibles</Text> <Text style={[styles.noPharmacies, { color: colors.textSecondary }]}>{t('medicine.noPharmacies')}</Text>
) : ( ) : (
sortedPharmacies.map((pharm) => { sortedPharmacies.map((pharm) => {
const lat = getPharmacyLat(pharm); const lat = getPharmacyLat(pharm);
@@ -271,10 +273,10 @@ export default function MedicineDetailScreen() {
{pharm.price != null ? ( {pharm.price != null ? (
<Text style={[styles.price, { color: colors.primary }]}>{pharm.price.toFixed(2)} €</Text> <Text style={[styles.price, { color: colors.primary }]}>{pharm.price.toFixed(2)} €</Text>
) : ( ) : (
<Text style={[styles.price, { color: colors.primary }]}>Consultar precio</Text> <Text style={[styles.price, { color: colors.primary }]}>{t('medicine.checkPrice')}</Text>
)} )}
{pharm.stock > 0 && ( {pharm.stock > 0 && (
<Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {pharm.stock}</Text> <Text style={[styles.stock, { color: colors.textSecondary }]}>{t('pharmacy.stock')}{pharm.stock}</Text>
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@@ -284,7 +286,7 @@ export default function MedicineDetailScreen() {
onPress={() => handleDirections(lat, lon)} onPress={() => handleDirections(lat, lon)}
> >
<Ionicons name="navigate" size={16} color={colors.primary} /> <Ionicons name="navigate" size={16} color={colors.primary} />
<Text style={[styles.directionsText, { color: colors.primary }]}>Cómo llegar</Text> <Text style={[styles.directionsText, { color: colors.primary }]}>{t('medicine.howToGet')}</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
apps/frontend-mobile/app/pharmacy/[id].tsx
+11 -9
View File
@@ -10,12 +10,14 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme'; import { spacing, borderRadius } from '../../constants/theme';
import { Pharmacy, PharmacyMedicine } from '../../types'; import { Pharmacy, PharmacyMedicine } from '../../types';
import { useTranslation } from '../../src/i18n';
export default function PharmacyDetailScreen() { export default function PharmacyDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const router = useRouter(); const router = useRouter();
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
const { t } = useTranslation();
const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null); const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null);
const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]); const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -77,13 +79,13 @@ export default function PharmacyDetailScreen() {
}; };
if (isLoading) { if (isLoading) {
return <LoadingSpinner message="Cargando farmacia..." />; return <LoadingSpinner message={t('pharmacy.loading')} />;
} }
if (!pharmacy) { if (!pharmacy) {
return ( return (
<View style={[styles.errorContainer, { backgroundColor: colors.background }]}> <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
<Text style={[styles.errorText, { color: colors.textSecondary }]}>Farmacia no encontrada</Text> <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('pharmacy.notFound')}</Text>
</View> </View>
); );
} }
@@ -97,12 +99,12 @@ export default function PharmacyDetailScreen() {
<View style={[styles.actionsRow, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}> <View style={[styles.actionsRow, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}>
<TouchableOpacity style={styles.actionButton} onPress={handleCall}> <TouchableOpacity style={styles.actionButton} onPress={handleCall}>
<Ionicons name="call" size={20} color={colors.primary} /> <Ionicons name="call" size={20} color={colors.primary} />
<Text style={[styles.actionText, { color: colors.primary }]}>Llamar</Text> <Text style={[styles.actionText, { color: colors.primary }]}>{t('pharmacy.call')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.actionButton} onPress={handleDirections}> <TouchableOpacity style={styles.actionButton} onPress={handleDirections}>
<Ionicons name="navigate" size={20} color={colors.primary} /> <Ionicons name="navigate" size={20} color={colors.primary} />
<Text style={[styles.actionText, { color: colors.primary }]}>Cómo llegar</Text> <Text style={[styles.actionText, { color: colors.primary }]}>{t('pharmacy.howToGet')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@@ -143,11 +145,11 @@ export default function PharmacyDetailScreen() {
<View style={styles.medicinesSection}> <View style={styles.medicinesSection}>
<Text style={[styles.sectionTitle, { color: colors.text }]}> <Text style={[styles.sectionTitle, { color: colors.text }]}>
Medicamentos ({medicines.length}) {t('pharmacy.medications')} ({medicines.length})
</Text> </Text>
{medicines.length === 0 ? ( {medicines.length === 0 ? (
<Text style={[styles.noMedicines, { color: colors.textSecondary }]}>No hay medicamentos disponibles</Text> <Text style={[styles.noMedicines, { color: colors.textSecondary }]}>{t('pharmacy.noMedications')}</Text>
) : ( ) : (
medicines.map((med) => { medicines.map((med) => {
const isSub = subscribedMeds.has(med.medicine_nregistro); const isSub = subscribedMeds.has(med.medicine_nregistro);
@@ -159,11 +161,11 @@ export default function PharmacyDetailScreen() {
> >
<View style={styles.medicineInfo}> <View style={styles.medicineInfo}>
<Text style={[styles.medicineName, { color: colors.text }]}>{med.medicine_name}</Text> <Text style={[styles.medicineName, { color: colors.text }]}>{med.medicine_name}</Text>
<Text style={[styles.medicineNregistro, { color: colors.textSecondary }]}>Reg: {med.medicine_nregistro}</Text> <Text style={[styles.medicineNregistro, { color: colors.textSecondary }]}>{t('pharmacy.reg')}{med.medicine_nregistro}</Text>
</View> </View>
<View style={styles.medicineStock}> <View style={styles.medicineStock}>
<Text style={[styles.price, { color: colors.primary }]}>{med.price.toFixed(2)} €</Text> <Text style={[styles.price, { color: colors.primary }]}>{med.price.toFixed(2)} €</Text>
<Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {med.stock}</Text> <Text style={[styles.stock, { color: colors.textSecondary }]}>{t('pharmacy.stock')}{med.stock}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
{isAuthenticated && ( {isAuthenticated && (
@@ -177,7 +179,7 @@ export default function PharmacyDetailScreen() {
color={isSub ? '#fff' : colors.textSecondary} color={isSub ? '#fff' : colors.textSecondary}
/> />
<Text style={[styles.bellText, { color: isSub ? '#fff' : colors.textSecondary }]}> <Text style={[styles.bellText, { color: isSub ? '#fff' : colors.textSecondary }]}>
{isSub ? 'Notificaciones activas' : 'Notificarme cuando haya stock'} {isSub ? t('pharmacy.notificationsActive') : t('pharmacy.notifyWhenAvailable')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
apps/frontend-mobile/app/product/[source]/[id].tsx
+19 -17
View File
@@ -5,10 +5,12 @@ import { getProduct, Product } from '../../../services/products';
import { LoadingSpinner } from '../../../components/LoadingSpinner'; import { LoadingSpinner } from '../../../components/LoadingSpinner';
import { useThemeContext } from '../../../components/ThemeProvider'; import { useThemeContext } from '../../../components/ThemeProvider';
import { spacing, borderRadius } from '../../../constants/theme'; import { spacing, borderRadius } from '../../../constants/theme';
import { useTranslation } from '../../../src/i18n';
export default function ProductDetailScreen() { export default function ProductDetailScreen() {
const { source, id } = useLocalSearchParams<{ source: string; id: string }>(); const { source, id } = useLocalSearchParams<{ source: string; id: string }>();
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
const [product, setProduct] = useState<Product | null>(null); const [product, setProduct] = useState<Product | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(false); const [error, setError] = useState(false);
@@ -35,13 +37,13 @@ export default function ProductDetailScreen() {
}, [source, id]); }, [source, id]);
if (isLoading) { if (isLoading) {
return <LoadingSpinner message="Cargando producto..." />; return <LoadingSpinner message={t('product.loading')} />;
} }
if (error || !product) { if (error || !product) {
return ( return (
<View style={[styles.errorContainer, { backgroundColor: colors.background }]}> <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
<Text style={[styles.errorText, { color: colors.textSecondary }]}>Producto no encontrado</Text> <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('product.notFound')}</Text>
</View> </View>
); );
} }
@@ -54,7 +56,7 @@ export default function ProductDetailScreen() {
<Image source={{ uri: product.image_url }} style={styles.image} resizeMode="contain" /> <Image source={{ uri: product.image_url }} style={styles.image} resizeMode="contain" />
) : ( ) : (
<View style={[styles.imagePlaceholder, { backgroundColor: colors.surfaceLow }]}> <View style={[styles.imagePlaceholder, { backgroundColor: colors.surfaceLow }]}>
<Text style={[styles.placeholderText, { color: colors.textSecondary }]}>Sin imagen</Text> <Text style={[styles.placeholderText, { color: colors.textSecondary }]}>{t('product.noImage')}</Text>
</View> </View>
)} )}
@@ -62,7 +64,7 @@ export default function ProductDetailScreen() {
<View style={styles.nameRow}> <View style={styles.nameRow}>
<Text style={[styles.name, { color: colors.text }]}>{product.name}</Text> <Text style={[styles.name, { color: colors.text }]}>{product.name}</Text>
<View style={[styles.badge, { backgroundColor: isCima ? '#2b5bb5' : '#4caf50' }]}> <View style={[styles.badge, { backgroundColor: isCima ? '#2b5bb5' : '#4caf50' }]}>
<Text style={styles.badgeText}>{isCima ? 'CIMA' : 'Parafarmacia'}</Text> <Text style={styles.badgeText}>{isCima ? 'CIMA' : t('product.parapharmacy')}</Text>
</View> </View>
</View> </View>
{product.brand ? ( {product.brand ? (
@@ -75,45 +77,45 @@ export default function ProductDetailScreen() {
{isCima ? ( {isCima ? (
<View style={[styles.infoSection, { backgroundColor: colors.card }]}> <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Detalles CIMA</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.cimaDetails')}</Text>
{product.active_ingredient && ( {product.active_ingredient && (
<InfoRow label="Principio activo" value={product.active_ingredient} colors={colors} /> <InfoRow label={t('product.activeIngredient')} value={product.active_ingredient} colors={colors} />
)} )}
{product.dosage && ( {product.dosage && (
<InfoRow label="Dosificación" value={product.dosage} colors={colors} /> <InfoRow label={t('product.dosage')} value={product.dosage} colors={colors} />
)} )}
{product.form && ( {product.form && (
<InfoRow label="Forma farmacéutica" value={product.form} colors={colors} /> <InfoRow label={t('product.form')} value={product.form} colors={colors} />
)} )}
{product.prescription && ( {product.prescription && (
<InfoRow label="Tipo de dispensación" value={product.prescription} colors={colors} /> <InfoRow label={t('product.dispensation')} value={product.prescription} colors={colors} />
)} )}
<InfoRow label="Comercializado" value={product.commercialized ? 'Sí' : 'No'} colors={colors} /> <InfoRow label={t('product.commercialized')} value={product.commercialized ? t('product.yes') : t('product.no')} colors={colors} />
</View> </View>
) : ( ) : (
<View style={[styles.infoSection, { backgroundColor: colors.card }]}> <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Información del producto</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.productInfo')}</Text>
{product.price != null && ( {product.price != null && (
<InfoRow label="Precio" value={`${product.price} €`} colors={colors} /> <InfoRow label={t('product.price')} value={`${product.price} €`} colors={colors} />
)} )}
{product.original_price != null && product.original_price > (product.price || 0) && ( {product.original_price != null && product.original_price > (product.price || 0) && (
<InfoRow label="Precio anterior" value={`${product.original_price} €`} colors={colors} /> <InfoRow label={t('product.previousPrice')} value={`${product.original_price} €`} colors={colors} />
)} )}
{product.category && ( {product.category && (
<InfoRow label="Categoría" value={product.category} colors={colors} /> <InfoRow label={t('product.category')} value={product.category} colors={colors} />
)} )}
{product.brand && ( {product.brand && (
<InfoRow label="Marca" value={product.brand} colors={colors} /> <InfoRow label={t('product.brand')} value={product.brand} colors={colors} />
)} )}
{product.source_url && ( {product.source_url && (
<InfoRow label="Fuente" value={product.source || 'Parafarmacia'} colors={colors} /> <InfoRow label={t('product.source')} value={product.source || t('product.parapharmacy')} colors={colors} />
)} )}
</View> </View>
)} )}
{isCima && product.photos && product.photos.length > 0 && ( {isCima && product.photos && product.photos.length > 0 && (
<View style={[styles.infoSection, { backgroundColor: colors.card }]}> <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Imágenes</Text> <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.images')}</Text>
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.photosScroll}> <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.photosScroll}>
{product.photos.map((photo, i) => ( {product.photos.map((photo, i) => (
<View key={i} style={styles.photoItem}> <View key={i} style={styles.photoItem}>
apps/frontend-mobile/components/BarcodeScanner.tsx
+8 -6
View File
@@ -4,6 +4,7 @@ import { CameraView, useCameraPermissions } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useThemeContext } from './ThemeProvider'; import { useThemeContext } from './ThemeProvider';
import { spacing, borderRadius } from '../constants/theme'; import { spacing, borderRadius } from '../constants/theme';
import { useTranslation } from '../src/i18n';
interface BarcodeScannerProps { interface BarcodeScannerProps {
onBarcodeScanned: (barcode: string) => void; onBarcodeScanned: (barcode: string) => void;
@@ -14,6 +15,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
const [permission, requestPermission] = useCameraPermissions(); const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false); const [scanned, setScanned] = useState(false);
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
if (!permission) { if (!permission) {
return <View style={styles.container} />; return <View style={styles.container} />;
@@ -23,15 +25,15 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
return ( return (
<View style={[styles.permissionContainer, { backgroundColor: colors.background }]}> <View style={[styles.permissionContainer, { backgroundColor: colors.background }]}>
<Ionicons name="camera" size={64} color={colors.textSecondary} /> <Ionicons name="camera" size={64} color={colors.textSecondary} />
<Text style={[styles.permissionTitle, { color: colors.text }]}>Permiso de cámara requerido</Text> <Text style={[styles.permissionTitle, { color: colors.text }]}>{t('barcodeScanner.permissionRequired')}</Text>
<Text style={[styles.permissionText, { color: colors.textSecondary }]}> <Text style={[styles.permissionText, { color: colors.textSecondary }]}>
Necesitamos acceso a la cámara para escanear códigos de barras {t('barcodeScanner.permissionDesc')}
</Text> </Text>
<TouchableOpacity style={[styles.permissionButton, { backgroundColor: colors.primary }]} onPress={requestPermission}> <TouchableOpacity style={[styles.permissionButton, { backgroundColor: colors.primary }]} onPress={requestPermission}>
<Text style={styles.permissionButtonText}>Conceder permiso</Text> <Text style={styles.permissionButtonText}>{t('barcodeScanner.grantPermission')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.cancelButton} onPress={onClose}> <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
<Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>Cancelar</Text> <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>{t('barcodeScanner.cancel')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
); );
@@ -63,7 +65,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
</View> </View>
<Text style={styles.instruction}> <Text style={styles.instruction}>
Apunta la cámara al código de barras del medicamento {t('barcodeScanner.scanningHint')}
</Text> </Text>
<TouchableOpacity style={styles.closeButton} onPress={onClose}> <TouchableOpacity style={styles.closeButton} onPress={onClose}>
@@ -77,7 +79,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
style={[styles.scanAgainButton, { backgroundColor: colors.primary }]} style={[styles.scanAgainButton, { backgroundColor: colors.primary }]}
onPress={() => setScanned(false)} onPress={() => setScanned(false)}
> >
<Text style={styles.scanAgainText}>Escanear de nuevo</Text> <Text style={styles.scanAgainText}>{t('barcodeScanner.scanAgain')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
apps/frontend-mobile/components/LoadingSpinner.tsx
+4 -2
View File
@@ -2,18 +2,20 @@ import React from 'react';
import { View, ActivityIndicator, Text, StyleSheet } from 'react-native'; import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
import { useThemeContext } from './ThemeProvider'; import { useThemeContext } from './ThemeProvider';
import { spacing } from '../constants/theme'; import { spacing } from '../constants/theme';
import { useTranslation } from '../src/i18n';
interface LoadingSpinnerProps { interface LoadingSpinnerProps {
message?: string; message?: string;
} }
export function LoadingSpinner({ message = 'Cargando...' }: LoadingSpinnerProps) { export function LoadingSpinner({ message }: LoadingSpinnerProps) {
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ActivityIndicator size="large" color={colors.primary} /> <ActivityIndicator size="large" color={colors.primary} />
<Text style={[styles.message, { color: colors.textSecondary }]}>{message}</Text> <Text style={[styles.message, { color: colors.textSecondary }]}>{message ?? t('loadingSpinner.loading')}</Text>
</View> </View>
); );
} }
apps/frontend-mobile/components/MedicineCard.tsx
+3 -1
View File
@@ -6,6 +6,7 @@ import { useThemeContext } from './ThemeProvider';
import { spacing, borderRadius } from '../constants/theme'; import { spacing, borderRadius } from '../constants/theme';
import { StockBadge } from './StockBadge'; import { StockBadge } from './StockBadge';
import { Medicine } from '../types'; import { Medicine } from '../types';
import { useTranslation } from '../src/i18n';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -18,6 +19,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
const handlePress = () => { const handlePress = () => {
router.push(`/medicine/${medicine.nregistro}`); router.push(`/medicine/${medicine.nregistro}`);
@@ -44,7 +46,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
<View style={styles.priceContainer}> <View style={styles.priceContainer}>
<Ionicons name="pricetag" size={14} color={colors.textSecondary} /> <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
<Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}> <Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
{medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'} {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : t('medicineCard.noPrice')}
</Text> </Text>
</View> </View>
apps/frontend-mobile/components/SearchBar.tsx
+4 -2
View File
@@ -3,6 +3,7 @@ import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } fr
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useThemeContext } from './ThemeProvider'; import { useThemeContext } from './ThemeProvider';
import { spacing, borderRadius } from '../constants/theme'; import { spacing, borderRadius } from '../constants/theme';
import { useTranslation } from '../src/i18n';
const TABLET_MIN_WIDTH = 768; const TABLET_MIN_WIDTH = 768;
@@ -14,7 +15,7 @@ interface SearchBarProps {
} }
export function SearchBar({ export function SearchBar({
placeholder = 'Buscar medicamentos...', placeholder,
onSearch, onSearch,
value, value,
onChangeText onChangeText
@@ -22,6 +23,7 @@ export function SearchBar({
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { t } = useTranslation();
const [localValue, setLocalValue] = useState(value || ''); const [localValue, setLocalValue] = useState(value || '');
const handleChange = (text: string) => { const handleChange = (text: string) => {
@@ -44,7 +46,7 @@ export function SearchBar({
<Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} /> <Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
<TextInput <TextInput
style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]} style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]}
placeholder={placeholder} placeholder={placeholder ?? t('search.placeholder')}
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
value={localValue} value={localValue}
onChangeText={handleChange} onChangeText={handleChange}
apps/frontend-mobile/components/StockBadge.tsx
+3 -1
View File
@@ -2,6 +2,7 @@ import React from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet } from 'react-native';
import { useThemeContext } from './ThemeProvider'; import { useThemeContext } from './ThemeProvider';
import { borderRadius, spacing } from '../constants/theme'; import { borderRadius, spacing } from '../constants/theme';
import { useTranslation } from '../src/i18n';
interface StockBadgeProps { interface StockBadgeProps {
stock: number; stock: number;
@@ -9,6 +10,7 @@ interface StockBadgeProps {
export function StockBadge({ stock }: StockBadgeProps) { export function StockBadge({ stock }: StockBadgeProps) {
const { colors, isDark } = useThemeContext(); const { colors, isDark } = useThemeContext();
const { t } = useTranslation();
const getBadgeColors = () => { const getBadgeColors = () => {
if (stock === 0) { if (stock === 0) {
@@ -25,7 +27,7 @@ export function StockBadge({ stock }: StockBadgeProps) {
return ( return (
<View style={[styles.badge, { backgroundColor: badgeColors.bg }]}> <View style={[styles.badge, { backgroundColor: badgeColors.bg }]}>
<Text style={[styles.text, { color: badgeColors.text }]}> <Text style={[styles.text, { color: badgeColors.text }]}>
{stock === 0 ? 'Sin stock' : stock < 5 ? `Bajo (${stock})` : `Disponible (${stock})`} {stock === 0 ? t('stockBadge.outOfStock') : stock < 5 ? `${t('stockBadge.lowStock')} (${stock})` : `${t('stockBadge.inStock')} (${stock})`}
</Text> </Text>
</View> </View>
); );
apps/frontend-mobile/src/i18n/LanguageContext.jsx
+50
View File
@@ -0,0 +1,50 @@
import React, { createContext, useState, useCallback, useMemo } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import es from './locales/es';
import ca from './locales/ca';
const locales = { es, ca };
const STORAGE_KEY = 'ff-lang';
function getInitialLang() {
// Default to 'es' - will be updated from AsyncStorage in the provider
return 'es';
}
export const LanguageContext = createContext(null);
export function LanguageProvider({ children }) {
const [lang, setLangState] = useState(getInitialLang);
const [ready, setReady] = useState(false);
// Load saved language on mount
React.useEffect(() => {
AsyncStorage.getItem(STORAGE_KEY).then((saved) => {
if (saved === 'ca' || saved === 'es') {
setLangState(saved);
}
// Default to 'es' if no saved preference
setReady(true);
}).catch(() => {
setReady(true);
});
}, []);
const setLang = useCallback((newLang) => {
if (newLang !== 'ca' && newLang !== 'es') return;
setLangState(newLang);
AsyncStorage.setItem(STORAGE_KEY, newLang).catch(() => {});
}, []);
const t = useCallback((key) => {
return locales[lang]?.[key] || locales.es[key] || key;
}, [lang]);
const value = useMemo(() => ({ lang, setLang, t, ready }), [lang, setLang, t, ready]);
return (
<LanguageContext.Provider value={value}>
{children}
</LanguageContext.Provider>
);
}
apps/frontend-mobile/src/i18n/index.js
+2
View File
@@ -0,0 +1,2 @@
export { LanguageProvider } from './LanguageContext';
export { useTranslation } from './useTranslation';
apps/frontend-mobile/src/i18n/locales/ca.js
+228
View File
@@ -0,0 +1,228 @@
const ca = {
// Tab bar
'nav.home': 'Inici',
'nav.search': 'Cercar',
'nav.scan': 'Escanejar',
'nav.alerts': 'Alertes',
'nav.profile': 'Perfil',
// Stack screens
'stack.medicine': 'Medicament',
'stack.pharmacy': 'Farmàcia',
'stack.scanner': 'Escanejar',
'stack.login': 'Iniciar Sessió',
'stack.register': 'Registrar-se',
// Home
'home.description': 'Trobeu els vostres medicaments a farmàcies properes',
'home.searchMedicine': 'Cercar Medicament',
'home.scanTSI': 'Escanejar TSI',
// Search
'search.placeholder': 'Cercar medicaments...',
'search.suggestions': 'Suggeriments',
'search.recentSearches': 'Cerques recents',
'search.loading': 'Cercant...',
'search.noResults': 'No s\'han trobat resultats',
'search.resultsFound': 'resultats trobats',
'search.parapharmacy': 'Parafarmàcia',
'search.error': 'Error en cercar medicaments',
// Login
'login.tab.login': 'Iniciar Sessió',
'login.tab.register': 'Crear Compte',
'login.title.login': 'Benvingut de nou',
'login.title.register': 'Crea el teu compte',
'login.subtitle.login': 'Inicia sessió per gestionar el teu perfil i notificacions.',
'login.subtitle.register': 'Desa la teva adreça i rep notificacions quan arribin medicaments.',
'login.username': 'Usuari',
'login.password': 'Contrasenya',
'login.confirmPassword': 'Confirmar contrasenya',
'login.hint.username': '3-32 caràcters per a l\'usuari',
'login.hint.password': 'Mínim 8 caràcters per a la contrasenya',
'login.biometric': 'Iniciar amb biometria',
'login.link.toLogin': 'Ja tens compte? Inicia sessió',
'login.link.toRegister': 'No tens compte? Registra\'t',
'login.alert.error': 'Error',
'login.alert.fillFields': 'Si us plau, completeu tots els camps',
'login.alert.passwordLength': 'La contrasenya ha de tenir almenys 8 caràcters',
'login.alert.passwordMismatch': 'Les contrasenyes no coincideixen',
'login.alert.success': 'Èxit',
'login.alert.accountCreated': 'Compte creat correctament',
'login.alert.ok': 'D\'acord',
'login.alert.createError': 'No s\'ha pogut crear el compte',
'login.alert.wrongCredentials': 'Credencials incorrectes',
'login.alert.noBiometrics': 'No hi ha credencials biomètriques guardades',
'login.alert.biometricFailed': 'Autenticació biomètrica fallida',
'login.alert.biometricError': 'Error en l\'autenticació biomètrica',
// Scanner
'scanner.title': 'Escanejar TSI',
'scanner.description': 'Escanegeu el codi de barres de la vostra targeta sanitària per trobar els vostres medicaments',
'scanner.startScan': 'Iniciar escaneig',
'scanner.or': 'o',
'scanner.uploadPhoto': 'Pujar foto del dispositiu',
'scanner.uploadDescription': 'Tireu o seleccioneu una foto del dispositiu sanitari',
'scanner.takePhoto': 'Fer foto',
'scanner.gallery': 'Galeria',
'scanner.photoSelected': 'Foto seleccionada correctament',
'scanner.manualEntry': 'Introduir número manualment',
'scanner.manualDescription': 'Escriviu el número de la vostra targeta sanitària',
'scanner.manualPlaceholder': 'Introduïu el número de targeta',
'scanner.cameraPermission': 'Permís de càmera requerit',
'scanner.cameraPermissionDesc': 'Necessitem accés a la càmera per fer fotos del dispositiu.',
'scanner.galleryPermission': 'Permís requerit',
'scanner.galleryPermissionDesc': 'Necessitem accés a la galeria per seleccionar fotos.',
'scanner.fieldRequired': 'Camp requerit',
'scanner.fieldRequiredDesc': 'Si us plau, introduïu el número de la targeta.',
// Alerts
'alerts.title': 'Notificacions Desades',
'alerts.description': 'Rebeu avisos quan medicaments sense estoc es repoixin',
'alerts.loading': 'Carregant notificacions...',
'alerts.loginRequired': 'Inicieu sessió per continuar',
'alerts.loginDescription': 'Necessiteu estar autenticat per veure les vostres notificacions',
'alerts.loginBtn': 'Iniciar Sessió',
'alerts.empty': 'Sense notificacions',
'alerts.emptyDescription': 'Toqueu la campana a una farmàcia sense estoc per rebre notificacions quan es repoixi.',
'alerts.retry': 'Tornar a provar',
'alerts.delete': 'Eliminar notificació',
'alerts.deleteConfirm': 'Eliminar la notificació de',
'alerts.cancel': 'Cancel·lar',
'alerts.confirmDelete': 'Eliminar',
'alerts.deleteError': 'No s\'ha pogut eliminar',
'alerts.loadError': 'No s\'han pogut carregar les notificacions',
'alerts.pharmacy': 'Farmàcia',
'alerts.anyPharmacy': 'Qualsevol farmàcia',
// Profile
'profile.title': 'Perfil',
'profile.loginTitle': 'Iniciar Sessió',
'profile.loginDescription': 'Inicieu sessió per accedir al vostre perfil, notificacions i més',
'profile.loginBtn': 'Iniciar Sessió',
'profile.personalData': 'Dades personals',
'profile.firstName': 'Nom',
'profile.lastName': 'Cognoms',
'profile.appearance': 'Aparença',
'profile.config': 'Configuració',
'profile.myAddresses': 'Les Meves Adreces',
'profile.admin': 'Panell Admin',
'profile.recentSearches': 'Cerques recents',
'profile.logout': 'Tancar Sessió',
'profile.logoutConfirm': 'Esteu segur que voleu tancar la sessió?',
'profile.logoutTitle': 'Tancar Sessió',
'profile.logoutCancel': 'Cancel·lar',
'profile.logoutConfirmBtn': 'Tancar Sessió',
'profile.changeAvatar': 'Canviar Avatar',
'profile.presetAvatar': 'Predissenyat',
'profile.colors': 'Colors',
'profile.upload': 'Pujar',
'profile.takePhoto': 'Fer foto',
'profile.takePhotoDesc': 'Useu la càmera del vostre dispositiu',
'profile.chooseGallery': 'Trieu de galeria',
'profile.chooseGalleryDesc': 'Seleccioneu una imatge existent',
'profile.configTitle': 'Configuració',
'profile.firstNameLabel': 'Nom',
'profile.firstNamePlaceholder': 'El vostre nom',
'profile.lastNameLabel': 'Cognoms',
'profile.lastNamePlaceholder': 'Els vostres cognoms',
'profile.email': 'Correu electrònic',
'profile.city': 'Ciutat',
'profile.cityPlaceholder': 'La vostra ciutat',
'profile.address': 'Adreça',
'profile.addressPlaceholder': 'Carrer Major 1, Barcelona',
'profile.cancel': 'Cancel·lar',
'profile.save': 'Desar',
'profile.profileSaved': 'Perfil desat.',
'profile.saveError': 'Error en desar',
'profile.addressRequired': 'L\'adreça és obligatòria',
'profile.addressesTitle': 'Les Meves Adreces',
'profile.addressLabel': 'Adreça',
'profile.addressOptional': 'Etiqueta (opcional)',
'profile.addressLabelPlaceholder': 'Casa, Treball...',
'profile.defaultAddress': 'Adreça predeterminada',
'profile.update': 'Actualitzar',
'profile.add': 'Afegir',
'profile.mainAddress': 'Principal',
'profile.setDefault': 'Establir com a predeterminada',
'profile.addAddress': 'Afegir adreça',
'profile.cameraPermission': 'Permís requerit',
'profile.cameraPermissionDesc': 'Necessitem permís per accedir a la càmera.',
'profile.themeSystem': 'Sistema',
'profile.themeLight': 'Clar',
'profile.themeDark': 'Fosc',
'profile.language': 'Idioma',
'profile.languageTitle': 'Idioma de l\'aplicació',
'profile.languageCatalan': 'Català',
'profile.languageSpanish': 'Castellà',
// Medicine detail
'medicine.loading': 'Carregant medicament...',
'medicine.notFound': 'Medicament no trobat',
'medicine.activeIngredient': 'Principi actiu',
'medicine.laboratory': 'Laboratori',
'medicine.form': 'Forma farmacèutica',
'medicine.dosage': 'Dosificació',
'medicine.price': 'Preu',
'medicine.notAvailable': 'No disponible',
'medicine.registration': 'Registre',
'medicine.mapSoon': 'Mapa properament…',
'medicine.pharmacies': 'Farmàcies',
'medicine.locating': 'Localitzant…',
'medicine.distanceReset': 'Distància · Restablir',
'medicine.sortByDistance': 'Ordenar per distància',
'medicine.retry': 'Tornar a provar',
'medicine.noPharmacies': 'No hi ha farmàcies disponibles',
'medicine.checkPrice': 'Consultar preu',
'medicine.howToGet': 'Com arribar',
'medicine.locationDenied': 'Permís d\'ubicació denegat',
'medicine.locationError': 'No s\'ha pogut obtenir la vostra ubicació',
// Pharmacy detail
'pharmacy.loading': 'Carregant farmàcia...',
'pharmacy.notFound': 'Farmàcia no trobada',
'pharmacy.call': 'Trucar',
'pharmacy.howToGet': 'Com arribar',
'pharmacy.medications': 'Medicaments',
'pharmacy.noMedications': 'No hi ha medicaments disponibles',
'pharmacy.reg': 'Reg: ',
'pharmacy.stock': 'Estoc: ',
'pharmacy.notificationsActive': 'Notificacions actives',
'pharmacy.notifyWhenAvailable': 'Notificar-me quan hi hagi estoc',
// Product detail
'product.loading': 'Carregant producte...',
'product.notFound': 'Producte no trobat',
'product.noImage': 'Sense imatge',
'product.parapharmacy': 'Parafarmàcia',
'product.cimaDetails': 'Detalls CIMA',
'product.activeIngredient': 'Principi actiu',
'product.dosage': 'Dosificació',
'product.form': 'Forma farmacèutica',
'product.dispensation': 'Tipus de dispensació',
'product.commercialized': 'Comercialitzat',
'product.yes': 'Sí',
'product.no': 'No',
'product.productInfo': 'Informació del producte',
'product.price': 'Preu',
'product.previousPrice': 'Preu anterior',
'product.category': 'Categoria',
'product.brand': 'Marca',
'product.source': 'Font',
'product.images': 'Imatges',
// Components
'medicineCard.noPrice': 'Sense preu',
'stockBadge.outOfStock': 'Sense estoc',
'stockBadge.lowStock': 'Baix',
'stockBadge.inStock': 'Disponible',
'loadingSpinner.loading': 'Carregant...',
'barcodeScanner.permissionRequired': 'Permís de càmera requerit',
'barcodeScanner.permissionDesc': 'Necessitem accés a la càmera per escanejar codis de barres',
'barcodeScanner.grantPermission': 'Concedir permís',
'barcodeScanner.cancel': 'Cancel·lar',
'barcodeScanner.scanningHint': 'Apunteu la càmera al codi de barres del medicament',
'barcodeScanner.scanAgain': 'Escanejar de nou',
};
export default ca;
apps/frontend-mobile/src/i18n/locales/es.js
+228
View File
@@ -0,0 +1,228 @@
const es = {
// Tab bar
'nav.home': 'Inicio',
'nav.search': 'Buscar',
'nav.scan': 'Escanear',
'nav.alerts': 'Avisos',
'nav.profile': 'Perfil',
// Stack screens
'stack.medicine': 'Medicamento',
'stack.pharmacy': 'Farmacia',
'stack.scanner': 'Escanear',
'stack.login': 'Iniciar Sesión',
'stack.register': 'Registrarse',
// Login / Register
'login.tab.login': 'Iniciar Sesión',
'login.tab.register': 'Crear Cuenta',
'login.title.login': 'Bienvenido de nuevo',
'login.title.register': 'Crea tu cuenta',
'login.subtitle.login': 'Inicia sesión para gestionar tu perfil y notificaciones.',
'login.subtitle.register': 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.',
'login.username': 'Usuario',
'login.password': 'Contraseña',
'login.confirmPassword': 'Confirmar contraseña',
'login.hint.username': '3-32 caracteres para el usuario',
'login.hint.password': 'Mínimo 8 caracteres para la contraseña',
'login.biometric': 'Iniciar con biometría',
'login.link.toLogin': '¿Ya tienes cuenta? Inicia sesión',
'login.link.toRegister': '¿No tienes cuenta? Regístrate',
'login.alert.error': 'Error',
'login.alert.fillFields': 'Por favor completa todos los campos',
'login.alert.passwordLength': 'La contraseña debe tener al menos 8 caracteres',
'login.alert.passwordMismatch': 'Las contraseñas no coinciden',
'login.alert.success': 'Éxito',
'login.alert.accountCreated': 'Cuenta creada correctamente',
'login.alert.ok': 'OK',
'login.alert.createError': 'No se pudo crear la cuenta',
'login.alert.wrongCredentials': 'Credenciales incorrectas',
'login.alert.noBiometrics': 'No hay credenciales biométricas guardadas',
'login.alert.biometricFailed': 'Autenticación biométrica fallida',
'login.alert.biometricError': 'Error en la autenticación biométrica',
// Home
'home.description': 'Encuentra tus medicamentos en farmacias cercanas',
'home.searchMedicine': 'Buscar Medicamento',
'home.scanTSI': 'Escanear TSI',
// Search
'search.placeholder': 'Buscar medicamentos...',
'search.suggestions': 'Sugerencias',
'search.recentSearches': 'Búsquedas recientes',
'search.loading': 'Buscando...',
'search.noResults': 'No se encontraron resultados',
'search.resultsFound': 'resultados encontrados',
'search.parapharmacy': 'Parafarmacia',
'search.error': 'Error al buscar medicamentos',
// Scanner
'scanner.title': 'Escanear TSI',
'scanner.description': 'Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos',
'scanner.startScan': 'Iniciar escaneo',
'scanner.or': 'o',
'scanner.uploadPhoto': 'Subir foto del dispositivo',
'scanner.uploadDescription': 'Toma o selecciona una foto del dispositivo sanitario',
'scanner.takePhoto': 'Tomar foto',
'scanner.gallery': 'Galería',
'scanner.photoSelected': 'Foto seleccionada correctamente',
'scanner.manualEntry': 'Introducir número manualmente',
'scanner.manualDescription': 'Escribe el número de tu tarjeta sanitaria',
'scanner.manualPlaceholder': 'Introduce el número de tarjeta',
'scanner.cameraPermission': 'Permiso de cámara requerido',
'scanner.cameraPermissionDesc': 'Necesitamos acceso a la cámara para tomar fotos del dispositivo.',
'scanner.galleryPermission': 'Permiso requerido',
'scanner.galleryPermissionDesc': 'Necesitamos acceso a la galería para seleccionar fotos.',
'scanner.fieldRequired': 'Campo requerido',
'scanner.fieldRequiredDesc': 'Por favor, introduce el número de la tarjeta.',
// Alerts
'alerts.title': 'Notificaciones Guardadas',
'alerts.description': 'Recibe avisos cuando medicamentos sin stock se repongan',
'alerts.loading': 'Cargando notificaciones...',
'alerts.loginRequired': 'Inicia sesión para continuar',
'alerts.loginDescription': 'Necesitas estar autenticado para ver tus notificaciones',
'alerts.loginBtn': 'Iniciar Sesión',
'alerts.empty': 'Sin notificaciones',
'alerts.emptyDescription': 'Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.',
'alerts.retry': 'Reintentar',
'alerts.delete': 'Eliminar notificación',
'alerts.deleteConfirm': '¿Eliminar la notificación de',
'alerts.cancel': 'Cancelar',
'alerts.confirmDelete': 'Eliminar',
'alerts.deleteError': 'No se pudo eliminar',
'alerts.loadError': 'No se pudieron cargar las notificaciones',
'alerts.pharmacy': 'Farmacia',
'alerts.anyPharmacy': 'Cualquier farmacia',
// Profile
'profile.title': 'Perfil',
'profile.loginTitle': 'Inicia Sesión',
'profile.loginDescription': 'Inicia sesión para acceder a tu perfil, notificaciones y más',
'profile.loginBtn': 'Iniciar Sesión',
'profile.personalData': 'Datos personales',
'profile.firstName': 'Nombre',
'profile.lastName': 'Apellidos',
'profile.appearance': 'Apariencia',
'profile.config': 'Configuración',
'profile.myAddresses': 'Mis Direcciones',
'profile.admin': 'Panel Admin',
'profile.recentSearches': 'Búsquedas recientes',
'profile.logout': 'Cerrar Sesión',
'profile.logoutConfirm': '¿Estás seguro que deseas cerrar sesión?',
'profile.logoutTitle': 'Cerrar Sesión',
'profile.logoutCancel': 'Cancelar',
'profile.logoutConfirmBtn': 'Cerrar Sesión',
'profile.changeAvatar': 'Cambiar Avatar',
'profile.presetAvatar': 'Prediseñado',
'profile.colors': 'Colores',
'profile.upload': 'Subir',
'profile.takePhoto': 'Tomar foto',
'profile.takePhotoDesc': 'Usa la cámara de tu dispositivo',
'profile.chooseGallery': 'Elegir de galería',
'profile.chooseGalleryDesc': 'Selecciona una imagen existente',
'profile.configTitle': 'Configuración',
'profile.firstNameLabel': 'Nombre',
'profile.firstNamePlaceholder': 'Tu nombre',
'profile.lastNameLabel': 'Apellidos',
'profile.lastNamePlaceholder': 'Tus apellidos',
'profile.email': 'Correo electrónico',
'profile.city': 'Ciudad',
'profile.cityPlaceholder': 'Tu ciudad',
'profile.address': 'Dirección',
'profile.addressPlaceholder': 'Calle Mayor 1, Madrid',
'profile.cancel': 'Cancelar',
'profile.save': 'Guardar',
'profile.profileSaved': 'Perfil guardado.',
'profile.saveError': 'Error al guardar',
'profile.addressRequired': 'La dirección es obligatoria',
'profile.addressesTitle': 'Mis Direcciones',
'profile.addressLabel': 'Dirección',
'profile.addressOptional': 'Etiqueta (opcional)',
'profile.addressLabelPlaceholder': 'Casa, Trabajo...',
'profile.defaultAddress': 'Dirección predeterminada',
'profile.update': 'Actualizar',
'profile.add': 'Añadir',
'profile.mainAddress': 'Principal',
'profile.setDefault': 'Marcar como predeterminada',
'profile.addAddress': 'Añadir dirección',
'profile.cameraPermission': 'Permiso requerido',
'profile.cameraPermissionDesc': 'Necesitamos permiso para acceder a la cámara.',
'profile.themeSystem': 'Sistema',
'profile.themeLight': 'Claro',
'profile.themeDark': 'Oscuro',
'profile.language': 'Idioma',
'profile.languageTitle': 'Idioma de la aplicación',
'profile.languageCatalan': 'Català',
'profile.languageSpanish': 'Castellano',
// Medicine detail
'medicine.loading': 'Cargando medicamento...',
'medicine.notFound': 'Medicamento no encontrado',
'medicine.activeIngredient': 'Principio activo',
'medicine.laboratory': 'Laboratorio',
'medicine.form': 'Forma farmacéutica',
'medicine.dosage': 'Dosificación',
'medicine.price': 'Precio',
'medicine.notAvailable': 'No disponible',
'medicine.registration': 'Registro',
'medicine.mapSoon': 'Mapa próximamente…',
'medicine.pharmacies': 'Farmacias',
'medicine.locating': 'Localizando…',
'medicine.distanceReset': 'Distancia · Reset',
'medicine.sortByDistance': 'Ordenar por distancia',
'medicine.retry': 'Reintentar',
'medicine.noPharmacies': 'No hay farmacias disponibles',
'medicine.checkPrice': 'Consultar precio',
'medicine.howToGet': 'Cómo llegar',
'medicine.locationDenied': 'Permiso de ubicación denegado',
'medicine.locationError': 'No se pudo obtener tu ubicación',
// Pharmacy detail
'pharmacy.loading': 'Cargando farmacia...',
'pharmacy.notFound': 'Farmacia no encontrada',
'pharmacy.call': 'Llamar',
'pharmacy.howToGet': 'Cómo llegar',
'pharmacy.medications': 'Medicamentos',
'pharmacy.noMedications': 'No hay medicamentos disponibles',
'pharmacy.reg': 'Reg: ',
'pharmacy.stock': 'Stock: ',
'pharmacy.notificationsActive': 'Notificaciones activas',
'pharmacy.notifyWhenAvailable': 'Notificarme cuando haya stock',
// Product detail
'product.loading': 'Cargando producto...',
'product.notFound': 'Producto no encontrado',
'product.noImage': 'Sin imagen',
'product.parapharmacy': 'Parafarmacia',
'product.cimaDetails': 'Detalles CIMA',
'product.activeIngredient': 'Principio activo',
'product.dosage': 'Dosificación',
'product.form': 'Forma farmacéutica',
'product.dispensation': 'Tipo de dispensación',
'product.commercialized': 'Comercializado',
'product.yes': 'Sí',
'product.no': 'No',
'product.productInfo': 'Información del producto',
'product.price': 'Precio',
'product.previousPrice': 'Precio anterior',
'product.category': 'Categoría',
'product.brand': 'Marca',
'product.source': 'Fuente',
'product.images': 'Imágenes',
// Components
'medicineCard.noPrice': 'Sin precio',
'stockBadge.outOfStock': 'Sin stock',
'stockBadge.lowStock': 'Bajo',
'stockBadge.inStock': 'Disponible',
'loadingSpinner.loading': 'Cargando...',
'barcodeScanner.permissionRequired': 'Permiso de cámara requerido',
'barcodeScanner.permissionDesc': 'Necesitamos acceso a la cámara para escanear códigos de barras',
'barcodeScanner.grantPermission': 'Conceder permiso',
'barcodeScanner.cancel': 'Cancelar',
'barcodeScanner.scanningHint': 'Apunta la cámara al código de barras del medicamento',
'barcodeScanner.scanAgain': 'Escanear de nuevo',
};
export default es;
apps/frontend-mobile/src/i18n/useTranslation.js
+8
View File
@@ -0,0 +1,8 @@
import { useContext } from 'react';
import { LanguageContext } from './LanguageContext';
export function useTranslation() {
const ctx = useContext(LanguageContext);
if (!ctx) throw new Error('useTranslation must be used within LanguageProvider');
return ctx;
}
apps/frontend/src/App.test.jsx
+11 -6
View File
@@ -1,8 +1,13 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { render, screen, fireEvent, act } from '@testing-library/react' import { render, screen, fireEvent, act } from '@testing-library/react'
import { LanguageProvider } from './i18n'
import HomeView from './views/HomeView.jsx' import HomeView from './views/HomeView.jsx'
import SearchView from './views/SearchView.jsx' import SearchView from './views/SearchView.jsx'
function Wrapper({ children }) {
return <LanguageProvider>{children}</LanguageProvider>
}
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers() vi.useFakeTimers()
}) })
@@ -16,14 +21,14 @@ describe('HomeView', () => {
it('renders two action buttons on the home screen', () => { it('renders two action buttons on the home screen', () => {
const onSearch = vi.fn() const onSearch = vi.fn()
const onScan = vi.fn() const onScan = vi.fn()
render(<HomeView onSearchClick={onSearch} onScanClick={onScan} />) render(<HomeView onSearchClick={onSearch} onScanClick={onScan} />, { wrapper: Wrapper })
expect(screen.getByRole('button', { name: /buscar medicamento/i })).toBeInTheDocument() expect(screen.getByRole('button', { name: /buscar medicamento/i })).toBeInTheDocument()
expect(screen.getByRole('button', { name: /escanear tsi/i })).toBeInTheDocument() expect(screen.getByRole('button', { name: /escanear tsi/i })).toBeInTheDocument()
}) })
it('calls onSearchClick when Buscar Medicamento is clicked', async () => { it('calls onSearchClick when Buscar Medicamento is clicked', async () => {
const onSearch = vi.fn() const onSearch = vi.fn()
render(<HomeView onSearchClick={onSearch} onScanClick={vi.fn()} />) render(<HomeView onSearchClick={onSearch} onScanClick={vi.fn()} />, { wrapper: Wrapper })
fireEvent.click(screen.getByRole('button', { name: /buscar medicamento/i })) fireEvent.click(screen.getByRole('button', { name: /buscar medicamento/i }))
expect(onSearch).toHaveBeenCalledTimes(1) expect(onSearch).toHaveBeenCalledTimes(1)
}) })
@@ -31,13 +36,13 @@ describe('HomeView', () => {
describe('SearchView', () => { describe('SearchView', () => {
it('renders search bar with placeholder', () => { it('renders search bar with placeholder', () => {
render(<SearchView />) render(<SearchView />, { wrapper: Wrapper })
expect(screen.getByPlaceholderText(/escriba el nombre del medicamento/i)).toBeInTheDocument() expect(screen.getByPlaceholderText(/escriba el nombre del medicamento/i)).toBeInTheDocument()
}) })
it('does not fetch for queries shorter than 2 chars', async () => { it('does not fetch for queries shorter than 2 chars', async () => {
const fetchMock = vi.spyOn(globalThis, 'fetch') const fetchMock = vi.spyOn(globalThis, 'fetch')
render(<SearchView />) render(<SearchView />, { wrapper: Wrapper })
fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), { fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), {
target: { value: 'a' }, target: { value: 'a' },
@@ -59,7 +64,7 @@ describe('SearchView', () => {
json: async () => medicines, json: async () => medicines,
}) })
render(<SearchView />) render(<SearchView />, { wrapper: Wrapper })
fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), { fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), {
target: { value: 'ibu' }, target: { value: 'ibu' },
@@ -81,7 +86,7 @@ describe('SearchView', () => {
json: async () => medicines, json: async () => medicines,
}) })
render(<SearchView />) render(<SearchView />, { wrapper: Wrapper })
const input = screen.getByPlaceholderText(/escriba el nombre del medicamento/i) const input = screen.getByPlaceholderText(/escriba el nombre del medicamento/i)
fireEvent.change(input, { target: { value: 'ibu' } }) fireEvent.change(input, { target: { value: 'ibu' } })
apps/frontend/src/components/BottomNav.jsx
+7 -5
View File
@@ -1,13 +1,15 @@
import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons'; import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
import { useTranslation } from '../i18n';
import './BottomNav.css'; import './BottomNav.css';
function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) { function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
const { t } = useTranslation();
const tabs = [ const tabs = [
{ id: 'home', label: 'Inicio', Icon: IconHome }, { id: 'home', label: t('nav.home'), Icon: IconHome },
{ id: 'search', label: 'Buscar', Icon: IconSearch }, { id: 'search', label: t('nav.search'), Icon: IconSearch },
{ id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true }, { id: 'scan', label: t('nav.scan'), Icon: IconScan, elevated: true },
{ id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount }, { id: 'alerts', label: t('nav.alerts'), Icon: IconBell, badge: badgeCount > 0, badgeCount },
{ id: 'profile', label: 'Usuario', Icon: IconUser }, { id: 'profile', label: t('nav.profile'), Icon: IconUser },
]; ];
return ( return (
apps/frontend/src/components/ErrorBoundary.jsx
+7 -3
View File
@@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import { LanguageContext } from '../i18n/LanguageContext';
export default class ErrorBoundary extends React.Component { export default class ErrorBoundary extends React.Component {
static contextType = LanguageContext;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { hasError: false, error: null }; this.state = { hasError: false, error: null };
@@ -25,6 +28,7 @@ export default class ErrorBoundary extends React.Component {
render() { render() {
if (this.state.hasError) { if (this.state.hasError) {
const t = this.context?.t || ((k) => k);
return ( return (
<div style={{ <div style={{
padding: '2rem', padding: '2rem',
@@ -32,8 +36,8 @@ export default class ErrorBoundary extends React.Component {
fontFamily: 'system-ui, sans-serif', fontFamily: 'system-ui, sans-serif',
color: '#333', color: '#333',
}}> }}>
<h2>Algo salió mal</h2> <h2>{t('error.title')}</h2>
<p style={{ color: '#666' }}>Ha ocurrido un error inesperado. Por favor, recarga la página.</p> <p style={{ color: '#666' }}>{t('error.description')}</p>
<button <button
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
style={{ style={{
@@ -47,7 +51,7 @@ export default class ErrorBoundary extends React.Component {
fontSize: '1rem', fontSize: '1rem',
}} }}
> >
Recargar {t('error.reload')}
</button> </button>
</div> </div>
); );
apps/frontend/src/components/LoginModal.jsx
+17 -15
View File
@@ -1,7 +1,9 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { useTranslation } from '../i18n';
import './LoginModal.css'; import './LoginModal.css';
function LoginModal({ onLogin, onClose, initialMode = 'login' }) { function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
const { t } = useTranslation();
const [mode, setMode] = useState(initialMode === 'register' ? 'register' : 'login'); const [mode, setMode] = useState(initialMode === 'register' ? 'register' : 'login');
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
@@ -25,7 +27,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
const u = username.trim(); const u = username.trim();
if (!u || !password) return; if (!u || !password) return;
if (mode === 'register' && password.length < 8) { if (mode === 'register' && password.length < 8) {
setError('La contraseña debe tener al menos 8 caracteres'); setError(t('login.passwordError'));
return; return;
} }
setLoading(true); setLoading(true);
@@ -40,12 +42,12 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
}); });
const data = await res.json().catch(() => ({})); const data = await res.json().catch(() => ({}));
if (!res.ok) { if (!res.ok) {
setError(data.error || (mode === 'register' ? 'No se pudo crear la cuenta' : 'Inicio de sesión fallido')); setError(data.error || (mode === 'register' ? t('login.registerError') : t('login.loginError')));
} else { } else {
onLogin(data.user); onLogin(data.user);
} }
} catch { } catch {
setError('Error de red — inténtalo de nuevo'); setError(t('login.networkError'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -71,7 +73,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
onClick={() => setMode('login')} onClick={() => setMode('login')}
disabled={loading} disabled={loading}
> >
Iniciar sesión {t('login.login')}
</button> </button>
<button <button
type="button" type="button"
@@ -81,20 +83,20 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
onClick={() => setMode('register')} onClick={() => setMode('register')}
disabled={loading} disabled={loading}
> >
Crear cuenta {t('login.register')}
</button> </button>
</div> </div>
<h2 id="modal-title">{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}</h2> <h2 id="modal-title">{isRegister ? t('login.createAccount') : t('login.welcomeBack')}</h2>
<p className="modal-sub"> <p className="modal-sub">
{isRegister {isRegister
? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.' ? t('login.registerDescription')
: 'Inicia sesión para gestionar tu perfil y notificaciones.'} : t('login.loginDescription')}
</p> </p>
<form onSubmit={handleSubmit} noValidate> <form onSubmit={handleSubmit} noValidate>
<div className="modal-field"> <div className="modal-field">
<label htmlFor="modal-username">Usuario</label> <label htmlFor="modal-username">{t('login.username')}</label>
<input <input
id="modal-username" id="modal-username"
type="text" type="text"
@@ -107,11 +109,11 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
maxLength={isRegister ? 32 : undefined} maxLength={isRegister ? 32 : undefined}
/> />
{isRegister && ( {isRegister && (
<p className="modal-hint">3–32 caracteres: letras, dígitos o guión bajo.</p> <p className="modal-hint">{t('login.usernameHint')}</p>
)} )}
</div> </div>
<div className="modal-field"> <div className="modal-field">
<label htmlFor="modal-password">Contraseña</label> <label htmlFor="modal-password">{t('login.password')}</label>
<input <input
id="modal-password" id="modal-password"
type="password" type="password"
@@ -122,7 +124,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
minLength={isRegister ? 8 : undefined} minLength={isRegister ? 8 : undefined}
/> />
{isRegister && ( {isRegister && (
<p className="modal-hint">Al menos 8 caracteres.</p> <p className="modal-hint">{t('login.passwordHint')}</p>
)} )}
</div> </div>
{error && <p className="modal-error">{error}</p>} {error && <p className="modal-error">{error}</p>}
@@ -133,7 +135,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
> >
Cancelar {t('login.cancel')}
</button> </button>
<button <button
type="submit" type="submit"
@@ -141,8 +143,8 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
disabled={loading || !username.trim() || !password} disabled={loading || !username.trim() || !password}
> >
{loading {loading
? (isRegister ? 'Creando…' : 'Iniciando sesión…') ? (isRegister ? t('login.creating') : t('login.loggingIn'))
: (isRegister ? 'Crear cuenta' : 'Iniciar sesión')} : (isRegister ? t('login.createAccountBtn') : t('login.loginBtn'))}
</button> </button>
</div> </div>
</form> </form>
apps/frontend/src/components/MedicineResults.jsx
+15 -12
View File
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useTranslation } from '../i18n';
import './MedicineResults.css'; import './MedicineResults.css';
import { import {
pushSupported, pushSupported,
@@ -8,10 +9,11 @@ import {
} from '../utils/notifications.js'; } from '../utils/notifications.js';
function MedicineResults({ medicines, onSelect, query, currentUser, onLoginRequest }) { function MedicineResults({ medicines, onSelect, query, currentUser, onLoginRequest }) {
const { t } = useTranslation();
if (medicines.length === 0 && query.length >= 2) { if (medicines.length === 0 && query.length >= 2) {
return ( return (
<div className="no-results"> <div className="no-results">
<p>No se encontraron medicamentos para "{query}"</p> <p>{t('medicine.noResults')} "{query}"</p>
</div> </div>
); );
} }
@@ -32,6 +34,7 @@ function MedicineResults({ medicines, onSelect, query, currentUser, onLoginReque
} }
function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) { function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
const { t } = useTranslation();
const nregistro = medicine.nregistro || medicine.id; const nregistro = medicine.nregistro || medicine.id;
const [subscribed, setSubscribed] = useState(() => isSubscribedLocally(nregistro)); const [subscribed, setSubscribed] = useState(() => isSubscribedLocally(nregistro));
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
@@ -49,7 +52,7 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
return; return;
} }
if (!supported) { if (!supported) {
setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).'); setError(t('pharmacy.notificationsRequired'));
return; return;
} }
if (busy) return; if (busy) return;
@@ -65,7 +68,7 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
} }
} catch (err) { } catch (err) {
console.error('[notify] toggle failed:', err); console.error('[notify] toggle failed:', err);
setError(err.message || 'No se pudo actualizar la suscripción'); setError(err.message || t('medicine.subscriptionError'));
} finally { } finally {
setBusy(false); setBusy(false);
} }
@@ -83,29 +86,29 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
aria-pressed={subscribed && !!currentUser} aria-pressed={subscribed && !!currentUser}
aria-label={ aria-label={
!currentUser !currentUser
? 'Inicia sesión para activar notificaciones' ? t('medicine.loginForNotifications')
: subscribed : subscribed
? 'Desactivar notificaciones para este medicamento' ? t('medicine.disableNotifications')
: 'Notificarme cuando esté disponible' : t('medicine.enableNotifications')
} }
title={ title={
!currentUser !currentUser
? 'Inicia sesión para activar notificaciones' ? t('medicine.loginForNotifications')
: subscribed : subscribed
? 'Notificaciones activadas — clic para desactivar' ? t('medicine.notificationsActivated')
: 'Notificarme cuando este medicamento esté en una farmacia' : t('medicine.notifyWhenAvailable')
} }
> >
{subscribed && currentUser ? '🔔' : '🔕'} {subscribed && currentUser ? '🔔' : '🔕'}
</button> </button>
</div> </div>
<div className="medicine-card-body"> <div className="medicine-card-body">
<p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p> <p><strong>{t('medicine.principioActivo')}</strong> {medicine.active_ingredient}</p>
<p><strong>Dosis:</strong> {medicine.dosage} • <strong>Forma:</strong> {medicine.form}</p> <p><strong>{t('medicine.dosis')}</strong> {medicine.dosage} • <strong>{t('medicine.forma')}</strong> {medicine.form}</p>
{error && <p className="notify-error" onClick={e => e.stopPropagation()}>{error}</p>} {error && <p className="notify-error" onClick={e => e.stopPropagation()}>{error}</p>}
</div> </div>
<div className="medicine-card-footer"> <div className="medicine-card-footer">
<span className="view-pharmacies">Ver farmacias →</span> <span className="view-pharmacies">{t('medicine.viewPharmacies')}</span>
</div> </div>
</div> </div>
); );
apps/frontend/src/components/PharmacyList.jsx
+16 -13
View File
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useTranslation } from '../i18n';
import './PharmacyList.css'; import './PharmacyList.css';
import { haversineKm, formatDistance } from '../utils/geo'; import { haversineKm, formatDistance } from '../utils/geo';
import { getOpenStatus } from '../utils/hours'; import { getOpenStatus } from '../utils/hours';
@@ -10,10 +11,11 @@ import {
} from '../utils/notifications.js'; } from '../utils/notifications.js';
function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser, onLoginRequest }) { function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser, onLoginRequest }) {
const { t } = useTranslation();
if (loading) { if (loading) {
return ( return (
<div className="loading-pharmacies"> <div className="loading-pharmacies">
<p>Cargando farmacias...</p> <p>{t('pharmacy.loading')}</p>
</div> </div>
); );
} }
@@ -21,7 +23,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
if (pharmacies.length === 0) { if (pharmacies.length === 0) {
return ( return (
<div className="no-pharmacies"> <div className="no-pharmacies">
<p>No se encontraron farmacias con este medicamento</p> <p>{t('pharmacy.notFound')}</p>
</div> </div>
); );
} }
@@ -29,7 +31,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
return ( return (
<div className="pharmacy-list"> <div className="pharmacy-list">
<h3 className="pharmacy-list-title"> <h3 className="pharmacy-list-title">
Disponible en {pharmacies.length} {pharmacies.length === 1 ? 'farmacia' : 'farmacias'} {t('pharmacy.availableAt')} {pharmacies.length} {pharmacies.length === 1 ? t('pharmacy.pharmacy') : t('pharmacy.pharmacies')}
</h3> </h3>
<div className="pharmacy-grid"> <div className="pharmacy-grid">
{pharmacies.map((pharmacy) => { {pharmacies.map((pharmacy) => {
@@ -55,6 +57,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
} }
function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest, userPosition }) { function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest, userPosition }) {
const { t } = useTranslation();
const nregistro = medicine?.nregistro || medicine?.id; const nregistro = medicine?.nregistro || medicine?.id;
const supported = pushSupported(); const supported = pushSupported();
const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0; const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0;
@@ -77,7 +80,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
return; return;
} }
if (!supported) { if (!supported) {
setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).'); setError(t('pharmacy.notificationsRequired'));
return; return;
} }
if (busy) return; if (busy) return;
@@ -93,7 +96,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
} }
} catch (err) { } catch (err) {
console.error('[notify] pharmacy toggle failed:', err); console.error('[notify] pharmacy toggle failed:', err);
setError(err.message || 'No se pudo actualizar la suscripción'); setError(err.message || t('medicine.subscriptionError'));
} finally { } finally {
setBusy(false); setBusy(false);
} }
@@ -118,17 +121,17 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
aria-pressed={subscribed && !!currentUser} aria-pressed={subscribed && !!currentUser}
aria-label={ aria-label={
!currentUser !currentUser
? 'Inicia sesión para activar notificaciones' ? t('pharmacy.loginForNotifications')
: subscribed : subscribed
? 'Desactivar notificaciones para esta farmacia' ? t('pharmacy.disableNotificationsPharmacy')
: 'Notificarme cuando llegue a esta farmacia' : t('pharmacy.notifyWhenArrives')
} }
title={ title={
!currentUser !currentUser
? 'Inicia sesión para activar notificaciones' ? t('pharmacy.loginForNotifications')
: subscribed : subscribed
? 'Notificaciones activadas para esta farmacia — clic para desactivar' ? t('pharmacy.notificationsActivatedPharmacy')
: 'Notificarme cuando llegue a esta farmacia' : t('pharmacy.notifyWhenArrives')
} }
> >
{subscribed && currentUser ? '🔔' : '🔕'} {subscribed && currentUser ? '🔔' : '🔕'}
@@ -161,7 +164,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="3 11 22 2 13 21 11 13 3 11" /> <polygon points="3 11 22 2 13 21 11 13 3 11" />
</svg> </svg>
Cómo llegar {t('pharmacy.howToGet')}
</a> </a>
)} )}
<div className="pharmacy-pricing"> <div className="pharmacy-pricing">
@@ -170,7 +173,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
)} )}
{pharmacy.stock !== undefined && ( {pharmacy.stock !== undefined && (
<span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}> <span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
{pharmacy.stock > 20 ? '✓ En Stock' : pharmacy.stock > 0 ? `⚠ Stock Bajo (${pharmacy.stock})` : '✗ Sin Stock'} {pharmacy.stock > 20 ? t('pharmacy.inStock') : pharmacy.stock > 0 ? `${t('pharmacy.lowStock')} (${pharmacy.stock})` : t('pharmacy.outOfStock')}
</span> </span>
)} )}
</div> </div>
apps/frontend/src/components/ProductResults.jsx
+16 -13
View File
@@ -1,13 +1,14 @@
import React from 'react'; import React from 'react';
import { useTranslation } from '../i18n';
import './ProductResults.css'; import './ProductResults.css';
const categoryLabels = { const categoryLabels = {
otc: 'Sin Receta', otc: 'product.sinReceta',
parapharmacy: 'Parafarmacia', parapharmacy: 'product.parapharmacy',
dermocosmética: 'Dermocosmética', dermocosmética: 'product.dermocosmetica',
'Fórmulas lácteas': 'Fórmulas lácteas', 'Fórmulas lácteas': 'product.formulasLacteas',
vitaminas: 'Vitaminas', vitaminas: 'product.vitamins',
analgésicos: 'Analgésicos' analgésicos: 'product.analgesics'
}; };
const sourceColors = { const sourceColors = {
@@ -27,10 +28,11 @@ const sourceLabels = {
}; };
function ProductResults({ products, onSelect }) { function ProductResults({ products, onSelect }) {
const { t } = useTranslation();
if (!products || products.length === 0) { if (!products || products.length === 0) {
return ( return (
<div className="no-results"> <div className="no-results">
<p>No se encontraron productos</p> <p>{t('product.noResults')}</p>
</div> </div>
); );
} }
@@ -49,6 +51,7 @@ function ProductResults({ products, onSelect }) {
} }
function ProductCard({ product, onSelect }) { function ProductCard({ product, onSelect }) {
const { t } = useTranslation();
const nutriScore = product.nutriscore; const nutriScore = product.nutriscore;
const nutriScoreColors = { const nutriScoreColors = {
a: '#16a34a', a: '#16a34a',
@@ -83,7 +86,7 @@ function ProductCard({ product, onSelect }) {
{sourceLabels[product.source]} {sourceLabels[product.source]}
</span> </span>
<span className="category-badge"> <span className="category-badge">
{categoryLabels[product.category] || product.category} {categoryLabels[product.category] ? t(categoryLabels[product.category]) : product.category}
</span> </span>
{product.source === 'openfoodfacts' && nutriScore && ( {product.source === 'openfoodfacts' && nutriScore && (
<span <span
@@ -101,21 +104,21 @@ function ProductCard({ product, onSelect }) {
<div className="product-card-body"> <div className="product-card-body">
{product.brand && ( {product.brand && (
<p><strong>Marca:</strong> {product.brand}</p> <p><strong>{t('product.brand')}</strong> {product.brand}</p>
)} )}
{product.price != null && ( {product.price != null && (
<p className="product-price"><strong>Precio:</strong> {product.price} €</p> <p className="product-price"><strong>{t('product.price')}</strong> {product.price} €</p>
)} )}
{product.source === 'cima' && product.active_ingredient && ( {product.source === 'cima' && product.active_ingredient && (
<p><strong>Principio Activo:</strong> {product.active_ingredient}</p> <p><strong>{t('product.activeIngredient')}</strong> {product.active_ingredient}</p>
)} )}
{product.source === 'cima' && product.dosage && ( {product.source === 'cima' && product.dosage && (
<p><strong>Dosis:</strong> {product.dosage}</p> <p><strong>{t('product.dosage')}</strong> {product.dosage}</p>
)} )}
</div> </div>
<div className="product-card-footer"> <div className="product-card-footer">
<span className="view-details">Ver detalles →</span> <span className="view-details">{t('product.viewDetails')}</span>
</div> </div>
</div> </div>
</div> </div>
apps/frontend/src/components/SavedNotifications.jsx
+12 -10
View File
@@ -1,7 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useTranslation } from '../i18n';
import './SavedNotifications.css'; import './SavedNotifications.css';
function SavedNotifications({ onClose, onNotificationChange }) { function SavedNotifications({ onClose, onNotificationChange }) {
const { t } = useTranslation();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
@@ -21,7 +23,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || '')); ].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || ''));
setItems(merged); setItems(merged);
} catch (err) { } catch (err) {
if (!cancelled) setError(err.message || 'No se pudieron cargar las notificaciones guardadas'); if (!cancelled) setError(err.message || t('savedNotifications.loadError'));
} finally { } finally {
if (!cancelled) setLoading(false); if (!cancelled) setLoading(false);
} }
@@ -43,7 +45,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id))); setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
onNotificationChange?.(); onNotificationChange?.();
} catch (err) { } catch (err) {
setError(err.message || 'No se pudo eliminar la notificación'); setError(err.message || t('savedNotifications.deleteError'));
} finally { } finally {
setBusyId(null); setBusyId(null);
} }
@@ -53,15 +55,15 @@ function SavedNotifications({ onClose, onNotificationChange }) {
<div className="saved-notifications-backdrop" onClick={onClose}> <div className="saved-notifications-backdrop" onClick={onClose}>
<div className="saved-notifications-modal" onClick={e => e.stopPropagation()}> <div className="saved-notifications-modal" onClick={e => e.stopPropagation()}>
<div className="saved-notifications-header"> <div className="saved-notifications-header">
<h2>🔔 Notificaciones Guardadas</h2> <h2>{t('savedNotifications.title')}</h2>
<button className="saved-notifications-close" onClick={onClose} aria-label="Cerrar">×</button> <button className="saved-notifications-close" onClick={onClose} aria-label={t('savedNotifications.close')}>×</button>
</div> </div>
<div className="saved-notifications-body"> <div className="saved-notifications-body">
{loading && <p className="saved-notifications-status">Cargando…</p>} {loading && <p className="saved-notifications-status">{t('savedNotifications.loading')}</p>}
{!loading && error && <p className="saved-notifications-error">{error}</p>} {!loading && error && <p className="saved-notifications-error">{error}</p>}
{!loading && !error && items.length === 0 && ( {!loading && !error && items.length === 0 && (
<p className="saved-notifications-empty"> <p className="saved-notifications-empty">
Aún no hay notificaciones guardadas. Toca la campana 🔕 en una farmacia sin stock para recibir notificaciones cuando se reponga. {t('savedNotifications.empty')}
</p> </p>
)} )}
{!loading && !error && items.length > 0 && ( {!loading && !error && items.length > 0 && (
@@ -78,7 +80,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
{item.scope === 'pharmacy' ? ( {item.scope === 'pharmacy' ? (
<> <>
<span className="saved-notifications-chip saved-notifications-chip--pharmacy"> <span className="saved-notifications-chip saved-notifications-chip--pharmacy">
🏥 {item.pharmacy_name || `Farmacia #${item.pharmacy_id}`} 🏥 {item.pharmacy_name || `${t('savedNotifications.anyPharmacy')} #${item.pharmacy_id}`}
</span> </span>
{item.pharmacy_address && ( {item.pharmacy_address && (
<span className="saved-notifications-address">{item.pharmacy_address}</span> <span className="saved-notifications-address">{item.pharmacy_address}</span>
@@ -86,7 +88,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
</> </>
) : ( ) : (
<span className="saved-notifications-chip"> <span className="saved-notifications-chip">
Cualquier farmacia {t('savedNotifications.anyPharmacy')}
</span> </span>
)} )}
</div> </div>
@@ -96,9 +98,9 @@ function SavedNotifications({ onClose, onNotificationChange }) {
className="saved-notifications-remove" className="saved-notifications-remove"
onClick={() => handleDelete(item)} onClick={() => handleDelete(item)}
disabled={busyId === key} disabled={busyId === key}
aria-label="Eliminar notificación" aria-label={t('savedNotifications.delete')}
> >
{busyId === key ? '…' : 'Eliminar'} {busyId === key ? '…' : t('savedNotifications.delete')}
</button> </button>
</li> </li>
); );
apps/frontend/src/components/SearchBar.jsx
+3 -1
View File
@@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import { useTranslation } from '../i18n';
import './SearchBar.css'; import './SearchBar.css';
function SearchBar({ value, onChange, placeholder }) { function SearchBar({ value, onChange, placeholder }) {
const { t } = useTranslation();
return ( return (
<div className="search-bar-container"> <div className="search-bar-container">
<div className="search-bar"> <div className="search-bar">
@@ -22,7 +24,7 @@ function SearchBar({ value, onChange, placeholder }) {
<button <button
className="clear-button" className="clear-button"
onClick={() => onChange('')} onClick={() => onChange('')}
aria-label="Limpiar búsqueda" aria-label={t('search.clear')}
> >
✕ ✕
</button> </button>
apps/frontend/src/components/admin/LoginForm.jsx
+13 -11
View File
@@ -1,7 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from '../../i18n';
import './LoginForm.css'; import './LoginForm.css';
function LoginForm({ onLogin }) { function LoginForm({ onLogin }) {
const { t } = useTranslation();
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -25,14 +27,14 @@ function LoginForm({ onLogin }) {
const data = await response.json(); const data = await response.json();
if (!response.ok) { if (!response.ok) {
throw new Error(data.error || 'Inicio de sesión fallido'); throw new Error(data.error || t('admin.login.failed'));
} }
// Success - notify parent component // Success - notify parent component
onLogin(data.user); onLogin(data.user);
} catch (error) { } catch (error) {
console.error('Login error:', error); console.error('Login error:', error);
setError(error.message || 'Usuario o contraseña inválidos'); setError(error.message || t('admin.login.invalidCredentials'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -42,8 +44,8 @@ function LoginForm({ onLogin }) {
<div className="login-container"> <div className="login-container">
<div className="login-box"> <div className="login-box">
<div className="login-header"> <div className="login-header">
<h2>🔐 Acceso Administración</h2> <h2>{t('admin.login.title')}</h2>
<p>Introduce tus credenciales para acceder al panel de administración</p> <p>{t('admin.login.description')}</p>
</div> </div>
<form onSubmit={handleSubmit} className="login-form"> <form onSubmit={handleSubmit} className="login-form">
@@ -54,13 +56,13 @@ function LoginForm({ onLogin }) {
)} )}
<div className="form-group"> <div className="form-group">
<label htmlFor="username">Usuario</label> <label htmlFor="username">{t('admin.login.username')}</label>
<input <input
id="username" id="username"
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Introduce usuario" placeholder={t('admin.login.usernamePlaceholder')}
required required
autoFocus autoFocus
disabled={loading} disabled={loading}
@@ -68,13 +70,13 @@ function LoginForm({ onLogin }) {
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="password">Contraseña</label> <label htmlFor="password">{t('admin.login.password')}</label>
<input <input
id="password" id="password"
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Introduce contraseña" placeholder={t('admin.login.passwordPlaceholder')}
required required
disabled={loading} disabled={loading}
/> />
@@ -85,16 +87,16 @@ function LoginForm({ onLogin }) {
className="login-button" className="login-button"
disabled={loading || !username || !password} disabled={loading || !username || !password}
> >
{loading ? 'Iniciando sesión...' : 'Iniciar sesión'} {loading ? t('admin.login.loggingIn') : t('admin.login.loginBtn')}
</button> </button>
</form> </form>
<div className="login-footer"> <div className="login-footer">
<p className="help-text"> <p className="help-text">
Credenciales por defecto: <code>admin</code> / <code>admin123</code> {t('admin.login.defaultCredentials')} <code>admin</code> / <code>admin123</code>
</p> </p>
<p className="warning-text"> <p className="warning-text">
⚠️ ¡Cambia la contraseña por defecto tras el primer inicio de sesión! {t('admin.login.changePasswordWarning')}
</p> </p>
</div> </div>
</div> </div>
apps/frontend/src/components/admin/MedicineManagement.jsx
+17 -15
View File
@@ -1,9 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from '../../i18n';
import './AdminComponents.css'; import './AdminComponents.css';
const SEARCH_DEBOUNCE_MS = 400; const SEARCH_DEBOUNCE_MS = 400;
function MedicineManagement() { function MedicineManagement() {
const { t } = useTranslation();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [medicines, setMedicines] = useState([]); const [medicines, setMedicines] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -29,7 +31,7 @@ function MedicineManagement() {
} catch (error) { } catch (error) {
if (error.name === 'AbortError') return; if (error.name === 'AbortError') return;
console.error('Error searching medicines:', error); console.error('Error searching medicines:', error);
alert('Error al buscar medicamentos en la API CIMA'); alert(t('admin.medicine.loadError'));
} finally { } finally {
if (!controller.signal.aborted) setLoading(false); if (!controller.signal.aborted) setLoading(false);
} }
@@ -44,47 +46,47 @@ function MedicineManagement() {
return ( return (
<div className="admin-section"> <div className="admin-section">
<div className="section-header"> <div className="section-header">
<h2>Buscar Medicamentos (API CIMA)</h2> <h2>{t('admin.medicine.title')}</h2>
</div> </div>
<div className="info-box"> <div className="info-box">
<p>ℹ️ Los medicamentos ahora se obtienen directamente de la <strong>API de CIMA</strong> (Agencia Española de Medicamentos y Productos Sanitarios).</p> <p>ℹ️ {t('admin.medicine.description')} <strong>{t('admin.medicine.cimaApi')}</strong> {t('admin.medicine.cimaDescription')}</p>
<p>Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".</p> <p>{t('admin.medicine.linkDescription')}</p>
</div> </div>
<div className="admin-form"> <div className="admin-form">
<div className="form-group"> <div className="form-group">
<label>Buscar medicamentos</label> <label>{t('admin.medicine.search')}</label>
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Escribe el nombre de un medicamento..." placeholder={t('admin.medicine.searchPlaceholder')}
/> />
</div> </div>
</div> </div>
{loading && <div className="loading">Buscando en API CIMA...</div>} {loading && <div className="loading">{t('admin.medicine.searching')}</div>}
{!loading && medicines.length > 0 && ( {!loading && medicines.length > 0 && (
<div className="admin-list"> <div className="admin-list">
<p className="info-text">Se encontraron {medicines.length} medicamentos</p> <p className="info-text">{t('admin.medicine.found')} {medicines.length} {t('admin.medicine.medications')}</p>
{medicines.map((medicine) => ( {medicines.map((medicine) => (
<div key={medicine.nregistro} className="admin-item"> <div key={medicine.nregistro} className="admin-item">
<div className="item-content"> <div className="item-content">
<h4>{medicine.name}</h4> <h4>{medicine.name}</h4>
{medicine.active_ingredient && ( {medicine.active_ingredient && (
<p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p> <p><strong>{t('admin.medicine.activeIngredient')}</strong> {medicine.active_ingredient}</p>
)} )}
<p> <p>
{medicine.dosage && <span><strong>Dosis:</strong> {medicine.dosage}</span>} {medicine.dosage && <span><strong>{t('admin.medicine.dosage')}</strong> {medicine.dosage}</span>}
{medicine.dosage && medicine.form && ' • '} {medicine.dosage && medicine.form && ' • '}
{medicine.form && <span><strong>Forma:</strong> {medicine.form}</span>} {medicine.form && <span><strong>{t('admin.medicine.form')}</strong> {medicine.form}</span>}
</p> </p>
<p className="medicine-meta"> <p className="medicine-meta">
<strong>Laboratorio:</strong> {medicine.laboratory} • <strong>{t('admin.medicine.laboratory')}</strong> {medicine.laboratory} •
<strong> Nº Registro:</strong> {medicine.nregistro} • <strong> {t('admin.medicine.registrationNumber')}</strong> {medicine.nregistro} •
{medicine.generic ? ' Genérico' : ' Marca'} {medicine.generic ? ` ${t('admin.medicine.generic')}` : ` ${t('admin.medicine.brand')}`}
</p> </p>
</div> </div>
</div> </div>
@@ -93,7 +95,7 @@ function MedicineManagement() {
)} )}
{!loading && searchQuery.trim().length >= 2 && medicines.length === 0 && ( {!loading && searchQuery.trim().length >= 2 && medicines.length === 0 && (
<p className="empty-state">No se encontraron medicamentos con ese nombre.</p> <p className="empty-state">{t('admin.medicine.noResults')}</p>
)} )}
</div> </div>
); );
apps/frontend/src/components/admin/PharmacyManagement.jsx
+73 -68
View File
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import './AdminComponents.css'; import './AdminComponents.css';
import { DAY_KEYS, DAY_LABEL } from '../../utils/hours'; import { DAY_KEYS, DAY_LABEL } from '../../utils/hours';
import { useTranslation } from '../../i18n';
function emptyHoursDraft() { function emptyHoursDraft() {
const draft = {}; const draft = {};
@@ -55,18 +56,20 @@ function haversineMeters(lat1, lon1, lat2, lon2) {
return 2 * R * Math.asin(Math.sqrt(Math.min(1, a))); return 2 * R * Math.asin(Math.sqrt(Math.min(1, a)));
} }
const REGION_PRESETS = [ function getRegionPresets(t) {
{ id: 'custom', label: 'Coordenadas personalizadas', lat: '', lon: '', radio: '' }, return [
{ { id: 'custom', label: t('admin.pharmacy.customCoordinates'), lat: '', lon: '', radio: '' },
id: 'rubi', {
label: 'Ejemplo: Área de Rubí (1.5 km)', id: 'rubi',
lat: '41.5631', label: t('admin.pharmacy.areaExample'),
lon: '2.0038', lat: '41.5631',
radio: '1500', lon: '2.0038',
}, radio: '1500',
]; },
];
}
async function geocodeErrorMessage(response) { async function geocodeErrorMessage(response, t) {
const text = await response.text(); const text = await response.text();
let body = {}; let body = {};
try { try {
@@ -76,19 +79,21 @@ async function geocodeErrorMessage(response) {
} }
if (typeof body.error === 'string' && body.error.trim()) return body.error; if (typeof body.error === 'string' && body.error.trim()) return body.error;
if (response.status === 401) { if (response.status === 401) {
return 'Sesión expirada o no has iniciado sesión. Inicia sesión de nuevo en el panel Admin y reintenta.'; return t('admin.pharmacy.sessionExpired');
} }
if (response.status === 404) { if (response.status === 404) {
const looksLikeHtml = /<!DOCTYPE|<html[\s>]/i.test(text || ''); const looksLikeHtml = /<!DOCTYPE|<html[\s>]/i.test(text || '');
if (looksLikeHtml) { if (looksLikeHtml) {
return 'La app no pudo conectar con la API (404). Usa http://localhost:3000 con frontend y backend activos.'; return t('admin.pharmacy.apiNotFound');
} }
return 'Servicio de geocodificación no encontrado. Actualiza el backend y reinícialo.'; return t('admin.pharmacy.geocodingNotFound');
} }
return `Búsqueda fallida (HTTP ${response.status}).`; return `${t('admin.pharmacy.searchFailed')} ${response.status}).`;
} }
function PharmacyManagement() { function PharmacyManagement() {
const { t } = useTranslation();
const REGION_PRESETS = getRegionPresets(t);
const [pharmacies, setPharmacies] = useState([]); const [pharmacies, setPharmacies] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -132,7 +137,7 @@ function PharmacyManagement() {
setPharmacies(data); setPharmacies(data);
} catch (error) { } catch (error) {
console.error('Error fetching pharmacies:', error); console.error('Error fetching pharmacies:', error);
alert('Error al cargar farmacias'); alert(t('admin.pharmacy.loadError'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -165,7 +170,7 @@ function PharmacyManagement() {
e?.preventDefault(); e?.preventDefault();
const q = cityQuery.trim(); const q = cityQuery.trim();
if (!q) { if (!q) {
setCityLookupMessage({ type: 'err', text: 'Introduce una ciudad o lugar.' }); setCityLookupMessage({ type: 'err', text: t('admin.pharmacy.enterCity') });
return; return;
} }
setCityLookupLoading(true); setCityLookupLoading(true);
@@ -175,7 +180,7 @@ function PharmacyManagement() {
credentials: 'include', credentials: 'include',
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(await geocodeErrorMessage(response)); throw new Error(await geocodeErrorMessage(response, t));
} }
const data = await response.json(); const data = await response.json();
setRegionLat(String(data.lat)); setRegionLat(String(data.lat));
@@ -253,7 +258,7 @@ function PharmacyManagement() {
const lon = parseFloat(regionLon); const lon = parseFloat(regionLon);
const radio = parseFloat(regionRadio); const radio = parseFloat(regionRadio);
if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(radio)) { if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(radio)) {
throw new Error('Establece latitud, longitud y radio (usa Buscar ciudad o un preset).'); throw new Error(t('admin.pharmacy.setCoordinates'));
} }
const response = await fetch('/api/admin/pharmacies/import-external', { const response = await fetch('/api/admin/pharmacies/import-external', {
method: 'POST', method: 'POST',
@@ -307,7 +312,7 @@ function PharmacyManagement() {
if (!response.ok) { if (!response.ok) {
const error = await response.json(); const error = await response.json();
throw new Error(error.error || 'Error al actualizar farmacia'); throw new Error(error.error || t('admin.pharmacy.updateError'));
} }
} else { } else {
const response = await fetch('/api/admin/pharmacies', { const response = await fetch('/api/admin/pharmacies', {
@@ -319,16 +324,16 @@ function PharmacyManagement() {
if (!response.ok) { if (!response.ok) {
const error = await response.json(); const error = await response.json();
throw new Error(error.error || 'Error al crear farmacia'); throw new Error(error.error || t('admin.pharmacy.createError'));
} }
} }
resetForm(); resetForm();
fetchPharmacies(); fetchPharmacies();
alert(editingPharmacy ? '¡Farmacia actualizada!' : '¡Farmacia añadida!'); alert(editingPharmacy ? t('admin.pharmacy.updated') : t('admin.pharmacy.created'));
} catch (error) { } catch (error) {
console.error('Error saving pharmacy:', error); console.error('Error saving pharmacy:', error);
alert(`Error al guardar farmacia: ${error.message}`); alert(`${t('admin.pharmacy.saveError')}: ${error.message}`);
} finally { } finally {
setSaving(false); setSaving(false);
} }
@@ -348,7 +353,7 @@ function PharmacyManagement() {
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
if (!confirm('¿Estás seguro de que quieres eliminar esta farmacia?')) return; if (!confirm(t('admin.pharmacy.deleteConfirm'))) return;
try { try {
const response = await fetch(`/api/admin/pharmacies/${id}`, { const response = await fetch(`/api/admin/pharmacies/${id}`, {
@@ -356,13 +361,13 @@ function PharmacyManagement() {
credentials: 'include', credentials: 'include',
}); });
if (!response.ok) throw new Error('Error al eliminar farmacia'); if (!response.ok) throw new Error(t('admin.pharmacy.deleteError'));
fetchPharmacies(); fetchPharmacies();
alert('¡Farmacia eliminada!'); alert(t('admin.pharmacy.deleted'));
} catch (error) { } catch (error) {
console.error('Error deleting pharmacy:', error); console.error('Error deleting pharmacy:', error);
alert('Error al eliminar farmacia'); alert(t('admin.pharmacy.deleteError'));
} }
}; };
@@ -391,7 +396,7 @@ function PharmacyManagement() {
return ( return (
<div className="admin-section"> <div className="admin-section">
<div className="section-header"> <div className="section-header">
<h2>Gestionar Farmacias</h2> <h2>{t('admin.pharmacy.title')}</h2>
<button <button
type="button" type="button"
className="btn-primary" className="btn-primary"
@@ -400,15 +405,15 @@ function PharmacyManagement() {
setShowForm(true); setShowForm(true);
}} }}
> >
+ Añadir Nueva Farmacia {t('admin.pharmacy.addNew')}
</button> </button>
</div> </div>
<div className="pharmacy-tools-card"> <div className="pharmacy-tools-card">
<h3>Ciudad, región e importación</h3> <h3>{t('admin.pharmacy.citySearch')}</h3>
<p className="pharmacy-tools-hint"> <p className="pharmacy-tools-hint">
<strong>Buscar ciudad</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones. <strong>{t('admin.pharmacy.searchCity')}</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones.
Elige una <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '} {t('admin.pharmacy.chooseOne')} <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '}
<strong>URL de datos abiertos</strong> carga JSON alojado por ti. Geocodificación usa{' '} <strong>URL de datos abiertos</strong> carga JSON alojado por ti. Geocodificación usa{' '}
<a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer"> <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">
OpenStreetMap OpenStreetMap
@@ -418,11 +423,11 @@ function PharmacyManagement() {
<form className="city-lookup-form" onSubmit={handleCityLookup}> <form className="city-lookup-form" onSubmit={handleCityLookup}>
<div className="form-group city-lookup-input-wrap"> <div className="form-group city-lookup-input-wrap">
<label htmlFor="city-finder">Buscar ciudad</label> <label htmlFor="city-finder">{t('admin.pharmacy.searchCity')}</label>
<input <input
id="city-finder" id="city-finder"
type="search" type="search"
placeholder="Ej: Rubí, Madrid, Valencia…" placeholder={t('admin.pharmacy.cityPlaceholder')}
value={cityQuery} value={cityQuery}
onChange={(e) => { onChange={(e) => {
setCityQuery(e.target.value); setCityQuery(e.target.value);
@@ -436,7 +441,7 @@ function PharmacyManagement() {
className="btn-secondary city-lookup-submit" className="btn-secondary city-lookup-submit"
disabled={cityLookupLoading} disabled={cityLookupLoading}
> >
{cityLookupLoading ? 'Buscando…' : 'Buscar ciudad'} {cityLookupLoading ? t('admin.pharmacy.searching') : t('admin.pharmacy.searchCity')}
</button> </button>
</form> </form>
{cityLookupMessage && ( {cityLookupMessage && (
@@ -449,7 +454,7 @@ function PharmacyManagement() {
)} )}
<div className="region-presets"> <div className="region-presets">
<label htmlFor="region-preset">Preset de área</label> <label htmlFor="region-preset">{t('admin.pharmacy.areaPreset')}</label>
<select <select
id="region-preset" id="region-preset"
value={regionPreset} value={regionPreset}
@@ -465,7 +470,7 @@ function PharmacyManagement() {
<div className="region-grid"> <div className="region-grid">
<div className="form-group"> <div className="form-group">
<label htmlFor="region-lat">Latitud</label> <label htmlFor="region-lat">{t('admin.pharmacy.latitude')}</label>
<input <input
id="region-lat" id="region-lat"
type="text" type="text"
@@ -476,7 +481,7 @@ function PharmacyManagement() {
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="region-lon">Longitud</label> <label htmlFor="region-lon">{t('admin.pharmacy.longitude')}</label>
<input <input
id="region-lon" id="region-lon"
type="text" type="text"
@@ -487,7 +492,7 @@ function PharmacyManagement() {
/> />
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="region-radio">Radio (m)</label> <label htmlFor="region-radio">{t('admin.pharmacy.radius')} (m)</label>
<input <input
id="region-radio" id="region-radio"
type="text" type="text"
@@ -501,7 +506,7 @@ function PharmacyManagement() {
<div className="import-mode-row"> <div className="import-mode-row">
<div className="form-group import-mode-select-wrap"> <div className="form-group import-mode-select-wrap">
<label htmlFor="import-mode">Fuente de datos</label> <label htmlFor="import-mode">{t('admin.pharmacy.dataSource')}</label>
<select <select
id="import-mode" id="import-mode"
value={importMode} value={importMode}
@@ -511,15 +516,15 @@ function PharmacyManagement() {
}} }}
> >
<option value="osm">OpenStreetMap (Overpass, gratuito)</option> <option value="osm">OpenStreetMap (Overpass, gratuito)</option>
<option value="webhook">n8n webhook (heredado)</option> <option value="webhook">{t('admin.pharmacy.webhookLegacy')}</option>
<option value="openData">URL de datos abiertos JSON</option> <option value="openData">{t('admin.pharmacy.openDataJson')}</option>
</select> </select>
</div> </div>
</div> </div>
{importMode === 'openData' && ( {importMode === 'openData' && (
<div className="form-group open-data-url-row"> <div className="form-group open-data-url-row">
<label htmlFor="open-data-url">URL JSON</label> <label htmlFor="open-data-url">{t('admin.pharmacy.jsonUrl')}</label>
<input <input
id="open-data-url" id="open-data-url"
type="url" type="url"
@@ -539,12 +544,12 @@ function PharmacyManagement() {
disabled={importing} disabled={importing}
> >
{importing {importing
? 'Importando…' ? t('admin.pharmacy.importing')
: importMode === 'webhook' : importMode === 'webhook'
? 'Importar desde webhook' ? t('admin.pharmacy.importWebhook')
: importMode === 'openData' : importMode === 'openData'
? 'Importar desde URL' ? t('admin.pharmacy.importUrl')
: `Importar desde ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`} : `${t('admin.pharmacy.importFrom')} ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
</button> </button>
<label className="filter-region-toggle"> <label className="filter-region-toggle">
<input <input
@@ -552,7 +557,7 @@ function PharmacyManagement() {
checked={filterByRegion} checked={filterByRegion}
onChange={(e) => setFilterByRegion(e.target.checked)} onChange={(e) => setFilterByRegion(e.target.checked)}
/> />
Mostrar solo farmacias dentro del radio {t('admin.pharmacy.showWithinRadio')}
</label> </label>
</div> </div>
@@ -568,10 +573,10 @@ function PharmacyManagement() {
{showForm && ( {showForm && (
<form className="admin-form" onSubmit={handleSubmit}> <form className="admin-form" onSubmit={handleSubmit}>
<h3>{editingPharmacy ? 'Editar Farmacia' : 'Añadir Nueva Farmacia'}</h3> <h3>{editingPharmacy ? t('admin.pharmacy.edit') : t('admin.pharmacy.add')}</h3>
<div className="form-group"> <div className="form-group">
<label>Nombre *</label> <label>{t('admin.pharmacy.name')}</label>
<input <input
type="text" type="text"
value={formData.name} value={formData.name}
@@ -581,7 +586,7 @@ function PharmacyManagement() {
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Dirección *</label> <label>{t('admin.pharmacy.address')}</label>
<input <input
type="text" type="text"
value={formData.address} value={formData.address}
@@ -591,7 +596,7 @@ function PharmacyManagement() {
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Teléfono</label> <label>{t('admin.pharmacy.phone')}</label>
<input <input
type="text" type="text"
value={formData.phone} value={formData.phone}
@@ -601,7 +606,7 @@ function PharmacyManagement() {
<div className="form-row"> <div className="form-row">
<div className="form-group"> <div className="form-group">
<label>Latitud</label> <label>{t('admin.pharmacy.latitude')}</label>
<input <input
type="number" type="number"
step="any" step="any"
@@ -611,7 +616,7 @@ function PharmacyManagement() {
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Longitud</label> <label>{t('admin.pharmacy.longitude')}</label>
<input <input
type="number" type="number"
step="any" step="any"
@@ -622,8 +627,8 @@ function PharmacyManagement() {
</div> </div>
<fieldset className="hours-editor"> <fieldset className="hours-editor">
<legend>Horario de apertura</legend> <legend>{t('admin.pharmacy.openingHours')}</legend>
<p className="hours-editor-hint">Marca un día como <em>Cerrado</em> si la farmacia no abre ese día.</p> <p className="hours-editor-hint">{t('admin.pharmacy.dayClosed')}</p>
{DAY_KEYS.map((day) => { {DAY_KEYS.map((day) => {
const d = hoursDraft[day]; const d = hoursDraft[day];
return ( return (
@@ -635,14 +640,14 @@ function PharmacyManagement() {
checked={d.closed} checked={d.closed}
onChange={(e) => updateDay(day, { closed: e.target.checked })} onChange={(e) => updateDay(day, { closed: e.target.checked })}
/> />
Cerrado {t('admin.pharmacy.closed')}
</label> </label>
<input <input
type="time" type="time"
value={d.open} value={d.open}
disabled={d.closed} disabled={d.closed}
onChange={(e) => updateDay(day, { open: e.target.value })} onChange={(e) => updateDay(day, { open: e.target.value })}
aria-label={`${DAY_LABEL[day]} abre a las`} aria-label={`${DAY_LABEL[day]} ${t('admin.pharmacy.opensAt')}`}
/> />
<span className="hours-sep">–</span> <span className="hours-sep">–</span>
<input <input
@@ -650,7 +655,7 @@ function PharmacyManagement() {
value={d.close} value={d.close}
disabled={d.closed} disabled={d.closed}
onChange={(e) => updateDay(day, { close: e.target.value })} onChange={(e) => updateDay(day, { close: e.target.value })}
aria-label={`${DAY_LABEL[day]} cierra a las`} aria-label={`${DAY_LABEL[day]} ${t('admin.pharmacy.closesAt')}`}
/> />
</div> </div>
); );
@@ -659,28 +664,28 @@ function PharmacyManagement() {
<div className="form-actions"> <div className="form-actions">
<button type="submit" className="btn-primary" disabled={saving}> <button type="submit" className="btn-primary" disabled={saving}>
{saving ? 'Guardando...' : editingPharmacy ? 'Actualizar' : 'Añadir'} Farmacia {saving ? t('admin.pharmacy.saving') : editingPharmacy ? `${t('admin.pharmacy.update')} Farmacia` : `${t('admin.pharmacy.create')} Farmacia`}
</button> </button>
<button type="button" className="btn-secondary" onClick={resetForm} disabled={saving}> <button type="button" className="btn-secondary" onClick={resetForm} disabled={saving}>
Cancelar {t('admin.pharmacy.cancel')}
</button> </button>
</div> </div>
</form> </form>
)} )}
{loading ? ( {loading ? (
<div className="loading">Cargando farmacias...</div> <div className="loading">{t('admin.pharmacy.loading')}</div>
) : ( ) : (
<div className="admin-list"> <div className="admin-list">
<p className="list-meta"> <p className="list-meta">
Mostrando {displayedPharmacies.length} de {pharmacies.length} farmacias {t('admin.pharmacy.showing')} {displayedPharmacies.length} {t('admin.pharmacy.of')} {pharmacies.length} farmacias
{filterByRegion && ' (dentro del radio)'} {filterByRegion && ` ${t('admin.pharmacy.withinRadio')}`}
</p> </p>
{displayedPharmacies.length === 0 ? ( {displayedPharmacies.length === 0 ? (
<p className="empty-state"> <p className="empty-state">
{pharmacies.length === 0 {pharmacies.length === 0
? 'Aún no hay farmacias. Importa desde webhook o añade una manualmente.' ? t('admin.pharmacy.empty')
: 'No hay farmacias en este radio con coordenadas. Amplía el radio, busca otra ciudad o desactiva el filtro de región.'} : t('admin.pharmacy.noResults')}
</p> </p>
) : ( ) : (
displayedPharmacies.map((pharmacy) => ( displayedPharmacies.map((pharmacy) => (
@@ -697,10 +702,10 @@ function PharmacyManagement() {
</div> </div>
<div className="item-actions"> <div className="item-actions">
<button type="button" className="btn-edit" onClick={() => handleEdit(pharmacy)}> <button type="button" className="btn-edit" onClick={() => handleEdit(pharmacy)}>
Editar {t('admin.pharmacy.editBtn')}
</button> </button>
<button type="button" className="btn-delete" onClick={() => handleDelete(pharmacy.id)}> <button type="button" className="btn-delete" onClick={() => handleDelete(pharmacy.id)}>
Eliminar {t('admin.pharmacy.deleteBtn')}
</button> </button>
</div> </div>
</div> </div>
apps/frontend/src/components/admin/PharmacyMedicineLink.jsx
+37 -35
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useMemo, useRef } from 'react'; import React, { useState, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from '../../i18n';
import './AdminComponents.css'; import './AdminComponents.css';
const MAX_PHARMACY_RESULTS = 25; const MAX_PHARMACY_RESULTS = 25;
@@ -8,6 +9,7 @@ function normalize(s) {
} }
function PharmacyMedicineLink() { function PharmacyMedicineLink() {
const { t } = useTranslation();
const [pharmacies, setPharmacies] = useState([]); const [pharmacies, setPharmacies] = useState([]);
const [medicineSearch, setMedicineSearch] = useState(''); const [medicineSearch, setMedicineSearch] = useState('');
const [medicineResults, setMedicineResults] = useState([]); const [medicineResults, setMedicineResults] = useState([]);
@@ -111,7 +113,7 @@ function PharmacyMedicineLink() {
e.preventDefault(); e.preventDefault();
if (!selectedMedicine) { if (!selectedMedicine) {
alert('Por favor, selecciona un medicamento primero'); alert(t('admin.linkMedicine.selectMedicineFirst'));
return; return;
} }
@@ -131,16 +133,16 @@ function PharmacyMedicineLink() {
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
if (!response.ok) throw new Error('Error al vincular medicamento a farmacia'); if (!response.ok) throw new Error(t('admin.linkMedicine.linkError'));
resetForm(); resetForm();
if (selectedPharmacy) { if (selectedPharmacy) {
fetchPharmacyMedicines(selectedPharmacy.id); fetchPharmacyMedicines(selectedPharmacy.id);
} }
alert('¡Medicamento vinculado a la farmacia correctamente!'); alert(t('admin.linkMedicine.linkSuccess'));
} catch (error) { } catch (error) {
console.error('Error linking medicine:', error); console.error('Error linking medicine:', error);
alert('Error al vincular medicamento a farmacia'); alert(t('admin.linkMedicine.linkError'));
} }
}; };
@@ -153,18 +155,18 @@ function PharmacyMedicineLink() {
body: JSON.stringify({ price, stock }) body: JSON.stringify({ price, stock })
}); });
if (!response.ok) throw new Error('Error al actualizar'); if (!response.ok) throw new Error(t('admin.linkMedicine.updateError'));
fetchPharmacyMedicines(selectedPharmacy.id); fetchPharmacyMedicines(selectedPharmacy.id);
alert('¡Actualizado correctamente!'); alert(t('admin.linkMedicine.updateSuccess'));
} catch (error) { } catch (error) {
console.error('Error updating:', error); console.error('Error updating:', error);
alert('Error al actualizar'); alert(t('admin.linkMedicine.updateError'));
} }
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
if (!confirm('¿Eliminar este medicamento de la farmacia?')) return; if (!confirm(t('admin.linkMedicine.deleteConfirm'))) return;
try { try {
const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, { const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, {
@@ -172,13 +174,13 @@ function PharmacyMedicineLink() {
credentials: 'include' credentials: 'include'
}); });
if (!response.ok) throw new Error('Error al eliminar'); if (!response.ok) throw new Error(t('admin.linkMedicine.deleteError'));
fetchPharmacyMedicines(selectedPharmacy.id); fetchPharmacyMedicines(selectedPharmacy.id);
alert('¡Medicamento eliminado de la farmacia!'); alert(t('admin.linkMedicine.deleteSuccess'));
} catch (error) { } catch (error) {
console.error('Error deleting:', error); console.error('Error deleting:', error);
alert('Error al eliminar medicamento'); alert(t('admin.linkMedicine.deleteError'));
} }
}; };
@@ -216,11 +218,11 @@ function PharmacyMedicineLink() {
return ( return (
<div className="admin-section"> <div className="admin-section">
<h2>Vincular Medicamento a Farmacia</h2> <h2>{t('admin.linkMedicine.title')}</h2>
<form className="admin-form" onSubmit={handleSubmit}> <form className="admin-form" onSubmit={handleSubmit}>
<div className="form-group"> <div className="form-group">
<label>Farmacia *</label> <label>{t('admin.linkMedicine.pharmacy')}</label>
<input <input
ref={pharmacyInputRef} ref={pharmacyInputRef}
type="text" type="text"
@@ -235,7 +237,7 @@ function PharmacyMedicineLink() {
}} }}
onFocus={() => setPharmacyDropdownOpen(true)} onFocus={() => setPharmacyDropdownOpen(true)}
onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)} onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'} placeholder={pharmacies.length ? `${t('admin.linkMedicine.searchPharmacy')} ${pharmacies.length} ${t('admin.linkMedicine.pharmacies')}` : t('admin.linkMedicine.loadingPharmacies')}
autoComplete="off" autoComplete="off"
required={!selectedPharmacy} required={!selectedPharmacy}
/> />
@@ -243,7 +245,7 @@ function PharmacyMedicineLink() {
<div className="medicine-search-results"> <div className="medicine-search-results">
{filteredPharmacies.length === 0 ? ( {filteredPharmacies.length === 0 ? (
<div className="search-result-item search-result-item--empty"> <div className="search-result-item search-result-item--empty">
<span>No hay farmacias que coincidan con "{pharmacyQuery}"</span> <span>{t('admin.linkMedicine.noPharmacies')} "{pharmacyQuery}"</span>
</div> </div>
) : ( ) : (
filteredPharmacies.map((pharmacy) => ( filteredPharmacies.map((pharmacy) => (
@@ -264,14 +266,14 @@ function PharmacyMedicineLink() {
<p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p> <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
<p className="medicine-details">{selectedPharmacy.address}</p> <p className="medicine-details">{selectedPharmacy.address}</p>
<button type="button" className="btn-small" onClick={clearPharmacy}> <button type="button" className="btn-small" onClick={clearPharmacy}>
Cambiar farmacia {t('admin.linkMedicine.changePharmacy')}
</button> </button>
</div> </div>
)} )}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Buscar Medicamento (API CIMA) *</label> <label>{t('admin.linkMedicine.medicine')}</label>
<input <input
type="text" type="text"
value={medicineSearch} value={medicineSearch}
@@ -279,10 +281,10 @@ function PharmacyMedicineLink() {
setMedicineSearch(e.target.value); setMedicineSearch(e.target.value);
setSelectedMedicine(null); setSelectedMedicine(null);
}} }}
placeholder="Escribe para buscar medicamentos en CIMA..." placeholder={t('admin.linkMedicine.searchMedicine')}
required required
/> />
{searching && <p className="loading-text">Buscando...</p>} {searching && <p className="loading-text">{t('admin.linkMedicine.searching')}</p>}
{medicineResults.length > 0 && !selectedMedicine && ( {medicineResults.length > 0 && !selectedMedicine && (
<div className="medicine-search-results"> <div className="medicine-search-results">
@@ -304,9 +306,9 @@ function PharmacyMedicineLink() {
<div className="selected-medicine-info"> <div className="selected-medicine-info">
<p>✅ Selected: <strong>{selectedMedicine.name}</strong></p> <p>✅ Selected: <strong>{selectedMedicine.name}</strong></p>
<p className="medicine-details"> <p className="medicine-details">
{selectedMedicine.active_ingredient && `Principio activo: ${selectedMedicine.active_ingredient} • `} {selectedMedicine.active_ingredient && `${t('admin.linkMedicine.activeIngredient')} ${selectedMedicine.active_ingredient} • `}
{selectedMedicine.dosage && `Dosis: ${selectedMedicine.dosage} • `} {selectedMedicine.dosage && `${t('admin.linkMedicine.dosage')} ${selectedMedicine.dosage} • `}
Nº Registro: {selectedMedicine.nregistro} {t('admin.linkMedicine.registrationNumber')} {selectedMedicine.nregistro}
</p> </p>
<button <button
type="button" type="button"
@@ -316,7 +318,7 @@ function PharmacyMedicineLink() {
setMedicineSearch(''); setMedicineSearch('');
}} }}
> >
Cambiar medicamento {t('admin.linkMedicine.changeMedicine')}
</button> </button>
</div> </div>
)} )}
@@ -324,7 +326,7 @@ function PharmacyMedicineLink() {
<div className="form-row"> <div className="form-row">
<div className="form-group"> <div className="form-group">
<label>Precio (€)</label> <label>{t('admin.linkMedicine.price')}</label>
<input <input
type="number" type="number"
step="0.01" step="0.01"
@@ -335,7 +337,7 @@ function PharmacyMedicineLink() {
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Stock</label> <label>{t('admin.linkMedicine.stock')}</label>
<input <input
type="number" type="number"
value={formData.stock} value={formData.stock}
@@ -347,21 +349,21 @@ function PharmacyMedicineLink() {
<div className="form-actions"> <div className="form-actions">
<button type="submit" className="btn-primary"> <button type="submit" className="btn-primary">
Vincular Medicamento {t('admin.linkMedicine.linkBtn')}
</button> </button>
<button type="button" className="btn-secondary" onClick={resetForm}> <button type="button" className="btn-secondary" onClick={resetForm}>
Reiniciar {t('admin.linkMedicine.reset')}
</button> </button>
</div> </div>
</form> </form>
{selectedPharmacy && ( {selectedPharmacy && (
<div className="pharmacy-medicines-section"> <div className="pharmacy-medicines-section">
<h3>Medicamentos en {selectedPharmacy.name}</h3> <h3>{t('admin.linkMedicine.medicationsIn')} {selectedPharmacy.name}</h3>
{loading ? ( {loading ? (
<div className="loading">Cargando...</div> <div className="loading">{t('admin.linkMedicine.loading')}</div>
) : pharmacyMedicines.length === 0 ? ( ) : pharmacyMedicines.length === 0 ? (
<p className="empty-state">Aún no hay medicamentos vinculados a esta farmacia.</p> <p className="empty-state">{t('admin.linkMedicine.empty')}</p>
) : ( ) : (
<div className="admin-list"> <div className="admin-list">
{pharmacyMedicines.map((pm) => ( {pharmacyMedicines.map((pm) => (
@@ -369,7 +371,7 @@ function PharmacyMedicineLink() {
<div className="item-content"> <div className="item-content">
<h4>{pm.medicine_name}</h4> <h4>{pm.medicine_name}</h4>
<p> <p>
<strong>Precio:</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : 'No definido'} • <strong>{t('admin.linkMedicine.priceLabel')}</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : t('admin.linkMedicine.undefined')} •
<strong> Stock:</strong> {pm.stock || 0} <strong> Stock:</strong> {pm.stock || 0}
</p> </p>
</div> </div>
@@ -377,17 +379,17 @@ function PharmacyMedicineLink() {
<button <button
className="btn-edit" className="btn-edit"
onClick={() => { onClick={() => {
const newPrice = prompt('Introduce nuevo precio:', pm.price || ''); const newPrice = prompt(t('admin.linkMedicine.newPrice'), pm.price || '');
const newStock = prompt('Introduce nuevo stock:', pm.stock || '0'); const newStock = prompt(t('admin.linkMedicine.newStock'), pm.stock || '0');
if (newPrice !== null && newStock !== null) { if (newPrice !== null && newStock !== null) {
handleUpdate(pm.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0); handleUpdate(pm.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
} }
}} }}
> >
Actualizar {t('admin.linkMedicine.update')}
</button> </button>
<button className="btn-delete" onClick={() => handleDelete(pm.id)}> <button className="btn-delete" onClick={() => handleDelete(pm.id)}>
Eliminar {t('admin.linkMedicine.delete')}
</button> </button>
</div> </div>
</div> </div>
apps/frontend/src/components/admin/PharmacyProductLink.jsx
+37 -35
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useMemo, useRef } from 'react'; import React, { useState, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from '../../i18n';
import './AdminComponents.css'; import './AdminComponents.css';
const MAX_PHARMACY_RESULTS = 25; const MAX_PHARMACY_RESULTS = 25;
@@ -8,6 +9,7 @@ function normalize(s) {
} }
function PharmacyProductLink() { function PharmacyProductLink() {
const { t } = useTranslation();
const [pharmacies, setPharmacies] = useState([]); const [pharmacies, setPharmacies] = useState([]);
const [productSearch, setProductSearch] = useState(''); const [productSearch, setProductSearch] = useState('');
const [productResults, setProductResults] = useState([]); const [productResults, setProductResults] = useState([]);
@@ -130,7 +132,7 @@ function PharmacyProductLink() {
e.preventDefault(); e.preventDefault();
if (!selectedProduct) { if (!selectedProduct) {
alert('Por favor, selecciona un producto primero'); alert(t('admin.linkProduct.selectProductFirst'));
return; return;
} }
@@ -156,16 +158,16 @@ function PharmacyProductLink() {
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
if (!response.ok) throw new Error('Error al vincular producto a farmacia'); if (!response.ok) throw new Error(t('admin.linkProduct.linkError'));
resetForm(); resetForm();
if (selectedPharmacy) { if (selectedPharmacy) {
fetchPharmacyProducts(selectedPharmacy.id); fetchPharmacyProducts(selectedPharmacy.id);
} }
alert('¡Producto vinculado a la farmacia correctamente!'); alert(t('admin.linkProduct.linkSuccess'));
} catch (error) { } catch (error) {
console.error('Error linking product:', error); console.error('Error linking product:', error);
alert('Error al vincular producto a farmacia'); alert(t('admin.linkProduct.linkError'));
} }
}; };
@@ -178,18 +180,18 @@ function PharmacyProductLink() {
body: JSON.stringify({ price, stock }) body: JSON.stringify({ price, stock })
}); });
if (!response.ok) throw new Error('Error al actualizar'); if (!response.ok) throw new Error(t('admin.linkProduct.updateError'));
fetchPharmacyProducts(selectedPharmacy.id); fetchPharmacyProducts(selectedPharmacy.id);
alert('¡Actualizado correctamente!'); alert(t('admin.linkProduct.updateSuccess'));
} catch (error) { } catch (error) {
console.error('Error updating:', error); console.error('Error updating:', error);
alert('Error al actualizar'); alert(t('admin.linkProduct.updateError'));
} }
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
if (!confirm('¿Eliminar este producto de la farmacia?')) return; if (!confirm(t('admin.linkProduct.deleteConfirm'))) return;
try { try {
const response = await fetch(`/api/admin/pharmacy-products/${id}`, { const response = await fetch(`/api/admin/pharmacy-products/${id}`, {
@@ -197,13 +199,13 @@ function PharmacyProductLink() {
credentials: 'include' credentials: 'include'
}); });
if (!response.ok) throw new Error('Error al eliminar'); if (!response.ok) throw new Error(t('admin.linkProduct.deleteError'));
fetchPharmacyProducts(selectedPharmacy.id); fetchPharmacyProducts(selectedPharmacy.id);
alert('¡Producto eliminado de la farmacia!'); alert(t('admin.linkProduct.deleteSuccess'));
} catch (error) { } catch (error) {
console.error('Error deleting:', error); console.error('Error deleting:', error);
alert('Error al eliminar producto'); alert(t('admin.linkProduct.deleteError'));
} }
}; };
@@ -266,11 +268,11 @@ function PharmacyProductLink() {
return ( return (
<div className="admin-section"> <div className="admin-section">
<h2>Vincular Producto a Farmacia</h2> <h2>{t('admin.linkProduct.title')}</h2>
<form className="admin-form" onSubmit={handleSubmit}> <form className="admin-form" onSubmit={handleSubmit}>
<div className="form-group"> <div className="form-group">
<label>Farmacia *</label> <label>{t('admin.linkProduct.pharmacy')}</label>
<input <input
ref={pharmacyInputRef} ref={pharmacyInputRef}
type="text" type="text"
@@ -285,7 +287,7 @@ function PharmacyProductLink() {
}} }}
onFocus={() => setPharmacyDropdownOpen(true)} onFocus={() => setPharmacyDropdownOpen(true)}
onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)} onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'} placeholder={pharmacies.length ? `${t('admin.linkProduct.searchPharmacy')} ${pharmacies.length} ${t('admin.linkProduct.pharmacies')}` : t('admin.linkProduct.loadingPharmacies')}
autoComplete="off" autoComplete="off"
required={!selectedPharmacy} required={!selectedPharmacy}
/> />
@@ -293,7 +295,7 @@ function PharmacyProductLink() {
<div className="medicine-search-results"> <div className="medicine-search-results">
{filteredPharmacies.length === 0 ? ( {filteredPharmacies.length === 0 ? (
<div className="search-result-item search-result-item--empty"> <div className="search-result-item search-result-item--empty">
<span>No hay farmacias que coincidan con "{pharmacyQuery}"</span> <span>{t('admin.linkProduct.noPharmacies')} "{pharmacyQuery}"</span>
</div> </div>
) : ( ) : (
filteredPharmacies.map((pharmacy) => ( filteredPharmacies.map((pharmacy) => (
@@ -314,14 +316,14 @@ function PharmacyProductLink() {
<p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p> <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
<p className="medicine-details">{selectedPharmacy.address}</p> <p className="medicine-details">{selectedPharmacy.address}</p>
<button type="button" className="btn-small" onClick={clearPharmacy}> <button type="button" className="btn-small" onClick={clearPharmacy}>
Cambiar farmacia {t('admin.linkProduct.changePharmacy')}
</button> </button>
</div> </div>
)} )}
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Buscar Producto (CIMA / Parafarmacia) *</label> <label>{t('admin.linkProduct.product')}</label>
<input <input
type="text" type="text"
value={productSearch} value={productSearch}
@@ -329,10 +331,10 @@ function PharmacyProductLink() {
setProductSearch(e.target.value); setProductSearch(e.target.value);
setSelectedProduct(null); setSelectedProduct(null);
}} }}
placeholder="Escribe para buscar medicamentos o productos de parafarmacia..." placeholder={t('admin.linkProduct.searchProduct')}
required required
/> />
{searching && <p className="loading-text">Buscando...</p>} {searching && <p className="loading-text">{t('admin.linkProduct.searching')}</p>}
{productResults.length > 0 && !selectedProduct && ( {productResults.length > 0 && !selectedProduct && (
<div className="medicine-search-results"> <div className="medicine-search-results">
@@ -356,9 +358,9 @@ function PharmacyProductLink() {
<div className="selected-medicine-info"> <div className="selected-medicine-info">
<p>✅ Selected: <strong>{selectedProduct.product_name || selectedProduct.name}</strong></p> <p>✅ Selected: <strong>{selectedProduct.product_name || selectedProduct.name}</strong></p>
<p className="medicine-details"> <p className="medicine-details">
{selectedProduct.brand && `Marca: ${selectedProduct.brand} • `} {selectedProduct.brand && `${t('admin.linkProduct.brand')} ${selectedProduct.brand} • `}
{selectedProduct.brands && `Marca: ${selectedProduct.brands} • `} {selectedProduct.brands && `${t('admin.linkProduct.brand')} ${selectedProduct.brands} • `}
{selectedProduct.price != null && `Precio: ${selectedProduct.price}€ • `} {selectedProduct.price != null && `${t('admin.linkProduct.price')} ${selectedProduct.price}€ • `}
{getSourceBadge(selectedProduct.source || 'parapharmacy')} {getSourceBadge(selectedProduct.source || 'parapharmacy')}
{' '} {' '}
{selectedProduct._id || selectedProduct.id || selectedProduct.nregistro} {selectedProduct._id || selectedProduct.id || selectedProduct.nregistro}
@@ -371,7 +373,7 @@ function PharmacyProductLink() {
setProductSearch(''); setProductSearch('');
}} }}
> >
Cambiar producto {t('admin.linkProduct.changeProduct')}
</button> </button>
</div> </div>
)} )}
@@ -379,7 +381,7 @@ function PharmacyProductLink() {
<div className="form-row"> <div className="form-row">
<div className="form-group"> <div className="form-group">
<label>Precio (€)</label> <label>{t('admin.linkProduct.priceInput')}</label>
<input <input
type="number" type="number"
step="0.01" step="0.01"
@@ -390,7 +392,7 @@ function PharmacyProductLink() {
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Stock</label> <label>{t('admin.linkProduct.stock')}</label>
<input <input
type="number" type="number"
value={formData.stock} value={formData.stock}
@@ -402,21 +404,21 @@ function PharmacyProductLink() {
<div className="form-actions"> <div className="form-actions">
<button type="submit" className="btn-primary"> <button type="submit" className="btn-primary">
Vincular Producto {t('admin.linkProduct.linkBtn')}
</button> </button>
<button type="button" className="btn-secondary" onClick={resetForm}> <button type="button" className="btn-secondary" onClick={resetForm}>
Reiniciar {t('admin.linkProduct.reset')}
</button> </button>
</div> </div>
</form> </form>
{selectedPharmacy && ( {selectedPharmacy && (
<div className="pharmacy-medicines-section"> <div className="pharmacy-medicines-section">
<h3>Productos en {selectedPharmacy.name}</h3> <h3>{t('admin.linkProduct.productsIn')} {selectedPharmacy.name}</h3>
{loading ? ( {loading ? (
<div className="loading">Cargando...</div> <div className="loading">{t('admin.linkProduct.loading')}</div>
) : pharmacyProducts.length === 0 ? ( ) : pharmacyProducts.length === 0 ? (
<p className="empty-state">Aún no hay productos vinculados a esta farmacia.</p> <p className="empty-state">{t('admin.linkProduct.empty')}</p>
) : ( ) : (
<div className="admin-list"> <div className="admin-list">
{pharmacyProducts.map((pp) => ( {pharmacyProducts.map((pp) => (
@@ -427,7 +429,7 @@ function PharmacyProductLink() {
{getSourceBadge(pp.product_source)} {getSourceBadge(pp.product_source)}
</h4> </h4>
<p> <p>
<strong>Precio:</strong> {pp.price ? `€${parseFloat(pp.price).toFixed(2)}` : 'No definido'} • <strong>{t('admin.linkProduct.priceLabel')}</strong> {pp.price ? `€${parseFloat(pp.price).toFixed(2)}` : t('admin.linkProduct.undefined')} •
<strong> Stock:</strong> {pp.stock || 0} <strong> Stock:</strong> {pp.stock || 0}
</p> </p>
</div> </div>
@@ -435,17 +437,17 @@ function PharmacyProductLink() {
<button <button
className="btn-edit" className="btn-edit"
onClick={() => { onClick={() => {
const newPrice = prompt('Introduce nuevo precio:', pp.price || ''); const newPrice = prompt(t('admin.linkProduct.newPrice'), pp.price || '');
const newStock = prompt('Introduce nuevo stock:', pp.stock || '0'); const newStock = prompt(t('admin.linkProduct.newStock'), pp.stock || '0');
if (newPrice !== null && newStock !== null) { if (newPrice !== null && newStock !== null) {
handleUpdate(pp.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0); handleUpdate(pp.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
} }
}} }}
> >
Actualizar {t('admin.linkProduct.update')}
</button> </button>
<button className="btn-delete" onClick={() => handleDelete(pp.id)}> <button className="btn-delete" onClick={() => handleDelete(pp.id)}>
Eliminar {t('admin.linkProduct.delete')}
</button> </button>
</div> </div>
</div> </div>
apps/frontend/src/i18n/LanguageContext.jsx
+40
View File
@@ -0,0 +1,40 @@
import React, { createContext, useState, useCallback, useMemo } from 'react';
import es from './locales/es';
import ca from './locales/ca';
const locales = { es, ca };
function getInitialLang() {
try {
const saved = localStorage.getItem('ff-lang');
if (saved === 'ca' || saved === 'es') return saved;
} catch {}
const browserLang = navigator.language || navigator.userLanguage || '';
return browserLang.startsWith('ca') ? 'ca' : 'es';
}
export const LanguageContext = createContext(null);
export function LanguageProvider({ children }) {
const [lang, setLangState] = useState(getInitialLang);
const setLang = useCallback((newLang) => {
if (newLang !== 'ca' && newLang !== 'es') return;
setLangState(newLang);
try {
localStorage.setItem('ff-lang', newLang);
} catch {}
}, []);
const t = useCallback((key) => {
return locales[lang]?.[key] || locales.es[key] || key;
}, [lang]);
const value = useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);
return (
<LanguageContext.Provider value={value}>
{children}
</LanguageContext.Provider>
);
}
apps/frontend/src/i18n/index.js
+2
View File
@@ -0,0 +1,2 @@
export { LanguageProvider } from './LanguageContext';
export { useTranslation } from './useTranslation';
apps/frontend/src/i18n/locales/ca.js
+414
View File
@@ -0,0 +1,414 @@
const ca = {
// BottomNav
'nav.home': 'Inici',
'nav.search': 'Cercar',
'nav.scan': 'Escanejar',
'nav.alerts': 'Alertes',
'nav.profile': 'Usuari',
// HomeView
'home.description': 'Trobeu els vostres medicaments a farmàcies properes',
'home.searchMedicine': 'Cercar Medicament',
'home.scanTSI': 'Escanejar TSI',
// SearchBar
'search.placeholder': 'Escriviu el nom del medicament',
'search.clear': 'Netejar cerca',
// SearchView
'search.suggestions': 'Suggeriments',
'search.recentResults': 'Resultats Recents',
'search.findNearby': 'Cerca a prop teu',
'search.resultsFound': 'resultats trobats',
'search.parapharmacy': 'Parafarmàcia',
'search.activeIngredient': 'Principi Actiu',
'search.dosage': 'Dosificació',
'search.form': 'Forma',
'search.backToSearch': '← Tornar a la cerca',
'search.sortByDistance': '📍 Ordenar per distància',
'search.sortBySavedLocation': '📍 Ordenar per ubicació desada',
'search.sortedByDistance': '📍 Ordenat per distància · Restablir',
'search.locating': '📍 Localitzant…',
'search.usingSavedAddress': 'Usant la vostra adreça desada',
'search.usingRecentLocation': 'Usant ubicació recent',
'search.retry': 'Tornar a provar',
'search.locationDenied': 'Permís d\'ubicació denegat. Permeteu l\'accés a la ubicació al vostre navegador.',
'search.locationUnavailable': 'Ubicació no disponible. Verifiqueu que el GPS estigui activat.',
'search.locationTimeout': 'L\'ubicació ha trigat massa. Torneu-ho a provar o verifiqueu la vostra connexió.',
'search.locationError': 'No s\'ha pogut obtenir la vostra ubicació',
'search.searching': 'Cercant...',
// MedicineResults
'medicine.noResults': 'No s\'han trobat medicaments per a',
'medicine.principioActivo': 'Principi Actiu:',
'medicine.dosis': 'Dosificació:',
'medicine.forma': 'Forma:',
'medicine.viewPharmacies': 'Veure farmàcies →',
'medicine.loginForNotifications': 'Inicieu sessió per activar notificacions',
'medicine.disableNotifications': 'Desactivar notificacions per a aquest medicament',
'medicine.enableNotifications': 'Notificar-me quan estigui disponible',
'medicine.notificationsActivated': 'Notificacions activades — clic per desactivar',
'medicine.notifyWhenAvailable': 'Notificar-me quan aquest medicament estigui a una farmàcia',
'medicine.subscriptionError': 'No s\'ha pogut actualitzar la subscripció',
// PharmacyList
'pharmacy.loading': 'Carregant farmàcies...',
'pharmacy.notFound': 'No s\'han trobat farmàcies amb aquest medicament',
'pharmacy.availableAt': 'Disponible a',
'pharmacy.pharmacy': 'farmàcia',
'pharmacy.pharmacies': 'farmàcies',
'pharmacy.howToGet': 'Com arribar',
'pharmacy.inStock': '✓ En Estoc',
'pharmacy.lowStock': '⚠ Estoc Baix',
'pharmacy.outOfStock': '✗ Sense Estoc',
'pharmacy.loginForNotifications': 'Inicieu sessió per activar notificacions',
'pharmacy.disableNotificationsPharmacy': 'Desactivar notificacions per a aquesta farmàcia',
'pharmacy.notifyWhenArrives': 'Notificar-me quan arribi a aquesta farmàcia',
'pharmacy.notificationsActivatedPharmacy': 'Notificacions activades per a aquesta farmàcia — clic per desactivar',
'pharmacy.notificationsRequired': 'Les notificacions requereixen iOS 16.4+ i aquest lloc instal·lat com a app (Compartir → Afegir a Pantalla d\'Inici).',
// ProductResults
'product.sinReceta': 'Sense Recepta',
'product.parapharmacy': 'Parafarmàcia',
'product.dermocosmetica': 'Dermocosmètica',
'product.formulasLacteas': 'Fórmules Làctees',
'product.vitamins': 'Vitamines',
'product.analgesics': 'Analgèsics',
'product.noResults': 'No s\'han trobat productes',
'product.brand': 'Marca:',
'product.price': 'Preu:',
'product.activeIngredient': 'Principi Actiu:',
'product.dosage': 'Dosificació:',
'product.viewDetails': 'Veure detalls →',
// LoginModal
'login.login': 'Iniciar sessió',
'login.register': 'Crear compte',
'login.welcomeBack': 'Benvingut de nou',
'login.createAccount': 'Crea el teu compte',
'login.registerDescription': 'Desa la teva adreça i rep notificacions quan arribin medicaments.',
'login.loginDescription': 'Inicia sessió per gestionar el teu perfil i notificacions.',
'login.username': 'Usuari',
'login.usernameHint': '3–32 caràcters: lletres, dígits o guió baix.',
'login.password': 'Contrasenya',
'login.passwordHint': 'Almenys 8 caràcters.',
'login.cancel': 'Cancel·lar',
'login.creating': 'Creant…',
'login.loggingIn': 'Iniciant sessió…',
'login.createAccountBtn': 'Crear compte',
'login.loginBtn': 'Iniciar sessió',
'login.passwordError': 'La contrasenya ha de tenir almenys 8 caràcters',
'login.registerError': 'No s\'ha pogut crear el compte',
'login.loginError': 'Error d\'inici de sessió',
'login.networkError': 'Error de xarxa — torneu-ho a provar',
// AlertsView
'alerts.title': 'Les Meves Alertes',
'alerts.subtitle': 'Mantingueu-vos al dia amb els vostres medicaments.',
'alerts.loading': 'Carregant alertes...',
'alerts.loginRequired': 'Si us plau, inicieu sessió per veure les vostres alertes.',
'alerts.loadError': 'No s\'han pogut carregar les alertes.',
'alerts.availability': 'Disponibilitat',
'alerts.noSubscriptions': 'No teniu subscripcions de disponibilitat.',
'alerts.notifyWhenAvailable': 'Notificar-me quan estigui disponible',
'alerts.deleteError': 'No s\'ha pogut eliminar l\'alerta de disponibilitat.',
'alerts.pharmacy': 'Farmàcia',
// ScannerView
'scanner.title': 'Escanejar TSI',
'scanner.description': 'Escanegeu el codi de barres de la vostra targeta sanitària per veure les vostres receptes actives',
'scanner.openCamera': 'Obrir càmera',
'scanner.orUploadPhoto': 'O pugeu una foto de la vostra TSI',
'scanner.takePhoto': 'Fer foto',
'scanner.uploadFromGallery': 'Pujar de galeria',
'scanner.scanImage': 'Escanejar imatge',
'scanner.discard': 'Descartar',
'scanner.enterCIP': 'O introduïu el codi CIP manualment',
'scanner.cipPlaceholder': 'Codi CIP de 16 dígits',
'scanner.search': 'Cercar',
'scanner.scanning': 'Apunteu al codi de barres',
'scanner.openingCamera': 'Obrint càmera…',
'scanner.processingImage': 'Processant imatge…',
'scanner.tsiScanned': 'TSI Escanejada',
'scanner.activePrescriptions': 'Receptes Actives',
'scanner.tapToFind': 'Toqueu un medicament per veure disponibilitat a farmàcies properes.',
'scanner.loadingPrescriptions': 'Carregant receptes…',
'scanner.noPrescriptions': 'No s\'han trobat receptes actives per a aquesta targeta.',
'scanner.scanAnother': 'Escanejar una altra targeta',
'scanner.tryAgain': 'Tornar a provar',
'scanner.scannerUnavailable': 'L\'escàner no està disponible en aquest dispositiu.',
'scanner.cameraPermissionDenied': 'Permís de càmera denegat. Activeu-lo a la configuració o introduïu el codi CIP manualment.',
'scanner.invalidBarcode': 'Codi de barres invàlid. Torneu-ho a provar o introduïu el CIP manualment.',
'scanner.cameraNotAvailable': 'Càmera no disponible en aquest navegador.',
'scanner.invalidCIP': 'Format CIP invàlid. Ha de tenir 16 caràcters alfanumèrics.',
'scanner.enterCIPError': 'Introduïu un codi CIP.',
'scanner.cameraPermissionWeb': 'Permís de càmera denegat. Permeteu l\'accés i torneu-ho a provar.',
'scanner.noCamera': 'No s\'ha detectat cap càmera. Introduïu el codi CIP manualment.',
'scanner.imageReadError': 'No s\'ha pogut llegir la imatge. Proveu amb una altra foto.',
'scanner.invalidCIPDetected': 'CIP detectat no té format vàlid. Introduïu el codi manualment.',
'scanner.scanError': 'Error en escanejar:',
'scanner.unknownError': 'Error desconegut',
'scanner.cameraError': 'Error de càmera:',
'scanner.imageProcessError': 'Error en processar la imatge:',
// ProfileView
'profile.name': 'Nom',
'profile.lastName': 'Cognoms',
'profile.config': 'Configuració',
'profile.myAddresses': 'Les Meves Adreces',
'profile.theme': 'Tema',
'profile.themeAuto': 'Automàtic',
'profile.themeLight': 'Clar',
'profile.themeDark': 'Fosc',
'profile.admin': 'Panell d\'Administració',
'profile.logout': 'Tancar Sessió',
'profile.uploadingPhoto': 'Pujant foto...',
'profile.recentSearches': 'Les vostres cerques recents:',
'profile.delete': 'Eliminar',
'profile.changeAvatar': 'Canviar Avatar',
'profile.presetAvatar': 'Predissenyat',
'profile.colors': 'Colors',
'profile.upload': 'Pujar',
'profile.chooseFromGallery': 'Trieu de galeria',
'profile.selectExistingImage': 'Seleccioneu una imatge existent',
'profile.imageTooBig': 'La imatge no pot superar els 5 MB',
'profile.imageSaveError': 'Error en desar la imatge. Proveu amb una altra foto.',
'profile.imageConnectionError': 'Error de connexió en desar la imatge.',
'profile.imageProcessError': 'Error en processar la imatge.',
'profile.configTitle': 'Configuració',
'profile.firstName': 'Nom',
'profile.firstNamePlaceholder': 'El vostre nom',
'profile.lastNamePlaceholder': 'Els vostres cognoms',
'profile.email': 'Correu electrònic',
'profile.emailPlaceholder': 'el_vostre@email.com',
'profile.city': 'Ciutat',
'profile.cityPlaceholder': 'La vostra ciutat',
'profile.address': 'Adreça',
'profile.addressPlaceholder': 'Carrer Major 1, Barcelona',
'profile.cancel': 'Cancel·lar',
'profile.saving': 'Desant...',
'profile.save': 'Desar',
'profile.profileSaved': 'Perfil desat.',
'profile.saveError': 'Error en desar',
'profile.addressesTitle': 'Les Meves Adreces',
'profile.addressLabel': 'Adreça',
'profile.addressOptional': 'Etiqueta (opcional)',
'profile.addressLabelPlaceholder': 'Ex: Casa, Treball, Segona residència',
'profile.defaultAddress': 'Adreça predeterminada',
'profile.add': 'Afegir',
'profile.update': 'Actualitzar',
'profile.loadingAddresses': 'Carregant adreces...',
'profile.mainAddress': 'Adreça principal',
'profile.default': 'Predeterminada',
'profile.setDefault': 'Establir com a predeterminada',
'profile.addMore': 'Afegir més',
'profile.addressRequired': 'L\'adreça és obligatòria',
'profile.addressSaveError': 'Error en desar l\'adreça',
'profile.themeTitle': 'Tema de visualització',
'profile.themeDescription': 'Trieu com es veu l\'aplicació. En mode automàtic, s\'adapta al tema del vostre dispositiu.',
'profile.themeAutoDesc': 'Seguir sistema',
'profile.themeLightDesc': 'Sempre clar',
'profile.themeDarkDesc': 'Sempre fosc',
'profile.language': 'Idioma',
'profile.languageTitle': 'Idioma de l\'aplicació',
'profile.languageCatalan': 'Català',
'profile.languageSpanish': 'Castellà',
// SavedNotifications
'savedNotifications.title': '🔔 Notificacions Desades',
'savedNotifications.close': 'Tancar',
'savedNotifications.loading': 'Carregant…',
'savedNotifications.empty': 'Encara no hi ha notificacions desades. Toqueu la campana 🔕 a una farmàcia sense estoc per rebre notificacions quan es reposi.',
'savedNotifications.anyPharmacy': 'Qualsevol farmàcia',
'savedNotifications.delete': 'Eliminar notificació',
'savedNotifications.loadError': 'No s\'han pogut carregar les notificacions desades',
'savedNotifications.deleteError': 'No s\'ha pogut eliminar la notificació',
// ErrorBoundary
'error.title': 'Alguna cosa ha fallat',
'error.description': 'Ha ocorregut un error inesperat. Si us plau, recarregueu la pàgina.',
'error.reload': 'Recarregar',
// AdminView
'admin.title': '⚙️ Panell d\'Administració',
'admin.authRequired': 'Autenticació requerida',
'admin.managePharmacies': 'Gestioneu farmàcies i medicaments',
'admin.logout': 'Tancar sessió',
'admin.checkingAuth': 'Comprovant autenticació...',
'admin.pharmacies': '🏥 Farmàcies',
'admin.medicines': '💊 Medicaments',
'admin.linkMedicine': '🔗 Vincular Medicament a Farmàcia',
'admin.linkProduct': '🍎 Vincular Producte a Farmàcia',
// LoginForm
'admin.login.title': '🔐 Accés Administració',
'admin.login.description': 'Introduïu les vostres credencials per accedir al panell d\'administració',
'admin.login.username': 'Usuari',
'admin.login.usernamePlaceholder': 'Introduïu usuari',
'admin.login.password': 'Contrasenya',
'admin.login.passwordPlaceholder': 'Introduïu contrasenya',
'admin.login.loggingIn': 'Iniciant sessió...',
'admin.login.loginBtn': 'Iniciar sessió',
'admin.login.defaultCredentials': 'Credencials per defecte:',
'admin.login.changePasswordWarning': '⚠️ Canvieu la contrasenya per defecte després del primer inici de sessió!',
'admin.login.failed': 'Error d\'inici de sessió',
'admin.login.invalidCredentials': 'Usuari o contrasenya invàlids',
// PharmacyManagement
'admin.pharmacy.title': 'Gestionar Farmàcies',
'admin.pharmacy.addNew': '+ Afegir Nova Farmàcia',
'admin.pharmacy.edit': 'Editar Farmàcia',
'admin.pharmacy.add': 'Afegir Nova Farmàcia',
'admin.pharmacy.name': 'Nom *',
'admin.pharmacy.address': 'Adreça *',
'admin.pharmacy.phone': 'Telèfon',
'admin.pharmacy.latitude': 'Latitud',
'admin.pharmacy.longitude': 'Longitud',
'admin.pharmacy.openingHours': 'Horari d\'obertura',
'admin.pharmacy.closed': 'Tancat',
'admin.pharmacy.opensAt': 'obre a les',
'admin.pharmacy.closesAt': 'tanca a les',
'admin.pharmacy.saving': 'Desant...',
'admin.pharmacy.update': 'Actualitzar',
'admin.pharmacy.create': 'Afegir',
'admin.pharmacy.cancel': 'Cancel·lar',
'admin.pharmacy.loading': 'Carregant farmàcies...',
'admin.pharmacy.showing': 'Mostrant',
'admin.pharmacy.of': 'de',
'admin.pharmacy.withinRadio': '(dins del radi)',
'admin.pharmacy.empty': 'Encara no hi ha farmàcies. Importeu des de webhook o afegiu-ne una manualment.',
'admin.pharmacy.noResults': 'No hi ha farmàcies en aquest radi amb coordenades. Amplieu el radi, cerqueu una altra ciutat o desactiveu el filtre de regió.',
'admin.pharmacy.editBtn': 'Editar',
'admin.pharmacy.deleteBtn': 'Eliminar',
'admin.pharmacy.deleteConfirm': 'Esteu segur que voleu eliminar aquesta farmàcia?',
'admin.pharmacy.updated': 'Farmàcia actualitzada!',
'admin.pharmacy.created': 'Farmàcia afegida!',
'admin.pharmacy.deleted': 'Farmàcia eliminada!',
'admin.pharmacy.loadError': 'Error en carregar farmàcies',
'admin.pharmacy.updateError': 'Error en actualitzar farmàcia',
'admin.pharmacy.createError': 'Error en crear farmàcia',
'admin.pharmacy.deleteError': 'Error en eliminar farmàcia',
'admin.pharmacy.citySearch': 'Ciutat, regió i importació',
'admin.pharmacy.searchCity': 'Cercar ciutat',
'admin.pharmacy.chooseOne': 'Trieu-ne una',
'admin.pharmacy.openDataUrl': 'URL de dades obertes',
'admin.pharmacy.cityPlaceholder': 'Ex: Rubí, Madrid, València…',
'admin.pharmacy.searching': 'Cercant…',
'admin.pharmacy.areaPreset': 'Preset d\'àrea',
'admin.pharmacy.customCoordinates': 'Coordenades personalitzades',
'admin.pharmacy.areaExample': 'Exemple: Àrea de Rubí (1,5 km)',
'admin.pharmacy.enterCity': 'Introduïu una ciutat o lloc.',
'admin.pharmacy.setCoordinates': 'Establiu latitud, longitud i radi (useu Cercar ciutat o un preset).',
'admin.pharmacy.dataSource': 'Font de dades',
'admin.pharmacy.webhookLegacy': 'n8n webhook (heretat)',
'admin.pharmacy.openDataJson': 'URL de dades obertes JSON',
'admin.pharmacy.jsonUrl': 'URL JSON',
'admin.pharmacy.importing': 'Important…',
'admin.pharmacy.importWebhook': 'Importar des de webhook',
'admin.pharmacy.importUrl': 'Importar des d\'URL',
'admin.pharmacy.importFrom': 'Importar des de',
'admin.pharmacy.showWithinRadio': 'Mostrar només farmàcies dins del radi',
'admin.pharmacy.sessionExpired': 'Sessió expirada o no heu iniciat sessió. Inicieu sessió de nou al panell Admin i torneu-ho a provar.',
'admin.pharmacy.apiNotFound': 'L\'app no ha pogut connectar amb l\'API (404). Useu http://localhost:3000 amb frontend i backend actius.',
'admin.pharmacy.geocodificationNotFound': 'Servei de geocodificació no trobat. Actualitzeu el backend i reinicieu-lo.',
'admin.pharmacy.searchFailed': 'Cerca fallida (HTTP',
'admin.pharmacy.dayClosed': 'Marqueu un dia com a Tancat si la farmàcia no obre aquest dia.',
'admin.pharmacy.saveError': 'Error en desar farmàcia',
'admin.pharmacy.radius': 'Radi (m)',
// MedicineManagement
'admin.medicine.title': 'Cercar Medicaments (API CIMA)',
'admin.medicine.description': 'Els medicaments s\'obtenen directament de la',
'admin.medicine.cimaApi': 'API de CIMA',
'admin.medicine.cimaDescription': '(Agència Espanyola de Medicaments i Productes Sanitaris).',
'admin.medicine.linkDescription': 'Cerqueu medicaments per vincular-los a farmàcies a la pestanya "Link Medicine".',
'admin.medicine.search': 'Cercar medicaments',
'admin.medicine.searchPlaceholder': 'Escriviu el nom d\'un medicament...',
'admin.medicine.searching': 'Cercant a API CIMA...',
'admin.medicine.found': 'S\'han trobat',
'admin.medicine.medications': 'medicaments',
'admin.medicine.activeIngredient': 'Principi Actiu:',
'admin.medicine.dosage': 'Dosificació:',
'admin.medicine.form': 'Forma:',
'admin.medicine.laboratory': 'Laboratori:',
'admin.medicine.registrationNumber': 'Nº Registre:',
'admin.medicine.generic': 'Genèric',
'admin.medicine.brand': 'Marca',
'admin.medicine.noResults': 'No s\'han trobat medicaments amb aquest nom.',
'admin.medicine.loadError': 'Error en cercar medicaments a l\'API CIMA',
// PharmacyMedicineLink
'admin.linkMedicine.title': 'Vincular Medicament a Farmàcia',
'admin.linkMedicine.pharmacy': 'Farmàcia *',
'admin.linkMedicine.searchPharmacy': 'Cercar entre',
'admin.linkMedicine.pharmacies': 'farmàcies per nom o adreça…',
'admin.linkMedicine.loadingPharmacies': 'Carregant farmàcies…',
'admin.linkMedicine.noPharmacies': 'No hi ha farmàcies que coincideixin amb',
'admin.linkMedicine.changePharmacy': 'Canviar farmàcia',
'admin.linkMedicine.medicine': 'Cercar Medicament (API CIMA) *',
'admin.linkMedicine.searchMedicine': 'Escriviu per cercar medicaments a CIMA...',
'admin.linkMedicine.searching': 'Cercant...',
'admin.linkMedicine.activeIngredient': 'Principi actiu:',
'admin.linkMedicine.dosage': 'Dosificació:',
'admin.linkMedicine.registrationNumber': 'Nº Registre:',
'admin.linkMedicine.changeMedicine': 'Canviar medicament',
'admin.linkMedicine.price': 'Preu (€)',
'admin.linkMedicine.stock': 'Estoc',
'admin.linkMedicine.linkBtn': 'Vincular Medicament',
'admin.linkMedicine.reset': 'Restablir',
'admin.linkMedicine.medicationsIn': 'Medicaments a',
'admin.linkMedicine.loading': 'Carregant...',
'admin.linkMedicine.empty': 'Encara no hi ha medicaments vinculats a aquesta farmàcia.',
'admin.linkMedicine.priceLabel': 'Preu:',
'admin.linkMedicine.undefined': 'No definit',
'admin.linkMedicine.newPrice': 'Introduïu nou preu:',
'admin.linkMedicine.newStock': 'Introduïu nou estoc:',
'admin.linkMedicine.update': 'Actualitzar',
'admin.linkMedicine.delete': 'Eliminar',
'admin.linkMedicine.selectMedicineFirst': 'Si us plau, seleccioneu un medicament primer',
'admin.linkMedicine.linkSuccess': 'Medicament vinculat a la farmàcia correctament!',
'admin.linkMedicine.linkError': 'Error en vincular medicament a farmàcia',
'admin.linkMedicine.updateSuccess': 'Actualitzat correctament!',
'admin.linkMedicine.updateError': 'Error en actualitzar',
'admin.linkMedicine.deleteConfirm': 'Eliminar aquest medicament de la farmàcia?',
'admin.linkMedicine.deleteSuccess': 'Medicament eliminat de la farmàcia!',
'admin.linkMedicine.deleteError': 'Error en eliminar medicament',
// PharmacyProductLink
'admin.linkProduct.title': 'Vincular Producte a Farmàcia',
'admin.linkProduct.pharmacy': 'Farmàcia *',
'admin.linkProduct.searchPharmacy': 'Cercar entre',
'admin.linkProduct.pharmacies': 'farmàcies per nom o adreça…',
'admin.linkProduct.loadingPharmacies': 'Carregant farmàcies…',
'admin.linkProduct.noPharmacies': 'No hi ha farmàcies que coincideixin amb',
'admin.linkProduct.changePharmacy': 'Canviar farmàcia',
'admin.linkProduct.product': 'Cercar Producte (CIMA / Parafarmàcia) *',
'admin.linkProduct.searchProduct': 'Escriviu per cercar medicaments o productes de parafarmàcia...',
'admin.linkProduct.searching': 'Cercant...',
'admin.linkProduct.brand': 'Marca:',
'admin.linkProduct.price': 'Preu:',
'admin.linkProduct.changeProduct': 'Canviar producte',
'admin.linkProduct.priceInput': 'Preu (€)',
'admin.linkProduct.stock': 'Estoc',
'admin.linkProduct.linkBtn': 'Vincular Producte',
'admin.linkProduct.reset': 'Restablir',
'admin.linkProduct.productsIn': 'Productes a',
'admin.linkProduct.loading': 'Carregant...',
'admin.linkProduct.empty': 'Encara no hi ha productes vinculats a aquesta farmàcia.',
'admin.linkProduct.priceLabel': 'Preu:',
'admin.linkProduct.undefined': 'No definit',
'admin.linkProduct.newPrice': 'Introduïu nou preu:',
'admin.linkProduct.newStock': 'Introduïu nou estoc:',
'admin.linkProduct.update': 'Actualitzar',
'admin.linkProduct.delete': 'Eliminar',
'admin.linkProduct.selectProductFirst': 'Si us plau, seleccioneu un producte primer',
'admin.linkProduct.linkSuccess': 'Producte vinculat a la farmàcia correctament!',
'admin.linkProduct.linkError': 'Error en vincular producte a farmàcia',
'admin.linkProduct.updateSuccess': 'Actualitzat correctament!',
'admin.linkProduct.updateError': 'Error en actualitzar',
'admin.linkProduct.deleteConfirm': 'Eliminar aquest producte de la farmàcia?',
'admin.linkProduct.deleteSuccess': 'Producte eliminat de la farmàcia!',
'admin.linkProduct.deleteError': 'Error en eliminar producte',
};
export default ca;
apps/frontend/src/i18n/locales/es.js
+416
View File
@@ -0,0 +1,416 @@
const es = {
// BottomNav
'nav.home': 'Inicio',
'nav.search': 'Buscar',
'nav.scan': 'Escanear',
'nav.alerts': 'Avisos',
'nav.profile': 'Usuario',
// HomeView
'home.description': 'Encuentra tus medicamentos en farmacias cercanas',
'home.searchMedicine': 'Buscar Medicamento',
'home.scanTSI': 'Escanear TSI',
// SearchBar
'search.placeholder': 'Escriba el nombre del medicamento',
'search.clear': 'Limpiar búsqueda',
// SearchView
'search.suggestions': 'Sugerencias',
'search.recentResults': 'Resultados Recientes',
'search.findNearby': 'Encontrar cerca',
'search.resultsFound': 'resultados encontrados',
'search.parapharmacy': 'Parafarmacia',
'search.activeIngredient': 'Ingrediente Activo',
'search.dosage': 'Dosis',
'search.form': 'Forma',
'search.backToSearch': '← Volver a búsqueda',
'search.sortByDistance': '📍 Ordenar por distancia',
'search.sortBySavedLocation': '📍 Ordenar por ubicación guardada',
'search.sortedByDistance': '📍 Ordenado por distancia · Reset',
'search.locating': '📍 Localizando…',
'search.usingSavedAddress': 'Usando tu dirección guardada',
'search.usingRecentLocation': 'Usando ubicación reciente',
'search.retry': 'Reintentar',
'search.locationDenied': 'Permiso de ubicación denegado. Permite el acceso a la ubicación en tu navegador.',
'search.locationUnavailable': 'Ubicación no disponible. Verifica que el GPS esté activado.',
'search.locationTimeout': 'La ubicación tardó demasiado. Intenta de nuevo o verifica tu conexión.',
'search.locationError': 'No se pudo obtener tu ubicación',
'search.searching': 'Buscando...',
// MedicineResults
'medicine.noResults': 'No se encontraron medicamentos para',
'medicine.principioActivo': 'Principio Activo:',
'medicine.dosis': 'Dosis:',
'medicine.forma': 'Forma:',
'medicine.viewPharmacies': 'Ver farmacias →',
'medicine.loginForNotifications': 'Inicia sesión para activar notificaciones',
'medicine.disableNotifications': 'Desactivar notificaciones para este medicamento',
'medicine.enableNotifications': 'Notificarme cuando esté disponible',
'medicine.notificationsActivated': 'Notificaciones activadas — clic para desactivar',
'medicine.notifyWhenAvailable': 'Notificarme cuando este medicamento esté en una farmacia',
'medicine.subscriptionError': 'No se pudo actualizar la suscripción',
// PharmacyList
'pharmacy.loading': 'Cargando farmacias...',
'pharmacy.notFound': 'No se encontraron farmacias con este medicamento',
'pharmacy.availableAt': 'Disponible en',
'pharmacy.pharmacy': 'farmacia',
'pharmacy.pharmacies': 'farmacias',
'pharmacy.howToGet': 'Cómo llegar',
'pharmacy.inStock': '✓ En Stock',
'pharmacy.lowStock': '⚠ Stock Bajo',
'pharmacy.outOfStock': '✗ Sin Stock',
'pharmacy.loginForNotifications': 'Inicia sesión para activar notificaciones',
'pharmacy.disableNotificationsPharmacy': 'Desactivar notificaciones para esta farmacia',
'pharmacy.notifyWhenArrives': 'Notificarme cuando llegue a esta farmacia',
'pharmacy.notificationsActivatedPharmacy': 'Notificaciones activadas para esta farmacia — clic para desactivar',
'pharmacy.notificationsRequired': 'Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).',
// ProductResults
'product.sinReceta': 'Sin Receta',
'product.parapharmacy': 'Parafarmacia',
'product.dermocosmetica': 'Dermocosmética',
'product.formulasLacteas': 'Fórmulas lácteas',
'product.vitamins': 'Vitaminas',
'product.analgesics': 'Analgésicos',
'product.noResults': 'No se encontraron productos',
'product.brand': 'Marca:',
'product.price': 'Precio:',
'product.activeIngredient': 'Principio Activo:',
'product.dosage': 'Dosis:',
'product.viewDetails': 'Ver detalles →',
// LoginModal
'login.login': 'Iniciar sesión',
'login.register': 'Crear cuenta',
'login.welcomeBack': 'Bienvenido de nuevo',
'login.createAccount': 'Crea tu cuenta',
'login.registerDescription': 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.',
'login.loginDescription': 'Inicia sesión para gestionar tu perfil y notificaciones.',
'login.username': 'Usuario',
'login.usernameHint': '3–32 caracteres: letras, dígitos o guión bajo.',
'login.password': 'Contraseña',
'login.passwordHint': 'Al menos 8 caracteres.',
'login.cancel': 'Cancelar',
'login.creating': 'Creando…',
'login.loggingIn': 'Iniciando sesión…',
'login.createAccountBtn': 'Crear cuenta',
'login.loginBtn': 'Iniciar sesión',
'login.passwordError': 'La contraseña debe tener al menos 8 caracteres',
'login.registerError': 'No se pudo crear la cuenta',
'login.loginError': 'Inicio de sesión fallido',
'login.networkError': 'Error de red — inténtalo de nuevo',
// AlertsView
'alerts.title': 'Mis Avisos',
'alerts.subtitle': 'Mantente al día con tus medicamentos.',
'alerts.loading': 'Cargando avisos...',
'alerts.loginRequired': 'Por favor, inicia sesión para ver tus avisos.',
'alerts.loadError': 'No se pudieron cargar los avisos.',
'alerts.availability': 'Disponibilidad',
'alerts.noSubscriptions': 'No tienes suscripciones de disponibilidad.',
'alerts.notifyWhenAvailable': 'Notificarme cuando esté disponible',
'alerts.deleteError': 'No se pudo eliminar la alerta de disponibilidad.',
'alerts.pharmacy': 'Farmacia',
// ScannerView
'scanner.title': 'Escanear TSI',
'scanner.description': 'Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas',
'scanner.openCamera': 'Abrir cámara',
'scanner.orUploadPhoto': 'O sube una foto de tu TSI',
'scanner.takePhoto': 'Hacer foto',
'scanner.uploadFromGallery': 'Subir de galería',
'scanner.scanImage': 'Escanear imagen',
'scanner.discard': 'Descartar',
'scanner.enterCIP': 'O introduce el código CIP manualmente',
'scanner.cipPlaceholder': 'Código CIP de 16 dígitos',
'scanner.search': 'Buscar',
'scanner.scanning': 'Apunta al código de barras',
'scanner.openingCamera': 'Abriendo cámara…',
'scanner.processingImage': 'Procesando imagen…',
'scanner.tsiScanned': 'TSI Escaneada',
'scanner.activePrescriptions': 'Recetas Activas',
'scanner.tapToFind': 'Toca un medicamento para ver disponibilidad en farmacias cercanas.',
'scanner.loadingPrescriptions': 'Cargando recetas…',
'scanner.noPrescriptions': 'No se encontraron recetas activas para esta tarjeta.',
'scanner.scanAnother': 'Escanear otra tarjeta',
'scanner.tryAgain': 'Intentar de nuevo',
'scanner.scannerUnavailable': 'El escáner no está disponible en este dispositivo.',
'scanner.cameraPermissionDenied': 'Permiso de cámara denegado. Actívalo en ajustes o introduce el código CIP manualmente.',
'scanner.invalidBarcode': 'Código de barras inválido. Intenta de nuevo o introduce el CIP manualmente.',
'scanner.cameraNotAvailable': 'Cámara no disponible en este navegador.',
'scanner.invalidCIP': 'Formato CIP inválido. Debe tener 16 caracteres alfanuméricos.',
'scanner.enterCIPError': 'Introduce un código CIP.',
'scanner.cameraPermissionWeb': 'Permiso de cámara denegado. Permite el acceso e intenta de nuevo.',
'scanner.noCamera': 'No se detectó ninguna cámara. Introduce el código CIP manualmente.',
'scanner.imageReadError': 'No se pudo leer la imagen. Intenta con otra foto.',
'scanner.invalidCIPDetected': 'CIP detectado no tiene formato válido. Introduce el código manualmente.',
'scanner.scanError': 'Error al escanear:',
'scanner.unknownError': 'Error desconocido',
'scanner.cameraError': 'Error de cámara:',
'scanner.imageProcessError': 'Error al procesar la imagen:',
// ProfileView
'profile.name': 'Nombre',
'profile.lastName': 'Apellidos',
'profile.config': 'Configuración',
'profile.myAddresses': 'Mis Direcciones',
'profile.theme': 'Tema',
'profile.themeAuto': 'Automático',
'profile.themeLight': 'Claro',
'profile.themeDark': 'Oscuro',
'profile.admin': 'Panel de Administración',
'profile.logout': 'Cerrar Sesión',
'profile.uploadingPhoto': 'Subiendo foto...',
'profile.recentSearches': 'Tus búsquedas recientes:',
'profile.delete': 'Eliminar',
'profile.changeAvatar': 'Cambiar Avatar',
'profile.presetAvatar': 'Prediseñado',
'profile.colors': 'Colores',
'profile.upload': 'Subir',
'profile.chooseFromGallery': 'Elegir de galería',
'profile.selectExistingImage': 'Selecciona una imagen existente',
'profile.imageTooBig': 'La imagen no puede superar los 5 MB',
'profile.imageSaveError': 'Error al guardar la imagen. Intenta con otra foto.',
'profile.imageConnectionError': 'Error de conexión al guardar la imagen.',
'profile.imageProcessError': 'Error al procesar la imagen.',
'profile.configTitle': 'Configuración',
'profile.firstName': 'Nombre',
'profile.firstNamePlaceholder': 'Tu nombre',
'profile.lastNamePlaceholder': 'Tus apellidos',
'profile.email': 'Correo electrónico',
'profile.emailPlaceholder': 'tu@email.com',
'profile.city': 'Ciudad',
'profile.cityPlaceholder': 'Tu ciudad',
'profile.address': 'Dirección',
'profile.addressPlaceholder': 'Calle Mayor 1, Madrid',
'profile.cancel': 'Cancelar',
'profile.saving': 'Guardando...',
'profile.save': 'Guardar',
'profile.profileSaved': 'Perfil guardado.',
'profile.saveError': 'Error al guardar',
'profile.addressesTitle': 'Mis Direcciones',
'profile.addressLabel': 'Dirección',
'profile.addressOptional': 'Etiqueta (opcional)',
'profile.addressLabelPlaceholder': 'Ej: Casa, Trabajo, Segunda residencia',
'profile.defaultAddress': 'Dirección predeterminada',
'profile.add': 'Añadir',
'profile.update': 'Actualizar',
'profile.loadingAddresses': 'Cargando direcciones...',
'profile.mainAddress': 'Dirección principal',
'profile.default': 'Predeterminada',
'profile.setDefault': 'Establecer como predeterminada',
'profile.addMore': 'Añadir más',
'profile.addressRequired': 'La dirección es obligatoria',
'profile.addressSaveError': 'Error al guardar la dirección',
'profile.themeTitle': 'Tema de visualización',
'profile.themeDescription': 'Elige cómo se ve la aplicación. En modo automático, se adapta al tema de tu dispositivo.',
'profile.themeAutoDesc': 'Seguir sistema',
'profile.themeLightDesc': 'Siempre claro',
'profile.themeDarkDesc': 'Siempre oscuro',
'profile.language': 'Idioma',
'profile.languageTitle': 'Idioma de la aplicación',
'profile.languageCatalan': 'Català',
'profile.languageSpanish': 'Castellano',
// SavedNotifications
'savedNotifications.title': '🔔 Notificaciones Guardadas',
'savedNotifications.close': 'Cerrar',
'savedNotifications.loading': 'Cargando…',
'savedNotifications.empty': 'Aún no hay notificaciones guardadas. Toca la campana 🔕 en una farmacia sin stock para recibir notificaciones cuando se reponga.',
'savedNotifications.anyPharmacy': 'Cualquier farmacia',
'savedNotifications.delete': 'Eliminar notificación',
'savedNotifications.loadError': 'No se pudieron cargar las notificaciones guardadas',
'savedNotifications.deleteError': 'No se pudo eliminar la notificación',
// ErrorBoundary
'error.title': 'Algo salió mal',
'error.description': 'Ha ocurrido un error inesperado. Por favor, recarga la página.',
'error.reload': 'Recargar',
// AdminView
'admin.title': '⚙️ Panel de Administración',
'admin.authRequired': 'Autenticación requerida',
'admin.managePharmacies': 'Gestiona farmacias y medicamentos',
'admin.logout': 'Cerrar sesión',
'admin.checkingAuth': 'Comprobando autenticación...',
'admin.pharmacies': '🏥 Farmacias',
'admin.medicines': '💊 Medicamentos',
'admin.linkMedicine': '🔗 Vincular Medicamento a Farmacia',
'admin.linkProduct': '🍎 Vincular Producto a Farmacia',
// LoginForm
'admin.login.title': '🔐 Acceso Administración',
'admin.login.description': 'Introduce tus credenciales para acceder al panel de administración',
'admin.login.username': 'Usuario',
'admin.login.usernamePlaceholder': 'Introduce usuario',
'admin.login.password': 'Contraseña',
'admin.login.passwordPlaceholder': 'Introduce contraseña',
'admin.login.loggingIn': 'Iniciando sesión...',
'admin.login.loginBtn': 'Iniciar sesión',
'admin.login.defaultCredentials': 'Credenciales por defecto:',
'admin.login.changePasswordWarning': '⚠️ ¡Cambia la contraseña por defecto tras el primer inicio de sesión!',
'admin.login.failed': 'Inicio de sesión fallido',
'admin.login.invalidCredentials': 'Usuario o contraseña inválidos',
// PharmacyManagement
'admin.pharmacy.title': 'Gestionar Farmacias',
'admin.pharmacy.addNew': '+ Añadir Nueva Farmacia',
'admin.pharmacy.edit': 'Editar Farmacia',
'admin.pharmacy.add': 'Añadir Nueva Farmacia',
'admin.pharmacy.name': 'Nombre *',
'admin.pharmacy.address': 'Dirección *',
'admin.pharmacy.phone': 'Teléfono',
'admin.pharmacy.latitude': 'Latitud',
'admin.pharmacy.longitude': 'Longitud',
'admin.pharmacy.radius': 'Radio',
'admin.pharmacy.openingHours': 'Horario de apertura',
'admin.pharmacy.closed': 'Cerrado',
'admin.pharmacy.opensAt': 'abre a las',
'admin.pharmacy.closesAt': 'cierra a las',
'admin.pharmacy.saving': 'Guardando...',
'admin.pharmacy.update': 'Actualizar',
'admin.pharmacy.create': 'Añadir',
'admin.pharmacy.cancel': 'Cancelar',
'admin.pharmacy.loading': 'Cargando farmacias...',
'admin.pharmacy.showing': 'Mostrando',
'admin.pharmacy.of': 'de',
'admin.pharmacy.withinRadio': '(dentro del radio)',
'admin.pharmacy.empty': 'Aún no hay farmacias. Importa desde webhook o añade una manualmente.',
'admin.pharmacy.noResults': 'No hay farmacias en este radio con coordenadas. Amplía el radio, busca otra ciudad o desactiva el filtro de región.',
'admin.pharmacy.editBtn': 'Editar',
'admin.pharmacy.deleteBtn': 'Eliminar',
'admin.pharmacy.deleteConfirm': '¿Estás seguro de que quieres eliminar esta farmacia?',
'admin.pharmacy.updated': '¡Farmacia actualizada!',
'admin.pharmacy.created': '¡Farmacia añadida!',
'admin.pharmacy.deleted': '¡Farmacia eliminada!',
'admin.pharmacy.loadError': 'Error al cargar farmacias',
'admin.pharmacy.saveError': 'Error al guardar farmacia',
'admin.pharmacy.updateError': 'Error al actualizar farmacia',
'admin.pharmacy.createError': 'Error al crear farmacia',
'admin.pharmacy.deleteError': 'Error al eliminar farmacia',
'admin.pharmacy.citySearch': 'Ciudad, región e importación',
'admin.pharmacy.searchCity': 'Buscar ciudad',
'admin.pharmacy.chooseOne': 'Elije una',
'admin.pharmacy.openDataUrl': 'URL de datos abiertos',
'admin.pharmacy.cityPlaceholder': 'Ej: Rubí, Madrid, Valencia…',
'admin.pharmacy.searching': 'Buscando…',
'admin.pharmacy.areaPreset': 'Preset de área',
'admin.pharmacy.customCoordinates': 'Coordenadas personalizadas',
'admin.pharmacy.areaExample': 'Ejemplo: Área de Rubí (1.5 km)',
'admin.pharmacy.enterCity': 'Introduce una ciudad o lugar.',
'admin.pharmacy.setCoordinates': 'Establece latitud, longitud y radio (usa Buscar ciudad o un preset).',
'admin.pharmacy.dataSource': 'Fuente de datos',
'admin.pharmacy.webhookLegacy': 'n8n webhook (heredado)',
'admin.pharmacy.openDataJson': 'URL de datos abiertos JSON',
'admin.pharmacy.jsonUrl': 'URL JSON',
'admin.pharmacy.importing': 'Importando…',
'admin.pharmacy.importWebhook': 'Importar desde webhook',
'admin.pharmacy.importUrl': 'Importar desde URL',
'admin.pharmacy.importFrom': 'Importar desde',
'admin.pharmacy.showWithinRadio': 'Mostrar solo farmacias dentro del radio',
'admin.pharmacy.sessionExpired': 'Sesión expirada o no has iniciado sesión. Inicia sesión de nuevo en el panel Admin y reintenta.',
'admin.pharmacy.apiNotFound': 'La app no pudo conectar con la API (404). Usa http://localhost:3000 con frontend y backend activos.',
'admin.pharmacy.geocodingNotFound': 'Servicio de geocodificación no encontrado. Actualiza el backend y reinícialo.',
'admin.pharmacy.searchFailed': 'Búsqueda fallida (HTTP',
'admin.pharmacy.dayClosed': 'Marca un día como Cerrado si la farmacia no abre ese día.',
'admin.pharmacy.saveError': 'Error al guardar farmacia',
'admin.pharmacy.radius': 'Radio (m)',
// MedicineManagement
'admin.medicine.title': 'Buscar Medicamentos (API CIMA)',
'admin.medicine.description': 'Los medicamentos ahora se obtienen directamente de la',
'admin.medicine.cimaApi': 'API de CIMA',
'admin.medicine.cimaDescription': '(Agencia Española de Medicamentos y Productos Sanitarios).',
'admin.medicine.linkDescription': 'Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".',
'admin.medicine.search': 'Buscar medicamentos',
'admin.medicine.searchPlaceholder': 'Escribe el nombre de un medicamento...',
'admin.medicine.searching': 'Buscando en API CIMA...',
'admin.medicine.found': 'Se encontraron',
'admin.medicine.medications': 'medicamentos',
'admin.medicine.activeIngredient': 'Principio Activo:',
'admin.medicine.dosage': 'Dosis:',
'admin.medicine.form': 'Forma:',
'admin.medicine.laboratory': 'Laboratorio:',
'admin.medicine.registrationNumber': 'Nº Registro:',
'admin.medicine.generic': 'Genérico',
'admin.medicine.brand': 'Marca',
'admin.medicine.noResults': 'No se encontraron medicamentos con ese nombre.',
'admin.medicine.loadError': 'Error al buscar medicamentos en la API CIMA',
// PharmacyMedicineLink
'admin.linkMedicine.title': 'Vincular Medicamento a Farmacia',
'admin.linkMedicine.pharmacy': 'Farmacia *',
'admin.linkMedicine.searchPharmacy': 'Buscar entre',
'admin.linkMedicine.pharmacies': 'farmacias por nombre o dirección…',
'admin.linkMedicine.loadingPharmacies': 'Cargando farmacias…',
'admin.linkMedicine.noPharmacies': 'No hay farmacias que coincidan con',
'admin.linkMedicine.changePharmacy': 'Cambiar farmacia',
'admin.linkMedicine.medicine': 'Buscar Medicamento (API CIMA) *',
'admin.linkMedicine.searchMedicine': 'Escribe para buscar medicamentos en CIMA...',
'admin.linkMedicine.searching': 'Buscando...',
'admin.linkMedicine.activeIngredient': 'Principio activo:',
'admin.linkMedicine.dosage': 'Dosis:',
'admin.linkMedicine.registrationNumber': 'Nº Registro:',
'admin.linkMedicine.changeMedicine': 'Cambiar medicamento',
'admin.linkMedicine.price': 'Precio (€)',
'admin.linkMedicine.stock': 'Stock',
'admin.linkMedicine.linkBtn': 'Vincular Medicamento',
'admin.linkMedicine.reset': 'Reiniciar',
'admin.linkMedicine.medicationsIn': 'Medicamentos en',
'admin.linkMedicine.loading': 'Cargando...',
'admin.linkMedicine.empty': 'Aún no hay medicamentos vinculados a esta farmacia.',
'admin.linkMedicine.priceLabel': 'Precio:',
'admin.linkMedicine.undefined': 'No definido',
'admin.linkMedicine.newPrice': 'Introduce nuevo precio:',
'admin.linkMedicine.newStock': 'Introduce nuevo stock:',
'admin.linkMedicine.update': 'Actualizar',
'admin.linkMedicine.delete': 'Eliminar',
'admin.linkMedicine.selectMedicineFirst': 'Por favor, selecciona un medicamento primero',
'admin.linkMedicine.linkSuccess': '¡Medicamento vinculado a la farmacia correctamente!',
'admin.linkMedicine.linkError': 'Error al vincular medicamento a farmacia',
'admin.linkMedicine.updateSuccess': '¡Actualizado correctamente!',
'admin.linkMedicine.updateError': 'Error al actualizar',
'admin.linkMedicine.deleteConfirm': '¿Eliminar este medicamento de la farmacia?',
'admin.linkMedicine.deleteSuccess': '¡Medicamento eliminado de la farmacia!',
'admin.linkMedicine.deleteError': 'Error al eliminar medicamento',
// PharmacyProductLink
'admin.linkProduct.title': 'Vincular Producto a Farmacia',
'admin.linkProduct.pharmacy': 'Farmacia *',
'admin.linkProduct.searchPharmacy': 'Buscar entre',
'admin.linkProduct.pharmacies': 'farmacias por nombre o dirección…',
'admin.linkProduct.loadingPharmacies': 'Cargando farmacias…',
'admin.linkProduct.noPharmacies': 'No hay farmacias que coincidan con',
'admin.linkProduct.changePharmacy': 'Cambiar farmacia',
'admin.linkProduct.product': 'Buscar Producto (CIMA / Parafarmacia) *',
'admin.linkProduct.searchProduct': 'Escribe para buscar medicamentos o productos de parafarmacia...',
'admin.linkProduct.searching': 'Buscando...',
'admin.linkProduct.brand': 'Marca:',
'admin.linkProduct.price': 'Precio:',
'admin.linkProduct.changeProduct': 'Cambiar producto',
'admin.linkProduct.priceInput': 'Precio (€)',
'admin.linkProduct.stock': 'Stock',
'admin.linkProduct.linkBtn': 'Vincular Producto',
'admin.linkProduct.reset': 'Reiniciar',
'admin.linkProduct.productsIn': 'Productos en',
'admin.linkProduct.loading': 'Cargando...',
'admin.linkProduct.empty': 'Aún no hay productos vinculados a esta farmacia.',
'admin.linkProduct.priceLabel': 'Precio:',
'admin.linkProduct.undefined': 'No definido',
'admin.linkProduct.newPrice': 'Introduce nuevo precio:',
'admin.linkProduct.newStock': 'Introduce nuevo stock:',
'admin.linkProduct.update': 'Actualizar',
'admin.linkProduct.delete': 'Eliminar',
'admin.linkProduct.selectProductFirst': 'Por favor, selecciona un producto primero',
'admin.linkProduct.linkSuccess': '¡Producto vinculado a la farmacia correctamente!',
'admin.linkProduct.linkError': 'Error al vincular producto a farmacia',
'admin.linkProduct.updateSuccess': '¡Actualizado correctamente!',
'admin.linkProduct.updateError': 'Error al actualizar',
'admin.linkProduct.deleteConfirm': '¿Eliminar este producto de la farmacia?',
'admin.linkProduct.deleteSuccess': '¡Producto eliminado de la farmacia!',
'admin.linkProduct.deleteError': 'Error al eliminar producto',
};
export default es;
apps/frontend/src/i18n/useTranslation.js
+8
View File
@@ -0,0 +1,8 @@
import { useContext } from 'react';
import { LanguageContext } from './LanguageContext';
export function useTranslation() {
const ctx = useContext(LanguageContext);
if (!ctx) throw new Error('useTranslation must be used within LanguageProvider');
return ctx;
}
apps/frontend/src/main.jsx
+6 -3
View File
@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import ErrorBoundary from './components/ErrorBoundary'; import ErrorBoundary from './components/ErrorBoundary';
import { LanguageProvider } from './i18n';
import './index.css'; import './index.css';
import { initNativeShell } from './utils/native'; import { initNativeShell } from './utils/native';
import { initFaro } from './utils/faro'; import { initFaro } from './utils/faro';
@@ -20,9 +21,11 @@ window.addEventListener('unhandledrejection', (event) => {
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode> <React.StrictMode>
<ErrorBoundary> <LanguageProvider>
<App /> <ErrorBoundary>
</ErrorBoundary> <App />
</ErrorBoundary>
</LanguageProvider>
</React.StrictMode> </React.StrictMode>
); );
apps/frontend/src/views/AdminView.jsx
+12 -10
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from '../i18n';
import '../App.css'; import '../App.css';
import './AdminView.css'; import './AdminView.css';
import LoginForm from '../components/admin/LoginForm'; import LoginForm from '../components/admin/LoginForm';
@@ -8,6 +9,7 @@ import PharmacyMedicineLink from '../components/admin/PharmacyMedicineLink';
import PharmacyProductLink from '../components/admin/PharmacyProductLink'; import PharmacyProductLink from '../components/admin/PharmacyProductLink';
function AdminView() { function AdminView() {
const { t } = useTranslation();
const [authenticated, setAuthenticated] = useState(false); const [authenticated, setAuthenticated] = useState(false);
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -60,7 +62,7 @@ function AdminView() {
if (loading) { if (loading) {
return ( return (
<div className="app-main"> <div className="app-main">
<div className="loading">Comprobando autenticación...</div> <div className="loading">{t('admin.checkingAuth')}</div>
</div> </div>
); );
} }
@@ -69,8 +71,8 @@ function AdminView() {
return ( return (
<> <>
<header className="app-header"> <header className="app-header">
<h1>⚙️ Panel de Administración</h1> <h1>{t('admin.title')}</h1>
<p>Autenticación requerida</p> <p>{t('admin.authRequired')}</p>
</header> </header>
<main className="app-main"> <main className="app-main">
<LoginForm onLogin={handleLogin} /> <LoginForm onLogin={handleLogin} />
@@ -84,13 +86,13 @@ function AdminView() {
<header className="app-header"> <header className="app-header">
<div className="admin-header-content"> <div className="admin-header-content">
<div> <div>
<h1>⚙️ Panel de Administración</h1> <h1>{t('admin.title')}</h1>
<p>Gestiona farmacias y medicamentos</p> <p>{t('admin.managePharmacies')}</p>
</div> </div>
<div className="admin-user-info"> <div className="admin-user-info">
<span>👤 {user?.username}</span> <span>👤 {user?.username}</span>
<button className="logout-button" onClick={handleLogout}> <button className="logout-button" onClick={handleLogout}>
Cerrar sesión {t('admin.logout')}
</button> </button>
</div> </div>
</div> </div>
@@ -102,25 +104,25 @@ function AdminView() {
className={`admin-tab ${activeTab === 'pharmacies' ? 'active' : ''}`} className={`admin-tab ${activeTab === 'pharmacies' ? 'active' : ''}`}
onClick={() => setActiveTab('pharmacies')} onClick={() => setActiveTab('pharmacies')}
> >
🏥 Farmacias {t('admin.pharmacies')}
</button> </button>
<button <button
className={`admin-tab ${activeTab === 'medicines' ? 'active' : ''}`} className={`admin-tab ${activeTab === 'medicines' ? 'active' : ''}`}
onClick={() => setActiveTab('medicines')} onClick={() => setActiveTab('medicines')}
> >
💊 Medicamentos {t('admin.medicines')}
</button> </button>
<button <button
className={`admin-tab ${activeTab === 'link' ? 'active' : ''}`} className={`admin-tab ${activeTab === 'link' ? 'active' : ''}`}
onClick={() => setActiveTab('link')} onClick={() => setActiveTab('link')}
> >
🔗 Vincular Medicamento a Farmacia {t('admin.linkMedicine')}
</button> </button>
<button <button
className={`admin-tab ${activeTab === 'link-product' ? 'active' : ''}`} className={`admin-tab ${activeTab === 'link-product' ? 'active' : ''}`}
onClick={() => setActiveTab('link-product')} onClick={() => setActiveTab('link-product')}
> >
🍎 Vincular Producto a Farmacia {t('admin.linkProduct')}
</button> </button>
</div> </div>
apps/frontend/src/views/AlertsView.jsx
+12 -10
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from '../i18n';
import './AlertsView.css'; import './AlertsView.css';
const iconMap = { const iconMap = {
@@ -15,6 +16,7 @@ const iconMap = {
}; };
function AlertsView({ onNotificationChange, onNavigateToMedicine }) { function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
const { t } = useTranslation();
const [availability, setAvailability] = useState([]); const [availability, setAvailability] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@@ -26,7 +28,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
const notifsRes = await fetch('/api/notifications/mine', { credentials: 'include' }); const notifsRes = await fetch('/api/notifications/mine', { credentials: 'include' });
if (notifsRes.status === 401) { if (notifsRes.status === 401) {
setError('Por favor, inicia sesión para ver tus avisos.'); setError(t('alerts.loginRequired'));
setLoading(false); setLoading(false);
return; return;
} }
@@ -43,7 +45,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
setAvailability(mergedAvailability); setAvailability(mergedAvailability);
} catch (err) { } catch (err) {
console.error('Error fetching availability notifications:', err); console.error('Error fetching availability notifications:', err);
setError('No se pudieron cargar los avisos.'); setError(t('alerts.loadError'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -87,7 +89,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
setError('No se pudo eliminar la alerta de disponibilidad.'); setError(t('alerts.deleteError'));
} }
}; };
@@ -95,21 +97,21 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
<div className="alerts-view"> <div className="alerts-view">
<main className="alerts-main"> <main className="alerts-main">
<div className="alerts-header"> <div className="alerts-header">
<h2 className="alerts-title">Mis Avisos</h2> <h2 className="alerts-title">{t('alerts.title')}</h2>
<p className="alerts-subtitle">Mantente al día con tus medicamentos.</p> <p className="alerts-subtitle">{t('alerts.subtitle')}</p>
</div> </div>
{loading && <p className="alerts-status" style={{ textAlign: 'center', padding: '2rem' }}>Cargando avisos...</p>} {loading && <p className="alerts-status" style={{ textAlign: 'center', padding: '2rem' }}>{t('alerts.loading')}</p>}
{!loading && error && <p className="alerts-error" style={{ color: 'var(--error)', textAlign: 'center', padding: '2rem' }}>{error}</p>} {!loading && error && <p className="alerts-error" style={{ color: 'var(--error)', textAlign: 'center', padding: '2rem' }}>{error}</p>}
{!loading && !error && ( {!loading && !error && (
<> <>
{/* Availability Section */} {/* Availability Section */}
<section className="alerts-section"> <section className="alerts-section">
<h3 className="alerts-section-title" style={{ marginBottom: '1rem' }}>Disponibilidad</h3> <h3 className="alerts-section-title" style={{ marginBottom: '1rem' }}>{t('alerts.availability')}</h3>
<div className="alerts-list"> <div className="alerts-list">
{availability.length === 0 ? ( {availability.length === 0 ? (
<p className="alerts-empty" style={{ color: 'var(--on-surface-variant)', fontStyle: 'italic' }}>No tienes suscripciones de disponibilidad.</p> <p className="alerts-empty" style={{ color: 'var(--on-surface-variant)', fontStyle: 'italic' }}>{t('alerts.noSubscriptions')}</p>
) : ( ) : (
availability.map((alert) => { availability.map((alert) => {
const cardColor = alert.scope === 'pharmacy' ? 'primary' : 'tertiary'; const cardColor = alert.scope === 'pharmacy' ? 'primary' : 'tertiary';
@@ -132,7 +134,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
{alert.scope === 'pharmacy' ? ( {alert.scope === 'pharmacy' ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', marginTop: '0.25rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', marginTop: '0.25rem' }}>
<span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content' }}> <span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content' }}>
🏥 {alert.pharmacy_name || `Farmacia #${alert.pharmacy_id}`} 🏥 {alert.pharmacy_name || `${t('alerts.pharmacy')} #${alert.pharmacy_id}`}
</span> </span>
{alert.pharmacy_address && ( {alert.pharmacy_address && (
<p className="alert-address-text" style={{ fontSize: '0.9rem', color: 'var(--on-surface-variant)', margin: 0 }}> <p className="alert-address-text" style={{ fontSize: '0.9rem', color: 'var(--on-surface-variant)', margin: 0 }}>
@@ -142,7 +144,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
</div> </div>
) : ( ) : (
<span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content', marginTop: '0.25rem' }}> <span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content', marginTop: '0.25rem' }}>
🔔 Notificarme cuando esté disponible 🔔 {t('alerts.notifyWhenAvailable')}
</span> </span>
)} )}
</div> </div>
apps/frontend/src/views/HomeView.jsx
+5 -3
View File
@@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import { useTranslation } from '../i18n';
import './HomeView.css'; import './HomeView.css';
function HomeView({ onScanClick, onSearchClick }) { function HomeView({ onScanClick, onSearchClick }) {
const { t } = useTranslation();
return ( return (
<div className="home-view"> <div className="home-view">
<div className="home-hero"> <div className="home-hero">
@@ -9,7 +11,7 @@ function HomeView({ onScanClick, onSearchClick }) {
<img src="/farmaclic_logo_home.png" alt="FarmaClic" className="home-logo" /> <img src="/farmaclic_logo_home.png" alt="FarmaClic" className="home-logo" />
<img src="/farmaclic_text.png" alt="FarmaClic" className="home-brand-name" /> <img src="/farmaclic_text.png" alt="FarmaClic" className="home-brand-name" />
</div> </div>
<p className="home-desc">Encuentra tus medicamentos en farmacias cercanas</p> <p className="home-desc">{t('home.description')}</p>
</div> </div>
<div className="home-cards"> <div className="home-cards">
@@ -21,7 +23,7 @@ function HomeView({ onScanClick, onSearchClick }) {
</svg> </svg>
</div> </div>
<div className="home-card-text"> <div className="home-card-text">
<span className="home-card-label">Buscar Medicamento</span> <span className="home-card-label">{t('home.searchMedicine')}</span>
<span className="home-card-arrow"> <span className="home-card-arrow">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
@@ -41,7 +43,7 @@ function HomeView({ onScanClick, onSearchClick }) {
</svg> </svg>
</div> </div>
<div className="home-card-text"> <div className="home-card-text">
<span className="home-card-label">Escanear TSI</span> <span className="home-card-label">{t('home.scanTSI')}</span>
<span className="home-card-arrow"> <span className="home-card-arrow">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
apps/frontend/src/views/ProfileView.jsx
+114 -59
View File
@@ -1,4 +1,5 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useTranslation } from '../i18n';
import './ProfileView.css'; import './ProfileView.css';
const AVATARS = [ const AVATARS = [
@@ -35,6 +36,7 @@ function resolveAvatarUrl(url) {
} }
function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, theme, onThemeChange }) { function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, theme, onThemeChange }) {
const { t, lang, setLang } = useTranslation();
const [firstName, setFirstName] = useState(currentUser?.first_name || ''); const [firstName, setFirstName] = useState(currentUser?.first_name || '');
const [lastName, setLastName] = useState(currentUser?.last_name || ''); const [lastName, setLastName] = useState(currentUser?.last_name || '');
const [avatarUrl, setAvatarUrl] = useState(resolveAvatarUrl(currentUser?.avatar_url)); const [avatarUrl, setAvatarUrl] = useState(resolveAvatarUrl(currentUser?.avatar_url));
@@ -60,6 +62,9 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
// Theme modal state // Theme modal state
const [showTheme, setShowTheme] = useState(false); const [showTheme, setShowTheme] = useState(false);
// Language modal state
const [showLanguage, setShowLanguage] = useState(false);
// Addresses modal state // Addresses modal state
const [showAddresses, setShowAddresses] = useState(false); const [showAddresses, setShowAddresses] = useState(false);
const [addresses, setAddresses] = useState([]); const [addresses, setAddresses] = useState([]);
@@ -143,7 +148,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
e?.preventDefault(); e?.preventDefault();
const addr = formAddress.trim(); const addr = formAddress.trim();
if (!addr) { if (!addr) {
setFormError('La dirección es obligatoria'); setFormError(t('profile.addressRequired'));
return; return;
} }
setFormSaving(true); setFormSaving(true);
@@ -163,7 +168,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
}); });
if (!res.ok) { if (!res.ok) {
const err = await res.json().catch(() => ({})); const err = await res.json().catch(() => ({}));
throw new Error(err.error || 'Error al guardar la dirección'); throw new Error(err.error || t('profile.addressSaveError'));
} }
setShowAddressForm(false); setShowAddressForm(false);
setEditingAddressId(null); setEditingAddressId(null);
@@ -222,16 +227,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
}); });
if (!res.ok) { if (!res.ok) {
const err = await res.json().catch(() => ({})); const err = await res.json().catch(() => ({}));
throw new Error(err.error || `Error al guardar (HTTP ${res.status})`); throw new Error(err.error || t('profile.saveError'));
} }
const updated = await res.json(); const updated = await res.json();
onProfileSaved?.(updated); onProfileSaved?.(updated);
setFirstName(updated.first_name || ''); setFirstName(updated.first_name || '');
setLastName(updated.last_name || ''); setLastName(updated.last_name || '');
setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' }); setConfigFeedback({ type: 'ok', text: t('profile.profileSaved') });
setTimeout(() => setShowConfig(false), 1200); setTimeout(() => setShowConfig(false), 1200);
} catch (err) { } catch (err) {
setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' }); setConfigFeedback({ type: 'err', text: err.message || t('profile.saveError') });
} finally { } finally {
setConfigSaving(false); setConfigSaving(false);
} }
@@ -246,7 +251,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
setUploading(true); setUploading(true);
if (file.size > 5 * 1024 * 1024) { if (file.size > 5 * 1024 * 1024) {
setUploadError('La imagen no puede superar los 5 MB'); setUploadError(t('profile.imageTooBig'));
setUploading(false); setUploading(false);
return; return;
} }
@@ -268,17 +273,17 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
onProfileSaved?.(updated); onProfileSaved?.(updated);
} else { } else {
setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url)); setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url));
setUploadError('Error al guardar la imagen. Intenta con otra foto.'); setUploadError(t('profile.imageSaveError'));
} }
} catch (err) { } catch (err) {
setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url)); setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url));
setUploadError('Error de conexión al guardar la imagen.'); setUploadError(t('profile.imageConnectionError'));
} }
setUploading(false); setUploading(false);
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} catch (err) { } catch (err) {
setUploadError('Error al procesar la imagen.'); setUploadError(t('profile.imageProcessError'));
setUploading(false); setUploading(false);
} }
} }
@@ -371,18 +376,18 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
onChange={handleAvatarUpload} onChange={handleAvatarUpload}
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
{uploading && <p className="profile-section-sub">Subiendo foto...</p>} {uploading && <p className="profile-section-sub">{t('profile.uploadingPhoto')}</p>}
{uploadError && <p className="profile-feedback profile-feedback--err">{uploadError}</p>} {uploadError && <p className="profile-feedback profile-feedback--err">{uploadError}</p>}
</div> </div>
{/* Read-only Name Section */} {/* Read-only Name Section */}
<div className="profile-info-cards"> <div className="profile-info-cards">
<div className="profile-info-card"> <div className="profile-info-card">
<p className="info-card-label">Nombre</p> <p className="info-card-label">{t('profile.name')}</p>
<p className="info-card-value">{firstName || '—'}</p> <p className="info-card-value">{firstName || '—'}</p>
</div> </div>
<div className="profile-info-card"> <div className="profile-info-card">
<p className="info-card-label">Apellidos</p> <p className="info-card-label">{t('profile.lastName')}</p>
<p className="info-card-value">{lastName || '—'}</p> <p className="info-card-value">{lastName || '—'}</p>
</div> </div>
</div> </div>
@@ -395,7 +400,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" /> <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
</svg> </svg>
</div> </div>
<span className="menu-item-label">Configuración</span> <span className="menu-item-label">{t('profile.config')}</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
</svg> </svg>
@@ -407,7 +412,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
</svg> </svg>
</div> </div>
<span className="menu-item-label">Mis Direcciones</span> <span className="menu-item-label">{t('profile.myAddresses')}</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
</svg> </svg>
@@ -419,9 +424,24 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" /> <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
</svg> </svg>
</div> </div>
<span className="menu-item-label">Tema</span> <span className="menu-item-label">{t('profile.theme')}</span>
<span className="menu-item-theme-label"> <span className="menu-item-theme-label">
{theme === 'auto' ? 'Automático' : theme === 'light' ? 'Claro' : 'Oscuro'} {theme === 'auto' ? t('profile.themeAuto') : theme === 'light' ? t('profile.themeLight') : t('profile.themeDark')}
</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
<button className="profile-menu-item" onClick={() => setShowLanguage(true)}>
<div className="menu-item-icon menu-item-icon--tertiary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
</svg>
</div>
<span className="menu-item-label">{t('profile.language')}</span>
<span className="menu-item-theme-label">
{lang === 'es' ? t('profile.languageSpanish') : t('profile.languageCatalan')}
</span> </span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
@@ -430,14 +450,14 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
{searchHistory.length > 0 && ( {searchHistory.length > 0 && (
<div className="profile-search-history"> <div className="profile-search-history">
<p className="profile-section-sub">Tus búsquedas recientes:</p> <p className="profile-section-sub">{t('profile.recentSearches')}</p>
{searchHistory.map((item) => ( {searchHistory.map((item) => (
<div key={item.id} className="profile-search-item"> <div key={item.id} className="profile-search-item">
<span className="profile-search-address">{item.address}</span> <span className="profile-search-address">{item.address}</span>
<button <button
className="profile-search-delete" className="profile-search-delete"
onClick={() => handleDeleteSearch(item.id)} onClick={() => handleDeleteSearch(item.id)}
title="Eliminar" title={t('profile.delete')}
> >
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
@@ -455,7 +475,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" /> <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
</svg> </svg>
</div> </div>
<span className="menu-item-label">Panel de Administración</span> <span className="menu-item-label">{t('profile.admin')}</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
<polyline points="9 18 15 12 9 6" /> <polyline points="9 18 15 12 9 6" />
</svg> </svg>
@@ -469,7 +489,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" /> <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" />
</svg> </svg>
</div> </div>
<span>Cerrar Sesión</span> <span>{t('profile.logout')}</span>
</button> </button>
{/* Avatar Modal */} {/* Avatar Modal */}
@@ -477,7 +497,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<div className="profile-modal-backdrop" onClick={() => setShowAvatarModal(false)}> <div className="profile-modal-backdrop" onClick={() => setShowAvatarModal(false)}>
<div className="profile-modal profile-modal-avatar" onClick={(e) => e.stopPropagation()}> <div className="profile-modal profile-modal-avatar" onClick={(e) => e.stopPropagation()}>
<div className="profile-modal-header"> <div className="profile-modal-header">
<h3>Cambiar Avatar</h3> <h3>{t('profile.changeAvatar')}</h3>
<button className="profile-modal-close" onClick={() => setShowAvatarModal(false)}>×</button> <button className="profile-modal-close" onClick={() => setShowAvatarModal(false)}>×</button>
</div> </div>
<div className="profile-avatar-tabs"> <div className="profile-avatar-tabs">
@@ -488,7 +508,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg> </svg>
<span>Prediseñado</span> <span>{t('profile.presetAvatar')}</span>
</button> </button>
<button <button
className={`profile-avatar-tab ${avatarTab === 'colors' ? 'profile-avatar-tab--active' : ''}`} className={`profile-avatar-tab ${avatarTab === 'colors' ? 'profile-avatar-tab--active' : ''}`}
@@ -497,7 +517,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1.01 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /> <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1.01 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg> </svg>
<span>Colores</span> <span>{t('profile.colors')}</span>
</button> </button>
<button <button
className={`profile-avatar-tab ${avatarTab === 'upload' ? 'profile-avatar-tab--active' : ''}`} className={`profile-avatar-tab ${avatarTab === 'upload' ? 'profile-avatar-tab--active' : ''}`}
@@ -506,7 +526,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" /> <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
</svg> </svg>
<span>Subir</span> <span>{t('profile.upload')}</span>
</button> </button>
</div> </div>
<div className="profile-modal-body"> <div className="profile-modal-body">
@@ -545,8 +565,8 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
</svg> </svg>
</div> </div>
<div> <div>
<p className="profile-avatar-upload-title">Elegir de galería</p> <p className="profile-avatar-upload-title">{t('profile.chooseFromGallery')}</p>
<p className="profile-avatar-upload-sub">Selecciona una imagen existente</p> <p className="profile-avatar-upload-sub">{t('profile.selectExistingImage')}</p>
</div> </div>
</button> </button>
</div> </div>
@@ -561,57 +581,57 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<div className="profile-modal-backdrop" onClick={() => setShowConfig(false)}> <div className="profile-modal-backdrop" onClick={() => setShowConfig(false)}>
<div className="profile-modal" onClick={(e) => e.stopPropagation()}> <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
<div className="profile-modal-header"> <div className="profile-modal-header">
<h3>Configuración</h3> <h3>{t('profile.configTitle')}</h3>
<button className="profile-modal-close" onClick={() => setShowConfig(false)}>×</button> <button className="profile-modal-close" onClick={() => setShowConfig(false)}>×</button>
</div> </div>
<form onSubmit={handleConfigSave} className="profile-modal-body"> <form onSubmit={handleConfigSave} className="profile-modal-body">
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Nombre</label> <label>{t('profile.firstName')}</label>
<input <input
type="text" type="text"
value={configFirstName} value={configFirstName}
onChange={(e) => setConfigFirstName(e.target.value)} onChange={(e) => setConfigFirstName(e.target.value)}
placeholder="Tu nombre" placeholder={t('profile.firstNamePlaceholder')}
disabled={configSaving} disabled={configSaving}
/> />
</div> </div>
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Apellidos</label> <label>{t('profile.lastName')}</label>
<input <input
type="text" type="text"
value={configLastName} value={configLastName}
onChange={(e) => setConfigLastName(e.target.value)} onChange={(e) => setConfigLastName(e.target.value)}
placeholder="Tus apellidos" placeholder={t('profile.lastNamePlaceholder')}
disabled={configSaving} disabled={configSaving}
/> />
</div> </div>
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Correo electrónico</label> <label>{t('profile.email')}</label>
<input <input
type="email" type="email"
value={configEmail} value={configEmail}
onChange={(e) => setConfigEmail(e.target.value)} onChange={(e) => setConfigEmail(e.target.value)}
placeholder="tu@email.com" placeholder={t('profile.emailPlaceholder')}
disabled={configSaving} disabled={configSaving}
/> />
</div> </div>
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Ciudad</label> <label>{t('profile.city')}</label>
<input <input
type="text" type="text"
value={configCity} value={configCity}
onChange={(e) => setConfigCity(e.target.value)} onChange={(e) => setConfigCity(e.target.value)}
placeholder="Tu ciudad" placeholder={t('profile.cityPlaceholder')}
disabled={configSaving} disabled={configSaving}
/> />
</div> </div>
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Dirección</label> <label>{t('profile.address')}</label>
<input <input
type="text" type="text"
value={configAddress} value={configAddress}
onChange={(e) => setConfigAddress(e.target.value)} onChange={(e) => setConfigAddress(e.target.value)}
placeholder="Calle Mayor 1, Madrid" placeholder={t('profile.addressPlaceholder')}
disabled={configSaving} disabled={configSaving}
/> />
</div> </div>
@@ -622,10 +642,10 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<div className="profile-modal-actions"> <div className="profile-modal-actions">
<button type="button" className="profile-btn-cancel" onClick={() => setShowConfig(false)} disabled={configSaving}> <button type="button" className="profile-btn-cancel" onClick={() => setShowConfig(false)} disabled={configSaving}>
Cancelar {t('profile.cancel')}
</button> </button>
<button type="submit" className="profile-btn-primary" disabled={configSaving}> <button type="submit" className="profile-btn-primary" disabled={configSaving}>
{configSaving ? 'Guardando...' : 'Guardar'} {configSaving ? t('profile.saving') : t('profile.save')}
</button> </button>
</div> </div>
</form> </form>
@@ -638,29 +658,29 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<div className="profile-modal-backdrop" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}> <div className="profile-modal-backdrop" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}>
<div className="profile-modal profile-modal-addresses" onClick={(e) => e.stopPropagation()}> <div className="profile-modal profile-modal-addresses" onClick={(e) => e.stopPropagation()}>
<div className="profile-modal-header"> <div className="profile-modal-header">
<h3>Mis Direcciones</h3> <h3>{t('profile.addressesTitle')}</h3>
<button className="profile-modal-close" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}>×</button> <button className="profile-modal-close" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}>×</button>
</div> </div>
<div className="profile-modal-body"> <div className="profile-modal-body">
{showAddressForm && ( {showAddressForm && (
<form onSubmit={handleAddressSave} className="profile-address-form"> <form onSubmit={handleAddressSave} className="profile-address-form">
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Dirección</label> <label>{t('profile.addressLabel')}</label>
<input <input
type="text" type="text"
value={formAddress} value={formAddress}
onChange={(e) => setFormAddress(e.target.value)} onChange={(e) => setFormAddress(e.target.value)}
placeholder="Calle Mayor 1, Madrid" placeholder={t('profile.addressPlaceholder')}
disabled={formSaving} disabled={formSaving}
/> />
</div> </div>
<div className="profile-modal-field"> <div className="profile-modal-field">
<label>Etiqueta (opcional)</label> <label>{t('profile.addressOptional')}</label>
<input <input
type="text" type="text"
value={formLabel} value={formLabel}
onChange={(e) => setFormLabel(e.target.value)} onChange={(e) => setFormLabel(e.target.value)}
placeholder="Ej: Casa, Trabajo, Segunda residencia" placeholder={t('profile.addressLabelPlaceholder')}
disabled={formSaving} disabled={formSaving}
/> />
</div> </div>
@@ -671,15 +691,15 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
onChange={(e) => setFormDefault(e.target.checked)} onChange={(e) => setFormDefault(e.target.checked)}
disabled={formSaving} disabled={formSaving}
/> />
<span>Dirección predeterminada</span> <span>{t('profile.defaultAddress')}</span>
</label> </label>
{formError && <p className="profile-feedback profile-feedback--err">{formError}</p>} {formError && <p className="profile-feedback profile-feedback--err">{formError}</p>}
<div className="profile-modal-actions"> <div className="profile-modal-actions">
<button type="button" className="profile-btn-cancel" onClick={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}> <button type="button" className="profile-btn-cancel" onClick={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}>
Cancelar {t('profile.cancel')}
</button> </button>
<button type="submit" className="profile-btn-primary" disabled={formSaving}> <button type="submit" className="profile-btn-primary" disabled={formSaving}>
{formSaving ? 'Guardando...' : editingAddressId ? 'Actualizar' : 'Añadir'} {formSaving ? t('profile.saving') : editingAddressId ? t('profile.update') : t('profile.add')}
</button> </button>
</div> </div>
</form> </form>
@@ -687,15 +707,15 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
{!showAddressForm && ( {!showAddressForm && (
<> <>
{addressesLoading ? ( {addressesLoading ? (
<p className="profile-section-sub">Cargando direcciones...</p> <p className="profile-section-sub">{t('profile.loadingAddresses')}</p>
) : ( ) : (
<div className="profile-address-list"> <div className="profile-address-list">
{currentUser?.address && ( {currentUser?.address && (
<div className="profile-address-item profile-address-item--default"> <div className="profile-address-item profile-address-item--default">
<div className="profile-address-item-info"> <div className="profile-address-item-info">
<span className="profile-address-label">Dirección principal</span> <span className="profile-address-label">{t('profile.mainAddress')}</span>
<span className="profile-address-text">{currentUser.address}</span> <span className="profile-address-text">{currentUser.address}</span>
<span className="profile-address-badge">Predeterminada</span> <span className="profile-address-badge">{t('profile.default')}</span>
</div> </div>
</div> </div>
)} )}
@@ -705,16 +725,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
{addr.label && <span className="profile-address-label">{addr.label}</span>} {addr.label && <span className="profile-address-label">{addr.label}</span>}
<span className="profile-address-text">{addr.address}</span> <span className="profile-address-text">{addr.address}</span>
<button className="profile-address-set-default" onClick={() => handleSetDefault(addr.id)}> <button className="profile-address-set-default" onClick={() => handleSetDefault(addr.id)}>
Establecer como predeterminada {t('profile.setDefault')}
</button> </button>
</div> </div>
<div className="profile-address-item-actions"> <div className="profile-address-item-actions">
<button className="profile-address-btn-icon" onClick={() => openEditAddressForm(addr)} title="Editar"> <button className="profile-address-btn-icon" onClick={() => openEditAddressForm(addr)} title={t('profile.edit')}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /> <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</svg> </svg>
</button> </button>
<button className="profile-address-btn-icon profile-address-btn-icon--delete" onClick={() => handleDeleteAddress(addr.id)} title="Eliminar"> <button className="profile-address-btn-icon profile-address-btn-icon--delete" onClick={() => handleDeleteAddress(addr.id)} title={t('profile.delete')}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg> </svg>
@@ -728,7 +748,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg> </svg>
<span>Añadir más</span> <span>{t('profile.addMore')}</span>
</button> </button>
</> </>
)} )}
@@ -742,16 +762,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
<div className="profile-modal-backdrop" onClick={() => setShowTheme(false)}> <div className="profile-modal-backdrop" onClick={() => setShowTheme(false)}>
<div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}> <div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}>
<div className="profile-modal-header"> <div className="profile-modal-header">
<h3>Tema de visualización</h3> <h3>{t('profile.themeTitle')}</h3>
<button className="profile-modal-close" onClick={() => setShowTheme(false)}>×</button> <button className="profile-modal-close" onClick={() => setShowTheme(false)}>×</button>
</div> </div>
<div className="profile-modal-body"> <div className="profile-modal-body">
<p className="profile-section-sub">Elige cómo se ve la aplicación. En modo automático, se adapta al tema de tu dispositivo.</p> <p className="profile-section-sub">{t('profile.themeDescription')}</p>
<div className="profile-theme-options"> <div className="profile-theme-options">
{[ {[
{ value: 'auto', label: 'Automático', desc: 'Seguir sistema', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' }, { value: 'auto', label: t('profile.themeAuto'), desc: t('profile.themeAutoDesc'), icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
{ value: 'light', label: 'Claro', desc: 'Siempre claro', icon: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0 .39-.39.39-1.03 0-1.42l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06z' }, { value: 'light', label: t('profile.themeLight'), desc: t('profile.themeLightDesc'), icon: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0 .39-.39.39-1.03 0-1.42l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06z' },
{ value: 'dark', label: 'Oscuro', desc: 'Siempre oscuro', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' }, { value: 'dark', label: t('profile.themeDark'), desc: t('profile.themeDarkDesc'), icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
].map(({ value, label, desc, icon }) => ( ].map(({ value, label, desc, icon }) => (
<button <button
key={value} key={value}
@@ -774,6 +794,41 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
</div> </div>
</div> </div>
)} )}
{/* Language Modal */}
{showLanguage && (
<div className="profile-modal-backdrop" onClick={() => setShowLanguage(false)}>
<div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}>
<div className="profile-modal-header">
<h3>{t('profile.languageTitle')}</h3>
<button className="profile-modal-close" onClick={() => setShowLanguage(false)}>×</button>
</div>
<div className="profile-modal-body">
<div className="profile-theme-options">
{[
{ value: 'es', label: t('profile.languageSpanish'), icon: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z' },
{ value: 'ca', label: t('profile.languageCatalan'), icon: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z' },
].map(({ value, label, icon }) => (
<button
key={value}
type="button"
className={`profile-theme-btn ${lang === value ? 'profile-theme-btn--active' : ''}`}
onClick={() => {
setLang(value);
setShowLanguage(false);
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d={icon} />
</svg>
<span className="profile-theme-btn-label">{label}</span>
</button>
))}
</div>
</div>
</div>
</div>
)}
</div> </div>
); );
} }
apps/frontend/src/views/ScannerView.jsx
+36 -34
View File
@@ -1,4 +1,5 @@
import React, { useState, useCallback, useRef } from 'react'; import React, { useState, useCallback, useRef } from 'react';
import { useTranslation } from '../i18n';
import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning'; import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning';
import { Capacitor } from '@capacitor/core'; import { Capacitor } from '@capacitor/core';
import { BrowserMultiFormatReader } from '@zxing/browser'; import { BrowserMultiFormatReader } from '@zxing/browser';
@@ -25,6 +26,7 @@ function playBeep() {
} }
function ScannerView({ onClose, onSelectMedicine }) { function ScannerView({ onClose, onSelectMedicine }) {
const { t } = useTranslation();
const videoRef = useRef(null); const videoRef = useRef(null);
const streamRef = useRef(null); const streamRef = useRef(null);
const rafRef = useRef(null); const rafRef = useRef(null);
@@ -78,7 +80,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
try { try {
const supported = await BarcodeScanner.isSupported(); const supported = await BarcodeScanner.isSupported();
if (!supported) { if (!supported) {
setErrorMsg('El escáner no está disponible en este dispositivo.'); setErrorMsg(t('scanner.scannerUnavailable'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -87,7 +89,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
if (permission.camera !== 'granted') { if (permission.camera !== 'granted') {
const request = await BarcodeScanner.requestPermissions(); const request = await BarcodeScanner.requestPermissions();
if (request.camera !== 'granted') { if (request.camera !== 'granted') {
setErrorMsg('Permiso de cámara denegado. Actívalo en ajustes o introduce el código CIP manualmente.'); setErrorMsg(t('scanner.cameraPermissionDenied'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -104,7 +106,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
const rawValue = barcode?.rawValue; const rawValue = barcode?.rawValue;
if (!rawValue || !CIP_REGEX.test(rawValue)) { if (!rawValue || !CIP_REGEX.test(rawValue)) {
setErrorMsg('Código de barras inválido. Intenta de nuevo o introduce el CIP manualmente.'); setErrorMsg(t('scanner.invalidBarcode'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -118,7 +120,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
setPhase('idle'); setPhase('idle');
return; return;
} }
setErrorMsg(`Error al escanear: ${err.message || 'Error desconocido'}`); setErrorMsg(`${t('scanner.scanError')} ${err.message || t('scanner.unknownError')}`);
setPhase('error'); setPhase('error');
} }
} }
@@ -128,7 +130,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
console.log('[Scanner] Iniciando escaneo web...'); console.log('[Scanner] Iniciando escaneo web...');
try { try {
if (!navigator.mediaDevices?.getUserMedia) { if (!navigator.mediaDevices?.getUserMedia) {
setErrorMsg('Cámara no disponible en este navegador.'); setErrorMsg(t('scanner.cameraNotAvailable'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -206,11 +208,11 @@ function ScannerView({ onClose, onSelectMedicine }) {
console.error('[Scanner] Error general:', err); console.error('[Scanner] Error general:', err);
stopCamera(); stopCamera();
if (err.name === 'NotAllowedError') { if (err.name === 'NotAllowedError') {
setErrorMsg('Permiso de cámara denegado. Permite el acceso e intenta de nuevo.'); setErrorMsg(t('scanner.cameraPermissionWeb'));
} else if (err.name === 'NotFoundError') { } else if (err.name === 'NotFoundError') {
setErrorMsg('No se detectó ninguna cámara. Introduce el código CIP manualmente.'); setErrorMsg(t('scanner.noCamera'));
} else { } else {
setErrorMsg(`Error de cámara: ${err.message || 'Error desconocido'}`); setErrorMsg(`${t('scanner.cameraError')} ${err.message || t('scanner.unknownError')}`);
} }
setPhase('error'); setPhase('error');
} }
@@ -228,12 +230,12 @@ function ScannerView({ onClose, onSelectMedicine }) {
e.preventDefault(); e.preventDefault();
const cip = manualCip.trim(); const cip = manualCip.trim();
if (!cip) { if (!cip) {
setErrorMsg('Introduce un código CIP.'); setErrorMsg(t('scanner.enterCIPError'));
setPhase('error'); setPhase('error');
return; return;
} }
if (!CIP_REGEX.test(cip)) { if (!CIP_REGEX.test(cip)) {
setErrorMsg('Formato CIP inválido. Debe tener 16 caracteres alfanuméricos.'); setErrorMsg(t('scanner.invalidCIP'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -268,14 +270,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
const data = await ocrRes.json(); const data = await ocrRes.json();
if (!ocrRes.ok) { if (!ocrRes.ok) {
setErrorMsg(data.error || 'No se pudo leer la imagen. Intenta con otra foto.'); setErrorMsg(data.error || t('scanner.imageReadError'));
setPhase('error'); setPhase('error');
return; return;
} }
const cip = data.cip; const cip = data.cip;
if (!CIP_REGEX.test(cip)) { if (!CIP_REGEX.test(cip)) {
setErrorMsg(`CIP detectado "${cip}" no tiene formato válido. Introduce el código manualmente.`); setErrorMsg(t('scanner.invalidCIPDetected'));
setPhase('error'); setPhase('error');
return; return;
} }
@@ -286,7 +288,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
setPhase('prescriptions'); setPhase('prescriptions');
fetchPrescriptions(cip); fetchPrescriptions(cip);
} catch (err) { } catch (err) {
setErrorMsg(`Error al procesar la imagen: ${err.message || 'Error desconocido'}`); setErrorMsg(`${t('scanner.imageProcessError')} ${err.message || t('scanner.unknownError')}`);
setPhase('error'); setPhase('error');
} finally { } finally {
setOcrLoading(false); setOcrLoading(false);
@@ -330,8 +332,8 @@ function ScannerView({ onClose, onSelectMedicine }) {
<path d="M7 8v8M11 8v8M15 8v8M19 8v8" /> <path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
</svg> </svg>
</div> </div>
<h2 className="scanner-heading">Escanear TSI</h2> <h2 className="scanner-heading">{t('scanner.title')}</h2>
<p className="scanner-desc">Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas</p> <p className="scanner-desc">{t('scanner.description')}</p>
</div> </div>
{phase !== 'prescriptions' && ( {phase !== 'prescriptions' && (
@@ -343,7 +345,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
</svg> </svg>
<p className="scan-error-text">{errorMsg}</p> <p className="scan-error-text">{errorMsg}</p>
<button className="scan-btn scan-btn--outline" onClick={() => { setErrorMsg(''); setPhase('idle'); }}> <button className="scan-btn scan-btn--outline" onClick={() => { setErrorMsg(''); setPhase('idle'); }}>
Intentar de nuevo {t('scanner.tryAgain')}
</button> </button>
</div> </div>
)} )}
@@ -355,18 +357,18 @@ function ScannerView({ onClose, onSelectMedicine }) {
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /> <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
<circle cx="12" cy="13" r="4" /> <circle cx="12" cy="13" r="4" />
</svg> </svg>
Abrir cámara {t('scanner.openCamera')}
</button> </button>
<div className="upload-section"> <div className="upload-section">
<label className="upload-label">O sube una foto de tu TSI</label> <label className="upload-label">{t('scanner.orUploadPhoto')}</label>
<div className="upload-row"> <div className="upload-row">
<button className="upload-option" onClick={() => cameraInputRef.current?.click()}> <button className="upload-option" onClick={() => cameraInputRef.current?.click()}>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /> <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
<circle cx="12" cy="13" r="4" /> <circle cx="12" cy="13" r="4" />
</svg> </svg>
<span>Hacer foto</span> <span>{t('scanner.takePhoto')}</span>
</button> </button>
<button className="upload-option" onClick={() => galleryInputRef.current?.click()}> <button className="upload-option" onClick={() => galleryInputRef.current?.click()}>
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -374,7 +376,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
<circle cx="8.5" cy="8.5" r="1.5" /> <circle cx="8.5" cy="8.5" r="1.5" />
<polyline points="21 15 16 10 5 21" /> <polyline points="21 15 16 10 5 21" />
</svg> </svg>
<span>Subir de galería</span> <span>{t('scanner.uploadFromGallery')}</span>
</button> </button>
</div> </div>
<input <input
@@ -405,14 +407,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
<div className="corner bl" /> <div className="corner bl" />
<div className="corner br" /> <div className="corner br" />
</div> </div>
<p className="scanner-hint">Apunta al código de barras</p> <p className="scanner-hint">{t('scanner.scanning')}</p>
</div> </div>
)} )}
{phase === 'scanning' && isNative && ( {phase === 'scanning' && isNative && (
<div className="scanning-active"> <div className="scanning-active">
<div className="scanner-spinner" /> <div className="scanner-spinner" />
<p>Abriendo cámara…</p> <p>{t('scanner.openingCamera')}</p>
</div> </div>
)} )}
@@ -424,7 +426,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
{ocrLoading ? ( {ocrLoading ? (
<div className="scanning-active"> <div className="scanning-active">
<div className="scanner-spinner" /> <div className="scanner-spinner" />
<p>Procesando imagen…</p> <p>{t('scanner.processingImage')}</p>
</div> </div>
) : ( ) : (
<div className="photo-preview-actions"> <div className="photo-preview-actions">
@@ -434,14 +436,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
<line x1="9" y1="20" x2="15" y2="20" /> <line x1="9" y1="20" x2="15" y2="20" />
<line x1="12" y1="4" x2="12" y2="20" /> <line x1="12" y1="4" x2="12" y2="20" />
</svg> </svg>
Escanear imagen {t('scanner.scanImage')}
</button> </button>
<button className="scan-btn scan-btn--ghost" onClick={handlePhotoDiscard}> <button className="scan-btn scan-btn--ghost" onClick={handlePhotoDiscard}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="18" y1="6" x2="6" y2="18" /> <line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
Descartar {t('scanner.discard')}
</button> </button>
</div> </div>
)} )}
@@ -449,20 +451,20 @@ function ScannerView({ onClose, onSelectMedicine }) {
)} )}
<form className="cip-form" onSubmit={handleManualSubmit}> <form className="cip-form" onSubmit={handleManualSubmit}>
<label className="cip-label" htmlFor="cip-input">O introduce el código CIP manualmente</label> <label className="cip-label" htmlFor="cip-input">{t('scanner.enterCIP')}</label>
<div className="cip-row"> <div className="cip-row">
<input <input
id="cip-input" id="cip-input"
className="cip-input" className="cip-input"
type="text" type="text"
placeholder="Código CIP de 16 dígitos" placeholder={t('scanner.cipPlaceholder')}
value={manualCip} value={manualCip}
onChange={(e) => setManualCip(e.target.value)} onChange={(e) => setManualCip(e.target.value)}
maxLength={16} maxLength={16}
autoComplete="off" autoComplete="off"
spellCheck={false} spellCheck={false}
/> />
<button type="submit" className="scan-btn scan-btn--primary">Buscar</button> <button type="submit" className="scan-btn scan-btn--primary">{t('scanner.search')}</button>
</div> </div>
</form> </form>
</> </>
@@ -475,23 +477,23 @@ function ScannerView({ onClose, onSelectMedicine }) {
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm3 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" /> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm3 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
</svg> </svg>
<div> <div>
<p className="cip-badge-label">TSI Escaneada</p> <p className="cip-badge-label">{t('scanner.tsiScanned')}</p>
<p className="cip-badge-value">{scannedCip}</p> <p className="cip-badge-value">{scannedCip}</p>
</div> </div>
</div> </div>
<h3 className="rx-title">Recetas Activas</h3> <h3 className="rx-title">{t('scanner.activePrescriptions')}</h3>
<p className="rx-subtitle">Toca un medicamento para ver disponibilidad en farmacias cercanas.</p> <p className="rx-subtitle">{t('scanner.tapToFind')}</p>
{loadingPrescriptions && ( {loadingPrescriptions && (
<div className="rx-loading"> <div className="rx-loading">
<div className="scanner-spinner" /> <div className="scanner-spinner" />
<p>Cargando recetas…</p> <p>{t('scanner.loadingPrescriptions')}</p>
</div> </div>
)} )}
{!loadingPrescriptions && prescriptions.length === 0 && ( {!loadingPrescriptions && prescriptions.length === 0 && (
<p className="rx-empty">No se encontraron recetas activas para esta tarjeta.</p> <p className="rx-empty">{t('scanner.noPrescriptions')}</p>
)} )}
<ul className="rx-list"> <ul className="rx-list">
@@ -523,7 +525,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
<polyline points="1 4 1 10 7 10" /> <polyline points="1 4 1 10 7 10" />
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /> <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
</svg> </svg>
Escanear otra tarjeta {t('scanner.scanAnother')}
</button> </button>
</div> </div>
)} )}
apps/frontend/src/views/SearchView.jsx
+24 -22
View File
@@ -5,6 +5,7 @@ import ProductResults from '../components/ProductResults';
import PharmacyList from '../components/PharmacyList'; import PharmacyList from '../components/PharmacyList';
import PharmacyMap from '../components/PharmacyMap'; import PharmacyMap from '../components/PharmacyMap';
import { haversineKm, getUserPosition, hasCachedPosition } from '../utils/geo'; import { haversineKm, getUserPosition, hasCachedPosition } from '../utils/geo';
import { useTranslation } from '../i18n';
import './SearchView.css'; import './SearchView.css';
const suggestions = [ const suggestions = [
@@ -15,6 +16,7 @@ const suggestions = [
]; ];
function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigateToProduct }) { function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigateToProduct }) {
const { t } = useTranslation();
const [searchQuery, setSearchQuery] = useState(initialQuery); const [searchQuery, setSearchQuery] = useState(initialQuery);
const [medicines, setMedicines] = useState([]); const [medicines, setMedicines] = useState([]);
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
@@ -193,11 +195,11 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
console.error('Error saving search history:', err); console.error('Error saving search history:', err);
} }
} catch (err) { } catch (err) {
let msg = 'No se pudo obtener tu ubicación'; let msg = t('search.locationError');
if (err && typeof err.code === 'number') { if (err && typeof err.code === 'number') {
if (err.code === 1) msg = 'Permiso de ubicación denegado. Permite el acceso a la ubicación en tu navegador.'; if (err.code === 1) msg = t('search.locationDenied');
else if (err.code === 2) msg = 'Ubicación no disponible. Verifica que el GPS esté activado.'; else if (err.code === 2) msg = t('search.locationUnavailable');
else if (err.code === 3) msg = 'La ubicación tardó demasiado. Intenta de nuevo o verifica tu conexión.'; else if (err.code === 3) msg = t('search.locationTimeout');
} }
setLocationError(msg); setLocationError(msg);
} finally { } finally {
@@ -223,15 +225,15 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
<SearchBar <SearchBar
value={searchQuery} value={searchQuery}
onChange={setSearchQuery} onChange={setSearchQuery}
placeholder="Escriba el nombre del medicamento" placeholder={t('search.placeholder')}
/> />
{loading && <div className="loading">Buscando...</div>} {loading && <div className="loading">{t('search.searching')}</div>}
{!searchQuery && !selectedMedicine && ( {!searchQuery && !selectedMedicine && (
<> <>
<section className="suggestions-section"> <section className="suggestions-section">
<h2 className="section-title">Sugerencias</h2> <h2 className="section-title">{t('search.suggestions')}</h2>
<div className="suggestions-grid"> <div className="suggestions-grid">
{suggestions.map((s, i) => ( {suggestions.map((s, i) => (
<button <button
@@ -252,7 +254,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
{currentUser && recentSearches.length > 0 && ( {currentUser && recentSearches.length > 0 && (
<section className="recent-section"> <section className="recent-section">
<h2 className="section-title">Resultados Recientes</h2> <h2 className="section-title">{t('search.recentResults')}</h2>
<div className="recent-list"> <div className="recent-list">
{recentSearches.map((r) => ( {recentSearches.map((r) => (
<div <div
@@ -285,7 +287,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
<circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" /> <polyline points="12 6 12 12 16 14" />
</svg> </svg>
Encontrar cerca {t('search.findNearby')}
</button> </button>
</div> </div>
))} ))}
@@ -299,7 +301,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
<> <>
<div className="results-summary"> <div className="results-summary">
{(medicines.length + products.length) > 0 && ( {(medicines.length + products.length) > 0 && (
<span>{medicines.length + products.length} resultados encontrados</span> <span>{medicines.length + products.length} {t('search.resultsFound')}</span>
)} )}
</div> </div>
@@ -318,7 +320,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
{products.length > 0 && ( {products.length > 0 && (
<div className="products-section"> <div className="products-section">
<h3 className="section-subtitle">Parafarmacia</h3> <h3 className="section-subtitle">{t('search.parapharmacy')}</h3>
<ProductResults <ProductResults
products={products} products={products}
onSelect={(p) => { onSelect={(p) => {
@@ -340,9 +342,9 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
<div className="medicine-info"> <div className="medicine-info">
<h2>{selectedMedicine.name}</h2> <h2>{selectedMedicine.name}</h2>
<div className="medicine-details"> <div className="medicine-details">
<span><strong>Ingrediente Activo:</strong> {selectedMedicine.active_ingredient}</span> <span><strong>{t('search.activeIngredient')}</strong> {selectedMedicine.active_ingredient}</span>
<span><strong>Dosis:</strong> {selectedMedicine.dosage}</span> <span><strong>{t('search.dosage')}</strong> {selectedMedicine.dosage}</span>
<span><strong>Forma:</strong> {selectedMedicine.form}</span> <span><strong>{t('search.form')}</strong> {selectedMedicine.form}</span>
</div> </div>
<button <button
className="back-button" className="back-button"
@@ -351,7 +353,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
setPharmacies([]); setPharmacies([]);
}} }}
> >
← Volver a búsqueda {t('search.backToSearch')}
</button> </button>
</div> </div>
@@ -363,24 +365,24 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
disabled={locating} disabled={locating}
> >
{locating {locating
? '📍 Localizando…' ? t('search.locating')
: sortByDistance : sortByDistance
? '📍 Ordenado por distancia · Reset' ? t('search.sortedByDistance')
: hasSavedCoords : hasSavedCoords
? '📍 Ordenar por ubicación guardada' ? t('search.sortBySavedLocation')
: '📍 Ordenar por distancia'} : t('search.sortByDistance')}
</button> </button>
{sortByDistance && positionSource === 'profile' && ( {sortByDistance && positionSource === 'profile' && (
<span className="location-source">Usando tu dirección guardada</span> <span className="location-source">{t('search.usingSavedAddress')}</span>
)} )}
{sortByDistance && positionSource === 'cached' && ( {sortByDistance && positionSource === 'cached' && (
<span className="location-source">Usando ubicación reciente</span> <span className="location-source">{t('search.usingRecentLocation')}</span>
)} )}
{locationError && ( {locationError && (
<span className="location-error"> <span className="location-error">
{locationError} {locationError}
<button className="retry-location-btn" onClick={handleSortByDistance}> <button className="retry-location-btn" onClick={handleSortByDistance}>
Reintentar {t('search.retry')}
</button> </button>
</span> </span>
)} )}