Index: frontend/src/app/professor/layout.tsx =================================================================== --- frontend/src/app/professor/layout.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) +++ frontend/src/app/professor/layout.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) @@ -0,0 +1,38 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "../globals.css"; +import "@fortawesome/fontawesome-svg-core/styles.css"; +import { config } from "@fortawesome/fontawesome-svg-core"; +import Header from "@/components/header"; +import ProfessorNavbar from "@/components/professor-navbar"; + +config.autoAddCss = false; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "IKnow - Professor Portal", + description: "Professor portal for managing students and grades", +}; + +export default function ProfessorLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+
+ + {children} +
+ ); +} Index: frontend/src/app/professor/page.tsx =================================================================== --- frontend/src/app/professor/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) +++ frontend/src/app/professor/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function ProfessorHome() { + redirect("/professor/students"); +} Index: frontend/src/app/professor/profile/page.tsx =================================================================== --- frontend/src/app/professor/profile/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) +++ frontend/src/app/professor/profile/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) @@ -0,0 +1,287 @@ +"use client"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faUser, + faIdCard, + faAddressCard, + 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; +}; + +// Present in the API response, but intentionally not shown on professor profile. +type PreviousEducation = { + type: string; + profession: string; + average: string | number; + language: string; + country: string; + previousUniversity: string; + previousFaculty: string; + previousStudyMode: string; +}; + +// Present in the API response, but intentionally not shown on professor profile. +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 ProfessorProfilePage() { + const [profileData, setProfileData] = 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) setProfileData(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 || !profileData) { + return ( +
+
+ {errorMessage ?? t('failed_to_load_profile')} +
+
+ ); + } + + const { personalInfo, birthInfo, contact } = profileData; + + return ( +
+ {/* Header */} +
+
+
+
+ +
+
+
+
+

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

+
+ {t('index')}: {personalInfo.index} | {t('embg')}: {personalInfo.embg} +
+
+
+
+ + {/* Profile Sections */} +
+ {/* Personal Information */} +
+ + + + + + + + + + + + + {personalInfo.notes && ( +
+
{t('note')}:
+
{personalInfo.notes}
+
+ )} +
+ + {/* Birth Information */} +
+ + + +
+ + {/* Contact Information */} +
+
+
+
+ + + + + +
+
+ + + + + + +
+
+
+
+
+
+ ); +} Index: frontend/src/app/professor/students/page.tsx =================================================================== --- frontend/src/app/professor/students/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) +++ frontend/src/app/professor/students/page.tsx (revision b8093a091d45f33bab33deb8ff2fffc4734972c0) @@ -0,0 +1,315 @@ +"use client"; + +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from 'react-i18next'; +import { apiUrl } from '@/lib/api'; +import { getAccessToken } from '@/lib/auth'; + +type UsersBySubject = { + /** users.id - what the grading endpoints expect as StudentId. */ + id: number; + name?: string; + /** users.index - the number shown to the professor and searched on. */ + index?: string; + grade: number; + semester?: string; +}; + +type SubjectsAndUsers = { + name?: string; + id?: number; + code?: string; + users: UsersBySubject[]; +}; + +type GradePayload = { + StudentId: number; + SubjectId: number; + Grade: number; +}; + +type FlatRow = { + studentIdNum: number; + studentIndex: string; + studentName: string; + subjectId: number; + subjectName: string; + semester: string; + grade: number; +}; + +export default function ProfessorStudentsPage() { + const { t } = useTranslation(); + const [subjects, setSubjects] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const [subjectFilter, setSubjectFilter] = useState("all"); + const [studentIdQuery, setStudentIdQuery] = useState(""); + + const [gradeSelection, setGradeSelection] = useState>({}); + const [actionBusyKey, setActionBusyKey] = useState(null); + + async function refresh() { + setLoading(true); + setError(null); + try { + const token = getAccessToken(); + if (!token) { + throw new Error("You are not signed in."); + } + + const res = await fetch(apiUrl("/api/prof/students"), { + cache: "no-store", + headers: { Authorization: `Bearer ${token}` }, + }); + if (!res.ok) { + throw new Error(`Failed to fetch students (${res.status})`); + } + const data = (await res.json()) as SubjectsAndUsers[]; + setSubjects(data); + + const nextSelections: Record = {}; + for (const subj of data) { + if (!subj.id) continue; + for (const u of subj.users) { + const key = `${subj.id}:${u.id}`; + // grade_type only declares 6..10, so an ungraded row starts at 6. + nextSelections[key] = u.grade >= 6 && u.grade <= 10 ? u.grade : 6; + } + } + setGradeSelection(nextSelections); + } catch (e) { + setError(e instanceof Error ? e.message : "Unknown error"); + } finally { + setLoading(false); + } + } + + useEffect(() => { + void refresh(); + }, []); + + const flatRows = useMemo(() => { + const rows: FlatRow[] = []; + for (const subj of subjects) { + if (!subj.id) continue; + for (const u of subj.users) { + rows.push({ + studentIdNum: u.id, + studentIndex: u.index ?? "", + studentName: u.name ?? "", + subjectId: subj.id, + subjectName: subj.name ?? "", + semester: u.semester ?? "", + grade: u.grade, + }); + } + } + return rows; + }, [subjects]); + + const filteredRows = useMemo(() => { + const q = studentIdQuery.trim(); + return flatRows.filter((r) => { + if (subjectFilter !== "all" && String(r.subjectId) !== subjectFilter) return false; + if (q.length > 0 && !r.studentIndex.includes(q)) return false; + return true; + }); + }, [flatRows, subjectFilter, studentIdQuery]); + + async function postGrade(url: string, payload: GradePayload, busyKey: string) { + setActionBusyKey(busyKey); + setError(null); + try { + const token = getAccessToken(); + if (!token) { + throw new Error("You are not signed in."); + } + + const res = await fetch(apiUrl(url), { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + body: JSON.stringify(payload), + }); + const body = (await res.json()) as { ok: boolean; message?: string }; + if (!res.ok || !body.ok) { + throw new Error(body.message || `Request failed (${res.status})`); + } + await refresh(); + } catch (e) { + setError(e instanceof Error ? e.message : "Unknown error"); + } finally { + setActionBusyKey(null); + } + } + + return ( +
+
+ +
+

{t('prof_students_title')}

+

+ {t('prof_students_data_note')} /api/prof/students. +

+
+ +
+
+ + +
+ +
+ + setStudentIdQuery(e.target.value)} + /> +
+
+
+ + {error && ( +
+ {error} +
+ )} + +
+ + + + + + + + + + + + {loading ? ( + + + + ) : filteredRows.length === 0 ? ( + + + + ) : ( + filteredRows.map((r) => { + const key = `${r.subjectId}:${r.studentIdNum}`; + const selected = gradeSelection[key] ?? 6; + const busy = actionBusyKey === key; + + return ( + + + + + + + + ); + }) + )} + +
{t('student')}{t('id')}{t('subject')}{t('grade')}{t('actions')}
+ {t('loading')} +
+ {t('no_students_found')} +
{r.studentName}{r.studentIndex} + {r.subjectName} + {r.semester && ( + {r.semester} + )} + +
+ + + {t('current')}: {r.grade > 0 ? r.grade : t('none')} + +
+ 		+
+ + + + + +
+
+
+
+ ); +}