223 lines
9.1 KiB
TypeScript
223 lines
9.1 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { AccessTimeIcon, KeyboardArrowRightIcon, MenuBookIcon, PeopleIcon, SchoolIcon } from '@mui/icons-material';
|
|
import useTimetableStore from '../../stores/timetableStore';
|
|
import { useUser } from '../../contexts/UserContext';
|
|
|
|
const MyClassesPage: React.FC = () => {
|
|
const { profile } = useUser();
|
|
const {
|
|
myClasses,
|
|
myClassesLoading,
|
|
myClassesError,
|
|
fetchMyClasses,
|
|
} = useTimetableStore();
|
|
|
|
useEffect(() => {
|
|
fetchMyClasses();
|
|
}, [fetchMyClasses]);
|
|
|
|
const getRoleLabel = (role: string) => {
|
|
switch (role) {
|
|
case 'teacher': return { text: 'Teacher', color: 'bg-purple-100 text-purple-700' };
|
|
case 'student': return { text: 'Student', color: 'bg-green-100 text-green-700' };
|
|
case 'assistant': return { text: 'Assistant', color: 'bg-blue-100 text-blue-700' };
|
|
default: return { text: role, color: 'bg-gray-100 text-gray-700' };
|
|
}
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
switch (status) {
|
|
case 'active': return { text: 'Active', color: 'bg-green-100 text-green-700' };
|
|
case 'pending': return { text: 'Pending', color: 'bg-yellow-100 text-yellow-700' };
|
|
case 'completed': return { text: 'Completed', color: 'bg-gray-100 text-gray-700' };
|
|
case 'cancelled': return { text: 'Cancelled', color: 'bg-red-100 text-red-700' };
|
|
default: return { text: status, color: 'bg-gray-100 text-gray-700' };
|
|
}
|
|
};
|
|
|
|
if (myClassesLoading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (myClassesError) {
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
|
<p>Error loading your classes: {myClassesError}</p>
|
|
<button
|
|
onClick={() => fetchMyClasses()}
|
|
className="mt-2 text-sm font-medium text-red-600 hover:text-red-800"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Separate classes by role
|
|
const teachingClasses = myClasses.filter(c => c.role === 'teacher' || c.role === 'assistant');
|
|
const enrolledClasses = myClasses.filter(c => c.role === 'student');
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">My Classes</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Manage your enrolled classes and teaching assignments
|
|
</p>
|
|
</div>
|
|
|
|
{/* Teaching Section */}
|
|
{teachingClasses.length > 0 && (
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<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}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{teachingClasses.map((classItem) => (
|
|
<Link
|
|
key={classItem.class_id}
|
|
to={`/timetable/classes/${classItem.class_id}`}
|
|
className="block bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200"
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
|
{classItem.class?.name}
|
|
</h3>
|
|
{classItem.class?.code && (
|
|
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
|
)}
|
|
</div>
|
|
<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">
|
|
{classItem.class?.description || 'No description'}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getRoleLabel(classItem.role).color}`}>
|
|
{getRoleLabel(classItem.role).text}
|
|
</span>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getStatusLabel(classItem.status).color}`}>
|
|
{getStatusLabel(classItem.status).text}
|
|
</span>
|
|
</div>
|
|
|
|
<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">
|
|
<PeopleIcon size={14} />
|
|
<span>{classItem.class?.enrolled_count || 0} students</span>
|
|
</div>
|
|
{classItem.class?.academic_year && (
|
|
<div className="flex items-center gap-1">
|
|
<SchoolIcon size={14} />
|
|
<span>{classItem.class.academic_year}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Enrolled Section */}
|
|
{enrolledClasses.length > 0 && (
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<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}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{enrolledClasses.map((classItem) => (
|
|
<Link
|
|
key={classItem.class_id}
|
|
to={`/timetable/classes/${classItem.class_id}`}
|
|
className="block bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200"
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
|
{classItem.class?.name}
|
|
</h3>
|
|
{classItem.class?.code && (
|
|
<p className="text-sm text-gray-500">{classItem.class.code}</p>
|
|
)}
|
|
</div>
|
|
<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">
|
|
{classItem.class?.description || 'No description'}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className={`px-2 py-1 text-xs font-medium rounded ${getStatusLabel(classItem.status).color}`}>
|
|
{getStatusLabel(classItem.status).text}
|
|
</span>
|
|
</div>
|
|
|
|
<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">
|
|
<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">
|
|
<SchoolIcon size={14} />
|
|
<span>{classItem.class.academic_year}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{myClasses.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<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.
|
|
</p>
|
|
<Link
|
|
to="/timetable/classes"
|
|
className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200"
|
|
>
|
|
Browse Available Classes
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyClassesPage;
|