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

frontend/src/components/admin/ClassStudentManager.jsx

@@ -1,209 +1,255 @@
-import React, { useEffect, useState, useCallback } from "react";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Users, X, Plus, Trash2 } from "lucide-react";
+// frontend/src/components/admin/ClassStudentManager.jsx
+import React from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import api from "../../api/client";
 
-export default function ClassStudentManager({ classData, onClose }) {
-  const [memberships, setMemberships] = useState([]);
-  const [enrollments, setEnrollments] = useState([]);
-  const [selectedMembershipId, setSelectedMembershipId] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  const loadData = useCallback(async () => {
-    if (!classData?.id) return;
-    setLoading(true);
-    try {
-      const [enrollRes, memberRes] = await Promise.all([
-        api.get(`/api/admin/classes/${classData.id}/enrollments`),
-        api.get("/api/admin/memberships"),
-      ]);
-
-      setEnrollments(enrollRes.data || []);
-      setMemberships(memberRes.data?.items || []);
-    } catch (err) {
-      console.error("Failed to load class students", err);
-    } finally {
-      setLoading(false);
-    }
-  }, [classData?.id]);
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "../ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Skeleton } from "../ui/skeleton";
+import { Badge } from "../ui/badge";
+import { X, UserPlus, Trash2 } from "lucide-react";
 
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
+function useMemberships() {
+  return useQuery({
+    queryKey: ["admin-memberships"],
+    queryFn: async () => {
+      const res = await api.get("/api/admin/memberships");
+      return res.data?.items || [];
+    },
+  });
+}
 
-  const enrolledEmails = new Set(
-    enrollments
-      .filter((e) => e.status !== "removed")
-      .map((e) => e.student_email)
-  );
+function useClassEnrollments(classId) {
+  return useQuery({
+    queryKey: ["class-enrollments", classId],
+    queryFn: async () => {
+      const res = await api.get(
+        `/api/admin/classes/${classId}/enrollments`
+      );
+      return res.data || [];
+    },
+    enabled: !!classId,
+  });
+}
 
-  const availableMembers = memberships.filter(
-    (m) =>
-      (m.status === "active" || m.status === "pending") &&
-      !enrolledEmails.has(m.user_email)
-  );
+export default function ClassStudentManager({ classData, onClose }) {
+  const queryClient = useQueryClient();
+
+  const {
+    data: memberships = [],
+    isLoading: membershipsLoading,
+  } = useMemberships();
+
+  const {
+    data: enrollments = [],
+    isLoading: enrollmentsLoading,
+  } = useClassEnrollments(classData?.id);
 
-  async function handleAddStudent() {
-    if (!selectedMembershipId) return;
-    setSaving(true);
-    try {
-      await api.post(
+  const enrollMutation = useMutation({
+    mutationFn: async (membershipId) => {
+      const payload = { membership_id: membershipId };
+      const res = await api.post(
         `/api/admin/classes/${classData.id}/enroll-membership`,
-        {
-          membership_id: Number(selectedMembershipId),
-        }
+        payload
       );
-      setSelectedMembershipId("");
-      await loadData();
-    } catch (err) {
-      console.error("Failed to enroll student", err);
-      alert("Could not add student to class. Please try again.");
-    } finally {
-      setSaving(false);
-    }
-  }
+      return res.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["class-enrollments", classData.id],
+      });
+    },
+  });
 
-  async function handleRemove(enrollmentId) {
-    if (!window.confirm("Remove this student from the class?")) return;
-    setSaving(true);
-    try {
+  const removeMutation = useMutation({
+    mutationFn: async (enrollmentId) => {
       await api.delete(
         `/api/admin/classes/${classData.id}/enrollments/${enrollmentId}`
       );
-      await loadData();
-    } catch (err) {
-      console.error("Failed to remove enrollment", err);
-      alert("Could not remove student from class. Please try again.");
-    } finally {
-      setSaving(false);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["class-enrollments", classData.id],
+      });
+    },
+  });
+
+  const activeEnrollments = enrollments.filter(
+    (e) => e.status !== "removed"
+  );
+
+  const enrolledEmails = new Set(
+    activeEnrollments.map((e) => e.student_email)
+  );
+
+  const handleEnroll = (membership) => {
+    if (enrolledEmails.has(membership.user_email)) {
+      return;
     }
-  }
+    enrollMutation.mutate(membership.id);
+  };
+
+  const handleRemove = (enrollmentId) => {
+    removeMutation.mutate(enrollmentId);
+  };
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Users className="w-5 h-5 text-stone-600" />
-          <div>
-            <CardTitle className="text-base sm:text-lg">
-              Manage Students – {classData?.name}
-            </CardTitle>
-            <p className="text-xs text-stone-500">
-              Add existing members to this class. They will see it in their
-              student login.
-            </p>
-          </div>
+      <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+        <div>
+          <CardTitle>Manage Students for {classData.name}</CardTitle>
+          <CardDescription>
+            Enroll existing members into this class. Students will see
+            their classes when they log in.
+          </CardDescription>
         </div>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClose}
-          className="text-stone-500"
-        >
-          <X className="w-4 h-4" />
+        <Button variant="ghost" size="icon" onClick={onClose}>
+          <X className="w-5 h-5" />
         </Button>
       </CardHeader>
+      <CardContent>
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Left: Membership list */}
+          <div>
+            <h3 className="font-semibold mb-2">All Members</h3>
+            <p className="text-xs text-stone-500 mb-3">
+              Click &quot;Enroll&quot; to add a member into this class.
+            </p>
 
-      <CardContent className="space-y-4">
-        {/* Add student row */}
-        <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
-          <Select
-            value={selectedMembershipId}
-            onValueChange={setSelectedMembershipId}
-          >
-            <SelectTrigger className="flex-1">
-              <SelectValue placeholder="Select a student to add…" />
-            </SelectTrigger>
-            <SelectContent>
-              {availableMembers.length === 0 && (
-                <SelectItem value="__none" disabled>
-                  No available members
-                </SelectItem>
-              )}
-              {availableMembers.map((m) => (
-                <SelectItem key={m.id} value={String(m.id)}>
-                  {m.user_name || m.user_email} • {m.plan_name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-
-          <Button
-            type="button"
-            onClick={handleAddStudent}
-            disabled={!selectedMembershipId || saving}
-            className="gap-2 bg-red-600 hover:bg-red-700"
-          >
-            <Plus className="w-4 h-4" />
-            Add
-          </Button>
-        </div>
-
-        {/* Students list */}
-        {loading ? (
-          <div className="space-y-2 mt-4">
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
+            {membershipsLoading ? (
+              <div className="space-y-2">
+                {[1, 2, 3].map((i) => (
+                  <Skeleton key={i} className="h-10 w-full" />
+                ))}
+              </div>
+            ) : memberships.length === 0 ? (
+              <p className="text-sm text-stone-500">
+                No memberships found.
+              </p>
+            ) : (
+              <div className="border rounded-lg overflow-hidden">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Member</TableHead>
+                      <TableHead>Plan</TableHead>
+                      <TableHead className="text-right">
+                        Action
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {memberships.map((m) => {
+                      const alreadyEnrolled =
+                        enrolledEmails.has(m.user_email);
+                      return (
+                        <TableRow key={m.id}>
+                          <TableCell>
+                            <div className="flex flex-col">
+                              <span className="font-medium">
+                                {m.user_name || "Unnamed"}
+                              </span>
+                              <span className="text-xs text-stone-500">
+                                {m.user_email}
+                              </span>
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <span className="text-xs">
+                              {m.plan_name}
+                            </span>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <Button
+                              size="sm"
+                              variant={alreadyEnrolled ? "outline" : "default"}
+                              className="gap-1"
+                              disabled={
+                                alreadyEnrolled || enrollMutation.isPending
+                              }
+                              onClick={() => handleEnroll(m)}
+                            >
+                              <UserPlus className="w-4 h-4" />
+                              {alreadyEnrolled ? "Enrolled" : "Enroll"}
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
           </div>
-        ) : enrollments.filter((e) => e.status !== "removed").length === 0 ? (
-          <p className="text-sm text-stone-500 mt-4">
-            No students enrolled in this class yet.
-          </p>
-        ) : (
-          <div className="mt-4 space-y-2">
-            {enrollments
-              .filter((e) => e.status !== "removed")
-              .map((enrollment) => (
-                <div
-                  key={enrollment.id}
-                  className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 border rounded-md px-3 py-2"
-                >
-                  <div>
-                    <div className="font-medium">
-                      {enrollment.student_name || enrollment.student_email}
+
+          {/* Right: Current enrollments */}
+          <div>
+            <h3 className="font-semibold mb-2">
+              Students in this class
+            </h3>
+            <p className="text-xs text-stone-500 mb-3">
+              These students are currently associated with this class.
+            </p>
+
+            {enrollmentsLoading ? (
+              <div className="space-y-2">
+                {[1, 2, 3].map((i) => (
+                  <Skeleton key={i} className="h-10 w-full" />
+                ))}
+              </div>
+            ) : activeEnrollments.length === 0 ? (
+              <p className="text-sm text-stone-500">
+                No students enrolled yet.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {activeEnrollments.map((enroll) => (
+                  <div
+                    key={enroll.id}
+                    className="flex items-center justify-between border rounded-lg px-3 py-2"
+                  >
+                    <div className="flex flex-col">
+                      <span className="font-medium">
+                        {enroll.student_name || "Student"}
+                      </span>
+                      <span className="text-xs text-stone-500">
+                        {enroll.student_email}
+                      </span>
                     </div>
-                    <div className="text-xs text-stone-500">
-                      {enrollment.student_email}
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="text-xs">
+                        {enroll.status}
+                      </Badge>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="text-red-600"
+                        onClick={() => handleRemove(enroll.id)}
+                        disabled={removeMutation.isPending}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
                     </div>
                   </div>
-                  <div className="flex items-center gap-3">
-                    <Badge
-                      variant={
-                        enrollment.status === "invited"
-                          ? "secondary"
-                          : "default"
-                      }
-                      className="text-xs"
-                    >
-                      {enrollment.status}
-                    </Badge>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="text-red-600"
-                      onClick={() => handleRemove(enrollment.id)}
-                      disabled={saving}
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
+                ))}
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </CardContent>
     </Card>
   );