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

src/pages/timetable/ClassesPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 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 { useUser } from '../../contexts/UserContext';
 
@@ -70,7 +70,7 @@ const ClassesPage: React.FC = () => {
             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"
           >
-            <AddIcon size={20} />
+            <Add size={20} />
             Create Class
           </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">
         <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
           <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
               type="text"
               placeholder="Search classes by name or subject..."
@@ -94,7 +94,7 @@ const ClassesPage: React.FC = () => {
             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"
           >
-            <FilterListIcon size={20} />
+            <FilterList size={20} />
             Filters
           </button>
           <button
@@ -172,7 +172,7 @@ const ClassesPage: React.FC = () => {
         </div>
       ) : classes.length === 0 ? (
         <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>
           <p className="text-gray-600 mt-1">
             {searchQuery || filterSubject || filterSchoolYear
@@ -191,7 +191,7 @@ const ClassesPage: React.FC = () => {
               >
                 <div className="flex items-start justify-between mb-4">
                   <div className="p-2 bg-blue-50 rounded-lg">
-                    <MenuBookIcon className="text-blue-600" size={24} />
+                    <MenuBook className="text-blue-600" size={24} />
                   </div>
                   <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
                     {cls.subject}
@@ -203,11 +203,11 @@ const ClassesPage: React.FC = () => {
                 </p>
                 <div className="flex items-center gap-4 text-sm text-gray-600">
                   <span className="flex items-center gap-1">
-                    <PeopleIcon size={16} />
+                    <People size={16} />
                     {cls.student_count} students
                   </span>
                   <span className="flex items-center gap-1">
-                    <CalendarTodayIcon size={16} />
+                    <CalendarToday size={16} />
                     {cls.timetable_count} timetables
                   </span>
                 </div>