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

frontend/src/components/admin/ClassStudentManager.jsx

@@ -1,5 +1,6 @@
 // frontend/src/components/admin/ClassStudentManager.jsx
 import React, { useState, useMemo } from "react";
+import { Users2, X } from "lucide-react";
 import client from "../../api/client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 
@@ -25,13 +26,14 @@ const fetchMemberships = async () => {
   return payload.items || [];
 };
 
-export default function ClassStudentManager({ classData }) {
+export default function ClassStudentManager({ classData, onClose }) {
   const queryClient = useQueryClient();
-  const classId = classData.id;
+  const classId = classData?.id;
 
   const { data: enrollments = [], isLoading: isLoadingEnrollments } = useQuery({
     queryKey: ["class-enrollments", classId],
     queryFn: () => fetchEnrollments(classId),
+    enabled: !!classId,
   });
 
   const { data: memberships = [], isLoading: isLoadingMembers } = useQuery({
@@ -50,10 +52,10 @@ export default function ClassStudentManager({ classData }) {
     return memberships.filter((m) => !enrolledEmails.has(m.user_email));
   }, [memberships, enrollments]);
 
-  const inviteMutation = useMutation({
-    // POST /api/admin/classes/{class_id}/invite
+  const enrollMutation = useMutation({
+    // POST /api/admin/classes/{class_id}/enroll
     mutationFn: (payload) =>
-      client.post(`/admin/classes/${classId}/invite`, payload),
+      client.post(`/admin/classes/${classId}/enroll`, payload),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["class-enrollments", classId] });
       setSelectedEmail("");
@@ -75,80 +77,106 @@ export default function ClassStudentManager({ classData }) {
     if (!selectedEmail) return;
 
     const member = memberships.find((m) => m.user_email === selectedEmail);
-    inviteMutation.mutate({
+    enrollMutation.mutate({
       student_email: selectedEmail,
       student_name: member?.user_name || "",
     });
   };
 
+  const enrolledStudents = enrollments.filter((e) => e.status !== "removed");
+
   return (
-    <div className="space-y-4">
-      {/* Add student row */}
-      <div className="flex flex-wrap gap-3 items-center">
-        <select
-          className="border border-stone-300 rounded-md px-3 py-2 text-sm min-w-[220px]"
-          value={selectedEmail}
-          onChange={(e) => setSelectedEmail(e.target.value)}
-          disabled={isLoadingMembers}
-        >
-          <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})
-            </option>
-          ))}
-        </select>
-        <button
-          type="button"
-          onClick={handleAddStudent}
-          disabled={!selectedEmail || inviteMutation.isPending}
-          className="inline-flex items-center px-4 py-2 rounded-md bg-red-600 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
-        >
-          Add
-        </button>
+    <div className="mb-6 bg-white border border-stone-200 rounded-2xl shadow-sm">
+      <div className="px-4 sm:px-6 py-4 border-b border-stone-100 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div className="flex items-center gap-2">
+          <Users2 className="w-5 h-5 text-stone-700" />
+          <div>
+            <h2 className="text-base font-semibold text-stone-900">
+              Manage Students – {classData?.name}
+            </h2>
+            <p className="text-sm text-stone-500">
+              Add students to this class from your membership list
+            </p>
+          </div>
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex items-center justify-center rounded-lg border border-stone-200 px-2.5 py-1.5 text-sm text-stone-600 hover:bg-stone-50"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
       </div>
 
-      {/* Enrolled students */}
-      <div className="border border-stone-200 rounded-md">
-        <div className="px-4 py-2 border-b border-stone-200 text-sm font-medium text-stone-700">
-          Enrolled Students
+      <div className="px-4 sm:px-6 py-4 space-y-4">
+        {/* Add student row */}
+        <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}
+          >
+            <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})
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={handleAddStudent}
+            disabled={!selectedEmail || enrollMutation.isPending || isLoadingMembers}
+            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>
+            {enrollMutation.isPending ? "Adding..." : "Add"}
+          </button>
         </div>
-        <div className="divide-y divide-stone-100">
-          {isLoadingEnrollments ? (
-            <div className="px-4 py-4 text-sm text-stone-500">
-              Loading students…
-            </div>
-          ) : enrollments.length === 0 ? (
-            <div className="px-4 py-4 text-sm text-stone-500">
-              No students enrolled in this class yet.
-            </div>
-          ) : (
-            enrollments
-              .filter((e) => e.status !== "removed")
-              .map((enrollment) => (
+
+        {/* Enrolled students list */}
+        {isLoadingEnrollments ? (
+          <div className="text-center py-8 text-sm text-stone-500">
+            Loading students...
+          </div>
+        ) : enrolledStudents.length === 0 ? (
+          <div className="text-center py-8 text-sm text-stone-500">
+            No students enrolled in this class yet.
+          </div>
+        ) : (
+          <div className="border-t border-stone-100 pt-4">
+            <div className="space-y-2">
+              {enrolledStudents.map((enrollment) => (
                 <div
                   key={enrollment.id}
-                  className="px-4 py-3 flex items-center justify-between text-sm"
+                  className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-stone-50"
                 >
                   <div>
-                    <div className="font-medium">
+                    <div className="font-medium text-stone-900 text-sm">
                       {enrollment.student_name || enrollment.student_email}
                     </div>
-                    <div className="text-stone-500 text-xs">
-                      {enrollment.student_email}
-                    </div>
+                    {enrollment.student_name && (
+                      <div className="text-xs text-stone-500">
+                        {enrollment.student_email}
+                      </div>
+                    )}
                   </div>
                   <button
                     type="button"
                     onClick={() => removeMutation.mutate(enrollment.id)}
-                    className="text-xs text-red-600 hover:underline"
+                    disabled={removeMutation.isPending}
+                    className="text-xs font-medium text-red-600 hover:text-red-700 disabled:opacity-50"
                   >
                     Remove
                   </button>
                 </div>
-              ))
-          )}
-        </div>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );