fix(icons): replace lucide-react with @mui/icons-material
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
parent
a64836c94a
commit
c7207eb805
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { CloseIcon } from '@mui/icons-material';
|
||||
|
||||
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"
|
||||
>
|
||||
<X size={20} />
|
||||
<CloseIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
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 { useProfile } from '../../contexts/ProfileContext';
|
||||
import Modal from '../../components/common/Modal';
|
||||
@ -72,7 +72,7 @@ const ClassDetailPage: React.FC = () => {
|
||||
to="/timetable/classes"
|
||||
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
|
||||
</Link>
|
||||
|
||||
@ -95,14 +95,14 @@ const ClassDetailPage: React.FC = () => {
|
||||
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"
|
||||
>
|
||||
<Edit size={18} />
|
||||
<EditIcon size={18} />
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
<DeleteIcon size={18} />
|
||||
Delete
|
||||
</button>
|
||||
</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="flex items-center gap-3">
|
||||
<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>
|
||||
<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="flex items-center gap-3">
|
||||
<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>
|
||||
<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="flex items-center gap-3">
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">Teachers</p>
|
||||
@ -194,7 +194,7 @@ const ClassDetailPage: React.FC = () => {
|
||||
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"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<AddIcon size={18} />
|
||||
Add Timetable
|
||||
</Link>
|
||||
)}
|
||||
@ -202,7 +202,7 @@ const ClassDetailPage: React.FC = () => {
|
||||
|
||||
{timetables.length === 0 ? (
|
||||
<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>Create a timetable to start scheduling lessons</p>
|
||||
</div>
|
||||
@ -221,7 +221,7 @@ const ClassDetailPage: React.FC = () => {
|
||||
{timetable.is_recurring && ' • Recurring'}
|
||||
</p>
|
||||
</div>
|
||||
<ArrowLeft className="rotate-180 text-gray-400" size={18} />
|
||||
<ArrowBackIcon className="rotate-180 text-gray-400" size={18} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@ -234,7 +234,7 @@ const ClassDetailPage: React.FC = () => {
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Enrolled Students</h2>
|
||||
{enrolledStudents.length === 0 ? (
|
||||
<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>Students can request enrollment or be added by teachers</p>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
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 { useProfile } from '../../contexts/ProfileContext';
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<AddIcon 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">
|
||||
<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
|
||||
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"
|
||||
>
|
||||
<Filter size={20} />
|
||||
<FilterListIcon 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">
|
||||
<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>
|
||||
<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">
|
||||
<BookOpen className="text-blue-600" size={24} />
|
||||
<MenuBookIcon 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">
|
||||
<Users size={16} />
|
||||
<PeopleIcon size={16} />
|
||||
{cls.student_count} students
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar size={16} />
|
||||
<CalendarTodayIcon size={16} />
|
||||
{cls.timetable_count} timetables
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 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">
|
||||
<Filter size={18} className="text-gray-400" />
|
||||
<FilterListIcon 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">
|
||||
<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
|
||||
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">
|
||||
<UserPlus size={18} className="text-blue-600" />
|
||||
<PersonAddIcon 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"
|
||||
>
|
||||
<Check size={14} className="mr-1" />
|
||||
<CheckIcon 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"
|
||||
>
|
||||
<X size={14} className="mr-1" />
|
||||
<CloseIcon 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">
|
||||
<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>
|
||||
<p className="mt-2 text-gray-500">
|
||||
{filters.status === 'pending'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
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 { useProfile } from '../../contexts/ProfileContext';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
@ -119,7 +119,7 @@ const LessonPage: React.FC = () => {
|
||||
to={`/timetable/timetables/${currentTimetable?.id}`}
|
||||
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
|
||||
</Link>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
|
||||
@ -133,14 +133,14 @@ const LessonPage: React.FC = () => {
|
||||
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"
|
||||
>
|
||||
<Edit size={16} className="mr-2" />
|
||||
<EditIcon size={16} className="mr-2" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteLesson}
|
||||
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
|
||||
</button>
|
||||
</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="bg-white rounded-lg shadow p-6">
|
||||
<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
|
||||
</h2>
|
||||
<div className="space-y-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>
|
||||
<p className="font-medium text-gray-900">Date</p>
|
||||
<p className="text-gray-600">
|
||||
@ -165,7 +165,7 @@ const LessonPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p className="font-medium text-gray-900">Time</p>
|
||||
<p className="text-gray-600">
|
||||
@ -175,7 +175,7 @@ const LessonPage: React.FC = () => {
|
||||
</div>
|
||||
{(currentLesson.location || currentLesson.room) && (
|
||||
<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>
|
||||
<p className="font-medium text-gray-900">Location</p>
|
||||
<p className="text-gray-600">
|
||||
@ -191,7 +191,7 @@ const LessonPage: React.FC = () => {
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<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
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
@ -218,7 +218,7 @@ const LessonPage: React.FC = () => {
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react';
|
||||
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 { useProfile } from '../../contexts/ProfileContext';
|
||||
|
||||
@ -78,7 +78,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{teachingClasses.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<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>
|
||||
<span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
|
||||
{teachingClasses.length}
|
||||
@ -102,7 +102,7 @@ const MyClassesPage: React.FC = () => {
|
||||
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<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="flex items-center gap-1">
|
||||
<Users size={14} />
|
||||
<PeopleIcon size={14} />
|
||||
<span>{classItem.class?.enrolled_count || 0} students</span>
|
||||
</div>
|
||||
{classItem.class?.academic_year && (
|
||||
<div className="flex items-center gap-1">
|
||||
<School size={14} />
|
||||
<SchoolIcon size={14} />
|
||||
<span>{classItem.class.academic_year}</span>
|
||||
</div>
|
||||
)}
|
||||
@ -141,7 +141,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{enrolledClasses.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<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>
|
||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
|
||||
{enrolledClasses.length}
|
||||
@ -165,7 +165,7 @@ const MyClassesPage: React.FC = () => {
|
||||
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
||||
)}
|
||||
</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>
|
||||
|
||||
<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="flex items-center gap-1">
|
||||
<GraduationCap size={14} />
|
||||
<SchoolIcon size={14} />
|
||||
<span>
|
||||
{classItem.class?.teachers?.[0]?.first_name} {classItem.class?.teachers?.[0]?.last_name}
|
||||
</span>
|
||||
</div>
|
||||
{classItem.class?.academic_year && (
|
||||
<div className="flex items-center gap-1">
|
||||
<School size={14} />
|
||||
<SchoolIcon size={14} />
|
||||
<span>{classItem.class.academic_year}</span>
|
||||
</div>
|
||||
)}
|
||||
@ -202,7 +202,7 @@ const MyClassesPage: React.FC = () => {
|
||||
{/* Empty State */}
|
||||
{myClasses.length === 0 && (
|
||||
<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>
|
||||
<p className="mt-2 text-gray-500">
|
||||
You are not enrolled in or teaching any classes yet.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react';
|
||||
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 { useProfile } from '../../contexts/ProfileContext';
|
||||
import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns';
|
||||
@ -81,7 +81,7 @@ const TimetablePage: React.FC = () => {
|
||||
to={`/timetable/classes/${currentTimetable.class_id}`}
|
||||
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
|
||||
</Link>
|
||||
|
||||
@ -90,7 +90,7 @@ const TimetablePage: React.FC = () => {
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">{currentTimetable.name}</h1>
|
||||
<div className="flex items-center gap-4 text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar size={16} />
|
||||
<CalendarTodayIcon size={16} />
|
||||
{format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')}
|
||||
{currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`}
|
||||
</span>
|
||||
@ -107,14 +107,14 @@ const TimetablePage: React.FC = () => {
|
||||
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"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<AddIcon size={18} />
|
||||
Add Lesson
|
||||
</Link>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
<DeleteIcon size={18} />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
@ -131,7 +131,7 @@ const TimetablePage: React.FC = () => {
|
||||
|
||||
{currentLessons.length === 0 ? (
|
||||
<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>Add lessons to build your timetable</p>
|
||||
</div>
|
||||
@ -171,7 +171,7 @@ const TimetablePage: React.FC = () => {
|
||||
</div>
|
||||
{lesson.location && (
|
||||
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||||
<MapPin size={14} />
|
||||
<LocationOnIcon size={14} />
|
||||
{lesson.location}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user