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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/timetable/ClassDetailPage.tsx
+11 -11
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
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 { useUser } from '../../contexts/UserContext';
import Modal from '../../components/common/Modal';
@@ -72,7 +72,7 @@ const ClassDetailPage: React.FC = () => {
to="/timetable/classes"
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
</Link>
@@ -95,14 +95,14 @@ const ClassDetailPage: React.FC = () => {
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"
>
<EditIcon size={18} />
<Edit size={18} />
Edit
</Link>
<button
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"
>
<DeleteIcon size={18} />
<Delete size={18} />
Delete
</button>
</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="flex items-center gap-3">
<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>
<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="flex items-center gap-3">
<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>
<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="flex items-center gap-3">
<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>
<p className="text-sm text-gray-500">Teachers</p>
@@ -194,7 +194,7 @@ const ClassDetailPage: React.FC = () => {
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"
>
<AddIcon size={18} />
<Add size={18} />
Add Timetable
</Link>
)}
@@ -202,7 +202,7 @@ const ClassDetailPage: React.FC = () => {
{timetables.length === 0 ? (
<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>Create a timetable to start scheduling lessons</p>
</div>
@@ -221,7 +221,7 @@ const ClassDetailPage: React.FC = () => {
{timetable.is_recurring && ' • Recurring'}
</p>
</div>
<ArrowBackIcon className="rotate-180 text-gray-400" size={18} />
<ArrowBack className="rotate-180 text-gray-400" size={18} />
</Link>
))}
</div>
@@ -234,7 +234,7 @@ const ClassDetailPage: React.FC = () => {
<h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2>
{enrolledStudents.length === 0 ? (
<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>Students can request enrollment or be added by teachers</p>
</div>