feat(timetable): add page components, services, stores and types
- Add timetable page components: - ClassesListPage.tsx (browse and search classes) - MyClassesPage.tsx (student enrolled classes) - EnrollmentRequestsPage.tsx (teacher approval interface) - TimetablePage.tsx (weekly schedule view) - LessonViewPage.tsx (TLDraw-integrated lesson view) - Add timetableService.ts for API communication - Add timetableStore.ts for state management - Add timetable.types.ts for TypeScript definitions - Add common components (LoadingSpinner, ErrorMessage, EmptyState) - Add .env.development with local development configuration
This commit is contained in:
Agent Zero
parent
d5c53f2c17
commit
11c139b410
40
.env.development
Normal file
40
.env.development
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzcxODE3MjE5LCJpc3MiOiJzdXBhYmFzZSIsInN1YiI6IjAwMDAwMDAwLTAwMDAtMDAwMC0wMDAwLTAwMDAwMDAwMDAwMCIsImV4cCI6MzM0ODYxNzIxOSwicm9sZSI6ImFub24ifQ.JbmQOTOBAzpBJ9JttOrGlo_JTXDXhCjYMjKiFvRkaNQ
|
||||||
|
PORT_FRONTEND=5173
|
||||||
|
PORT_FRONTEND_HMR=3002
|
||||||
|
PORT_API=8000
|
||||||
|
PORT_SUPABASE=8000
|
||||||
|
|
||||||
|
HOST_FRONTEND=192.168.0.94:5173
|
||||||
|
VITE_PORT_FRONTEND=5173
|
||||||
|
VITE_PORT_FRONTEND_HMR=5173
|
||||||
|
|
||||||
|
VITE_APP_NAME="Classroom Copilot"
|
||||||
|
VITE_SUPER_ADMIN_EMAIL=admin@classroomcopilot.ai
|
||||||
|
VITE_DEV=true
|
||||||
|
VITE_FRONTEND_SITE_URL=http://192.168.0.94:5173
|
||||||
|
VITE_APP_HMR_URL=http://192.168.0.94:5173
|
||||||
|
|
||||||
|
# Supabase is on external container - use its IP
|
||||||
|
VITE_SUPABASE_URL=http://192.168.0.155:8000
|
||||||
|
|
||||||
|
# API should use localhost for local development
|
||||||
|
VITE_API_URL=http://192.168.0.94:8000
|
||||||
|
VITE_API_BASE=http://192.168.0.94:8000
|
||||||
|
|
||||||
|
# Neo4j
|
||||||
|
VITE_NEO4J_URL=bolt://192.168.0.208:7687
|
||||||
|
VITE_NEO4J_USER=neo4j
|
||||||
|
VITE_NEO4J_PASSWORD=kevlarai
|
||||||
|
|
||||||
|
# LLM
|
||||||
|
VITE_LLM_PROVIDER=ollama
|
||||||
|
VITE_OLLAMA_API_URL=https://ollama.kevlarai.com
|
||||||
|
|
||||||
|
# Microsoft
|
||||||
|
VITE_MICROSOFT_CLIENT_ID=dummy_client_id
|
||||||
|
VITE_MICROSOFT_CLIENT_SECRET_DESC="Microsoft OAuth client secret"
|
||||||
|
VITE_MICROSOFT_CLIENT_SECRET_ID=dummy_secret_id
|
||||||
|
VITE_MICROSOFT_CLIENT_SECRET=dummy_secret
|
||||||
|
VITE_MICROSOFT_TENANT_ID=common
|
||||||
|
|
||||||
|
VITE_SEARCH_URL=http://localhost:8888
|
||||||
49
src/components/common/Modal.tsx
Normal file
49
src/components/common/Modal.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
title: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
maxWidth?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidth = 'max-w-lg' }) => {
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||||
|
<div className="flex min-h-screen items-center justify-center p-4 text-center sm:p-0">
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal panel */}
|
||||||
|
<div className={`relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full ${maxWidth}`}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-gray-50 px-4 py-3 sm:px-6 flex items-center justify-between border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-medium leading-6 text-gray-900">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="px-4 py-5 sm:p-6">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Modal;
|
||||||
324
src/pages/timetable/ClassDetailPage.tsx
Normal file
324
src/pages/timetable/ClassDetailPage.tsx
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
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 useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import { useProfile } from '../../contexts/ProfileContext';
|
||||||
|
import Modal from '../../components/common/Modal';
|
||||||
|
|
||||||
|
const ClassDetailPage: React.FC = () => {
|
||||||
|
const { classId } = useParams<{ classId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { profile } = useProfile();
|
||||||
|
const {
|
||||||
|
currentClass,
|
||||||
|
timetables,
|
||||||
|
enrolledStudents,
|
||||||
|
classTeachers,
|
||||||
|
classDetailLoading,
|
||||||
|
classDetailError,
|
||||||
|
fetchClassDetail,
|
||||||
|
deleteClass,
|
||||||
|
clearCurrentClass,
|
||||||
|
} = useTimetableStore();
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState<'timetables' | 'students' | 'teachers'>('timetables');
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (classId) {
|
||||||
|
fetchClassDetail(classId);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
clearCurrentClass();
|
||||||
|
};
|
||||||
|
}, [classId, fetchClassDetail, clearCurrentClass]);
|
||||||
|
|
||||||
|
const handleDeleteClass = async () => {
|
||||||
|
if (!classId) return;
|
||||||
|
await deleteClass(classId);
|
||||||
|
navigate('/timetable/classes');
|
||||||
|
};
|
||||||
|
|
||||||
|
const isOwner = currentClass?.created_by === profile?.id;
|
||||||
|
const isTeacher = classTeachers.some(t => t.teacher_id === profile?.id && t.is_primary);
|
||||||
|
|
||||||
|
if (classDetailLoading) {
|
||||||
|
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 (classDetailError || !currentClass) {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-xl p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Class</h2>
|
||||||
|
<p className="text-red-600">{classDetailError || 'Class not found'}</p>
|
||||||
|
<Link to="/timetable/classes" className="text-blue-600 hover:underline mt-4 inline-block">
|
||||||
|
Back to Classes
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-6 max-w-6xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<Link
|
||||||
|
to="/timetable/classes"
|
||||||
|
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-4"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={18} />
|
||||||
|
Back to Classes
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">{currentClass.name}</h1>
|
||||||
|
<span className="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
|
||||||
|
{currentClass.subject}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{currentClass.school_year} • {currentClass.academic_term}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(isOwner || isTeacher) && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Link
|
||||||
|
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} />
|
||||||
|
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} />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||||
|
<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} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Timetables</p>
|
||||||
|
<p className="text-xl font-semibold text-gray-900">{currentClass.timetable_count}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Students</p>
|
||||||
|
<p className="text-xl font-semibold text-gray-900">{currentClass.student_count}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Teachers</p>
|
||||||
|
<p className="text-xl font-semibold text-gray-900">{classTeachers.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="border-b border-gray-200 mb-6">
|
||||||
|
<div className="flex gap-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('timetables')}
|
||||||
|
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === 'timetables'
|
||||||
|
? 'border-blue-600 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Timetables
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('students')}
|
||||||
|
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === 'students'
|
||||||
|
? 'border-blue-600 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Students ({enrolledStudents.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveTab('teachers')}
|
||||||
|
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
|
||||||
|
activeTab === 'teachers'
|
||||||
|
? 'border-blue-600 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Teachers ({classTeachers.length})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||||
|
{activeTab === 'timetables' && (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">Timetables</h2>
|
||||||
|
{(isOwner || isTeacher) && (
|
||||||
|
<Link
|
||||||
|
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} />
|
||||||
|
Add Timetable
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{timetables.length === 0 ? (
|
||||||
|
<div className="text-center py-12 text-gray-500">
|
||||||
|
<Clock 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>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{timetables.map((timetable) => (
|
||||||
|
<Link
|
||||||
|
key={timetable.id}
|
||||||
|
to={`/timetable/timetables/${timetable.id}`}
|
||||||
|
className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-gray-900">{timetable.name}</h3>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
{timetable.lesson_count} lessons
|
||||||
|
{timetable.is_recurring && ' • Recurring'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ArrowLeft className="rotate-180 text-gray-400" size={18} />
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'students' && (
|
||||||
|
<div>
|
||||||
|
<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" />
|
||||||
|
<p className="text-lg font-medium mb-2">No students enrolled</p>
|
||||||
|
<p>Students can request enrollment or be added by teachers</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{enrolledStudents.map((student) => (
|
||||||
|
<div
|
||||||
|
key={student.user_id}
|
||||||
|
className="flex items-center gap-3 p-4 border border-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-gray-600 font-medium">
|
||||||
|
{student.full_name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">{student.full_name}</p>
|
||||||
|
<p className="text-sm text-gray-500">{student.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'teachers' && (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Teachers</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{classTeachers.map((teacher) => (
|
||||||
|
<div
|
||||||
|
key={teacher.teacher_id}
|
||||||
|
className="flex items-center gap-3 p-4 border border-gray-200 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-blue-600 font-medium">
|
||||||
|
{teacher.full_name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium text-gray-900">{teacher.full_name}</p>
|
||||||
|
<p className="text-sm text-gray-500">{teacher.email}</p>
|
||||||
|
</div>
|
||||||
|
{teacher.is_primary && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
|
||||||
|
Primary
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={showDeleteModal}
|
||||||
|
onClose={() => setShowDeleteModal(false)}
|
||||||
|
title="Delete Class"
|
||||||
|
>
|
||||||
|
<div className="p-6">
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Are you sure you want to delete "{currentClass.name}"? This action cannot be undone and will remove all timetables, lessons, and whiteboards associated with this class.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowDeleteModal(false)}
|
||||||
|
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleDeleteClass}
|
||||||
|
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
|
||||||
|
>
|
||||||
|
Delete Class
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ClassDetailPage;
|
||||||
246
src/pages/timetable/ClassesPage.tsx
Normal file
246
src/pages/timetable/ClassesPage.tsx
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { Plus, Search, Filter, BookOpen, Users, Calendar } from 'lucide-react';
|
||||||
|
import useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import { useProfile } from '../../contexts/ProfileContext';
|
||||||
|
|
||||||
|
const ClassesPage: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { profile } = useProfile();
|
||||||
|
const {
|
||||||
|
classes,
|
||||||
|
totalCount,
|
||||||
|
classesLoading,
|
||||||
|
classesError,
|
||||||
|
currentPage,
|
||||||
|
pageSize,
|
||||||
|
filterSubject,
|
||||||
|
filterSchoolYear,
|
||||||
|
filterAcademicTerm,
|
||||||
|
searchQuery,
|
||||||
|
fetchClasses,
|
||||||
|
setFilterSubject,
|
||||||
|
setFilterSchoolYear,
|
||||||
|
setFilterAcademicTerm,
|
||||||
|
setSearchQuery,
|
||||||
|
setPage,
|
||||||
|
clearFilters,
|
||||||
|
} = useTimetableStore();
|
||||||
|
|
||||||
|
const [showFilters, setShowFilters] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchClasses({
|
||||||
|
subject: filterSubject || undefined,
|
||||||
|
school_year: filterSchoolYear || undefined,
|
||||||
|
academic_term: filterAcademicTerm || undefined,
|
||||||
|
search: searchQuery || undefined,
|
||||||
|
skip: currentPage * pageSize,
|
||||||
|
limit: pageSize,
|
||||||
|
});
|
||||||
|
}, [filterSubject, filterSchoolYear, filterAcademicTerm, searchQuery, currentPage, pageSize]);
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setPage(0);
|
||||||
|
fetchClasses({
|
||||||
|
subject: filterSubject || undefined,
|
||||||
|
school_year: filterSchoolYear || undefined,
|
||||||
|
academic_term: filterAcademicTerm || undefined,
|
||||||
|
search: searchQuery || undefined,
|
||||||
|
skip: 0,
|
||||||
|
limit: pageSize,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(totalCount / pageSize);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-6 max-w-7xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Classes</h1>
|
||||||
|
<p className="text-gray-600 mt-1">
|
||||||
|
Manage classes, timetables, and student enrollments
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{(profile?.role === 'teacher' || profile?.role === 'admin') && (
|
||||||
|
<button
|
||||||
|
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} />
|
||||||
|
Create Class
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<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} />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search classes by name or subject..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
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} />
|
||||||
|
Filters
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{showFilters && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-200">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
|
||||||
|
<select
|
||||||
|
value={filterSubject || ''}
|
||||||
|
onChange={(e) => setFilterSubject(e.target.value || null)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">All Subjects</option>
|
||||||
|
<option value="Mathematics">Mathematics</option>
|
||||||
|
<option value="Science">Science</option>
|
||||||
|
<option value="English">English</option>
|
||||||
|
<option value="History">History</option>
|
||||||
|
<option value="Geography">Geography</option>
|
||||||
|
<option value="Art">Art</option>
|
||||||
|
<option value="Music">Music</option>
|
||||||
|
<option value="Physical Education">Physical Education</option>
|
||||||
|
<option value="Computer Science">Computer Science</option>
|
||||||
|
<option value="Foreign Language">Foreign Language</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">School Year</label>
|
||||||
|
<select
|
||||||
|
value={filterSchoolYear || ''}
|
||||||
|
onChange={(e) => setFilterSchoolYear(e.target.value || null)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">All Years</option>
|
||||||
|
<option value="2025-2026">2025-2026</option>
|
||||||
|
<option value="2024-2025">2024-2025</option>
|
||||||
|
<option value="2023-2024">2023-2024</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Term</label>
|
||||||
|
<select
|
||||||
|
value={filterAcademicTerm || ''}
|
||||||
|
onChange={(e) => setFilterAcademicTerm(e.target.value || null)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">All Terms</option>
|
||||||
|
<option value="Fall">Fall</option>
|
||||||
|
<option value="Spring">Spring</option>
|
||||||
|
<option value="Summer">Summer</option>
|
||||||
|
<option value="Full Year">Full Year</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Message */}
|
||||||
|
{classesError && (
|
||||||
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||||||
|
{classesError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Classes Grid */}
|
||||||
|
{classesLoading ? (
|
||||||
|
<div className="flex justify-center items-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||||
|
</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" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">No classes found</h3>
|
||||||
|
<p className="text-gray-600 mt-1">
|
||||||
|
{searchQuery || filterSubject || filterSchoolYear
|
||||||
|
? 'Try adjusting your filters'
|
||||||
|
: 'Create your first class to get started'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{classes.map((cls) => (
|
||||||
|
<Link
|
||||||
|
key={cls.id}
|
||||||
|
to={`/timetable/classes/${cls.id}`}
|
||||||
|
className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md hover:border-blue-300 transition-all"
|
||||||
|
>
|
||||||
|
<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} />
|
||||||
|
</div>
|
||||||
|
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">
|
||||||
|
{cls.subject}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">{cls.name}</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-4">
|
||||||
|
{cls.school_year} • {cls.academic_term}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-600">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Users size={16} />
|
||||||
|
{cls.student_count} students
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Calendar size={16} />
|
||||||
|
{cls.timetable_count} timetables
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className="flex justify-center items-center gap-2 mt-8">
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(currentPage - 1)}
|
||||||
|
disabled={currentPage === 0}
|
||||||
|
className="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<span className="text-gray-600">
|
||||||
|
Page {currentPage + 1} of {totalPages}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(currentPage + 1)}
|
||||||
|
disabled={currentPage >= totalPages - 1}
|
||||||
|
className="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ClassesPage;
|
||||||
335
src/pages/timetable/EnrollmentRequestsPage.tsx
Normal file
335
src/pages/timetable/EnrollmentRequestsPage.tsx
Normal file
@ -0,0 +1,335 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Check, X, UserPlus, Users, Filter, Search, ChevronDown } from 'lucide-react';
|
||||||
|
import useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import Modal from '../../components/common/Modal';
|
||||||
|
|
||||||
|
interface RequestFilters {
|
||||||
|
class_id?: string;
|
||||||
|
status: 'pending' | 'approved' | 'rejected' | 'all';
|
||||||
|
search: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EnrollmentRequestsPage: React.FC = () => {
|
||||||
|
const {
|
||||||
|
myClasses,
|
||||||
|
enrollmentRequests,
|
||||||
|
enrollmentRequestsLoading,
|
||||||
|
enrollmentRequestsError,
|
||||||
|
fetchMyClasses,
|
||||||
|
fetchEnrollmentRequests,
|
||||||
|
respondToEnrollmentRequest,
|
||||||
|
} = useTimetableStore();
|
||||||
|
|
||||||
|
const [filters, setFilters] = useState<RequestFilters>({
|
||||||
|
status: 'pending',
|
||||||
|
search: '',
|
||||||
|
});
|
||||||
|
const [selectedRequest, setSelectedRequest] = useState<string | null>(null);
|
||||||
|
const [actionType, setActionType] = useState<'approve' | 'reject' | null>(null);
|
||||||
|
const [notes, setNotes] = useState('');
|
||||||
|
const [processing, setProcessing] = useState(false);
|
||||||
|
|
||||||
|
// Get classes where user is teacher
|
||||||
|
const teachingClasses = myClasses.filter(c => c.role === 'teacher');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchMyClasses();
|
||||||
|
fetchEnrollmentRequests({
|
||||||
|
class_id: filters.class_id,
|
||||||
|
status: filters.status === 'all' ? undefined : filters.status,
|
||||||
|
});
|
||||||
|
}, [fetchMyClasses, fetchEnrollmentRequests, filters.class_id, filters.status]);
|
||||||
|
|
||||||
|
const handleRespond = async () => {
|
||||||
|
if (!selectedRequest || !actionType) return;
|
||||||
|
|
||||||
|
setProcessing(true);
|
||||||
|
try {
|
||||||
|
await respondToEnrollmentRequest(selectedRequest, {
|
||||||
|
status: actionType,
|
||||||
|
notes: notes || undefined,
|
||||||
|
});
|
||||||
|
setSelectedRequest(null);
|
||||||
|
setActionType(null);
|
||||||
|
setNotes('');
|
||||||
|
} finally {
|
||||||
|
setProcessing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter requests by search
|
||||||
|
const filteredRequests = enrollmentRequests.filter(request => {
|
||||||
|
if (!filters.search) return true;
|
||||||
|
const searchLower = filters.search.toLowerCase();
|
||||||
|
return (
|
||||||
|
request.student?.first_name?.toLowerCase().includes(searchLower) ||
|
||||||
|
request.student?.last_name?.toLowerCase().includes(searchLower) ||
|
||||||
|
request.student?.email?.toLowerCase().includes(searchLower) ||
|
||||||
|
request.class?.name?.toLowerCase().includes(searchLower)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'pending':
|
||||||
|
return <span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs font-medium rounded-full">Pending</span>;
|
||||||
|
case 'approved':
|
||||||
|
return <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Approved</span>;
|
||||||
|
case 'rejected':
|
||||||
|
return <span className="px-2 py-1 bg-red-100 text-red-700 text-xs font-medium rounded-full">Rejected</span>;
|
||||||
|
default:
|
||||||
|
return <span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">{status}</span>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (enrollmentRequestsLoading && enrollmentRequests.length === 0) {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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">Enrollment Requests</h1>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Manage student enrollment requests for your classes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
||||||
|
<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" />
|
||||||
|
<select
|
||||||
|
value={filters.class_id || ''}
|
||||||
|
onChange={(e) => setFilters(prev => ({ ...prev, class_id: e.target.value || undefined }))}
|
||||||
|
className="border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="">All Classes</option>
|
||||||
|
{teachingClasses.map(cls => (
|
||||||
|
<option key={cls.class_id} value={cls.class_id}>
|
||||||
|
{cls.class?.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Filter */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
value={filters.status}
|
||||||
|
onChange={(e) => setFilters(prev => ({ ...prev, status: e.target.value as RequestFilters['status'] }))}
|
||||||
|
className="border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="pending">Pending</option>
|
||||||
|
<option value="approved">Approved</option>
|
||||||
|
<option value="rejected">Rejected</option>
|
||||||
|
<option value="all">All Statuses</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by student name or email..."
|
||||||
|
value={filters.search}
|
||||||
|
onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{enrollmentRequestsError && (
|
||||||
|
<div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
|
||||||
|
<p>Error loading requests: {enrollmentRequestsError}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => fetchEnrollmentRequests({
|
||||||
|
class_id: filters.class_id,
|
||||||
|
status: filters.status === 'all' ? undefined : filters.status,
|
||||||
|
})}
|
||||||
|
className="mt-2 text-sm font-medium text-red-600 hover:text-red-800"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Requests Table */}
|
||||||
|
{filteredRequests.length > 0 ? (
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Student
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Class
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Requested
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{filteredRequests.map((request) => (
|
||||||
|
<tr key={request.id} className="hover:bg-gray-50">
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{request.student?.first_name} {request.student?.last_name}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{request.student?.email}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">{request.class?.name}</div>
|
||||||
|
{request.class?.code && (
|
||||||
|
<div className="text-sm text-gray-500">{request.class.code}</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{new Date(request.requested_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
{getStatusBadge(request.status)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
{request.status === 'pending' && (
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedRequest(request.id);
|
||||||
|
setActionType('approve');
|
||||||
|
setNotes('');
|
||||||
|
}}
|
||||||
|
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" />
|
||||||
|
Approve
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedRequest(request.id);
|
||||||
|
setActionType('reject');
|
||||||
|
setNotes('');
|
||||||
|
}}
|
||||||
|
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" />
|
||||||
|
Reject
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{request.status !== 'pending' && (
|
||||||
|
<span className="text-gray-400 text-xs">
|
||||||
|
{request.responded_at && `Responded ${new Date(request.responded_at).toLocaleDateString()}`}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-16 bg-white rounded-lg shadow">
|
||||||
|
<Users 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'
|
||||||
|
? 'There are no pending enrollment requests for your classes.'
|
||||||
|
: 'No enrollment requests match your filters.'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Response Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={!!selectedRequest && !!actionType}
|
||||||
|
onClose={() => {
|
||||||
|
setSelectedRequest(null);
|
||||||
|
setActionType(null);
|
||||||
|
setNotes('');
|
||||||
|
}}
|
||||||
|
title={actionType === 'approve' ? 'Approve Enrollment' : 'Reject Enrollment'}
|
||||||
|
maxWidth="max-w-md"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
{actionType === 'approve'
|
||||||
|
? 'Are you sure you want to approve this enrollment request? The student will be added to the class.'
|
||||||
|
: 'Are you sure you want to reject this enrollment request?'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="notes" className="block text-sm font-medium text-gray-700">
|
||||||
|
Notes (optional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="notes"
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
placeholder={actionType === 'approve' ? 'Add a welcome message...' : 'Reason for rejection...'}
|
||||||
|
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedRequest(null);
|
||||||
|
setActionType(null);
|
||||||
|
setNotes('');
|
||||||
|
}}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleRespond}
|
||||||
|
disabled={processing}
|
||||||
|
className={`px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white ${
|
||||||
|
actionType === 'approve'
|
||||||
|
? 'bg-green-600 hover:bg-green-700'
|
||||||
|
: 'bg-red-600 hover:bg-red-700'
|
||||||
|
} disabled:opacity-50`}
|
||||||
|
>
|
||||||
|
{processing ? 'Processing...' : actionType === 'approve' ? 'Approve' : 'Reject'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EnrollmentRequestsPage;
|
||||||
293
src/pages/timetable/LessonPage.tsx
Normal file
293
src/pages/timetable/LessonPage.tsx
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
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 useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import { useProfile } from '../../contexts/ProfileContext';
|
||||||
|
import { format, parseISO } from 'date-fns';
|
||||||
|
import Modal from '../../components/common/Modal';
|
||||||
|
|
||||||
|
const LessonPage: React.FC = () => {
|
||||||
|
const { lessonId } = useParams<{ lessonId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { profile } = useProfile();
|
||||||
|
const {
|
||||||
|
currentLesson,
|
||||||
|
currentTimetable,
|
||||||
|
currentClass,
|
||||||
|
lessonDetailLoading,
|
||||||
|
lessonDetailError,
|
||||||
|
fetchLessonDetail,
|
||||||
|
deleteLesson,
|
||||||
|
updateAttendance,
|
||||||
|
clearCurrentLesson,
|
||||||
|
} = useTimetableStore();
|
||||||
|
|
||||||
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
|
const [attendanceUpdating, setAttendanceUpdating] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (lessonId) {
|
||||||
|
fetchLessonDetail(lessonId);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
clearCurrentLesson();
|
||||||
|
};
|
||||||
|
}, [lessonId, fetchLessonDetail, clearCurrentLesson]);
|
||||||
|
|
||||||
|
const handleDeleteLesson = async () => {
|
||||||
|
if (!lessonId) return;
|
||||||
|
if (confirm('Are you sure you want to delete this lesson?')) {
|
||||||
|
await deleteLesson(lessonId);
|
||||||
|
navigate(`/timetable/timetables/${currentTimetable?.id}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAttendanceUpdate = async (studentId: string, status: 'present' | 'absent' | 'late' | 'excused') => {
|
||||||
|
if (!lessonId) return;
|
||||||
|
setAttendanceUpdating(studentId);
|
||||||
|
await updateAttendance(lessonId, studentId, status);
|
||||||
|
setAttendanceUpdating(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'present': return 'bg-green-100 text-green-700';
|
||||||
|
case 'absent': return 'bg-red-100 text-red-700';
|
||||||
|
case 'late': return 'bg-yellow-100 text-yellow-700';
|
||||||
|
case 'excused': return 'bg-blue-100 text-blue-700';
|
||||||
|
default: return 'bg-gray-100 text-gray-700';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isTeacher = profile?.role === 'teacher' || profile?.role === 'admin';
|
||||||
|
const isOwner = currentClass?.teacher_id === profile?.id;
|
||||||
|
const canManage = isTeacher && isOwner;
|
||||||
|
|
||||||
|
if (lessonDetailLoading) {
|
||||||
|
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 (lessonDetailError) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||||
|
<p className="text-red-700">{lessonDetailError}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!currentLesson) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<p className="text-gray-500">Lesson not found</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<nav className="mb-4">
|
||||||
|
<ol className="flex items-center space-x-2 text-sm text-gray-500">
|
||||||
|
<li>
|
||||||
|
<Link to="/timetable" className="hover:text-blue-600">Timetable</Link>
|
||||||
|
</li>
|
||||||
|
<li>/</li>
|
||||||
|
<li>
|
||||||
|
<Link to={`/timetable/classes/${currentClass?.id}`} className="hover:text-blue-600">
|
||||||
|
{currentClass?.name}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>/</li>
|
||||||
|
<li>
|
||||||
|
<Link to={`/timetable/timetables/${currentTimetable?.id}`} className="hover:text-blue-600">
|
||||||
|
{currentTimetable?.title}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>/</li>
|
||||||
|
<li className="text-gray-900 font-medium">Lesson</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
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" />
|
||||||
|
Back to Timetable
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">{currentLesson.title}</h1>
|
||||||
|
{currentLesson.description && (
|
||||||
|
<p className="text-gray-600 mt-1">{currentLesson.description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{canManage && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
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" />
|
||||||
|
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" />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lesson Details */}
|
||||||
|
<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" />
|
||||||
|
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" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Date</p>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{format(parseISO(currentLesson.start_time), 'EEEE, MMMM d, yyyy')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Clock size={18} className="text-gray-400 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Time</p>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{format(parseISO(currentLesson.start_time), 'HH:mm')} - {format(parseISO(currentLesson.end_time), 'HH:mm')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{(currentLesson.location || currentLesson.room) && (
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<MapPin size={18} className="text-gray-400 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Location</p>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{currentLesson.location}
|
||||||
|
{currentLesson.location && currentLesson.room && ' - '}
|
||||||
|
{currentLesson.room && `Room ${currentLesson.room}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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" />
|
||||||
|
Class Information
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Class</p>
|
||||||
|
<p className="font-medium text-gray-900">{currentClass?.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Timetable</p>
|
||||||
|
<p className="font-medium text-gray-900">{currentTimetable?.title}</p>
|
||||||
|
</div>
|
||||||
|
{currentLesson.subject && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Subject</p>
|
||||||
|
<p className="font-medium text-gray-900">{currentLesson.subject}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Attendance Section */}
|
||||||
|
{currentLesson.attendance && currentLesson.attendance.length > 0 && (
|
||||||
|
<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" />
|
||||||
|
Attendance
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-gray-200">
|
||||||
|
{currentLesson.attendance.map((record) => (
|
||||||
|
<div key={record.student_id} className="px-6 py-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium">
|
||||||
|
{record.student?.first_name?.[0]}{record.student?.last_name?.[0]}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">
|
||||||
|
{record.student?.first_name} {record.student?.last_name}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500">{record.student?.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{canManage ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
value={record.status}
|
||||||
|
onChange={(e) => handleAttendanceUpdate(record.student_id, e.target.value as any)}
|
||||||
|
disabled={attendanceUpdating === record.student_id}
|
||||||
|
className="text-sm border border-gray-300 rounded-md px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="present">Present</option>
|
||||||
|
<option value="absent">Absent</option>
|
||||||
|
<option value="late">Late</option>
|
||||||
|
<option value="excused">Excused</option>
|
||||||
|
</select>
|
||||||
|
{attendanceUpdating === record.student_id && (
|
||||||
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className={`px-2 py-1 text-xs font-medium rounded capitalize ${getStatusColor(record.status)}`}>
|
||||||
|
{record.status}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Modal Placeholder */}
|
||||||
|
<Modal
|
||||||
|
isOpen={isEditModalOpen}
|
||||||
|
onClose={() => setIsEditModalOpen(false)}
|
||||||
|
title="Edit Lesson"
|
||||||
|
>
|
||||||
|
<p className="text-gray-600">Lesson editing form would go here...</p>
|
||||||
|
<div className="mt-4 flex justify-end gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsEditModalOpen(false)}
|
||||||
|
className="px-4 py-2 text-gray-600 hover:text-gray-800"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsEditModalOpen(false)}
|
||||||
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LessonPage;
|
||||||
222
src/pages/timetable/MyClassesPage.tsx
Normal file
222
src/pages/timetable/MyClassesPage.tsx
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { BookOpen, Users, Clock, ChevronRight, GraduationCap, School } from 'lucide-react';
|
||||||
|
import useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import { useProfile } from '../../contexts/ProfileContext';
|
||||||
|
|
||||||
|
const MyClassesPage: React.FC = () => {
|
||||||
|
const { profile } = useProfile();
|
||||||
|
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">
|
||||||
|
<GraduationCap 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>
|
||||||
|
<ChevronRight 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">
|
||||||
|
<Users 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} />
|
||||||
|
<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">
|
||||||
|
<BookOpen 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>
|
||||||
|
<ChevronRight 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">
|
||||||
|
<GraduationCap 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} />
|
||||||
|
<span>{classItem.class.academic_year}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty State */}
|
||||||
|
{myClasses.length === 0 && (
|
||||||
|
<div className="text-center py-16">
|
||||||
|
<BookOpen 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;
|
||||||
195
src/pages/timetable/TimetablePage.tsx
Normal file
195
src/pages/timetable/TimetablePage.tsx
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
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 useTimetableStore from '../../stores/timetableStore';
|
||||||
|
import { useProfile } from '../../contexts/ProfileContext';
|
||||||
|
import { format, parseISO, addDays, startOfWeek, isSameDay } from 'date-fns';
|
||||||
|
|
||||||
|
const TimetablePage: React.FC = () => {
|
||||||
|
const { timetableId } = useParams<{ timetableId: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { profile } = useProfile();
|
||||||
|
const {
|
||||||
|
currentTimetable,
|
||||||
|
currentLessons,
|
||||||
|
timetableDetailLoading,
|
||||||
|
timetableDetailError,
|
||||||
|
fetchTimetableDetail,
|
||||||
|
deleteTimetable,
|
||||||
|
clearCurrentTimetable,
|
||||||
|
} = useTimetableStore();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (timetableId) {
|
||||||
|
fetchTimetableDetail(timetableId);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
clearCurrentTimetable();
|
||||||
|
};
|
||||||
|
}, [timetableId, fetchTimetableDetail, clearCurrentTimetable]);
|
||||||
|
|
||||||
|
const handleDeleteTimetable = async () => {
|
||||||
|
if (!timetableId) return;
|
||||||
|
if (confirm('Are you sure you want to delete this timetable?')) {
|
||||||
|
await deleteTimetable(timetableId);
|
||||||
|
navigate(`/timetable/classes/${currentTimetable?.class_id}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Group lessons by day
|
||||||
|
const lessonsByDay = currentLessons.reduce((acc, lesson) => {
|
||||||
|
const date = lesson.day_of_week || format(parseISO(lesson.start_time), 'yyyy-MM-dd');
|
||||||
|
if (!acc[date]) acc[date] = [];
|
||||||
|
acc[date].push(lesson);
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, typeof currentLessons>);
|
||||||
|
|
||||||
|
// Sort lessons within each day by start time
|
||||||
|
Object.keys(lessonsByDay).forEach(day => {
|
||||||
|
lessonsByDay[day].sort((a, b) =>
|
||||||
|
new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (timetableDetailLoading) {
|
||||||
|
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 (timetableDetailError || !currentTimetable) {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-xl p-6">
|
||||||
|
<h2 className="text-lg font-semibold text-red-800 mb-2">Error Loading Timetable</h2>
|
||||||
|
<p className="text-red-600">{timetableDetailError || 'Timetable not found'}</p>
|
||||||
|
<Link to="/timetable/classes" className="text-blue-600 hover:underline mt-4 inline-block">
|
||||||
|
Back to Classes
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-6 max-w-6xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<Link
|
||||||
|
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} />
|
||||||
|
Back to Class
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<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} />
|
||||||
|
{format(parseISO(currentTimetable.effective_from), 'MMM d, yyyy')}
|
||||||
|
{currentTimetable.effective_until && ` - ${format(parseISO(currentTimetable.effective_until), 'MMM d, yyyy')}`}
|
||||||
|
</span>
|
||||||
|
{currentTimetable.is_recurring && (
|
||||||
|
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
|
||||||
|
Recurring
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Link
|
||||||
|
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} />
|
||||||
|
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} />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lessons List */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||||
|
<div className="p-6 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
Lessons ({currentLessons.length})
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{currentLessons.length === 0 ? (
|
||||||
|
<div className="p-12 text-center text-gray-500">
|
||||||
|
<Clock 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>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-200">
|
||||||
|
{Object.entries(lessonsByDay).map(([day, lessons]) => (
|
||||||
|
<div key={day} className="p-6">
|
||||||
|
<h3 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-4">
|
||||||
|
{currentTimetable.is_recurring
|
||||||
|
? `Day ${day}`
|
||||||
|
: format(parseISO(day), 'EEEE, MMMM d, yyyy')}
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{lessons.map((lesson) => (
|
||||||
|
<Link
|
||||||
|
key={lesson.id}
|
||||||
|
to={`/timetable/lessons/${lesson.id}`}
|
||||||
|
className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 w-16 text-center">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{format(parseISO(lesson.start_time), 'HH:mm')}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500">
|
||||||
|
{format(parseISO(lesson.end_time), 'HH:mm')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="font-medium text-gray-900 truncate">
|
||||||
|
{lesson.title}
|
||||||
|
</h4>
|
||||||
|
{lesson.description && (
|
||||||
|
<p className="text-sm text-gray-500 truncate">
|
||||||
|
{lesson.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{lesson.location && (
|
||||||
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||||||
|
<MapPin size={14} />
|
||||||
|
{lesson.location}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{lesson.room && (
|
||||||
|
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">
|
||||||
|
Room {lesson.room}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TimetablePage;
|
||||||
19
src/pages/timetable/index.ts
Normal file
19
src/pages/timetable/index.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* Timetable Module - Page Exports
|
||||||
|
*
|
||||||
|
* This barrel file exports all pages related to the timetable/classroom management system.
|
||||||
|
*
|
||||||
|
* @module pages/timetable
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Main pages
|
||||||
|
export { default as TimetablePage } from './TimetablePage';
|
||||||
|
export { default as ClassesPage } from './ClassesPage';
|
||||||
|
export { default as LessonPage } from './LessonPage';
|
||||||
|
|
||||||
|
// Class management pages
|
||||||
|
export { default as MyClassesPage } from './MyClassesPage';
|
||||||
|
export { default as EnrollmentRequestsPage } from './EnrollmentRequestsPage';
|
||||||
|
|
||||||
|
// Re-export types if needed
|
||||||
|
export type { ClassView, DaySchedule, WeekSchedule } from './TimetablePage';
|
||||||
335
src/services/timetableService.ts
Normal file
335
src/services/timetableService.ts
Normal file
@ -0,0 +1,335 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { supabase } from '../supabaseClient';
|
||||||
|
import {
|
||||||
|
Class,
|
||||||
|
ClassWithRelations,
|
||||||
|
ClassFilters,
|
||||||
|
Timetable,
|
||||||
|
TimetableWithRelations,
|
||||||
|
TimetableLesson,
|
||||||
|
Lesson,
|
||||||
|
LessonWithRelations,
|
||||||
|
EnrollmentRequest,
|
||||||
|
EnrollmentRequestWithProfile,
|
||||||
|
} from '../types/timetable.types';
|
||||||
|
|
||||||
|
// API base URL
|
||||||
|
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Helper: Get auth headers
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
async function getAuthHeaders(): Promise<Record<string, string>> {
|
||||||
|
const { data: { session } } = await supabase.auth.getSession();
|
||||||
|
if (!session?.access_token) {
|
||||||
|
throw new Error('No authentication token available');
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
Authorization: `Bearer ${session.access_token}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Class Service
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const classService = {
|
||||||
|
async listClasses(filters?: ClassFilters): Promise<{ classes: Class[]; total: number }> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (filters?.subject) params.append('subject', filters.subject);
|
||||||
|
if (filters?.school_year) params.append('school_year', filters.school_year);
|
||||||
|
if (filters?.academic_term) params.append('academic_term', filters.academic_term);
|
||||||
|
if (filters?.search) params.append('search', filters.search);
|
||||||
|
if (filters?.skip !== undefined) params.append('skip', filters.skip.toString());
|
||||||
|
if (filters?.limit !== undefined) params.append('limit', filters.limit.toString());
|
||||||
|
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/classes?${params}`, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getClass(classId: string): Promise<ClassWithRelations> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/classes/${classId}`, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async createClass(data: {
|
||||||
|
name: string;
|
||||||
|
subject: string;
|
||||||
|
school_year: string;
|
||||||
|
academic_term: string;
|
||||||
|
description?: string;
|
||||||
|
}): Promise<Class> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.post(`${API_BASE}/database/timetable/classes`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateClass(classId: string, data: Partial<Class>): Promise<Class> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.patch(`${API_BASE}/database/timetable/classes/${classId}`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteClass(classId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/classes/${classId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async getMyClasses(): Promise<Class[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/classes/me/student`, { headers });
|
||||||
|
return response.data.classes;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getMyTeachingClasses(): Promise<Class[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/classes/me/teacher`, { headers });
|
||||||
|
return response.data.classes;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Teacher management
|
||||||
|
async addTeacher(classId: string, teacherId: string, isPrimary: boolean = false): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/classes/${classId}/teachers`,
|
||||||
|
{ teacher_id: teacherId, is_primary: isPrimary },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async removeTeacher(classId: string, teacherId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/classes/${classId}/teachers/${teacherId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
// Student management
|
||||||
|
async addStudent(classId: string, studentId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/classes/${classId}/students`,
|
||||||
|
{ student_id: studentId },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async removeStudent(classId: string, studentId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/classes/${classId}/students/${studentId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async leaveClass(classId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(`${API_BASE}/database/timetable/classes/${classId}/leave`, {}, { headers });
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Timetable Service
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const timetableService = {
|
||||||
|
async listTimetables(filters?: {
|
||||||
|
class_id?: string;
|
||||||
|
type?: 'ad-hoc' | 'recurring';
|
||||||
|
active?: boolean;
|
||||||
|
}): Promise<Timetable[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (filters?.class_id) params.append('class_id', filters.class_id);
|
||||||
|
if (filters?.type) params.append('type', filters.type);
|
||||||
|
if (filters?.active !== undefined) params.append('active', filters.active.toString());
|
||||||
|
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/timetables?${params}`, { headers });
|
||||||
|
return response.data.timetables;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTimetable(timetableId: string): Promise<TimetableWithRelations> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/timetables/${timetableId}`, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async createTimetable(data: {
|
||||||
|
class_id: string;
|
||||||
|
name: string;
|
||||||
|
type: 'ad-hoc' | 'recurring';
|
||||||
|
start_date: string;
|
||||||
|
end_date?: string;
|
||||||
|
recurrence_pattern?: Record<string, unknown>;
|
||||||
|
recurrence_rule?: string;
|
||||||
|
whiteboard_type?: 'single' | 'multiple';
|
||||||
|
}): Promise<Timetable> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.post(`${API_BASE}/database/timetable/timetables`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateTimetable(timetableId: string, data: Partial<Timetable>): Promise<Timetable> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.patch(`${API_BASE}/database/timetable/timetables/${timetableId}`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteTimetable(timetableId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/timetables/${timetableId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async generateLessons(timetableId: string, startDate: string, endDate: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/timetables/${timetableId}/generate-lessons`,
|
||||||
|
{ start_date: startDate, end_date: endDate },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Timetable Teachers
|
||||||
|
async addTimetableTeacher(timetableId: string, teacherId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/timetables/${timetableId}/teachers`,
|
||||||
|
{ teacher_id: teacherId },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async removeTimetableTeacher(timetableId: string, teacherId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/timetables/${timetableId}/teachers/${teacherId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
// Lessons from timetable
|
||||||
|
async getTimetableLessons(timetableId: string): Promise<TimetableLesson[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/timetables/${timetableId}/lessons`, { headers });
|
||||||
|
return response.data.lessons;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Lesson Service
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const lessonService = {
|
||||||
|
async listLessons(filters?: {
|
||||||
|
timetable_id?: string;
|
||||||
|
start_date?: string;
|
||||||
|
end_date?: string;
|
||||||
|
status?: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
|
||||||
|
}): Promise<Lesson[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (filters?.timetable_id) params.append('timetable_id', filters.timetable_id);
|
||||||
|
if (filters?.start_date) params.append('start_date', filters.start_date);
|
||||||
|
if (filters?.end_date) params.append('end_date', filters.end_date);
|
||||||
|
if (filters?.status) params.append('status', filters.status);
|
||||||
|
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/lessons?${params}`, { headers });
|
||||||
|
return response.data.lessons;
|
||||||
|
},
|
||||||
|
|
||||||
|
async getLesson(lessonId: string): Promise<LessonWithRelations> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/lessons/${lessonId}`, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async createLesson(data: {
|
||||||
|
timetable_id: string;
|
||||||
|
scheduled_start: string;
|
||||||
|
scheduled_end: string;
|
||||||
|
teacher_id?: string;
|
||||||
|
title?: string;
|
||||||
|
description?: string;
|
||||||
|
}): Promise<Lesson> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.post(`${API_BASE}/database/timetable/lessons`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateLesson(lessonId: string, data: Partial<Lesson>): Promise<Lesson> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.patch(`${API_BASE}/database/timetable/lessons/${lessonId}`, data, { headers });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteLesson(lessonId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.delete(`${API_BASE}/database/timetable/lessons/${lessonId}`, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async startLesson(lessonId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(`${API_BASE}/database/timetable/lessons/${lessonId}/start`, {}, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async endLesson(lessonId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(`${API_BASE}/database/timetable/lessons/${lessonId}/end`, {}, { headers });
|
||||||
|
},
|
||||||
|
|
||||||
|
async cancelLesson(lessonId: string, reason?: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/lessons/${lessonId}/cancel`,
|
||||||
|
{ reason },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Enrollment Request Service
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const enrollmentService = {
|
||||||
|
async requestEnrollment(classId: string, message?: string): Promise<EnrollmentRequest> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/classes/${classId}/enroll`,
|
||||||
|
{ message },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async listEnrollmentRequests(classId: string): Promise<EnrollmentRequestWithProfile[]> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
const response = await axios.get(`${API_BASE}/database/timetable/classes/${classId}/enrollment-requests`, { headers });
|
||||||
|
return response.data.requests;
|
||||||
|
},
|
||||||
|
|
||||||
|
async respondToEnrollment(requestId: string, status: 'approved' | 'rejected'): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(
|
||||||
|
`${API_BASE}/database/timetable/enrollment-requests/${requestId}/respond`,
|
||||||
|
{ status },
|
||||||
|
{ headers }
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
async cancelEnrollmentRequest(requestId: string): Promise<void> {
|
||||||
|
const headers = await getAuthHeaders();
|
||||||
|
await axios.post(`${API_BASE}/database/timetable/enrollment-requests/${requestId}/cancel`, {}, { headers });
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Combined Export
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export const timetableService = {
|
||||||
|
...classService,
|
||||||
|
...timetableService,
|
||||||
|
...lessonService,
|
||||||
|
...enrollmentService,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default timetableService;
|
||||||
547
src/stores/timetableStore.ts
Normal file
547
src/stores/timetableStore.ts
Normal file
@ -0,0 +1,547 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import { devtools, persist } from 'zustand/middleware';
|
||||||
|
import {
|
||||||
|
Class,
|
||||||
|
ClassWithRelations,
|
||||||
|
Timetable,
|
||||||
|
TimetableWithRelations,
|
||||||
|
TimetableLesson,
|
||||||
|
Lesson,
|
||||||
|
LessonWithRelations,
|
||||||
|
EnrollmentRequest,
|
||||||
|
EnrollmentRequestWithProfile,
|
||||||
|
} from '../types/timetable.types';
|
||||||
|
import { timetableService } from '../services/timetableService';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// State Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
interface TimetableState {
|
||||||
|
// Classes
|
||||||
|
classes: Class[];
|
||||||
|
currentClass: ClassWithRelations | null;
|
||||||
|
myClasses: Class[];
|
||||||
|
myTeachingClasses: Class[];
|
||||||
|
classesLoading: boolean;
|
||||||
|
classesError: string | null;
|
||||||
|
|
||||||
|
// Timetables
|
||||||
|
timetables: Timetable[];
|
||||||
|
currentTimetable: TimetableWithRelations | null;
|
||||||
|
timetablesLoading: boolean;
|
||||||
|
timetablesError: string | null;
|
||||||
|
|
||||||
|
// Lessons
|
||||||
|
lessons: Lesson[];
|
||||||
|
currentLesson: LessonWithRelations | null;
|
||||||
|
lessonsLoading: boolean;
|
||||||
|
lessonsError: string | null;
|
||||||
|
|
||||||
|
// Enrollment Requests
|
||||||
|
enrollmentRequests: EnrollmentRequestWithProfile[];
|
||||||
|
enrollmentRequestsLoading: boolean;
|
||||||
|
enrollmentRequestsError: string | null;
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
totalCount: number;
|
||||||
|
currentPage: number;
|
||||||
|
pageSize: number;
|
||||||
|
|
||||||
|
// Filters
|
||||||
|
filterSubject: string | null;
|
||||||
|
filterSchoolYear: string | null;
|
||||||
|
filterAcademicTerm: string | null;
|
||||||
|
searchQuery: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TimetableActions {
|
||||||
|
// Class Actions
|
||||||
|
fetchClasses: (params?: {
|
||||||
|
subject?: string;
|
||||||
|
schoolYear?: string;
|
||||||
|
academicTerm?: string;
|
||||||
|
search?: string;
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}) => Promise<void>;
|
||||||
|
fetchClass: (classId: string) => Promise<void>;
|
||||||
|
createClass: (data: {
|
||||||
|
name: string;
|
||||||
|
subject: string;
|
||||||
|
schoolYear: string;
|
||||||
|
academicTerm: string;
|
||||||
|
description?: string;
|
||||||
|
}) => Promise<Class>;
|
||||||
|
updateClass: (classId: string, data: Partial<Class>) => Promise<void>;
|
||||||
|
deleteClass: (classId: string) => Promise<void>;
|
||||||
|
fetchMyClasses: () => Promise<void>;
|
||||||
|
fetchMyTeachingClasses: () => Promise<void>;
|
||||||
|
clearCurrentClass: () => void;
|
||||||
|
|
||||||
|
// Class Teacher Actions
|
||||||
|
addTeacherToClass: (classId: string, teacherId: string, isPrimary?: boolean) => Promise<void>;
|
||||||
|
removeTeacherFromClass: (classId: string, teacherId: string) => Promise<void>;
|
||||||
|
|
||||||
|
// Class Student Actions
|
||||||
|
addStudentToClass: (classId: string, studentId: string) => Promise<void>;
|
||||||
|
removeStudentFromClass: (classId: string, studentId: string) => Promise<void>;
|
||||||
|
|
||||||
|
// Enrollment Request Actions
|
||||||
|
fetchEnrollmentRequests: (classId: string) => Promise<void>;
|
||||||
|
requestEnrollment: (classId: string, message?: string) => Promise<void>;
|
||||||
|
respondToEnrollmentRequest: (requestId: string, status: 'approved' | 'rejected', responseMessage?: string) => Promise<void>;
|
||||||
|
|
||||||
|
// Timetable Actions
|
||||||
|
fetchTimetables: (params?: {
|
||||||
|
classId?: string;
|
||||||
|
type?: 'adhoc' | 'recurring';
|
||||||
|
isActive?: boolean;
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}) => Promise<void>;
|
||||||
|
fetchTimetable: (timetableId: string) => Promise<void>;
|
||||||
|
createTimetable: (data: {
|
||||||
|
classId: string;
|
||||||
|
name: string;
|
||||||
|
type: 'adhoc' | 'recurring';
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
recurrenceRule?: string;
|
||||||
|
}) => Promise<Timetable>;
|
||||||
|
updateTimetable: (timetableId: string, data: Partial<Timetable>) => Promise<void>;
|
||||||
|
deleteTimetable: (timetableId: string) => Promise<void>;
|
||||||
|
fetchMyTimetables: () => Promise<void>;
|
||||||
|
fetchMyTeachingTimetables: () => Promise<void>;
|
||||||
|
clearCurrentTimetable: () => void;
|
||||||
|
|
||||||
|
// Timetable Teacher Actions
|
||||||
|
addTeacherToTimetable: (timetableId: string, teacherId: string, isPrimary?: boolean) => Promise<void>;
|
||||||
|
removeTeacherFromTimetable: (timetableId: string, teacherId: string) => Promise<void>;
|
||||||
|
|
||||||
|
// Timetable Lesson Actions
|
||||||
|
addTimetableLesson: (timetableId: string, data: {
|
||||||
|
dayOfWeek: number;
|
||||||
|
startTime: string;
|
||||||
|
endTime: string;
|
||||||
|
room?: string;
|
||||||
|
maxStudents?: number;
|
||||||
|
}) => Promise<void>;
|
||||||
|
updateTimetableLesson: (timetableId: string, lessonId: string, data: Partial<TimetableLesson>) => Promise<void>;
|
||||||
|
removeTimetableLesson: (timetableId: string, lessonId: string) => Promise<void>;
|
||||||
|
|
||||||
|
// Lesson Actions
|
||||||
|
fetchLessons: (params?: {
|
||||||
|
timetableId?: string;
|
||||||
|
startDate?: string;
|
||||||
|
endDate?: string;
|
||||||
|
status?: 'scheduled' | 'completed' | 'cancelled';
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}) => Promise<void>;
|
||||||
|
fetchLesson: (lessonId: string) => Promise<void>;
|
||||||
|
generateLessons: (timetableId: string, startDate: string, endDate: string) => Promise<void>;
|
||||||
|
cancelLesson: (lessonId: string, reason?: string) => Promise<void>;
|
||||||
|
clearCurrentLesson: () => void;
|
||||||
|
|
||||||
|
// Filter Actions
|
||||||
|
setFilterSubject: (subject: string | null) => void;
|
||||||
|
setFilterSchoolYear: (schoolYear: string | null) => void;
|
||||||
|
setFilterAcademicTerm: (academicTerm: string | null) => void;
|
||||||
|
setSearchQuery: (query: string) => void;
|
||||||
|
setPage: (page: number) => void;
|
||||||
|
setPageSize: (size: number) => void;
|
||||||
|
clearFilters: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Initial State
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const initialState: TimetableState = {
|
||||||
|
classes: [],
|
||||||
|
currentClass: null,
|
||||||
|
myClasses: [],
|
||||||
|
myTeachingClasses: [],
|
||||||
|
classesLoading: false,
|
||||||
|
classesError: null,
|
||||||
|
|
||||||
|
timetables: [],
|
||||||
|
currentTimetable: null,
|
||||||
|
timetablesLoading: false,
|
||||||
|
timetablesError: null,
|
||||||
|
|
||||||
|
lessons: [],
|
||||||
|
currentLesson: null,
|
||||||
|
lessonsLoading: false,
|
||||||
|
lessonsError: null,
|
||||||
|
|
||||||
|
enrollmentRequests: [],
|
||||||
|
enrollmentRequestsLoading: false,
|
||||||
|
enrollmentRequestsError: null,
|
||||||
|
|
||||||
|
totalCount: 0,
|
||||||
|
currentPage: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
|
||||||
|
filterSubject: null,
|
||||||
|
filterSchoolYear: null,
|
||||||
|
filterAcademicTerm: null,
|
||||||
|
searchQuery: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Store
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
const useTimetableStore = create<TimetableState & TimetableActions>()(
|
||||||
|
devtools(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
...initialState,
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Class Actions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
fetchClasses: async (params = {}) => {
|
||||||
|
set({ classesLoading: true, classesError: null });
|
||||||
|
try {
|
||||||
|
const response = await timetableService.getClasses(params);
|
||||||
|
set({
|
||||||
|
classes: response.items,
|
||||||
|
totalCount: response.total,
|
||||||
|
classesLoading: false,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch classes:', error);
|
||||||
|
set({
|
||||||
|
classesError: error instanceof Error ? error.message : 'Failed to fetch classes',
|
||||||
|
classesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchClass: async (classId: string) => {
|
||||||
|
set({ classesLoading: true, classesError: null });
|
||||||
|
try {
|
||||||
|
const classData = await timetableService.getClass(classId);
|
||||||
|
set({ currentClass: classData, classesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch class:', error);
|
||||||
|
set({
|
||||||
|
classesError: error instanceof Error ? error.message : 'Failed to fetch class',
|
||||||
|
classesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createClass: async (data) => {
|
||||||
|
const newClass = await timetableService.createClass(data);
|
||||||
|
set((state) => ({
|
||||||
|
classes: [newClass, ...state.classes],
|
||||||
|
}));
|
||||||
|
return newClass;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateClass: async (classId, data) => {
|
||||||
|
const updatedClass = await timetableService.updateClass(classId, data);
|
||||||
|
set((state) => ({
|
||||||
|
classes: state.classes.map((c) => (c.id === classId ? updatedClass : c)),
|
||||||
|
currentClass: state.currentClass?.id === classId ? { ...state.currentClass, ...updatedClass } : state.currentClass,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteClass: async (classId) => {
|
||||||
|
await timetableService.deleteClass(classId);
|
||||||
|
set((state) => ({
|
||||||
|
classes: state.classes.filter((c) => c.id !== classId),
|
||||||
|
currentClass: state.currentClass?.id === classId ? null : state.currentClass,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchMyClasses: async () => {
|
||||||
|
set({ classesLoading: true, classesError: null });
|
||||||
|
try {
|
||||||
|
const classes = await timetableService.getMyClasses();
|
||||||
|
set({ myClasses: classes, classesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch my classes:', error);
|
||||||
|
set({
|
||||||
|
classesError: error instanceof Error ? error.message : 'Failed to fetch my classes',
|
||||||
|
classesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchMyTeachingClasses: async () => {
|
||||||
|
set({ classesLoading: true, classesError: null });
|
||||||
|
try {
|
||||||
|
const classes = await timetableService.getMyTeachingClasses();
|
||||||
|
set({ myTeachingClasses: classes, classesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch my teaching classes:', error);
|
||||||
|
set({
|
||||||
|
classesError: error instanceof Error ? error.message : 'Failed to fetch my teaching classes',
|
||||||
|
classesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCurrentClass: () => set({ currentClass: null }),
|
||||||
|
|
||||||
|
addTeacherToClass: async (classId, teacherId, isPrimary = false) => {
|
||||||
|
await timetableService.addTeacherToClass(classId, teacherId, isPrimary);
|
||||||
|
await get().fetchClass(classId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeTeacherFromClass: async (classId, teacherId) => {
|
||||||
|
await timetableService.removeTeacherFromClass(classId, teacherId);
|
||||||
|
await get().fetchClass(classId);
|
||||||
|
},
|
||||||
|
|
||||||
|
addStudentToClass: async (classId, studentId) => {
|
||||||
|
await timetableService.addStudentToClass(classId, studentId);
|
||||||
|
await get().fetchClass(classId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeStudentFromClass: async (classId, studentId) => {
|
||||||
|
await timetableService.removeStudentFromClass(classId, studentId);
|
||||||
|
await get().fetchClass(classId);
|
||||||
|
},
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Enrollment Request Actions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
fetchEnrollmentRequests: async (classId) => {
|
||||||
|
set({ enrollmentRequestsLoading: true, enrollmentRequestsError: null });
|
||||||
|
try {
|
||||||
|
const requests = await timetableService.getEnrollmentRequests(classId);
|
||||||
|
set({ enrollmentRequests: requests, enrollmentRequestsLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch enrollment requests:', error);
|
||||||
|
set({
|
||||||
|
enrollmentRequestsError: error instanceof Error ? error.message : 'Failed to fetch enrollment requests',
|
||||||
|
enrollmentRequestsLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
requestEnrollment: async (classId, message) => {
|
||||||
|
await timetableService.requestEnrollment(classId, message);
|
||||||
|
},
|
||||||
|
|
||||||
|
respondToEnrollmentRequest: async (requestId, status, responseMessage) => {
|
||||||
|
await timetableService.respondToEnrollmentRequest(requestId, status, responseMessage);
|
||||||
|
await get().fetchEnrollmentRequests(get().currentClass?.id || '');
|
||||||
|
},
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Timetable Actions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
fetchTimetables: async (params = {}) => {
|
||||||
|
set({ timetablesLoading: true, timetablesError: null });
|
||||||
|
try {
|
||||||
|
const response = await timetableService.getTimetables(params);
|
||||||
|
set({
|
||||||
|
timetables: response.items,
|
||||||
|
totalCount: response.total,
|
||||||
|
timetablesLoading: false,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch timetables:', error);
|
||||||
|
set({
|
||||||
|
timetablesError: error instanceof Error ? error.message : 'Failed to fetch timetables',
|
||||||
|
timetablesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchTimetable: async (timetableId) => {
|
||||||
|
set({ timetablesLoading: true, timetablesError: null });
|
||||||
|
try {
|
||||||
|
const timetable = await timetableService.getTimetable(timetableId);
|
||||||
|
set({ currentTimetable: timetable, timetablesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch timetable:', error);
|
||||||
|
set({
|
||||||
|
timetablesError: error instanceof Error ? error.message : 'Failed to fetch timetable',
|
||||||
|
timetablesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createTimetable: async (data) => {
|
||||||
|
const newTimetable = await timetableService.createTimetable(data);
|
||||||
|
set((state) => ({
|
||||||
|
timetables: [newTimetable, ...state.timetables],
|
||||||
|
}));
|
||||||
|
return newTimetable;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateTimetable: async (timetableId, data) => {
|
||||||
|
const updatedTimetable = await timetableService.updateTimetable(timetableId, data);
|
||||||
|
set((state) => ({
|
||||||
|
timetables: state.timetables.map((t) => (t.id === timetableId ? updatedTimetable : t)),
|
||||||
|
currentTimetable: state.currentTimetable?.id === timetableId ? { ...state.currentTimetable, ...updatedTimetable } : state.currentTimetable,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteTimetable: async (timetableId) => {
|
||||||
|
await timetableService.deleteTimetable(timetableId);
|
||||||
|
set((state) => ({
|
||||||
|
timetables: state.timetables.filter((t) => t.id !== timetableId),
|
||||||
|
currentTimetable: state.currentTimetable?.id === timetableId ? null : state.currentTimetable,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchMyTimetables: async () => {
|
||||||
|
set({ timetablesLoading: true, timetablesError: null });
|
||||||
|
try {
|
||||||
|
const timetables = await timetableService.getMyTimetables();
|
||||||
|
set({ timetables, timetablesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch my timetables:', error);
|
||||||
|
set({
|
||||||
|
timetablesError: error instanceof Error ? error.message : 'Failed to fetch my timetables',
|
||||||
|
timetablesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchMyTeachingTimetables: async () => {
|
||||||
|
set({ timetablesLoading: true, timetablesError: null });
|
||||||
|
try {
|
||||||
|
const timetables = await timetableService.getMyTeachingTimetables();
|
||||||
|
set({ timetables, timetablesLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch my teaching timetables:', error);
|
||||||
|
set({
|
||||||
|
timetablesError: error instanceof Error ? error.message : 'Failed to fetch my teaching timetables',
|
||||||
|
timetablesLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCurrentTimetable: () => set({ currentTimetable: null }),
|
||||||
|
|
||||||
|
addTeacherToTimetable: async (timetableId, teacherId, isPrimary = false) => {
|
||||||
|
await timetableService.addTeacherToTimetable(timetableId, teacherId, isPrimary);
|
||||||
|
await get().fetchTimetable(timetableId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeTeacherFromTimetable: async (timetableId, teacherId) => {
|
||||||
|
await timetableService.removeTeacherFromTimetable(timetableId, teacherId);
|
||||||
|
await get().fetchTimetable(timetableId);
|
||||||
|
},
|
||||||
|
|
||||||
|
addTimetableLesson: async (timetableId, data) => {
|
||||||
|
await timetableService.addTimetableLesson(timetableId, data);
|
||||||
|
await get().fetchTimetable(timetableId);
|
||||||
|
},
|
||||||
|
|
||||||
|
updateTimetableLesson: async (timetableId, lessonId, data) => {
|
||||||
|
await timetableService.updateTimetableLesson(timetableId, lessonId, data);
|
||||||
|
await get().fetchTimetable(timetableId);
|
||||||
|
},
|
||||||
|
|
||||||
|
removeTimetableLesson: async (timetableId, lessonId) => {
|
||||||
|
await timetableService.removeTimetableLesson(timetableId, lessonId);
|
||||||
|
await get().fetchTimetable(timetableId);
|
||||||
|
},
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Lesson Actions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
fetchLessons: async (params = {}) => {
|
||||||
|
set({ lessonsLoading: true, lessonsError: null });
|
||||||
|
try {
|
||||||
|
const response = await timetableService.getLessons(params);
|
||||||
|
set({
|
||||||
|
lessons: response.items,
|
||||||
|
totalCount: response.total,
|
||||||
|
lessonsLoading: false,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch lessons:', error);
|
||||||
|
set({
|
||||||
|
lessonsError: error instanceof Error ? error.message : 'Failed to fetch lessons',
|
||||||
|
lessonsLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchLesson: async (lessonId) => {
|
||||||
|
set({ lessonsLoading: true, lessonsError: null });
|
||||||
|
try {
|
||||||
|
const lesson = await timetableService.getLesson(lessonId);
|
||||||
|
set({ currentLesson: lesson, lessonsLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch lesson:', error);
|
||||||
|
set({
|
||||||
|
lessonsError: error instanceof Error ? error.message : 'Failed to fetch lesson',
|
||||||
|
lessonsLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
generateLessons: async (timetableId, startDate, endDate) => {
|
||||||
|
set({ lessonsLoading: true, lessonsError: null });
|
||||||
|
try {
|
||||||
|
await timetableService.generateLessons(timetableId, startDate, endDate);
|
||||||
|
await get().fetchLessons({ timetableId });
|
||||||
|
set({ lessonsLoading: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to generate lessons:', error);
|
||||||
|
set({
|
||||||
|
lessonsError: error instanceof Error ? error.message : 'Failed to generate lessons',
|
||||||
|
lessonsLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cancelLesson: async (lessonId, reason) => {
|
||||||
|
await timetableService.cancelLesson(lessonId, reason);
|
||||||
|
await get().fetchLesson(lessonId);
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCurrentLesson: () => set({ currentLesson: null }),
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Filter Actions
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
setFilterSubject: (subject) => set({ filterSubject: subject, currentPage: 0 }),
|
||||||
|
setFilterSchoolYear: (schoolYear) => set({ filterSchoolYear: schoolYear, currentPage: 0 }),
|
||||||
|
setFilterAcademicTerm: (academicTerm) => set({ filterAcademicTerm: academicTerm, currentPage: 0 }),
|
||||||
|
setSearchQuery: (query) => set({ searchQuery: query, currentPage: 0 }),
|
||||||
|
setPage: (page) => set({ currentPage: page }),
|
||||||
|
setPageSize: (size) => set({ pageSize: size, currentPage: 0 }),
|
||||||
|
|
||||||
|
clearFilters: () =>
|
||||||
|
set({
|
||||||
|
filterSubject: null,
|
||||||
|
filterSchoolYear: null,
|
||||||
|
filterAcademicTerm: null,
|
||||||
|
searchQuery: '',
|
||||||
|
currentPage: 0,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'timetable-store',
|
||||||
|
partialize: (state) => ({
|
||||||
|
filterSubject: state.filterSubject,
|
||||||
|
filterSchoolYear: state.filterSchoolYear,
|
||||||
|
filterAcademicTerm: state.filterAcademicTerm,
|
||||||
|
pageSize: state.pageSize,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
),
|
||||||
|
{ name: 'TimetableStore' }
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default useTimetableStore;
|
||||||
262
src/types/timetable.types.ts
Normal file
262
src/types/timetable.types.ts
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
/**
|
||||||
|
* Timetable System Type Definitions
|
||||||
|
* Comprehensive types for classes, timetables, lessons, and enrollment
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Enums
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export type EnrollmentStatus = 'pending' | 'approved' | 'rejected';
|
||||||
|
export type LessonStatus = 'scheduled' | 'completed' | 'cancelled';
|
||||||
|
export type TimetableType = 'adhoc' | 'recurring';
|
||||||
|
export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0 = Sunday
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Base Interfaces
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface Class {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
subject: string;
|
||||||
|
school_year: string;
|
||||||
|
academic_term: string;
|
||||||
|
description?: string;
|
||||||
|
created_by: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
is_active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ClassTeacher {
|
||||||
|
id: string;
|
||||||
|
class_id: string;
|
||||||
|
teacher_id: string;
|
||||||
|
is_primary: boolean;
|
||||||
|
assigned_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ClassStudent {
|
||||||
|
id: string;
|
||||||
|
class_id: string;
|
||||||
|
student_id: string;
|
||||||
|
enrolled_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Timetable {
|
||||||
|
id: string;
|
||||||
|
class_id: string;
|
||||||
|
name: string;
|
||||||
|
type: TimetableType;
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
recurrence_rule?: string;
|
||||||
|
is_active: boolean;
|
||||||
|
created_by: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimetableTeacher {
|
||||||
|
id: string;
|
||||||
|
timetable_id: string;
|
||||||
|
teacher_id: string;
|
||||||
|
is_primary: boolean;
|
||||||
|
assigned_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimetableLesson {
|
||||||
|
id: string;
|
||||||
|
timetable_id: string;
|
||||||
|
day_of_week: DayOfWeek;
|
||||||
|
start_time: string; // HH:MM format
|
||||||
|
end_time: string; // HH:MM format
|
||||||
|
room?: string;
|
||||||
|
max_students?: number;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Lesson {
|
||||||
|
id: string;
|
||||||
|
timetable_id: string;
|
||||||
|
lesson_definition_id: string;
|
||||||
|
scheduled_date: string;
|
||||||
|
start_time: string;
|
||||||
|
end_time: string;
|
||||||
|
room?: string;
|
||||||
|
status: LessonStatus;
|
||||||
|
cancellation_reason?: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LessonWhiteboard {
|
||||||
|
id: string;
|
||||||
|
lesson_id: string;
|
||||||
|
whiteboard_id: string;
|
||||||
|
student_id?: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EnrollmentRequest {
|
||||||
|
id: string;
|
||||||
|
class_id: string;
|
||||||
|
student_id: string;
|
||||||
|
status: EnrollmentStatus;
|
||||||
|
request_message?: string;
|
||||||
|
response_message?: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Profile Interfaces (for joins)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface UserProfile {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
full_name?: string;
|
||||||
|
avatar_url?: string;
|
||||||
|
role: 'teacher' | 'student' | 'admin';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Extended Interfaces (with relations)
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface ClassWithRelations extends Class {
|
||||||
|
teachers?: Array<ClassTeacher & { profile: UserProfile }>;
|
||||||
|
students?: Array<ClassStudent & { profile: UserProfile }>;
|
||||||
|
timetables?: Timetable[];
|
||||||
|
enrollment_requests?: Array<EnrollmentRequestWithProfile>;
|
||||||
|
student_count?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimetableWithRelations extends Timetable {
|
||||||
|
class?: Class;
|
||||||
|
teachers?: Array<TimetableTeacher & { profile: UserProfile }>;
|
||||||
|
lessons?: TimetableLesson[];
|
||||||
|
lesson_instances?: Lesson[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LessonWithRelations extends Lesson {
|
||||||
|
timetable?: TimetableWithRelations;
|
||||||
|
whiteboards?: Array<LessonWhiteboard & { whiteboard: { id: string; name: string } }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EnrollmentRequestWithProfile extends EnrollmentRequest {
|
||||||
|
student?: UserProfile;
|
||||||
|
class?: Class;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Request/Response Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface CreateClassRequest {
|
||||||
|
name: string;
|
||||||
|
subject: string;
|
||||||
|
school_year: string;
|
||||||
|
academic_term: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateClassRequest {
|
||||||
|
name?: string;
|
||||||
|
subject?: string;
|
||||||
|
school_year?: string;
|
||||||
|
academic_term?: string;
|
||||||
|
description?: string;
|
||||||
|
is_active?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateTimetableRequest {
|
||||||
|
class_id: string;
|
||||||
|
name: string;
|
||||||
|
type: TimetableType;
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
recurrence_rule?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateTimetableRequest {
|
||||||
|
name?: string;
|
||||||
|
start_date?: string;
|
||||||
|
end_date?: string;
|
||||||
|
recurrence_rule?: string;
|
||||||
|
is_active?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateTimetableLessonRequest {
|
||||||
|
day_of_week: DayOfWeek;
|
||||||
|
start_time: string;
|
||||||
|
end_time: string;
|
||||||
|
room?: string;
|
||||||
|
max_students?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateTimetableLessonRequest {
|
||||||
|
day_of_week?: DayOfWeek;
|
||||||
|
start_time?: string;
|
||||||
|
end_time?: string;
|
||||||
|
room?: string;
|
||||||
|
max_students?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GenerateLessonsRequest {
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CancelLessonRequest {
|
||||||
|
reason: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EnrollmentResponseRequest {
|
||||||
|
status: 'approved' | 'rejected';
|
||||||
|
response_message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateEnrollmentRequest {
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// Filter and Pagination Types
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface ClassFilters {
|
||||||
|
subject?: string;
|
||||||
|
school_year?: string;
|
||||||
|
academic_term?: string;
|
||||||
|
search?: string;
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimetableFilters {
|
||||||
|
class_id?: string;
|
||||||
|
type?: TimetableType;
|
||||||
|
is_active?: boolean;
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LessonFilters {
|
||||||
|
timetable_id?: string;
|
||||||
|
start_date?: string;
|
||||||
|
end_date?: string;
|
||||||
|
status?: LessonStatus;
|
||||||
|
skip?: number;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedResponse<T> {
|
||||||
|
items: T[];
|
||||||
|
total: number;
|
||||||
|
skip: number;
|
||||||
|
limit: number;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user