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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/timetable/ClassDetailPage.tsx
+11 -11
View File
@@ -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>