Update frontend/src/components/admin/ClassStudentManager.jsx

frontend/src/components/admin/ClassStudentManager.jsx

@@ -16,14 +16,13 @@ const fetchEnrollments = async (classId) => {
 };
 
 /**
- * Fetch all memberships so we can pick students from them.
- * FastAPI route: /api/admin/memberships
- * → Frontend path: /admin/memberships
+ * Fetch all students so we can pick individual students.
+ * FastAPI route: /api/admin/students
+ * → Frontend path: /admin/students
  */
-const fetchMemberships = async () => {
-  const res = await client.get("/admin/memberships");
-  const payload = res.data || { items: [] };
-  return payload.items || [];
+const fetchStudents = async () => {
+  const res = await client.get("/admin/students");
+  return Array.isArray(res.data) ? res.data : [];
 };
 
 export default function ClassStudentManager({ classData, onClose }) {
@@ -36,21 +35,34 @@ export default function ClassStudentManager({ classData, onClose }) {
     enabled: !!classId,
   });
 
-  const { data: memberships = [], isLoading: isLoadingMembers } = useQuery({
-    queryKey: ["memberships"],
-    queryFn: fetchMemberships,
+  const { data: students = [], isLoading: isLoadingStudents } = useQuery({
+    queryKey: ["students"],
+    queryFn: fetchStudents,
   });
 
-  const [selectedEmail, setSelectedEmail] = useState("");
+  const [selectedStudentId, setSelectedStudentId] = useState("");
 
-  const availableMembers = useMemo(() => {
+  const availableStudents = useMemo(() => {
+    const enrolledStudentIds = new Set(
+      enrollments
+        .filter((e) => e.status !== "removed")
+        .map((e) => e.student_id)
+        .filter(Boolean) // Remove null/undefined
+    );
     const enrolledEmails = new Set(
       enrollments
         .filter((e) => e.status !== "removed")
         .map((e) => e.student_email)
     );
-    return memberships.filter((m) => !enrolledEmails.has(m.user_email));
-  }, [memberships, enrollments]);
+    // Filter out students that are already enrolled (by student_id or by email matching student name)
+    return students.filter((s) => {
+      // Check if student ID is enrolled
+      if (enrolledStudentIds.has(s.id)) return false;
+      // Check if student name matches any enrolled email (for backward compatibility)
+      // This is a fallback for old enrollments that might not have student_id
+      return !enrolledEmails.has(s.name);
+    });
+  }, [students, enrollments]);
 
   const enrollMutation = useMutation({
     // POST /api/admin/classes/{class_id}/enroll
@@ -74,12 +86,15 @@ export default function ClassStudentManager({ classData, onClose }) {
   });
 
   const handleAddStudent = () => {
-    if (!selectedEmail) return;
+    if (!selectedStudentId) return;
+
+    const student = students.find((s) => s.id === parseInt(selectedStudentId, 10));
+    if (!student) return;
 
-    const member = memberships.find((m) => m.user_email === selectedEmail);
     enrollMutation.mutate({
-      student_email: selectedEmail,
-      student_name: member?.user_name || "",
+      student_id: student.id,
+      student_email: student.membership_email || "",
+      student_name: student.name,
     });
   };
 
@@ -95,7 +110,7 @@ export default function ClassStudentManager({ classData, onClose }) {
               Manage Students – {classData?.name}
             </h2>
             <p className="text-sm text-stone-500">
-              Add students to this class from your membership list
+              Add individual students to this class (students can be from the same or different memberships)
             </p>
           </div>
         </div>
@@ -115,21 +130,24 @@ export default function ClassStudentManager({ classData, onClose }) {
         <div className="flex flex-wrap gap-3 items-center">
           <select
             className="flex-1 min-w-[220px] rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
-            value={selectedEmail}
-            onChange={(e) => setSelectedEmail(e.target.value)}
-            disabled={isLoadingMembers || enrollMutation.isPending}
+            value={selectedStudentId}
+            onChange={(e) => setSelectedStudentId(e.target.value)}
+            disabled={isLoadingStudents || enrollMutation.isPending}
           >
             <option value="">Select a student to add...</option>
-            {availableMembers.map((m) => (
-              <option key={m.id} value={m.user_email}>
-                {m.user_name || m.user_email} ({m.user_email})
+            {availableStudents.map((student) => (
+              <option key={student.id} value={student.id}>
+                {student.name}
+                {student.belt_level ? ` (${student.belt_level})` : ""}
+                {student.membership_plan ? ` - ${student.membership_plan}` : ""}
+                {student.membership_email ? ` [${student.membership_email}]` : ""}
               </option>
             ))}
           </select>
           <button
             type="button"
             onClick={handleAddStudent}
-            disabled={!selectedEmail || enrollMutation.isPending || isLoadingMembers}
+            disabled={!selectedStudentId || enrollMutation.isPending || isLoadingStudents}
             className="inline-flex items-center gap-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span>+</span>
@@ -156,9 +174,9 @@ export default function ClassStudentManager({ classData, onClose }) {
                 >
                   <div>
                     <div className="font-medium text-stone-900 text-sm">
-                      {enrollment.student_name || enrollment.student_email}
+                      {enrollment.student_name || enrollment.student_email || "Unknown Student"}
                     </div>
-                    {enrollment.student_name && (
+                    {enrollment.student_email && enrollment.student_name && (
                       <div className="text-xs text-stone-500">
                         {enrollment.student_email}
                       </div>