Create ClassStudentManager.jsx

frontend/src/components/admin/ClassStudentManager.jsx

@@ -0,0 +1,210 @@
+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";
+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]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const enrolledEmails = new Set(
+    enrollments
+      .filter((e) => e.status !== "removed")
+      .map((e) => e.student_email)
+  );
+
+  const availableMembers = memberships.filter(
+    (m) =>
+      (m.status === "active" || m.status === "pending") &&
+      !enrolledEmails.has(m.user_email)
+  );
+
+  async function handleAddStudent() {
+    if (!selectedMembershipId) return;
+    setSaving(true);
+    try {
+      await api.post(
+        `/api/admin/classes/${classData.id}/enroll-membership`,
+        {
+          membership_id: Number(selectedMembershipId),
+        }
+      );
+      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);
+    }
+  }
+
+  async function handleRemove(enrollmentId) {
+    if (!window.confirm("Remove this student from the class?")) return;
+    setSaving(true);
+    try {
+      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);
+    }
+  }
+
+  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>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          className="text-stone-500"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </CardHeader>
+
+      <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" />
+          </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}
+                    </div>
+                    <div className="text-xs text-stone-500">
+                      {enrollment.student_email}
+                    </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>
+        )}
+      </CardContent>
+    </Card>
+  );
+}