Index: frontend/src/app/students/profile/page.tsx =================================================================== --- frontend/src/app/students/profile/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) +++ frontend/src/app/students/profile/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) @@ -0,0 +1,338 @@ +"use client" + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faUser, + faIdCard, + faGraduationCap, + faAddressCard, + faSchool, + faCalendarAlt, + faFlag, + faVenus, + faMars, + faEnvelope, + faPhone, + faMapMarkerAlt, + faPassport +} from '@fortawesome/free-solid-svg-icons'; +import { useEffect, useState } from 'react'; +import { getAccessToken } from '@/lib/auth'; +import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; +import { useTranslation } from 'react-i18next'; +import { apiUrl } from '@/lib/api'; + +type PersonalInfo = { + firstName: string; + middleName: string; + lastName: string; + maidenName: string; + dateOfBirth: string; + gender: string; + nationality: string; + citizenship: string; + scholarship: string; + currentPlan: string; + registryNumber: string; + studyGroup: string; + notes?: string; + index: string; + embg: string; +}; + +type BirthInfo = { + placeOfBirth: string; + municipalityOfBirth: string; + country: string; +}; + +type PreviousEducation = { + type: string; + profession: string; + average: string | number; + language: string; + country: string; + previousUniversity: string; + previousFaculty: string; + previousStudyMode: string; +}; + +type EnrollmentInfo = { + enrollmentYear: string | number; + status: string; + cycle: string; + program: string; + quota: string; + secondaryEducationNumber: string; + previousEducationCredits: string | number; +}; + +type Contact = { + placeOfResidence: string; + municipalityOfResidence: string; + country: string; + address: string; + temporaryAddress: string; + phone: string; + mobilePhone: string; + passportNumber: string; + passportExpiryDate: string; + email: string; + microsoftEmail: string; +}; + +type StudentProfile = { + personalInfo: PersonalInfo; + birthInfo: BirthInfo; + previousEducation: PreviousEducation; + enrollmentInfo: EnrollmentInfo; + contact: Contact; +}; + +interface InfoRowProps { + label: string; + value: string | number; + icon?: IconDefinition; +} + +const InfoRow = ({ label, value, icon }: InfoRowProps) => { + const { t } = useTranslation(); + return ( +
+
+ {icon && } + {t(label)}: +
+
+ {value || t('n_a')} +
+
+ ); +}; + +interface SectionProps { + title: string; + icon: IconDefinition; + children: React.ReactNode; +} + +const Section = ({ title, icon, children }: SectionProps) => { + const { t } = useTranslation(); + return ( +
+
+
+ +

{t(title)}

+
+
+
+ {children} +
+
+ ); +}; + +export default function ProfilePage() { + const [studentData, setStudentData] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [errorMessage, setErrorMessage] = useState(null); + const { t } = useTranslation(); + + useEffect(() => { + let cancelled = false; + + async function load() { + setIsLoading(true); + setErrorMessage(null); + + const token = getAccessToken(); + if (!token) { + setErrorMessage('Not authenticated. Please login again.'); + setIsLoading(false); + return; + } + + try { + const response = await fetch(apiUrl('/api/user/getUser'), { + method: 'GET', + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (!response.ok) { + const text = await response.text().catch(() => ''); + throw new Error(text || `Failed to load profile (${response.status})`); + } + + const data = (await response.json()) as StudentProfile; + if (!cancelled) setStudentData(data); + } catch (err) { + if (!cancelled) { + setErrorMessage(err instanceof Error ? err.message : 'Failed to load profile.'); + } + } finally { + if (!cancelled) setIsLoading(false); + } + } + + void load(); + + return () => { + cancelled = true; + }; + }, []); + + if (isLoading) { + return ( +
+
+ {t('loading')} +
+
+ ); + } + + if (errorMessage || !studentData) { + return ( +
+
+ {errorMessage ?? t('failed_to_load_profile')} +
+
+ ); + } + + const { personalInfo, birthInfo, previousEducation, enrollmentInfo, contact } = studentData; + + return ( +
+ {/* Header */} +
+
+
+
+ +
+
+
+
+

+ {personalInfo.firstName} {personalInfo.middleName} {personalInfo.lastName} +

+
+ {t('index')}: {personalInfo.index} | {t('embg')}: {personalInfo.embg} +
+
+ {enrollmentInfo.program} +
+
+
+
+ + {/* Profile Sections */} +
+ + {/* Personal Information */} +
+ + + + + + + + + + + + + {personalInfo.notes && ( +
+
{t('note')}:
+
{personalInfo.notes}
+
+ )} +
+ + {/* Birth Information */} +
+ + + +
+ + {/* Previous Education */} +
+ + + + + + + + +
+ + {/* Enrollment Information */} +
+ + + + + + + +
+ + {/* Contact Information */} +
+
+
+
+ + + + + +
+
+ + + + + + +
+
+
+
+
+
+ ); +}