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
@@ -1,5 +1,5 @@
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 Modal from '../../components/common/Modal';
@@ -105,7 +105,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<div className="flex flex-wrap items-center gap-4">
{/* Class Filter */}
<div className="flex items-center gap-2">
<FilterListIcon size={18} className="text-gray-400" />
<FilterList size={18} className="text-gray-400" />
<select
value={filters.class_id || ''}
onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))}
@@ -137,7 +137,7 @@ const EnrollmentRequestsPage: React.FC = () => {
{/* Search */}
<div className="flex-1 min-w-[200px]">
<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
type="text"
placeholder="Search by student name or email..."
@@ -195,7 +195,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-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 className="ml-4">
<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"
>
<CheckIcon size={14} className="mr-1" />
<Check size={14} className="mr-1" />
Approve
</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"
>
<CloseIcon size={14} className="mr-1" />
<Close size={14} className="mr-1" />
Reject
</button>
</div>
@@ -259,7 +259,7 @@ const EnrollmentRequestsPage: React.FC = () => {
</div>
) : (
<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>
<p className="mt-2 text-gray-500">
{filters.status === 'pending'