estágios

app/Professor/Alunos/DetalhesAluno.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from '@expo/vector-icons';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { memo, useEffect, useState } from 'react';
 import {
-  SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
@@ -10,13 +9,22 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../../themecontext';
 import { supabase } from '../../lib/supabase';
 
 const DetalhesAlunos = memo(() => {
   const router = useRouter();
   const params = useLocalSearchParams();
+  const { isDarkMode } = useTheme();
+
+  const colors = {
+    background: isDarkMode ? '#121212' : '#f1f3f5',
+    card: isDarkMode ? '#1e1e1e' : '#ffffff',
+    text: isDarkMode ? '#ffffff' : '#000000',
+    label: isDarkMode ? '#aaaaaa' : '#6c757d',
+  };
 
-  // alunoId é o parâmetro que vem da rota
   const alunoId =
     typeof params.alunoId === 'string'
       ? params.alunoId
@@ -29,7 +37,6 @@ const DetalhesAlunos = memo(() => {
 
   useEffect(() => {
     if (!alunoId) {
-      console.log('alunoId não recebido');
       setLoading(false);
       return;
     }
@@ -38,10 +45,9 @@ const DetalhesAlunos = memo(() => {
 
   const fetchAluno = async () => {
     try {
-      console.log('Buscando aluno ID:', alunoId);
       setLoading(true);
 
-      // 1️⃣ Buscar aluno na tabela 'alunos' (para turma_curso e n_escola)
+      // 1️⃣ Buscar dados do aluno
       const { data: alunoData, error: alunoError } = await supabase
         .from('alunos')
         .select('id, nome, n_escola, turma_curso')
@@ -55,105 +61,96 @@ const DetalhesAlunos = memo(() => {
         return;
       }
 
-      // 2️⃣ Buscar perfil na tabela 'profiles' usando n_escola
-      const { data: perfilData, error: perfilError } = await supabase
+      // 2️⃣ Buscar dados do profile como array
+      const { data: perfilDataArray, error: perfilError } = await supabase
         .from('profiles')
         .select('email, telefone, residencia, idade')
-        .eq('n_escola', alunoData.n_escola)
-        .maybeSingle(); // evita erro se não existir registro
+        .eq('n_escola', alunoData.n_escola);
 
-      if (perfilError) {
-        console.log('Erro ao buscar perfil:', perfilError);
-      }
+      if (perfilError) console.log('Erro ao buscar profile:', perfilError);
 
-      // 3️⃣ Combinar dados de aluno e perfil
+      // Pega o primeiro registro ou undefined
+      const perfilData = perfilDataArray?.[0];
+
+      // 3️⃣ Combinar dados
       setAluno({
-        ...alunoData,
+        id: alunoData.id,
+        nome: alunoData.nome,
+        n_escola: alunoData.n_escola,
+        turma_curso: alunoData.turma_curso,
         email: perfilData?.email ?? '-',
         telefone: perfilData?.telefone ?? '-',
         residencia: perfilData?.residencia ?? '-',
-        idade: perfilData?.idade?.toString() ?? '-', // converte idade para string
+        idade: perfilData?.idade?.toString() ?? '-',
       });
 
       setLoading(false);
     } catch (err) {
-      console.error('Erro inesperado:', err);
+      console.log('Erro inesperado:', err);
       setLoading(false);
     }
   };
 
   if (loading) {
     return (
-      <SafeAreaView style={styles.safe}>
-        <Text style={styles.center}>A carregar...</Text>
+      <SafeAreaView style={[styles.safe, { backgroundColor: colors.background }]}>
+        <Text style={[styles.center, { color: colors.text }]}>A carregar...</Text>
       </SafeAreaView>
     );
   }
 
   if (!aluno) {
     return (
-      <SafeAreaView style={styles.safe}>
-        <Text style={styles.center}>Aluno não encontrado</Text>
+      <SafeAreaView style={[styles.safe, { backgroundColor: colors.background }]}>
+        <Text style={[styles.center, { color: colors.text }]}>Aluno não encontrado</Text>
       </SafeAreaView>
     );
   }
 
   return (
-    <SafeAreaView style={styles.safe}>
-      <StatusBar barStyle="dark-content" />
+    <SafeAreaView style={[styles.safe, { backgroundColor: colors.background }]} edges={['top', 'bottom']}>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} backgroundColor={colors.background} />
 
       <View style={styles.header}>
         <TouchableOpacity onPress={() => router.back()}>
-          <Ionicons name="arrow-back" size={24} />
+          <Ionicons name="arrow-back" size={24} color={colors.text} />
         </TouchableOpacity>
-        <Text style={styles.titulo}>{aluno.nome}</Text>
+
+        <Text style={[styles.titulo, { color: colors.text }]}>{aluno.nome}</Text>
+
         <View style={{ width: 24 }} />
       </View>
 
       <ScrollView contentContainerStyle={styles.container}>
-        <View style={styles.card}>
-          <Text style={styles.label}>Número Escola</Text>
-          <Text style={styles.valor}>{aluno.n_escola}</Text>
-
-          <Text style={styles.label}>Turma</Text>
-          <Text style={styles.valor}>{aluno.turma_curso}</Text>
-
-          <Text style={styles.label}>Email</Text>
-          <Text style={styles.valor}>{aluno.email}</Text>
-
-          <Text style={styles.label}>Telefone</Text>
-          <Text style={styles.valor}>{aluno.telefone}</Text>
-
-          <Text style={styles.label}>Residência</Text>
-          <Text style={styles.valor}>{aluno.residencia}</Text>
-
-          <Text style={styles.label}>Idade</Text>
-          <Text style={styles.valor}>{aluno.idade}</Text>
+        <View style={[styles.card, { backgroundColor: colors.card }]}>
+          {renderCampo('Número Escola', aluno.n_escola, colors)}
+          {renderCampo('Turma', aluno.turma_curso, colors)}
+          {renderCampo('Email', aluno.email, colors)}
+          {renderCampo('Telefone', aluno.telefone, colors)}
+          {renderCampo('Residência', aluno.residencia, colors)}
+          {renderCampo('Idade', aluno.idade, colors)}
         </View>
       </ScrollView>
     </SafeAreaView>
   );
 });
 
+const renderCampo = (label: string, valor: string, colors: any) => (
+  <>
+    <Text style={[styles.label, { color: colors.label }]}>{label}</Text>
+    <Text style={[styles.valor, { color: colors.text }]}>{valor}</Text>
+  </>
+);
+
 export default DetalhesAlunos;
 
 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: '#f1f3f5' },
+  safe: { flex: 1 },
   center: { marginTop: 50, textAlign: 'center', fontSize: 16 },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-  },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingVertical: 12 },
   titulo: { fontSize: 20, fontWeight: 'bold' },
   container: { padding: 16 },
-  card: {
-    backgroundColor: '#fff',
-    padding: 16,
-    borderRadius: 12,
-    elevation: 2,
-  },
-  label: { fontSize: 12, color: '#6c757d', marginTop: 10 },
+  card: { padding: 16, borderRadius: 12, elevation: 2 },
+  label: { fontSize: 12, marginTop: 10 },
   valor: { fontSize: 16, fontWeight: '600' },
-});
+});