230413/Estagios_Pap_Final
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

atualizacao2

Browse Source
This commit is contained in:
Ricardo Gomes
2026-04-23 16:10:12 +01:00
parent 8bf4fac5ed
commit 0b544677a8
4 changed files with 140 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
app/Aluno/perfil.tsx
View File

@@ -5,9 +5,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
import {
ActivityIndicator,
Animated,
Dimensions,
KeyboardAvoidingView,
Platform,
ScrollView,
StatusBar,
StyleSheet,
Text,
@@ -19,8 +19,6 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTheme } from '../../themecontext';
import { supabase } from '../lib/supabase';
const { width } = Dimensions.get('window');
export default function PerfilAluno() {
const { isDarkMode } = useTheme();
const router = useRouter();
@@ -63,7 +61,6 @@ export default function PerfilAluno() {
]).start(() => setAlertConfig(null));
}, []);
// --- LÓGICA DE FORMATAÇÃO ---
const aplicarMascaraData = (text: string) => {
const cleaned = text.replace(/\D/g, '');
let formatted = cleaned;
@@ -72,46 +69,38 @@ export default function PerfilAluno() {
return formatted;
};
// --- CARREGAMENTO DE DADOS ---
// --- CARREGAMENTO DE DADOS COM JOIN DE HORÁRIOS ---
const buscarDados = async () => {
try {
setLoading(true);
const { data: { user } } = await supabase.auth.getUser();
if (!user) return;
// Consulta à Tabela Profiles
const { data: pData, error: pError } = await supabase
.from('profiles')
.select('*')
.eq('id', user.id)
.single();
const { data: pData } = await supabase.from('profiles').select('*').eq('id', user.id).single();
if (pError) throw pError;
// Consulta à Tabela Alunos
let aData = {};
if (pData.n_escola) {
const { data: alunoRes } = await supabase
.from('alunos')
.select('ano, n_escola, nome, turma_curso')
.eq('n_escola', pData.n_escola)
.single();
if (pData?.n_escola) {
const { data: alunoRes } = await supabase.from('alunos').select('*').eq('n_escola', pData.n_escola).single();
if (alunoRes) aData = alunoRes;
}
// Consulta à Tabela Estágios
// Join com a tabela horarios_estagio
const { data: eData } = await supabase
.from('estagios')
.select('*, empresas(nome, tutor_nome)')
.select(`
*,
empresas(nome, tutor_nome),
horarios_estagio(periodo, hora_inicio, hora_fim)
`)
.eq('aluno_id', user.id)
.single();
.maybeSingle();
setPerfil({ ...pData, ...aData, email: user.email });
setEstagio(eData);
Animated.timing(fadeAnim, { toValue: 1, duration: 600, useNativeDriver: true }).start();
} catch (err) {
showAlert('Erro ao sincronizar com a base de dados.', 'error');
showAlert('Erro ao sincronizar dados.', 'error');
} finally {
setLoading(false);
}
@@ -131,38 +120,24 @@ export default function PerfilAluno() {
}).eq('id', perfil.id);
if (error) throw error;
setIsEditing(false);
showAlert('Perfil atualizado!', 'success');
showAlert('Perfil guardado!', 'success');
buscarDados();
} catch (e) {
showAlert('Falha ao guardar alterações.', 'error');
showAlert('Falha ao guardar.', 'error');
} finally {
setSaving(false);
}
};
if (loading) {
return (
<View style={[styles.centered, { backgroundColor: cores.fundo }]}>
<ActivityIndicator size="large" color={cores.azul} />
</View>
);
}
if (loading) return <View style={[styles.centered, { backgroundColor: cores.fundo }]}><ActivityIndicator size="large" color={cores.azul} /></View>;
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: cores.fundo }}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<KeyboardAvoidingView style={{ flex: 1, backgroundColor: cores.fundo }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
{alertConfig && (
<Animated.View style={[styles.alert, {
opacity: alertOpacity,
backgroundColor: alertConfig.type === 'error' ? cores.vermelho : cores.verde,
top: insets.top + 10
}]}>
<Animated.View style={[styles.alert, { opacity: alertOpacity, backgroundColor: alertConfig.type === 'error' ? cores.vermelho : cores.verde, top: insets.top + 10 }]}>
<Ionicons name="information-circle" size={20} color="#fff" />
<Text style={styles.alertText}>{alertConfig.msg}</Text>
</Animated.View>
@@ -170,168 +145,109 @@ export default function PerfilAluno() {
<SafeAreaView style={{ flex: 1 }} edges={['top']}>
<View style={styles.headerContainer}>
<TouchableOpacity
style={[styles.roundBtn, { backgroundColor: cores.card }]}
onPress={() => router.back()}
>
<TouchableOpacity style={[styles.roundBtn, { backgroundColor: cores.card }]} onPress={() => router.back()}>
<Ionicons name="arrow-back" size={22} color={cores.texto} />
</TouchableOpacity>
<Text style={[styles.headerTitle, { color: cores.texto }]}>Ficha de Aluno</Text>
<TouchableOpacity
style={[styles.roundBtn, { backgroundColor: isEditing ? cores.azul : cores.card }]}
onPress={() => isEditing ? salvarDados() : setIsEditing(true)}
disabled={saving}
>
{saving ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Ionicons name={isEditing ? "checkmark-sharp" : "create-outline"} size={22} color={isEditing ? "#fff" : cores.azul} />
)}
{saving ? <ActivityIndicator size="small" color="#fff" /> : <Ionicons name={isEditing ? "checkmark-sharp" : "create-outline"} size={22} color={isEditing ? "#fff" : cores.azul} />}
</TouchableOpacity>
</View>
<Animated.ScrollView
style={{ opacity: fadeAnim }}
contentContainerStyle={styles.scrollContainer}
showsVerticalScrollIndicator={false}
>
{/* HEADER PERFIL */}
<View style={styles.avatarSection}>
<View style={[styles.avatarFrame, { borderColor: cores.azulSuave }]}>
<View style={[styles.avatarCircle, { backgroundColor: cores.azul }]}>
<Text style={styles.avatarInitial}>{perfil?.nome?.charAt(0).toUpperCase()}</Text>
</View>
</View>
<Text style={[styles.profileName, { color: cores.texto }]}>{perfil?.nome}</Text>
<View style={[styles.badge, { backgroundColor: cores.azulSuave }]}>
<Text style={[styles.badgeText, { color: cores.azul }]}>
{perfil?.tipo?.toUpperCase()}
</Text>
</View>
</View>
{/* SECÇÃO ACADÉMICA (TABLE ALUNOS) */}
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Registo Escolar</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, shadowColor: cores.sombra }]}>
<View style={styles.inputRow}>
<View style={{ flex: 1, marginRight: 12 }}>
<PerfilInput label="Nº Escola" icon="id-card-outline" value={perfil?.n_escola?.toString()} editable={false} cores={cores} />
</View>
<View style={{ flex: 1 }}>
<PerfilInput label="Ano Letivo" icon="calendar-outline" value={perfil?.ano?.toString() + 'º Ano'} editable={false} cores={cores} />
</View>
</View>
<PerfilInput
label="Turma e Curso"
icon="school-outline"
value={perfil?.turma_curso}
editable={false}
cores={cores}
/>
</View>
{/* SECÇÃO PESSOAL (TABLE PROFILES) */}
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Dados de Contacto</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, shadowColor: cores.sombra }]}>
<PerfilInput label="Email" icon="mail-outline" value={perfil?.email} editable={false} cores={cores} />
<ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
<Animated.View style={{ opacity: fadeAnim }}>
<View style={styles.inputRow}>
<View style={{ flex: 0.8, marginRight: 12 }}>
<PerfilInput label="Idade" icon="time-outline" value={perfil?.idade?.toString()} editable={isEditing} onChangeText={(v:string) => setPerfil({...perfil, idade: v})} cores={cores} keyboardType="numeric" />
</View>
<View style={{ flex: 1.2 }}>
<PerfilInput label="Telemóvel" icon="call-outline" value={perfil?.telefone} editable={isEditing} onChangeText={(v:string) => setPerfil({...perfil, telefone: v})} cores={cores} keyboardType="phone-pad" maxLength={9} />
</View>
</View>
<PerfilInput
label="Data de Nascimento"
icon="gift-outline"
value={perfil?.data_nascimento}
editable={isEditing}
onChangeText={(v:string) => setPerfil({...perfil, data_nascimento: aplicarMascaraData(v)})}
cores={cores}
placeholder="DD-MM-AAAA"
/>
<PerfilInput
label="Localidade / Morada"
icon="location-outline"
value={perfil?.residencia}
editable={isEditing}
onChangeText={(v:string) => setPerfil({...perfil, residencia: v})}
cores={cores}
/>
</View>
{/* SECÇÃO ESTÁGIO (CORREÇÃO DE LAYOUT) */}
{estagio && (
<>
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Informação de Estágio</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, borderLeftWidth: 4, borderLeftColor: cores.azul, shadowColor: cores.sombra }]}>
<PerfilInput label="Entidade Acolhedora" icon="business-outline" value={estagio.empresas?.nome} editable={false} cores={cores} />
<View style={styles.inputRow}>
<View style={{ flex: 1, marginRight: 12 }}>
<PerfilInput label="Total Horas" icon="timer-outline" value={estagio.horas_totais?.toString() + 'h'} editable={false} cores={cores} />
</View>
<View style={{ flex: 2 }}>
<PerfilInput
label="Horário"
icon="watch-outline"
value={estagio.horario}
editable={false}
cores={cores}
multiline={true} // Evita que o texto seja cortado
/>
</View>
{/* CABEÇALHO */}
<View style={styles.avatarSection}>
<View style={[styles.avatarFrame, { borderColor: cores.azulSuave }]}>
<View style={[styles.avatarCircle, { backgroundColor: cores.azul }]}>
<Text style={styles.avatarInitial}>{perfil?.nome?.charAt(0).toUpperCase()}</Text>
</View>
{estagio.empresas?.tutor_nome && (
<PerfilInput label="Tutor na Empresa" icon="person-circle-outline" value={estagio.empresas.tutor_nome} editable={false} cores={cores} />
)}
</View>
</>
)}
{/* BOTÕES DE ACÇÃO */}
<View style={styles.footer}>
<TouchableOpacity
style={[styles.actionMenuItem, { backgroundColor: cores.card }]}
onPress={() => router.push('/Aluno/redefenirsenha')}
>
<View style={[styles.actionIcon, { backgroundColor: cores.azulSuave }]}>
<Ionicons name="key-outline" size={20} color={cores.azul} />
<Text style={[styles.profileName, { color: cores.texto }]}>{perfil?.nome}</Text>
<View style={[styles.badge, { backgroundColor: cores.azulSuave }]}>
<Text style={[styles.badgeText, { color: cores.azul }]}>{perfil?.tipo?.toUpperCase()}</Text>
</View>
<Text style={[styles.actionText, { color: cores.texto }]}>Alterar Credenciais</Text>
<Ionicons name="chevron-forward" size={18} color={cores.secundario} />
</TouchableOpacity>
</View>
<TouchableOpacity
style={[styles.actionMenuItem, { backgroundColor: cores.card, marginTop: 12 }]}
onPress={() => supabase.auth.signOut().then(() => router.replace('/'))}
>
<View style={[styles.actionIcon, { backgroundColor: cores.vermelhoSuave }]}>
<Ionicons name="log-out-outline" size={20} color={cores.vermelho} />
{/* DADOS ESCOLARES */}
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Registo Escolar</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, shadowColor: cores.sombra }]}>
<View style={styles.inputRow}>
<View style={{ flex: 1, marginRight: 12 }}><PerfilInput label="Nº Escola" icon="id-card-outline" value={perfil?.n_escola?.toString()} editable={false} cores={cores} /></View>
<View style={{ flex: 1 }}><PerfilInput label="Ano" icon="calendar-outline" value={perfil?.ano?.toString() + 'º Ano'} editable={false} cores={cores} /></View>
</View>
<Text style={[styles.actionText, { color: cores.vermelho }]}>Terminar Sessão</Text>
</TouchableOpacity>
<PerfilInput label="Turma e Curso" icon="school-outline" value={perfil?.turma_curso} editable={false} cores={cores} />
</View>
{isEditing && (
<TouchableOpacity style={styles.cancelLink} onPress={() => { setIsEditing(false); buscarDados(); }}>
<Text style={[styles.cancelLinkText, { color: cores.secundario }]}>Cancelar edições pendentes</Text>
</TouchableOpacity>
{/* DADOS PESSOAIS */}
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Contactos e Pessoal</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, shadowColor: cores.sombra }]}>
<PerfilInput label="Email" icon="mail-outline" value={perfil?.email} editable={false} cores={cores} />
<View style={styles.inputRow}>
<View style={{ flex: 0.8, marginRight: 12 }}><PerfilInput label="Idade" icon="time-outline" value={perfil?.idade?.toString()} editable={isEditing} onChangeText={(v:string) => setPerfil({...perfil, idade: v})} cores={cores} keyboardType="numeric" /></View>
<View style={{ flex: 1.2 }}><PerfilInput label="Telemóvel" icon="call-outline" value={perfil?.telefone} editable={isEditing} onChangeText={(v:string) => setPerfil({...perfil, telefone: v})} cores={cores} keyboardType="phone-pad" maxLength={9} /></View>
</View>
<PerfilInput label="Nascimento" icon="gift-outline" value={perfil?.data_nascimento} editable={isEditing} onChangeText={(v:string) => setPerfil({...perfil, data_nascimento: aplicarMascaraData(v)})} cores={cores} placeholder="DD-MM-AAAA" />
</View>
{/* SECÇÃO ESTÁGIO COM LOGICA DE HORARIOS RELACIONADOS */}
{estagio && (
<>
<Text style={[styles.sectionHeader, { color: cores.secundario }]}>Informação de Estágio</Text>
<View style={[styles.infoCard, { backgroundColor: cores.card, borderLeftWidth: 4, borderLeftColor: cores.azul, shadowColor: cores.sombra }]}>
<PerfilInput label="Empresa" icon="business-outline" value={estagio.empresas?.nome} editable={false} cores={cores} />
<View style={styles.inputRow}>
<View style={{ flex: 1, marginRight: 12 }}>
<PerfilInput label="Horas" icon="timer-outline" value={estagio.horas_totais?.toString() + 'h'} editable={false} cores={cores} />
</View>
<View style={{ flex: 2 }}>
<PerfilInput
label="Horário"
icon="watch-outline"
value={
estagio.horarios_estagio?.length > 0
? estagio.horarios_estagio.map((h: any) =>
`${h.periodo}: ${h.hora_inicio.slice(0,5)}-${h.hora_fim.slice(0,5)}`
).join('\n')
: "Não definido"
}
editable={false}
cores={cores}
multiline={true}
/>
</View>
</View>
{estagio.empresas?.tutor_nome && <PerfilInput label="Tutor" icon="person-circle-outline" value={estagio.empresas.tutor_nome} editable={false} cores={cores} />}
</View>
</>
)}
</View>
</Animated.ScrollView>
{/* ACÇÕES */}
<View style={styles.footer}>
<TouchableOpacity style={[styles.actionMenuItem, { backgroundColor: cores.card }]} onPress={() => router.push('/Aluno/redefenirsenha')}>
<View style={[styles.actionIcon, { backgroundColor: cores.azulSuave }]}><Ionicons name="key-outline" size={20} color={cores.azul} /></View>
<Text style={[styles.actionText, { color: cores.texto }]}>Redefinir Senha</Text>
<Ionicons name="chevron-forward" size={18} color={cores.secundario} />
</TouchableOpacity>
<TouchableOpacity style={[styles.actionMenuItem, { backgroundColor: cores.card, marginTop: 12, marginBottom: 40 }]} onPress={() => supabase.auth.signOut().then(() => router.replace('/'))}>
<View style={[styles.actionIcon, { backgroundColor: cores.vermelhoSuave }]}><Ionicons name="log-out-outline" size={20} color={cores.vermelho} /></View>
<Text style={[styles.actionText, { color: cores.vermelho }]}>Terminar Sessão</Text>
</TouchableOpacity>
</View>
</Animated.View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
// --- COMPONENTE DE INPUT CUSTOMIZADO ---
const PerfilInput = ({ label, icon, cores, editable, multiline, ...props }: any) => (
<View style={styles.inputGroup}>
<Text style={[styles.inputLabel, { color: cores.secundario }]}>{label}</Text>
@@ -339,15 +255,16 @@ const PerfilInput = ({ label, icon, cores, editable, multiline, ...props }: any)
backgroundColor: cores.fundo,
borderColor: editable ? cores.azul : cores.borda,
height: multiline ? undefined : 52,
minHeight: multiline ? 52 : undefined,
paddingVertical: multiline ? 10 : 0
minHeight: 52,
paddingVertical: multiline ? 8 : 0
}]}>
<Ionicons name={icon} size={18} color={cores.azul} style={{ marginHorizontal: 12 }} />
<Ionicons name={icon} size={18} color={cores.azul} style={{ marginHorizontal: 12, marginTop: multiline ? 10 : 0 }} />
<TextInput
{...props}
editable={editable}
multiline={multiline}
style={[styles.textInput, { color: cores.texto }]}
scrollEnabled={false}
style={[styles.textInput, { color: cores.texto, textAlignVertical: multiline ? 'top' : 'center' }]}
placeholderTextColor={cores.secundario}
/>
</View>
@@ -358,8 +275,8 @@ const styles = StyleSheet.create({
centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
headerContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, paddingVertical: 15 },
headerTitle: { fontSize: 19, fontWeight: '900' },
roundBtn: { width: 48, height: 48, borderRadius: 16, justifyContent: 'center', alignItems: 'center', elevation: 2, shadowOpacity: 0.1, shadowRadius: 4 },
scrollContainer: { paddingHorizontal: 20, paddingBottom: 50 },
roundBtn: { width: 48, height: 48, borderRadius: 16, justifyContent: 'center', alignItems: 'center', elevation: 2 },
scrollContainer: { paddingHorizontal: 20, paddingBottom: 20 },
avatarSection: { alignItems: 'center', marginVertical: 25 },
avatarFrame: { padding: 6, borderRadius: 100, borderWidth: 2, borderStyle: 'dashed' },
avatarCircle: { width: 95, height: 95, borderRadius: 48, alignItems: 'center', justifyContent: 'center', elevation: 5 },
@@ -367,19 +284,17 @@ const styles = StyleSheet.create({
profileName: { fontSize: 24, fontWeight: '900', marginTop: 15 },
badge: { paddingHorizontal: 12, paddingVertical: 4, borderRadius: 8, marginTop: 8 },
badgeText: { fontSize: 11, fontWeight: '800', letterSpacing: 1 },
sectionHeader: { fontSize: 12, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 1.5, marginLeft: 8, marginBottom: 12, marginTop: 15 },
infoCard: { borderRadius: 28, padding: 22, elevation: 3, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 10 },
inputGroup: { marginBottom: 18 },
inputLabel: { fontSize: 10, fontWeight: '800', textTransform: 'uppercase', marginBottom: 8, marginLeft: 4 },
sectionHeader: { fontSize: 11, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 1.5, marginLeft: 8, marginBottom: 12, marginTop: 15 },
infoCard: { borderRadius: 25, padding: 20, elevation: 3, shadowOpacity: 0.1 },
inputGroup: { marginBottom: 15 },
inputLabel: { fontSize: 10, fontWeight: '800', textTransform: 'uppercase', marginBottom: 6, marginLeft: 4 },
inputContainer: { flexDirection: 'row', alignItems: 'center', borderRadius: 16, borderWidth: 1.5 },
textInput: { flex: 1, fontSize: 15, fontWeight: '700' },
textInput: { flex: 1, fontSize: 14, fontWeight: '700' },
inputRow: { flexDirection: 'row', justifyContent: 'space-between' },
footer: { marginTop: 20 },
actionMenuItem: { flexDirection: 'row', alignItems: 'center', padding: 16, borderRadius: 22, elevation: 2 },
actionIcon: { width: 42, height: 42, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
actionText: { flex: 1, marginLeft: 15, fontSize: 16, fontWeight: '800' },
cancelLink: { marginTop: 25, alignItems: 'center' },
cancelLinkText: { fontSize: 14, fontWeight: '700', textDecorationLine: 'underline' },
alert: { position: 'absolute', left: 20, right: 20, padding: 18, borderRadius: 20, flexDirection: 'row', alignItems: 'center', zIndex: 999, elevation: 10 },
alert: { position: 'absolute', left: 20, right: 20, padding: 18, borderRadius: 20, flexDirection: 'row', alignItems: 'center', zIndex: 999 },
alertText: { color: '#fff', fontWeight: '800', marginLeft: 10, flex: 1 }
});