ClassroomCopilot/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct Material UI icon naming in Header.tsx and update timetable components

Browse Source 
- Fix icon naming: remove 'Icon' suffix from MUI icon components in Header.tsx
  (AccessTime, Close, Person, School, Schedule, Class, Book, Settings, Student, Login, Logout)
- Update timetable components to use UserContext instead of ProfileContext
- Fix timetableService naming collision and circular reference
- Update various components for consistency
This commit is contained in:
Agent Zero 2026-02-26 07:28:47 +00:00
parent 00a6f941c7
commit 067df34c50
16 changed files with 123 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/Modal.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { CloseIcon } from '@mui/icons-material'; import Close from '@mui/icons-material/Close';
interface ModalProps { interface ModalProps {
isOpen: boolean; isOpen: boolean;
@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidt
onClick={onClose} onClick={onClose}
className="text-gray-400 hover:text-gray-500 focus:outline-none" className="text-gray-400 hover:text-gray-500 focus:outline-none"
> >
<CloseIcon size={20} /> <Close sx={{ fontSize: 20 }} />
</button> </button>
</div> </div>

73
src/pages/Header.tsx
View File

@ -15,27 +15,24 @@ import {
Divider Divider
} from '@mui/material'; } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import { import Login from '@mui/icons-material/Login';
Login as LoginIcon, import Logout from '@mui/icons-material/Logout';
Logout as LogoutIcon, import Teacher from '@mui/icons-material/School';
School as TeacherIcon, import Student from '@mui/icons-material/Person';
Person as StudentIcon, import TLDrawDev from '@mui/icons-material/Dashboard';
Dashboard as TLDrawDevIcon, import DevTools from '@mui/icons-material/Build';
Build as DevToolsIcon, import Multiplayer from '@mui/icons-material/Groups';
Groups as MultiplayerIcon, import Calendar from '@mui/icons-material/CalendarToday';
CalendarToday as CalendarIcon, import TeacherPlanner from '@mui/icons-material/Assignment';
Assignment as TeacherPlannerIcon, import ExamMarker from '@mui/icons-material/AssignmentTurnedIn';
AssignmentTurnedIn as ExamMarkerIcon, import Settings from '@mui/icons-material/Settings';
Settings as SettingsIcon, import Search from '@mui/icons-material/Search';
Search as SearchIcon, import Admin from '@mui/icons-material/AdminPanelSettings';
AdminPanelSettings as AdminIcon, import Home from '@mui/icons-material/Home';
Home as HomeIcon, import Schedule from '@mui/icons-material/Schedule';
// Timetable icons import Class from '@mui/icons-material/Class';
Schedule as ScheduleIcon, import Book from '@mui/icons-material/Book';
Class as ClassIcon, import Enrollment from '@mui/icons-material/HowToReg';
Book as BookIcon,
HowToReg as EnrollmentIcon
} from '@mui/icons-material';
import { HEADER_HEIGHT } from './Layout'; import { HEADER_HEIGHT } from './Layout';
import { logger } from '../debugConfig'; import { logger } from '../debugConfig';
import { GraphNavigator } from '../components/navigation/GraphNavigator'; import { GraphNavigator } from '../components/navigation/GraphNavigator';
@ -127,7 +124,7 @@ const Header: React.FC = () => {
}} }}
onClick={() => handleNavigation('/')} onClick={() => handleNavigation('/')}
> >
<HomeIcon sx={{ color: theme.palette.primary.main }} /> <Home sx={{ color: theme.palette.primary.main }} />
Classroom Copilot Classroom Copilot
</Typography> </Typography>
@ -156,7 +153,7 @@ const Header: React.FC = () => {
} }
}} }}
> >
<MenuIcon /> <Menu />
</IconButton> </IconButton>
<Menu <Menu
@ -189,7 +186,7 @@ const Header: React.FC = () => {
// Home // Home
<MenuItem key="home" onClick={() => handleNavigation('/')}> <MenuItem key="home" onClick={() => handleNavigation('/')}>
<ListItemIcon> <ListItemIcon>
<HomeIcon /> <Home />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Home" /> <ListItemText primary="Home" />
</MenuItem>, </MenuItem>,
@ -213,7 +210,7 @@ const Header: React.FC = () => {
</Typography>, </Typography>,
<MenuItem key="timetable" onClick={() => handleNavigation('/timetable')}> <MenuItem key="timetable" onClick={() => handleNavigation('/timetable')}>
<ListItemIcon> <ListItemIcon>
<ScheduleIcon /> <Schedule />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="My Timetable" primary="My Timetable"
@ -222,7 +219,7 @@ const Header: React.FC = () => {
</MenuItem>, </MenuItem>,
<MenuItem key="classes" onClick={() => handleNavigation('/classes')}> <MenuItem key="classes" onClick={() => handleNavigation('/classes')}>
<ListItemIcon> <ListItemIcon>
<ClassIcon /> <Class />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="Browse Classes" primary="Browse Classes"
@ -231,7 +228,7 @@ const Header: React.FC = () => {
</MenuItem>, </MenuItem>,
<MenuItem key="my-classes" onClick={() => handleNavigation('/my-classes')}> <MenuItem key="my-classes" onClick={() => handleNavigation('/my-classes')}>
<ListItemIcon> <ListItemIcon>
<BookIcon /> <Book />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="My Classes" primary="My Classes"
@ -240,7 +237,7 @@ const Header: React.FC = () => {
</MenuItem>, </MenuItem>,
<MenuItem key="enrollment-requests" onClick={() => handleNavigation('/enrollment-requests')}> <MenuItem key="enrollment-requests" onClick={() => handleNavigation('/enrollment-requests')}>
<ListItemIcon> <ListItemIcon>
<EnrollmentIcon /> <Enrollment />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="Enrollment Requests" primary="Enrollment Requests"
@ -267,19 +264,19 @@ const Header: React.FC = () => {
</Typography>, </Typography>,
<MenuItem key="calendar" onClick={() => handleNavigation('/calendar')}> <MenuItem key="calendar" onClick={() => handleNavigation('/calendar')}>
<ListItemIcon> <ListItemIcon>
<CalendarIcon /> <Calendar />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Calendar" /> <ListItemText primary="Calendar" />
</MenuItem>, </MenuItem>,
<MenuItem key="teacher-planner" onClick={() => handleNavigation('/teacher-planner')}> <MenuItem key="teacher-planner" onClick={() => handleNavigation('/teacher-planner')}>
<ListItemIcon> <ListItemIcon>
<TeacherPlannerIcon /> <TeacherPlanner />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Teacher Planner" /> <ListItemText primary="Teacher Planner" />
</MenuItem>, </MenuItem>,
<MenuItem key="exam-marker" onClick={() => handleNavigation('/exam-marker')}> <MenuItem key="exam-marker" onClick={() => handleNavigation('/exam-marker')}>
<ListItemIcon> <ListItemIcon>
<ExamMarkerIcon /> <ExamMarker />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Exam Marker" /> <ListItemText primary="Exam Marker" />
</MenuItem>, </MenuItem>,
@ -303,13 +300,13 @@ const Header: React.FC = () => {
</Typography>, </Typography>,
<MenuItem key="settings" onClick={() => handleNavigation('/settings')}> <MenuItem key="settings" onClick={() => handleNavigation('/settings')}>
<ListItemIcon> <ListItemIcon>
<SettingsIcon /> <Settings />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Settings" /> <ListItemText primary="Settings" />
</MenuItem>, </MenuItem>,
<MenuItem key="search" onClick={() => handleNavigation('/search')}> <MenuItem key="search" onClick={() => handleNavigation('/search')}>
<ListItemIcon> <ListItemIcon>
<SearchIcon /> <Search />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Search" /> <ListItemText primary="Search" />
</MenuItem>, </MenuItem>,
@ -334,7 +331,7 @@ const Header: React.FC = () => {
</Typography>, </Typography>,
<MenuItem key="admin" onClick={() => handleNavigation('/admin')}> <MenuItem key="admin" onClick={() => handleNavigation('/admin')}>
<ListItemIcon> <ListItemIcon>
<AdminIcon /> <Admin />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Admin Dashboard" /> <ListItemText primary="Admin Dashboard" />
</MenuItem> </MenuItem>
@ -344,7 +341,7 @@ const Header: React.FC = () => {
<Divider key="auth-divider" />, <Divider key="auth-divider" />,
<MenuItem key="signout" onClick={handleSignOut}> <MenuItem key="signout" onClick={handleSignOut}>
<ListItemIcon> <ListItemIcon>
<LogoutIcon /> <Logout />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Sign Out" /> <ListItemText primary="Sign Out" />
</MenuItem> </MenuItem>
@ -352,14 +349,14 @@ const Header: React.FC = () => {
// Authentication Section for Non-authenticated Users // Authentication Section for Non-authenticated Users
<MenuItem key="signin" onClick={() => handleNavigation('/login')}> <MenuItem key="signin" onClick={() => handleNavigation('/login')}>
<ListItemIcon> <ListItemIcon>
<LoginIcon /> <Login />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Sign In" /> <ListItemText primary="Sign In" />
</MenuItem>, </MenuItem>,
<Divider key="signup-divider" />, <Divider key="signup-divider" />,
<MenuItem key="teacher-signup" onClick={() => handleSignupNavigation('teacher')}> <MenuItem key="teacher-signup" onClick={() => handleSignupNavigation('teacher')}>
<ListItemIcon> <ListItemIcon>
<TeacherIcon /> <Teacher />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="Sign up as Teacher" primary="Sign up as Teacher"
@ -368,7 +365,7 @@ const Header: React.FC = () => {
</MenuItem>, </MenuItem>,
<MenuItem key="student-signup" onClick={() => handleSignupNavigation('student')}> <MenuItem key="student-signup" onClick={() => handleSignupNavigation('student')}>
<ListItemIcon> <ListItemIcon>
<StudentIcon /> <Student />
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary="Sign up as Student" primary="Sign up as Student"

2
src/pages/NotFoundPublic.tsx
View File

@ -25,7 +25,7 @@ function NotFoundPublic() {
gap: 3 gap: 3
}} }}
> >
<ErrorOutlineIcon sx={{ fontSize: 60, color: theme.palette.error.main }} /> <ErrorOutline sx={{ fontSize: 60, color: theme.palette.error.main }} />
<Typography variant="h2" component="h1" gutterBottom> <Typography variant="h2" component="h1" gutterBottom>
404 404
</Typography> </Typography>

16
src/pages/dev/SimpleUploadTest.tsx
View File

@ -454,7 +454,7 @@ const SimpleUploadTest: React.FC = () => {
<Card> <Card>
<CardHeader <CardHeader
title="Upload Controls" title="Upload Controls"
avatar={<UploadIcon />} avatar={<Upload />}
/> />
<CardContent> <CardContent>
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 2 }}>
@ -497,7 +497,7 @@ const SimpleUploadTest: React.FC = () => {
/> />
<Button <Button
variant="outlined" variant="outlined"
startIcon={<UploadIcon />} startIcon={<Upload />}
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
disabled={!selectedCabinet || loading} disabled={!selectedCabinet || loading}
> >
@ -515,7 +515,7 @@ const SimpleUploadTest: React.FC = () => {
<Button <Button
variant="outlined" variant="outlined"
startIcon={<FolderOpenIcon />} startIcon={<FolderOpen />}
onClick={handleDirectoryPicker} onClick={handleDirectoryPicker}
disabled={!selectedCabinet || loading} disabled={!selectedCabinet || loading}
> >
@ -524,7 +524,7 @@ const SimpleUploadTest: React.FC = () => {
<Button <Button
variant="outlined" variant="outlined"
startIcon={<RefreshIcon />} startIcon={<Refresh />}
onClick={() => { onClick={() => {
setCurrentPage(1); setCurrentPage(1);
setSearchTerm(''); setSearchTerm('');
@ -554,7 +554,7 @@ const SimpleUploadTest: React.FC = () => {
<Card> <Card>
<CardHeader <CardHeader
title="System Info" title="System Info"
avatar={<InfoIcon />} avatar={<Info />}
/> />
<CardContent> <CardContent>
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 2 }}>
@ -633,7 +633,7 @@ const SimpleUploadTest: React.FC = () => {
title={ title={
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<FileIcon /> <InsertDriveFile />
<Typography variant="h6"> <Typography variant="h6">
Files {pagination && `(${pagination.total_count} total)`} Files {pagination && `(${pagination.total_count} total)`}
</Typography> </Typography>
@ -748,7 +748,7 @@ const SimpleUploadTest: React.FC = () => {
} }
> >
<ListItemIcon> <ListItemIcon>
{file.is_directory ? <FolderIcon /> : <FileIcon />} {file.is_directory ? <FolderIcon /> : <InsertDriveFile />}
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
primary={ primary={
@ -812,7 +812,7 @@ const SimpleUploadTest: React.FC = () => {
<Dialog open={showUploadDialog} onClose={() => !isUploading && setShowUploadDialog(false)} maxWidth="md" fullWidth> <Dialog open={showUploadDialog} onClose={() => !isUploading && setShowUploadDialog(false)} maxWidth="md" fullWidth>
<DialogTitle> <DialogTitle>
<Box display="flex" alignItems="center" gap={1}> <Box display="flex" alignItems="center" gap={1}>
<FolderOpenIcon /> <FolderOpen />
Directory Upload Progress Directory Upload Progress
{isUploading && <LinearProgress sx={{ flexGrow: 1, ml: 2 }} />} {isUploading && <LinearProgress sx={{ flexGrow: 1, ml: 2 }} />}
</Box> </Box>

22
src/pages/timetable/ClassDetailPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material'; import { AccessTime, Add, ArrowBack, CalendarToday, Delete, Edit, MenuBook, People } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext'; import { useUser } from '../../contexts/UserContext';
import Modal from '../../components/common/Modal'; import Modal from '../../components/common/Modal';
@ -72,7 +72,7 @@ const ClassDetailPage: React.FC = () => {
to="/timetable/classes" to="/timetable/classes"
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
> >
<ArrowBackIcon size={18} /> <ArrowBack size={18} />
Back to Classes Back to Classes
</Link> </Link>
@ -95,14 +95,14 @@ const ClassDetailPage: React.FC = () => {
to={`/timetable/classes/${classId}/edit`} to={`/timetable/classes/${classId}/edit`}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
> >
<EditIcon size={18} /> <Edit size={18} />
Edit Edit
</Link> </Link>
<button <button
onClick={() => setShowDeleteModal(true)} onClick={() => setShowDeleteModal(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
> >
<DeleteIcon size={18} /> <Delete size={18} />
Delete Delete
</button> </button>
</div> </div>
@ -115,7 +115,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-blue-50 rounded-lg"> <div className="p-2 bg-blue-50 rounded-lg">
<CalendarTodayIcon className="text-blue-600" size={20} /> <CalendarToday className="text-blue-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Timetables</p> <p className="text-sm text-gray-500">Timetables</p>
@ -126,7 +126,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-green-50 rounded-lg"> <div className="p-2 bg-green-50 rounded-lg">
<PeopleIcon className="text-green-600" size={20} /> <People className="text-green-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Students</p> <p className="text-sm text-gray-500">Students</p>
@ -137,7 +137,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-50 rounded-lg"> <div className="p-2 bg-purple-50 rounded-lg">
<MenuBookIcon className="text-purple-600" size={20} /> <MenuBook className="text-purple-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Teachers</p> <p className="text-sm text-gray-500">Teachers</p>
@ -194,7 +194,7 @@ const ClassDetailPage: React.FC = () => {
to={`/timetable/classes/${classId}/timetables/new`} to={`/timetable/classes/${classId}/timetables/new`}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<AddIcon size={18} /> <Add size={18} />
Add Timetable Add Timetable
</Link> </Link>
)} )}
@ -202,7 +202,7 @@ const ClassDetailPage: React.FC = () => {
{timetables.length === 0 ? ( {timetables.length === 0 ? (
<div className="text-center py-12 text-gray-500"> <div className="text-center py-12 text-gray-500">
<AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" /> <AccessTime size={48} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No timetables yet</p> <p className="text-lg font-medium mb-2">No timetables yet</p>
<p>Create a timetable to start scheduling lessons</p> <p>Create a timetable to start scheduling lessons</p>
</div> </div>
@ -221,7 +221,7 @@ const ClassDetailPage: React.FC = () => {
{timetable.is_recurring && ' • Recurring'} {timetable.is_recurring && ' • Recurring'}
</p> </p>
</div> </div>
<ArrowBackIcon className="rotate-180 text-gray-400" size={18} /> <ArrowBack className="rotate-180 text-gray-400" size={18} />
</Link> </Link>
))} ))}
</div> </div>
@ -234,7 +234,7 @@ const ClassDetailPage: React.FC = () => {
<h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2>
{enrolledStudents.length === 0 ? ( {enrolledStudents.length === 0 ? (
<div className="text-center py-12 text-gray-500"> <div className="text-center py-12 text-gray-500">
<PeopleIcon size={48} className="mx-auto mb-4 opacity-50" /> <People size={48} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No students enrolled</p> <p className="text-lg font-medium mb-2">No students enrolled</p>
<p>Students can request enrollment or be added by teachers</p> <p>Students can request enrollment or be added by teachers</p>
</div> </div>

16
src/pages/timetable/ClassesPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { AddIcon, CalendarTodayIcon, FilterListIcon, MenuBookIcon, PeopleIcon, SearchIcon } from '@mui/icons-material'; import { Add, CalendarToday, FilterList, MenuBook, People, Search } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext'; import { useUser } from '../../contexts/UserContext';
@ -70,7 +70,7 @@ const ClassesPage: React.FC = () => {
onClick={() => navigate('/timetable/classes/create')} onClick={() => navigate('/timetable/classes/create')}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<AddIcon size={20} /> <Add size={20} />
Create Class Create Class
</button> </button>
)} )}
@ -80,7 +80,7 @@ const ClassesPage: React.FC = () => {
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4"> <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
<div className="flex-1 relative"> <div className="flex-1 relative">
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
<input <input
type="text" type="text"
placeholder="Search classes by name or subject..." placeholder="Search classes by name or subject..."
@ -94,7 +94,7 @@ const ClassesPage: React.FC = () => {
onClick={() => setShowFilters(!showFilters)} onClick={() => setShowFilters(!showFilters)}
className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
> >
<FilterListIcon size={20} /> <FilterList size={20} />
Filters Filters
</button> </button>
<button <button
@ -172,7 +172,7 @@ const ClassesPage: React.FC = () => {
</div> </div>
) : classes.length === 0 ? ( ) : classes.length === 0 ? (
<div className="text-center py-12 bg-gray-50 rounded-xl"> <div className="text-center py-12 bg-gray-50 rounded-xl">
<MenuBookIcon className="mx-auto h-12 w-12 text-gray-400 mb-4" /> <MenuBook className="mx-auto h-12 w-12 text-gray-400 mb-4" />
<h3 className="text-lg font-medium text-gray-900">No classes found</h3> <h3 className="text-lg font-medium text-gray-900">No classes found</h3>
<p className="text-gray-600 mt-1"> <p className="text-gray-600 mt-1">
{searchQuery || filterSubject || filterSchoolYear {searchQuery || filterSubject || filterSchoolYear
@ -191,7 +191,7 @@ const ClassesPage: React.FC = () => {
> >
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="p-2 bg-blue-50 rounded-lg"> <div className="p-2 bg-blue-50 rounded-lg">
<MenuBookIcon className="text-blue-600" size={24} /> <MenuBook className="text-blue-600" size={24} />
</div> </div>
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full"> <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
{cls.subject} {cls.subject}
@ -203,11 +203,11 @@ const ClassesPage: React.FC = () => {
</p> </p>
<div className="flex items-center gap-4 text-sm text-gray-600"> <div className="flex items-center gap-4 text-sm text-gray-600">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<PeopleIcon size={16} /> <People size={16} />
{cls.student_count} students {cls.student_count} students
</span> </span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<CalendarTodayIcon size={16} /> <CalendarToday size={16} />
{cls.timetable_count} timetables {cls.timetable_count} timetables
</span> </span>
</div> </div>

14
src/pages/timetable/EnrollmentRequestsPage.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { CheckIcon, CloseIcon, FilterListIcon, KeyboardArrowDownIcon, PeopleIcon, PersonAddIcon, SearchIcon } from '@mui/icons-material'; import { Check, Close, FilterList, KeyboardArrowDown, People, PersonAdd, Search } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import Modal from '../../components/common/Modal'; import Modal from '../../components/common/Modal';
@ -105,7 +105,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<div className="flex flex-wrap items-center gap-4"> <div className="flex flex-wrap items-center gap-4">
{/* Class Filter */} {/* Class Filter */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FilterListIcon size={18} className="text-gray-400" /> <FilterList size={18} className="text-gray-400" />
<select <select
value={filters.class_id || ''} value={filters.class_id || ''}
onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))} onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))}
@ -137,7 +137,7 @@ const EnrollmentRequestsPage: React.FC = () => {
{/* Search */} {/* Search */}
<div className="flex-1 min-w-[200px]"> <div className="flex-1 min-w-[200px]">
<div className="relative"> <div className="relative">
<SearchIcon size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input <input
type="text" type="text"
placeholder="Search by student name or email..." placeholder="Search by student name or email..."
@ -195,7 +195,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<PersonAddIcon size={18} className="text-blue-600" /> <PersonAdd size={18} className="text-blue-600" />
</div> </div>
<div className="ml-4"> <div className="ml-4">
<div className="text-sm font-medium text-gray-900"> <div className="text-sm font-medium text-gray-900">
@ -230,7 +230,7 @@ const EnrollmentRequestsPage: React.FC = () => {
}} }}
className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200" className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200"
> >
<CheckIcon size={14} className="mr-1" /> <Check size={14} className="mr-1" />
Approve Approve
</button> </button>
<button <button
@ -241,7 +241,7 @@ const EnrollmentRequestsPage: React.FC = () => {
}} }}
className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200" className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200"
> >
<CloseIcon size={14} className="mr-1" /> <Close size={14} className="mr-1" />
Reject Reject
</button> </button>
</div> </div>
@ -259,7 +259,7 @@ const EnrollmentRequestsPage: React.FC = () => {
</div> </div>
) : ( ) : (
<div className="text-center py-16 bg-white rounded-lg shadow"> <div className="text-center py-16 bg-white rounded-lg shadow">
<PeopleIcon className="mx-auto h-12 w-12 text-gray-300" /> <People className="mx-auto h-12 w-12 text-gray-300" />
<h3 className="mt-4 text-lg font-medium text-gray-900">No enrollment requests</h3> <h3 className="mt-4 text-lg font-medium text-gray-900">No enrollment requests</h3>
<p className="mt-2 text-gray-500"> <p className="mt-2 text-gray-500">
{filters.status === 'pending' {filters.status === 'pending'

20
src/pages/timetable/LessonPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { AccessTimeIcon, ArrowBackIcon, CalendarTodayIcon, CancelIcon, CheckCircleIcon, DeleteIcon, DescriptionIcon, EditIcon, LocationOnIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material'; import { AccessTime, ArrowBack, CalendarToday, Cancel, CheckCircle, Delete, Description, Edit, LocationOn, MenuBook, People } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext'; import { useUser } from '../../contexts/UserContext';
import { format, parseISO } from 'date-fns'; import { format, parseISO } from 'date-fns';
@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
to={`/timetable/timetables/${currentTimetable?.id}`} to={`/timetable/timetables/${currentTimetable?.id}`}
className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2" className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2"
> >
<ArrowBackIcon size={16} className="mr-1" /> <ArrowBack size={16} className="mr-1" />
Back to Timetable Back to Timetable
</Link> </Link>
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1> <h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
onClick={() => setIsEditModalOpen(true)} onClick={() => setIsEditModalOpen(true)}
className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors" className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
> >
<EditIcon size={16} className="mr-2" /> <Edit size={16} className="mr-2" />
Edit Edit
</button> </button>
<button <button
onClick={handleDeleteLesson} onClick={handleDeleteLesson}
className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors" className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
> >
<DeleteIcon size={16} className="mr-2" /> <Delete size={16} className="mr-2" />
Delete Delete
</button> </button>
</div> </div>
@ -151,12 +151,12 @@ const LessonPage: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<AccessTimeIcon size={20} className="mr-2 text-blue-600" /> <AccessTime size={20} className="mr-2 text-blue-600" />
Time & Location Time & Location
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<CalendarTodayIcon size={18} className="text-gray-400 mt-0.5" /> <CalendarToday size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Date</p> <p className="font-medium text-gray-900">Date</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
</div> </div>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AccessTimeIcon size={18} className="text-gray-400 mt-0.5" /> <AccessTime size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Time</p> <p className="font-medium text-gray-900">Time</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
</div> </div>
{(currentLesson.location || currentLesson.room) && ( {(currentLesson.location || currentLesson.room) && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<LocationOnIcon size={18} className="text-gray-400 mt-0.5" /> <LocationOn size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Location</p> <p className="font-medium text-gray-900">Location</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<MenuBookIcon size={20} className="mr-2 text-green-600" /> <MenuBook size={20} className="mr-2 text-green-600" />
Class Information Class Information
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 flex items-center">
<PeopleIcon size={20} className="mr-2 text-purple-600" /> <People size={20} className="mr-2 text-purple-600" />
Attendance Attendance
</h2> </h2>
</div> </div>

20
src/pages/timetable/MyClassesPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { AccessTimeIcon, KeyboardArrowRightIcon, MenuBookIcon, PeopleIcon, SchoolIcon } from '@mui/icons-material'; import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext'; import { useUser } from '../../contexts/UserContext';
@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
{teachingClasses.length > 0 && ( {teachingClasses.length > 0 && (
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<SchoolIcon className="text-purple-600" size={24} /> <School className="text-purple-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Teaching</h2> <h2 className="text-xl font-semibold text-gray-900">Teaching</h2>
<span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full"> <span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
{teachingClasses.length} {teachingClasses.length}
@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p> <p className="text-sm text-gray-500">{classItem.class.code}</p>
)} )}
</div> </div>
<KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} /> <KeyboardArrowRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div> </div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2"> <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@ -120,12 +120,12 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<PeopleIcon size={14} /> <People size={14} />
<span>{classItem.class?.enrolled_count || 0} students</span> <span>{classItem.class?.enrolled_count || 0} students</span>
</div> </div>
{classItem.class?.academic_year && ( {classItem.class?.academic_year && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<SchoolIcon size={14} /> <School size={14} />
<span>{classItem.class.academic_year}</span> <span>{classItem.class.academic_year}</span>
</div> </div>
)} )}
@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
{enrolledClasses.length > 0 && ( {enrolledClasses.length > 0 && (
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<MenuBookIcon className="text-green-600" size={24} /> <MenuBook className="text-green-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Enrolled</h2> <h2 className="text-xl font-semibold text-gray-900">Enrolled</h2>
<span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full"> <span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
{enrolledClasses.length} {enrolledClasses.length}
@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p> <p className="text-sm text-gray-500">{classItem.class.code}</p>
)} )}
</div> </div>
<KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} /> <KeyboardArrowRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div> </div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2"> <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@ -180,14 +180,14 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<SchoolIcon size={14} /> <School size={14} />
<span> <span>
{classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name} {classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
</span> </span>
</div> </div>
{classItem.class?.academic_year && ( {classItem.class?.academic_year && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<SchoolIcon size={14} /> <School size={14} />
<span>{classItem.class.academic_year}</span> <span>{classItem.class.academic_year}</span>
</div> </div>
)} )}
@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
{/* Empty State */} {/* Empty State */}
{myClasses.length === 0 && ( {myClasses.length === 0 && (
<div className="text-center py-16"> <div className="text-center py-16">
<MenuBookIcon className="mx-auto h-12 w-12 text-gray-300" /> <MenuBook className="mx-auto h-12 w-12 text-gray-300" />
<h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3> <h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3>
<p className="mt-2 text-gray-500"> <p className="mt-2 text-gray-500">
You are not enrolled in or teaching any classes yet. You are not enrolled in or teaching any classes yet.

14
src/pages/timetable/TimetablePage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon, LocationOnIcon } from '@mui/icons-material'; import { AccessTime, Add, ArrowBack, CalendarToday, Delete, Edit, KeyboardArrowLeft, KeyboardArrowRight, LocationOn } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext'; import { useUser } from '../../contexts/UserContext';
import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns'; import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns';
@ -81,7 +81,7 @@ const TimetablePage: React.FC = () => {
to={`/timetable/classes/${currentTimetable.class_id}`} to={`/timetable/classes/${currentTimetable.class_id}`}
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
> >
<ArrowBackIcon size={18} /> <ArrowBack sx={{ fontSize: 18 }} />
Back to Class Back to Class
</Link> </Link>
@ -90,7 +90,7 @@ const TimetablePage: React.FC = () => {
<h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1> <h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1>
<div className="flex items-center gap-4 text-gray-500"> <div className="flex items-center gap-4 text-gray-500">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<CalendarTodayIcon size={16} /> <CalendarToday sx={{ fontSize: 16 }} />
{format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')} {format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')}
{currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`} {currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`}
</span> </span>
@ -107,14 +107,14 @@ const TimetablePage: React.FC = () => {
to={`/timetable/timetables/${timetableId}/lessons/new`} to={`/timetable/timetables/${timetableId}/lessons/new`}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<AddIcon size={18} /> <Add sx={{ fontSize: 18 }} />
Add Lesson Add Lesson
</Link> </Link>
<button <button
onClick={handleDeleteTimetable} onClick={handleDeleteTimetable}
className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
> >
<DeleteIcon size={18} /> <Delete sx={{ fontSize: 18 }} />
Delete Delete
</button> </button>
</div> </div>
@ -131,7 +131,7 @@ const TimetablePage: React.FC = () => {
{currentLessons.length === 0 ? ( {currentLessons.length === 0 ? (
<div className="p-12 text-center text-gray-500"> <div className="p-12 text-center text-gray-500">
<AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" /> <AccessTime sx={{ fontSize: 48 }} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No lessons scheduled</p> <p className="text-lg font-medium mb-2">No lessons scheduled</p>
<p>Add lessons to build your timetable</p> <p>Add lessons to build your timetable</p>
</div> </div>
@ -171,7 +171,7 @@ const TimetablePage: React.FC = () => {
</div> </div>
{lesson.location && ( {lesson.location && (
<div className="flex items-center gap-1 text-sm text-gray-500"> <div className="flex items-center gap-1 text-sm text-gray-500">
<LocationOnIcon size={14} /> <LocationOn sx={{ fontSize: 14 }} />
{lesson.location} {lesson.location}
</div> </div>
)} )}

4
src/pages/tldraw/CCDocumentIntelligence/CCDoclingViewer.tsx
View File

@ -327,9 +327,9 @@ export const CCDoclingViewer: React.FC<{
<Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}> <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
{!hideToolbar && ( {!hideToolbar && (
<Box sx={{ p: 1, display: 'flex', alignItems: 'center', gap: 1, borderBottom: '1px solid var(--color-divider)' }}> <Box sx={{ p: 1, display: 'flex', alignItems: 'center', gap: 1, borderBottom: '1px solid var(--color-divider)' }}>
<IconButton size="small" onClick={() => handlePageChange(start - 1)} disabled={start <= 1}><ArrowBackIosNewIcon fontSize="inherit" /></IconButton> <IconButton size="small" onClick={() => handlePageChange(start - 1)} disabled={start <= 1}><ArrowBackIosNew fontSize="inherit" /></IconButton>
<Box sx={{ fontSize: 12, color: 'var(--color-text-2)' }}>Section {start}–{end}</Box> <Box sx={{ fontSize: 12, color: 'var(--color-text-2)' }}>Section {start}–{end}</Box>
<IconButton size="small" onClick={() => handlePageChange(end + 1)} disabled={end >= totalPages}><ArrowForwardIosIcon fontSize="inherit" /></IconButton> <IconButton size="small" onClick={() => handlePageChange(end + 1)} disabled={end >= totalPages}><ArrowForwardIos fontSize="inherit" /></IconButton>
</Box> </Box>
)} )}
<Box sx={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, p: 2 }}> <Box sx={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, p: 2 }}>

14
src/pages/tldraw/CCDocumentIntelligence/CCEnhancedFilePanel.tsx
View File

@ -3,10 +3,14 @@ import {
Box, CircularProgress, IconButton, Typography, Collapse, Chip, Box, CircularProgress, IconButton, Typography, Collapse, Chip,
List, ListItem, ListItemButton, ListItemIcon, ListItemText List, ListItem, ListItemButton, ListItemIcon, ListItemText
} from '@mui/material'; } from '@mui/material';
import { import ExpandMore from '@mui/icons-material/ExpandMore';
ExpandMore, ChevronRight, Description, Check, Schedule, import ChevronRight from '@mui/icons-material/ChevronRight';
Visibility, Psychology, Home as OverviewIcon import Description from '@mui/icons-material/Description';
} from '@mui/icons-material'; import Check from '@mui/icons-material/Check';
import Schedule from '@mui/icons-material/Schedule';
import Visibility from '@mui/icons-material/Visibility';
import Psychology from '@mui/icons-material/Psychology';
import Overview from '@mui/icons-material/Home';
import { supabase } from '../../../supabaseClient'; import { supabase } from '../../../supabaseClient';
// Types // Types
@ -345,7 +349,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
color={selectedView === 'overview' ? 'primary' : 'default'} color={selectedView === 'overview' ? 'primary' : 'default'}
title="Processing Overview" title="Processing Overview"
> >
<OverviewIcon /> <CalendarViewMonth />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"

14
src/pages/tldraw/CCDocumentIntelligence/CCFileDetailPanel.tsx
View File

@ -161,7 +161,7 @@ export const CCFileDetailPanel: React.FC<{
</Box> </Box>
<Box sx={{ p: 1, borderBottom: '1px solid var(--color-divider)', display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, flexShrink: 0, bgcolor: 'var(--color-panel)' }}> <Box sx={{ p: 1, borderBottom: '1px solid var(--color-divider)', display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, flexShrink: 0, bgcolor: 'var(--color-panel)' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<IconButton size="small" onClick={() => onSelectPage(Math.max(1, selectedPage - 1))}><ArrowBackIosNewIcon fontSize="inherit" /></IconButton> <IconButton size="small" onClick={() => onSelectPage(Math.max(1, selectedPage - 1))}><ArrowBackIosNew fontSize="inherit" /></IconButton>
<TextField <TextField
size="small" size="small"
value={selectedPage} value={selectedPage}
@ -170,7 +170,7 @@ export const CCFileDetailPanel: React.FC<{
InputProps={{ sx: { width: 64, '& input': { textAlign: 'center', padding: '6px' } } }} InputProps={{ sx: { width: 64, '& input': { textAlign: 'center', padding: '6px' } } }}
inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', maxLength: 4 }} inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', maxLength: 4 }}
/> />
<IconButton size="small" onClick={() => onSelectPage(Math.min(manifest.page_count, selectedPage + 1))}><ArrowForwardIosIcon fontSize="inherit" /></IconButton> <IconButton size="small" onClick={() => onSelectPage(Math.min(manifest.page_count, selectedPage + 1))}><ArrowForwardIos fontSize="inherit" /></IconButton>
<Typography variant="body2" sx={{ color: 'var(--color-text-2)' }}>/ {manifest.page_count}</Typography> <Typography variant="body2" sx={{ color: 'var(--color-text-2)' }}>/ {manifest.page_count}</Typography>
</Box> </Box>
</Box> </Box>
@ -186,8 +186,8 @@ export const CCFileDetailPanel: React.FC<{
</Select> </Select>
{outline && outline.sections.length > 0 && ( {outline && outline.sections.length > 0 && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMoreIcon fontSize="inherit" /></IconButton> <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMore fontSize="inherit" /></IconButton>
<IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRightIcon fontSize="inherit" /></IconButton> <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRight fontSize="inherit" /></IconButton>
</Box> </Box>
)} )}
</Box> </Box>
@ -202,8 +202,8 @@ export const CCFileDetailPanel: React.FC<{
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
<Typography variant="body2" sx={{ color: 'var(--color-text-2)', fontWeight: 600 }}>Sections</Typography> <Typography variant="body2" sx={{ color: 'var(--color-text-2)', fontWeight: 600 }}>Sections</Typography>
<Box> <Box>
<IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMoreIcon fontSize="inherit" /></IconButton> <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMore fontSize="inherit" /></IconButton>
<IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRightIcon fontSize="inherit" /></IconButton> <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRight fontSize="inherit" /></IconButton>
</Box> </Box>
</Box> </Box>
)} )}
@ -291,7 +291,7 @@ const SectionTile: React.FC<{
borderBottom: '1px solid var(--color-divider)' borderBottom: '1px solid var(--color-divider)'
}}> }}>
<IconButton size="small" onClick={(e) => { e.stopPropagation(); toggleCollapse(s.id); }}> <IconButton size="small" onClick={(e) => { e.stopPropagation(); toggleCollapse(s.id); }}>
{isCollapsed ? <ChevronRightIcon fontSize="inherit" /> : <ExpandMoreIcon fontSize="inherit" />} {isCollapsed ? <ChevronRight fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
</IconButton> </IconButton>
<Box onClick={() => onSelectPage(Math.max(1, s.start_page))}> <Box onClick={() => onSelectPage(Math.max(1, s.start_page))}>
<Typography component="span" sx={{ color: 'var(--color-text-1)' }}>{s.title}</Typography> <Typography component="span" sx={{ color: 'var(--color-text-1)' }}>{s.title}</Typography>

2
src/pages/user/NotFound.tsx
View File

@ -36,7 +36,7 @@ function NotFound() {
gap: 3 gap: 3
}} }}
> >
<ErrorOutlineIcon sx={{ fontSize: 60, color: theme.palette.error.main }} /> <ErrorOutline sx={{ fontSize: 60, color: theme.palette.error.main }} />
<Typography variant="h2" component="h1" gutterBottom> <Typography variant="h2" component="h1" gutterBottom>
404 404
</Typography> </Typography>

3
src/services/timetableService.ts
View File

@ -325,9 +325,8 @@ export const enrollmentService = {
// Combined Export // Combined Export
// ============================================================================ // ============================================================================
export const timetableService = { export const timetableServiceExports = {
...classService, ...classService,
...timetableService,
...lessonService, ...lessonService,
...enrollmentService, ...enrollmentService,
}; };

7
src/utils/tldraw/ui-overrides/components/shared/navigation/CCNodeSnapshotPanel.tsx
View File

@ -1,6 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
import { Box, Typography, styled, Button, ThemeProvider, createTheme, useMediaQuery } from '@mui/material'; import { Box, Typography, styled, Button, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
import { Save as SaveIcon, RestartAlt as ResetIcon } from '@mui/icons-material'; import Save from '@mui/icons-material/Save';
import Reset from '@mui/icons-material/RestartAlt';
import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw'; import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
import { useNavigationStore } from '../../../../../../stores/navigationStore'; import { useNavigationStore } from '../../../../../../stores/navigationStore';
import { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService'; import { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService';
@ -173,7 +174,7 @@ export const CCNodeSnapshotPanel: React.FC = () => {
<ActionButton <ActionButton
variant="contained" variant="contained"
size="small" size="small"
startIcon={<SaveIcon />} startIcon={<Save />}
onClick={handleSaveSnapshot} onClick={handleSaveSnapshot}
disabled={isLoading} disabled={isLoading}
sx={{ flex: 1 }} sx={{ flex: 1 }}
@ -183,7 +184,7 @@ export const CCNodeSnapshotPanel: React.FC = () => {
<ActionButton <ActionButton
variant="contained" variant="contained"
size="small" size="small"
startIcon={<ResetIcon />} startIcon={<RestartAlt />}
onClick={handleResetCanvas} onClick={handleResetCanvas}
disabled={isLoading} disabled={isLoading}
sx={{ flex: 1 }} sx={{ flex: 1 }}