fix: correct Material UI icon naming in Header.tsx and update timetable components
- 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:
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react';
|
||||
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 { useUser } from '../../contexts/UserContext';
|
||||
|
||||
@@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{teachingClasses.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<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>
|
||||
<span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
|
||||
{teachingClasses.length}
|
||||
@@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
|
||||
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<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="flex items-center gap-1">
|
||||
<PeopleIcon size={14} />
|
||||
<People size={14} />
|
||||
<span>{classItem.class?.enrolled_count || 0} students</span>
|
||||
</div>
|
||||
{classItem.class?.academic_year && (
|
||||
<div className="flex items-center gap-1">
|
||||
<SchoolIcon size={14} />
|
||||
<School size={14} />
|
||||
<span>{classItem.class.academic_year}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{enrolledClasses.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<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>
|
||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
|
||||
{enrolledClasses.length}
|
||||
@@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
|
||||
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<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="flex items-center gap-1">
|
||||
<SchoolIcon size={14} />
|
||||
<School size={14} />
|
||||
<span>
|
||||
{classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
|
||||
</span>
|
||||
</div>
|
||||
{classItem.class?.academic_year && (
|
||||
<div className="flex items-center gap-1">
|
||||
<SchoolIcon size={14} />
|
||||
<School size={14} />
|
||||
<span>{classItem.class.academic_year}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{/* Empty State */}
|
||||
{myClasses.length === 0 && (
|
||||
<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>
|
||||
<p className="mt-2 text-gray-500">
|
||||
You are not enrolled in or teaching any classes yet.
|
||||
|
||||
Reference in New Issue
Block a user