ClassroomCopilot/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): replace lucide-react with @mui/icons-material

Browse Source 
Replace lucide-react icon imports with @mui/icons-material equivalents
across all timetable pages and common Modal component.

Icons replaced:
- lucide-react Check, X, UserPlus, Users, Filter, Search -> MUI equivalents
- lucide-react ChevronDown, ChevronLeft, ChevronRight -> MUI equivalents
- lucide-react BookOpen, Clock, GraduationCap, School -> MUI equivalents
- lucide-react Calendar, MapPin, Edit, Trash2, Plus -> MUI equivalents
- lucide-react ArrowLeft, FileText, CheckCircle, XCircle -> MUI equivalents

Fixes build error: Failed to resolve import 'lucide-react'
This commit is contained in:
Agent Zero 2026-02-26 07:06:11 +00:00
parent a64836c94a
commit c7207eb805
7 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/Modal.tsx
View File

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

22
src/pages/timetable/ClassDetailPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { ArrowLeft, Calendar, Users, BookOpen, Clock, Edit, Trash2, Plus } from 'lucide-react'; import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext'; import { useProfile } from '../../contexts/ProfileContext';
import Modal from '../../components/common/Modal'; import Modal from '../../components/common/Modal';
@ -72,7 +72,7 @@ const ClassDetailPage: React.FC = () => {
to="/timetable/classes" to="/timetable/classes"
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
> >
<ArrowLeft size={18} /> <ArrowBackIcon size={18} />
Back to Classes Back to Classes
</Link> </Link>
@ -95,14 +95,14 @@ const ClassDetailPage: React.FC = () => {
to={`/timetable/classes/${classId}/edit`} to={`/timetable/classes/${classId}/edit`}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
> >
<Edit size={18} /> <EditIcon size={18} />
Edit Edit
</Link> </Link>
<button <button
onClick={() => setShowDeleteModal(true)} onClick={() => setShowDeleteModal(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
> >
<Trash2 size={18} /> <DeleteIcon size={18} />
Delete Delete
</button> </button>
</div> </div>
@ -115,7 +115,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-blue-50 rounded-lg"> <div className="p-2 bg-blue-50 rounded-lg">
<Calendar className="text-blue-600" size={20} /> <CalendarTodayIcon className="text-blue-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Timetables</p> <p className="text-sm text-gray-500">Timetables</p>
@ -126,7 +126,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-green-50 rounded-lg"> <div className="p-2 bg-green-50 rounded-lg">
<Users className="text-green-600" size={20} /> <PeopleIcon className="text-green-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Students</p> <p className="text-sm text-gray-500">Students</p>
@ -137,7 +137,7 @@ const ClassDetailPage: React.FC = () => {
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-50 rounded-lg"> <div className="p-2 bg-purple-50 rounded-lg">
<BookOpen className="text-purple-600" size={20} /> <MenuBookIcon className="text-purple-600" size={20} />
</div> </div>
<div> <div>
<p className="text-sm text-gray-500">Teachers</p> <p className="text-sm text-gray-500">Teachers</p>
@ -194,7 +194,7 @@ const ClassDetailPage: React.FC = () => {
to={`/timetable/classes/${classId}/timetables/new`} to={`/timetable/classes/${classId}/timetables/new`}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<Plus size={18} /> <AddIcon size={18} />
Add Timetable Add Timetable
</Link> </Link>
)} )}
@ -202,7 +202,7 @@ const ClassDetailPage: React.FC = () => {
{timetables.length === 0 ? ( {timetables.length === 0 ? (
<div className="text-center py-12 text-gray-500"> <div className="text-center py-12 text-gray-500">
<Clock size={48} className="mx-auto mb-4 opacity-50" /> <AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No timetables yet</p> <p className="text-lg font-medium mb-2">No timetables yet</p>
<p>Create a timetable to start scheduling lessons</p> <p>Create a timetable to start scheduling lessons</p>
</div> </div>
@ -221,7 +221,7 @@ const ClassDetailPage: React.FC = () => {
{timetable.is_recurring && ' • Recurring'} {timetable.is_recurring && ' • Recurring'}
</p> </p>
</div> </div>
<ArrowLeft className="rotate-180 text-gray-400" size={18} /> <ArrowBackIcon className="rotate-180 text-gray-400" size={18} />
</Link> </Link>
))} ))}
</div> </div>
@ -234,7 +234,7 @@ const ClassDetailPage: React.FC = () => {
<h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2> <h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2>
{enrolledStudents.length === 0 ? ( {enrolledStudents.length === 0 ? (
<div className="text-center py-12 text-gray-500"> <div className="text-center py-12 text-gray-500">
<Users size={48} className="mx-auto mb-4 opacity-50" /> <PeopleIcon size={48} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No students enrolled</p> <p className="text-lg font-medium mb-2">No students enrolled</p>
<p>Students can request enrollment or be added by teachers</p> <p>Students can request enrollment or be added by teachers</p>
</div> </div>

16
src/pages/timetable/ClassesPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Plus, Search, Filter, BookOpen, Users, Calendar } from 'lucide-react'; import { AddIcon, CalendarTodayIcon, FilterListIcon, MenuBookIcon, PeopleIcon, SearchIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext'; import { useProfile } from '../../contexts/ProfileContext';
@ -70,7 +70,7 @@ const ClassesPage: React.FC = () => {
onClick={() => navigate('/timetable/classes/create')} 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" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<Plus size={20} /> <AddIcon size={20} />
Create Class Create Class
</button> </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"> <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"> <form onSubmit={handleSearch} className="flex flex-col md:flex-row gap-4">
<div className="flex-1 relative"> <div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} /> <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
<input <input
type="text" type="text"
placeholder="Search classes by name or subject..." placeholder="Search classes by name or subject..."
@ -94,7 +94,7 @@ const ClassesPage: React.FC = () => {
onClick={() => setShowFilters(!showFilters)} 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" className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
> >
<Filter size={20} /> <FilterListIcon size={20} />
Filters Filters
</button> </button>
<button <button
@ -172,7 +172,7 @@ const ClassesPage: React.FC = () => {
</div> </div>
) : classes.length === 0 ? ( ) : classes.length === 0 ? (
<div className="text-center py-12 bg-gray-50 rounded-xl"> <div className="text-center py-12 bg-gray-50 rounded-xl">
<BookOpen className="mx-auto h-12 w-12 text-gray-400 mb-4" /> <MenuBookIcon 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> <h3 className="text-lg font-medium text-gray-900">No classes found</h3>
<p className="text-gray-600 mt-1"> <p className="text-gray-600 mt-1">
{searchQuery || filterSubject || filterSchoolYear {searchQuery || filterSubject || filterSchoolYear
@ -191,7 +191,7 @@ const ClassesPage: React.FC = () => {
> >
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="p-2 bg-blue-50 rounded-lg"> <div className="p-2 bg-blue-50 rounded-lg">
<BookOpen className="text-blue-600" size={24} /> <MenuBookIcon className="text-blue-600" size={24} />
</div> </div>
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full"> <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
{cls.subject} {cls.subject}
@ -203,11 +203,11 @@ const ClassesPage: React.FC = () => {
</p> </p>
<div className="flex items-center gap-4 text-sm text-gray-600"> <div className="flex items-center gap-4 text-sm text-gray-600">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Users size={16} /> <PeopleIcon size={16} />
{cls.student_count} students {cls.student_count} students
</span> </span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Calendar size={16} /> <CalendarTodayIcon size={16} />
{cls.timetable_count} timetables {cls.timetable_count} timetables
</span> </span>
</div> </div>

14
src/pages/timetable/EnrollmentRequestsPage.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Check, X, UserPlus, Users, Filter, Search, ChevronDown } from 'lucide-react'; import { CheckIcon, CloseIcon, FilterListIcon, KeyboardArrowDownIcon, PeopleIcon, PersonAddIcon, SearchIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import Modal from '../../components/common/Modal'; import Modal from '../../components/common/Modal';
@ -105,7 +105,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<div className="flex flex-wrap items-center gap-4"> <div className="flex flex-wrap items-center gap-4">
{/* Class Filter */} {/* Class Filter */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Filter size={18} className="text-gray-400" /> <FilterListIcon size={18} className="text-gray-400" />
<select <select
value={filters.class_id || ''} value={filters.class_id || ''}
onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))} onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))}
@ -137,7 +137,7 @@ const EnrollmentRequestsPage: React.FC = () => {
{/* Search */} {/* Search */}
<div className="flex-1 min-w-[200px]"> <div className="flex-1 min-w-[200px]">
<div className="relative"> <div className="relative">
<Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <SearchIcon size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input <input
type="text" type="text"
placeholder="Search by student name or email..." placeholder="Search by student name or email..."
@ -195,7 +195,7 @@ const EnrollmentRequestsPage: React.FC = () => {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<UserPlus size={18} className="text-blue-600" /> <PersonAddIcon size={18} className="text-blue-600" />
</div> </div>
<div className="ml-4"> <div className="ml-4">
<div className="text-sm font-medium text-gray-900"> <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" 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"
> >
<Check size={14} className="mr-1" /> <CheckIcon size={14} className="mr-1" />
Approve Approve
</button> </button>
<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" 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"
> >
<X size={14} className="mr-1" /> <CloseIcon size={14} className="mr-1" />
Reject Reject
</button> </button>
</div> </div>
@ -259,7 +259,7 @@ const EnrollmentRequestsPage: React.FC = () => {
</div> </div>
) : ( ) : (
<div className="text-center py-16 bg-white rounded-lg shadow"> <div className="text-center py-16 bg-white rounded-lg shadow">
<Users className="mx-auto h-12 w-12 text-gray-300" /> <PeopleIcon 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> <h3 className="mt-4 text-lg font-medium text-gray-900">No enrollment requests</h3>
<p className="mt-2 text-gray-500"> <p className="mt-2 text-gray-500">
{filters.status === 'pending' {filters.status === 'pending'

20
src/pages/timetable/LessonPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { ArrowLeft, Calendar, Clock, MapPin, Edit, Trash2, Users, BookOpen, FileText, CheckCircle, XCircle } from 'lucide-react'; import { AccessTimeIcon, ArrowBackIcon, CalendarTodayIcon, CancelIcon, CheckCircleIcon, DeleteIcon, DescriptionIcon, EditIcon, LocationOnIcon, MenuBookIcon, PeopleIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext'; import { useProfile } from '../../contexts/ProfileContext';
import { format, parseISO } from 'date-fns'; import { format, parseISO } from 'date-fns';
@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
to={`/timetable/timetables/${currentTimetable?.id}`} to={`/timetable/timetables/${currentTimetable?.id}`}
className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2" className="inline-flex items-center text-gray-500 hover:text-gray-700 mb-2"
> >
<ArrowLeft size={16} className="mr-1" /> <ArrowBackIcon size={16} className="mr-1" />
Back to Timetable Back to Timetable
</Link> </Link>
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1> <h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
onClick={() => setIsEditModalOpen(true)} 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" className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
> >
<Edit size={16} className="mr-2" /> <EditIcon size={16} className="mr-2" />
Edit Edit
</button> </button>
<button <button
onClick={handleDeleteLesson} onClick={handleDeleteLesson}
className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors" className="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
> >
<Trash2 size={16} className="mr-2" /> <DeleteIcon size={16} className="mr-2" />
Delete Delete
</button> </button>
</div> </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="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<Clock size={20} className="mr-2 text-blue-600" /> <AccessTimeIcon size={20} className="mr-2 text-blue-600" />
Time & Location Time & Location
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Calendar size={18} className="text-gray-400 mt-0.5" /> <CalendarTodayIcon size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Date</p> <p className="font-medium text-gray-900">Date</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
</div> </div>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Clock size={18} className="text-gray-400 mt-0.5" /> <AccessTimeIcon size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Time</p> <p className="font-medium text-gray-900">Time</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
</div> </div>
{(currentLesson.location || currentLesson.room) && ( {(currentLesson.location || currentLesson.room) && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<MapPin size={18} className="text-gray-400 mt-0.5" /> <LocationOnIcon size={18} className="text-gray-400 mt-0.5" />
<div> <div>
<p className="font-medium text-gray-900">Location</p> <p className="font-medium text-gray-900">Location</p>
<p className="text-gray-600"> <p className="text-gray-600">
@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow p-6"> <div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<BookOpen size={20} className="mr-2 text-green-600" /> <MenuBookIcon size={20} className="mr-2 text-green-600" />
Class Information Class Information
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
<div className="bg-white rounded-lg shadow"> <div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200"> <div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900 flex items-center"> <h2 className="text-lg font-semibold text-gray-900 flex items-center">
<Users size={20} className="mr-2 text-purple-600" /> <PeopleIcon size={20} className="mr-2 text-purple-600" />
Attendance Attendance
</h2> </h2>
</div> </div>

20
src/pages/timetable/MyClassesPage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { BookOpen, Users, Clock, ChevronRight, GraduationCap, School } from 'lucide-react'; import { AccessTimeIcon, KeyboardArrowRightIcon, MenuBookIcon, PeopleIcon, SchoolIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext'; import { useProfile } from '../../contexts/ProfileContext';
@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
{teachingClasses.length > 0 && ( {teachingClasses.length > 0 && (
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<GraduationCap className="text-purple-600" size={24} /> <SchoolIcon className="text-purple-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Teaching</h2> <h2 className="text-xl font-semibold text-gray-900">Teaching</h2>
<span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full"> <span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
{teachingClasses.length} {teachingClasses.length}
@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p> <p className="text-sm text-gray-500">{classItem.class.code}</p>
)} )}
</div> </div>
<ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} /> <KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div> </div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2"> <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@ -120,12 +120,12 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Users size={14} /> <PeopleIcon size={14} />
<span>{classItem.class?.enrolled_count || 0} students</span> <span>{classItem.class?.enrolled_count || 0} students</span>
</div> </div>
{classItem.class?.academic_year && ( {classItem.class?.academic_year && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<School size={14} /> <SchoolIcon size={14} />
<span>{classItem.class.academic_year}</span> <span>{classItem.class.academic_year}</span>
</div> </div>
)} )}
@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
{enrolledClasses.length > 0 && ( {enrolledClasses.length > 0 && (
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<BookOpen className="text-green-600" size={24} /> <MenuBookIcon className="text-green-600" size={24} />
<h2 className="text-xl font-semibold text-gray-900">Enrolled</h2> <h2 className="text-xl font-semibold text-gray-900">Enrolled</h2>
<span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full"> <span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
{enrolledClasses.length} {enrolledClasses.length}
@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
<p className="text-sm text-gray-500">{classItem.class.code}</p> <p className="text-sm text-gray-500">{classItem.class.code}</p>
)} )}
</div> </div>
<ChevronRight className="text-gray-400 flex-shrink-0 ml-2" size={20} /> <KeyboardArrowRightIcon className="text-gray-400 flex-shrink-0 ml-2" size={20} />
</div> </div>
<p className="text-gray-600 text-sm mb-4 line-clamp-2"> <p className="text-gray-600 text-sm mb-4 line-clamp-2">
@ -180,14 +180,14 @@ const MyClassesPage: React.FC = () => {
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<GraduationCap size={14} /> <SchoolIcon size={14} />
<span> <span>
{classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name} {classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
</span> </span>
</div> </div>
{classItem.class?.academic_year && ( {classItem.class?.academic_year && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<School size={14} /> <SchoolIcon size={14} />
<span>{classItem.class.academic_year}</span> <span>{classItem.class.academic_year}</span>
</div> </div>
)} )}
@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
{/* Empty State */} {/* Empty State */}
{myClasses.length === 0 && ( {myClasses.length === 0 && (
<div className="text-center py-16"> <div className="text-center py-16">
<BookOpen className="mx-auto h-12 w-12 text-gray-300" /> <MenuBookIcon className="mx-auto h-12 w-12 text-gray-300" />
<h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3> <h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3>
<p className="mt-2 text-gray-500"> <p className="mt-2 text-gray-500">
You are not enrolled in or teaching any classes yet. You are not enrolled in or teaching any classes yet.

14
src/pages/timetable/TimetablePage.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { ArrowLeft, Calendar, Clock, MapPin, Edit, Trash2, Plus, ChevronLeft, ChevronRight } from 'lucide-react'; import { AccessTimeIcon, AddIcon, ArrowBackIcon, CalendarTodayIcon, DeleteIcon, EditIcon, KeyboardArrowLeftIcon, KeyboardArrowRightIcon, LocationOnIcon } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore'; import useTimetableStore from '../../stores/timetableStore';
import { useProfile } from '../../contexts/ProfileContext'; import { useProfile } from '../../contexts/ProfileContext';
import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns'; import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns';
@ -81,7 +81,7 @@ const TimetablePage: React.FC = () => {
to={`/timetable/classes/${currentTimetable.class_id}`} to={`/timetable/classes/${currentTimetable.class_id}`}
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
> >
<ArrowLeft size={18} /> <ArrowBackIcon size={18} />
Back to Class Back to Class
</Link> </Link>
@ -90,7 +90,7 @@ const TimetablePage: React.FC = () => {
<h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1> <h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1>
<div className="flex items-center gap-4 text-gray-500"> <div className="flex items-center gap-4 text-gray-500">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Calendar size={16} /> <CalendarTodayIcon size={16} />
{format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')} {format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')}
{currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`} {currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`}
</span> </span>
@ -107,14 +107,14 @@ const TimetablePage: React.FC = () => {
to={`/timetable/timetables/${timetableId}/lessons/new`} to={`/timetable/timetables/${timetableId}/lessons/new`}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
> >
<Plus size={18} /> <AddIcon size={18} />
Add Lesson Add Lesson
</Link> </Link>
<button <button
onClick={handleDeleteTimetable} onClick={handleDeleteTimetable}
className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
> >
<Trash2 size={18} /> <DeleteIcon size={18} />
Delete Delete
</button> </button>
</div> </div>
@ -131,7 +131,7 @@ const TimetablePage: React.FC = () => {
{currentLessons.length === 0 ? ( {currentLessons.length === 0 ? (
<div className="p-12 text-center text-gray-500"> <div className="p-12 text-center text-gray-500">
<Clock size={48} className="mx-auto mb-4 opacity-50" /> <AccessTimeIcon size={48} className="mx-auto mb-4 opacity-50" />
<p className="text-lg font-medium mb-2">No lessons scheduled</p> <p className="text-lg font-medium mb-2">No lessons scheduled</p>
<p>Add lessons to build your timetable</p> <p>Add lessons to build your timetable</p>
</div> </div>
@ -171,7 +171,7 @@ const TimetablePage: React.FC = () => {
</div> </div>
{lesson.location && ( {lesson.location && (
<div className="flex items-center gap-1 text-sm text-gray-500"> <div className="flex items-center gap-1 text-sm text-gray-500">
<MapPin size={14} /> <LocationOnIcon size={14} />
{lesson.location} {lesson.location}
</div> </div>
)} )}