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/components/common/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseIcon } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
 
 interface ModalProps {
   isOpen: boolean;
@@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidt
               onClick={onClose}
               className="text-gray-400 hover:text-gray-500 focus:outline-none"
             >
-              <CloseIcon size={20} />
+              <Close sx={{ fontSize: 20 }} />
             </button>
           </div>