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:
Agent Zero
2026-02-26 07:28:47 +00:00
parent 00a6f941c7
commit 067df34c50
16 changed files with 123 additions and 122 deletions
+10 -10
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
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 { useUser } from '../../contexts/UserContext';
import { format, parseISO } from 'date-fns';
@@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
to={`/timetable/timetables/${currentTimetable?.id}`}
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
</Link>
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
@@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
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"
>
<EditIcon size={16} className="mr-2" />
<Edit size={16} className="mr-2" />
Edit
</button>
<button
onClick={handleDeleteLesson}
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
</button>
</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="bg-white rounded-lg shadow p-6">
<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
</h2>
<div className="space-y-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>
<p className="font-medium text-gray-900">Date</p>
<p className="text-gray-600">
@@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
</div>
</div>
<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>
<p className="font-medium text-gray-900">Time</p>
<p className="text-gray-600">
@@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
</div>
{(currentLesson.location || currentLesson.room) && (
<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>
<p className="font-medium text-gray-900">Location</p>
<p className="text-gray-600">
@@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow p-6">
<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
</h2>
<div className="space-y-3">
@@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200">
<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
</h2>
</div>