Leerlinggegevens worden geladen...
;
+ }
+
+ if (error) {
+ return
+
+
+
+
+
+
Leerling Overzicht
+
+
+
+
+ ({
+ onClick: () => handleStudentClick(row.original.userId),
+ sx: {
+ cursor: 'pointer',
+ '&:hover': {
+ backgroundColor: 'rgba(79, 195, 247, 0.08)',
+ boxShadow: '0 6px 20px rgba(0, 0, 0, 0.1)',
+ borderLeft: '4px solid #4fc3f7',
+ },
+ },
+ })}
+ muiTableProps={{
+ sx: {
+ '& .MuiTableHead-root': {
+ backgroundColor: 'transparent',
+ },
+ '& .MuiTableCell-head': {
+ backgroundColor: '#4fc3f7',
+ color: 'white',
+ fontWeight: 700,
+ textTransform: 'uppercase',
+ letterSpacing: '1px',
+ fontSize: '0.9rem',
+ },
+ '& .MuiTableCell-root': {
+ borderColor: '#f0f3f7',
+ },
+ },
+ }}
+ muiTopToolbarProps={{
+ sx: {
+ backgroundColor: 'transparent',
+ '& .MuiToolbar-root': {
+ padding: '1rem 0',
+ },
+ },
+ }}
+ muiBottomToolbarProps={{
+ sx: {
+ backgroundColor: 'transparent',
+ },
+ }}
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/components/students/StudentPage.tsx b/ui/src/components/students/StudentPage.tsx
new file mode 100644
index 000000000..b47a3708d
--- /dev/null
+++ b/ui/src/components/students/StudentPage.tsx
@@ -0,0 +1,241 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
+import { apiService } from '../../services/api';
+import type { StudentData, StudentExerciseResult } from '../../models/Student';
+import { getAverageColor } from '../../utils/averageColors';
+import Error from "../common/Error.tsx";
+
+export default function StudentPage() {
+ const { studentId } = useParams<{ studentId: string }>();
+ const navigate = useNavigate();
+ const [studentData, setStudentData] = useState