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/tldraw/CCDocumentIntelligence/CCDoclingViewer.tsx

@@ -327,9 +327,9 @@ export const CCDoclingViewer: React.FC<{
         <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
           {!hideToolbar && (
             <Box sx={{ p: 1, display: 'flex', alignItems: 'center', gap: 1, borderBottom: '1px solid var(--color-divider)' }}>
-              <IconButton size="small" onClick={() => handlePageChange(start - 1)} disabled={start <= 1}><ArrowBackIosNewIcon fontSize="inherit" /></IconButton>
+              <IconButton size="small" onClick={() => handlePageChange(start - 1)} disabled={start <= 1}><ArrowBackIosNew fontSize="inherit" /></IconButton>
               <Box sx={{ fontSize: 12, color: 'var(--color-text-2)' }}>Section {start}–{end}</Box>
-              <IconButton size="small" onClick={() => handlePageChange(end + 1)} disabled={end >= totalPages}><ArrowForwardIosIcon fontSize="inherit" /></IconButton>
+              <IconButton size="small" onClick={() => handlePageChange(end + 1)} disabled={end >= totalPages}><ArrowForwardIos fontSize="inherit" /></IconButton>
             </Box>
           )}
           <Box sx={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, p: 2 }}>

src/pages/tldraw/CCDocumentIntelligence/CCEnhancedFilePanel.tsx

@@ -3,10 +3,14 @@ import {
   Box, CircularProgress, IconButton, Typography, Collapse, Chip,
   List, ListItem, ListItemButton, ListItemIcon, ListItemText
 } from '@mui/material';
-import {
-  ExpandMore, ChevronRight, Description, Check, Schedule,
-  Visibility, Psychology, Home as OverviewIcon
-} from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import Description from '@mui/icons-material/Description';
+import Check from '@mui/icons-material/Check';
+import Schedule from '@mui/icons-material/Schedule';
+import Visibility from '@mui/icons-material/Visibility';
+import Psychology from '@mui/icons-material/Psychology';
+import Overview from '@mui/icons-material/Home';
 import { supabase } from '../../../supabaseClient';
 
 // Types
@@ -345,7 +349,7 @@ export const CCEnhancedFilePanel: React.FC<CCEnhancedFilePanelProps> = ({
             color={selectedView === 'overview' ? 'primary' : 'default'}
             title="Processing Overview"
           >
-            <OverviewIcon />
+            <CalendarViewMonth />
           </IconButton>
           <IconButton
             size="small"

src/pages/tldraw/CCDocumentIntelligence/CCFileDetailPanel.tsx

@@ -161,7 +161,7 @@ export const CCFileDetailPanel: React.FC<{
       </Box>
       <Box sx={{ p: 1, borderBottom: '1px solid var(--color-divider)', display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, flexShrink: 0, bgcolor: 'var(--color-panel)' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <IconButton size="small" onClick={() => onSelectPage(Math.max(1, selectedPage - 1))}><ArrowBackIosNewIcon fontSize="inherit" /></IconButton>
+          <IconButton size="small" onClick={() => onSelectPage(Math.max(1, selectedPage - 1))}><ArrowBackIosNew fontSize="inherit" /></IconButton>
           <TextField
             size="small"
             value={selectedPage}
@@ -170,7 +170,7 @@ export const CCFileDetailPanel: React.FC<{
             InputProps={{ sx: { width: 64, '& input': { textAlign: 'center', padding: '6px' } } }}
             inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', maxLength: 4 }}
           />
-          <IconButton size="small" onClick={() => onSelectPage(Math.min(manifest.page_count, selectedPage + 1))}><ArrowForwardIosIcon fontSize="inherit" /></IconButton>
+          <IconButton size="small" onClick={() => onSelectPage(Math.min(manifest.page_count, selectedPage + 1))}><ArrowForwardIos fontSize="inherit" /></IconButton>
           <Typography variant="body2" sx={{ color: 'var(--color-text-2)' }}>/ {manifest.page_count}</Typography>
         </Box>
       </Box>
@@ -186,8 +186,8 @@ export const CCFileDetailPanel: React.FC<{
         </Select>
         {outline && outline.sections.length > 0 && (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMoreIcon fontSize="inherit" /></IconButton>
-            <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRightIcon fontSize="inherit" /></IconButton>
+            <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMore fontSize="inherit" /></IconButton>
+            <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRight fontSize="inherit" /></IconButton>
           </Box>
         )}
       </Box>
@@ -202,8 +202,8 @@ export const CCFileDetailPanel: React.FC<{
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
             <Typography variant="body2" sx={{ color: 'var(--color-text-2)', fontWeight: 600 }}>Sections</Typography>
             <Box>
-              <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMoreIcon fontSize="inherit" /></IconButton>
-              <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRightIcon fontSize="inherit" /></IconButton>
+              <IconButton size="small" title="Expand all" onClick={() => setCollapsed(new Set())}><ExpandMore fontSize="inherit" /></IconButton>
+              <IconButton size="small" title="Collapse all" onClick={() => setCollapsed(new Set(collectAllIds(outline.sections)))}><ChevronRight fontSize="inherit" /></IconButton>
             </Box>
           </Box>
         )}
@@ -291,7 +291,7 @@ const SectionTile: React.FC<{
         borderBottom: '1px solid var(--color-divider)'
       }}>
         <IconButton size="small" onClick={(e) => { e.stopPropagation(); toggleCollapse(s.id); }}>
-          {isCollapsed ? <ChevronRightIcon fontSize="inherit" /> : <ExpandMoreIcon fontSize="inherit" />}
+          {isCollapsed ? <ChevronRight fontSize="inherit" /> : <ExpandMore fontSize="inherit" />}
         </IconButton>
         <Box onClick={() => onSelectPage(Math.max(1, s.start_page))}>
           <Typography component="span" sx={{ color: 'var(--color-text-1)' }}>{s.title}</Typography>