Environment fix for Android and UI preparations

2026-07-28 19:42:11 +02:00
parent 31de1c1526
commit 6ac78ea6a1
15 changed files with 447 additions and 317 deletions
@@ -0,0 +1,174 @@
+/**
+ * Pantalla de Configuración.
+ * Incluye: Configuración de usuario (idioma) y acceso a Configuración de fotos.
+ */
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Alert,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../navigation/types';
+import { COLORS, PrimaryButton, SectionTitle } from '../ui/components';
+import { useSession } from '../auth/session';
+
+type Nav = NativeStackNavigationProp<RootStackParamList>;
+
+export function SettingsScreen({ navigation }: NativeStackScreenProps<RootStackParamList, 'Settings'>) {
+  const { user } = useSession();
+  const [language, setLanguage] = useState<string>('en');
+
+  useEffect(() => {
+    // Cargar idioma guardado (en un futuro usar AsyncStorage)
+    // Por ahora, por defecto inglés
+    setLanguage('en');
+  }, []);
+
+  const handleLanguageChange = (lang: string) => {
+    setLanguage(lang);
+    // TODO: Guardar en AsyncStorage y aplicar cambio de idioma
+    Alert.alert('Idioma', `Idioma cambiado a ${lang === 'en' ? 'Inglés' : 'Español'}. Reinicia la app para aplicar.`);
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.body}>
+      <SectionTitle>Configuración de usuario</SectionTitle>
+
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.label}>Idioma de la app</Text>
+        </View>
+        <View style={styles.languageSelector}>
+          <TouchableOpacity
+            style={[styles.langBtn, language === 'en' && styles.langBtnActive]}
+            onPress={() => handleLanguageChange('en')}
+          >
+            <Text style={[styles.langBtnText, language === 'en' && styles.langBtnTextActive]}>English</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.langBtn, language === 'es' && styles.langBtnActive]}
+            onPress={() => handleLanguageChange('es')}
+          >
+            <Text style={[styles.langBtnText, language === 'es' && styles.langBtnTextActive]}>Español</Text>
+          </TouchableOpacity>
+        </View>
+        <Text style={styles.hint}>Por defecto: English</Text>
+      </View>
+
+      <View style={styles.divider} />
+
+      <SectionTitle>Configuración de fotos</SectionTitle>
+
+      <View style={styles.card}>
+        <TouchableOpacity
+          style={styles.settingsRow}
+          onPress={() => navigation.navigate('PhotoSettings')}
+        >
+          <View style={styles.settingsRowContent}>
+            <Text style={styles.settingsIcon}>📷</Text>
+            <Text style={styles.settingsLabel}>Configuración del pie de página</Text>
+          </View>
+          <Text style={styles.chevron}>›</Text>
+        </TouchableOpacity>
+        <Text style={styles.hint}>Personaliza logo, campos (proyecto, fecha, coordenadas) y campos personalizados</Text>
+      </View>
+
+      <View style={styles.divider} />
+
+      <SectionTitle>Cuenta</SectionTitle>
+
+      <View style={styles.card}>
+        <View style={styles.accountRow}>
+          <Text style={styles.accountLabel}>Usuario actual</Text>
+          <Text style={styles.accountValue}>{user?.name ?? 'Desconocido'}</Text>
+        </View>
+        <View style={styles.accountRow}>
+          <Text style={styles.accountLabel}>Email</Text>
+          <Text style={styles.accountValue}>{user?.email ?? ''}</Text>
+        </View>
+      </View>
+
+      <View style={styles.divider} />
+
+      <SectionTitle>Acerca de</SectionTitle>
+
+      <View style={styles.card}>
+        <View style={styles.accountRow}>
+          <Text style={styles.accountLabel}>Versión</Text>
+          <Text style={styles.accountValue}>1.0.0</Text>
+        </View>
+        <View style={styles.accountRow}>
+          <Text style={styles.accountLabel}>Build</Text>
+          <Text style={styles.accountValue}>Avante Móvil</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: { padding: 16, gap: 16 },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+  },
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  label: { fontSize: 15, fontWeight: '600', color: '#111' },
+  hint: { fontSize: 12, color: COLORS.muted, marginTop: 4 },
+  languageSelector: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 8,
+  },
+  langBtn: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+  },
+  langBtnActive: {
+    backgroundColor: COLORS.primary,
+    borderColor: COLORS.primary,
+  },
+  langBtnText: { fontSize: 14, color: COLORS.muted },
+  langBtnTextActive: { color: '#fff', fontWeight: '600' },
+  divider: { height: 1, backgroundColor: COLORS.border, marginVertical: 8 },
+  settingsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 4,
+  },
+  settingsRowContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  settingsIcon: { fontSize: 20 },
+  settingsLabel: { fontSize: 15, fontWeight: '500', color: '#111' },
+  chevron: { fontSize: 20, color: COLORS.muted },
+  accountRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: COLORS.border,
+  },
+  accountLabel: { fontSize: 14, color: COLORS.muted },
+  accountValue: { fontSize: 14, fontWeight: '600', color: '#111', textAlign: 'right', flex: 1, marginLeft: 16 },
+});