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
2026-02-26 03:27:46 +00:00
parent d5c53f2c17
commit 11c139b410
12 changed files with 2867 additions and 0 deletions
@@ -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;