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

frontend/src/components/admin/ClassStudentManager.jsx

@@ -2,25 +2,6 @@
 import React from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import api from "../../api/client";
-
-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";
 
 function useMemberships() {
@@ -108,149 +89,167 @@ export default function ClassStudentManager({ classData, onClose }) {
   };
 
   return (
-    <Card>
-      <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+    <div className="border rounded-xl bg-white shadow-sm">
+      <div className="px-4 py-3 border-b flex items-center justify-between">
         <div>
-          <CardTitle>Manage Students for {classData.name}</CardTitle>
-          <CardDescription>
+          <h2 className="font-semibold text-stone-900">
+            Manage Students for {classData.name}
+          </h2>
+          <p className="text-xs text-stone-500">
             Enroll existing members into this class. Students will see
             their classes when they log in.
-          </CardDescription>
+          </p>
         </div>
-        <Button variant="ghost" size="icon" onClick={onClose}>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-md p-2 text-stone-500 hover:bg-stone-100"
+        >
           <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>
+        </button>
+      </div>
 
-            {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}
+      <div className="p-4 grid md:grid-cols-2 gap-6">
+        {/* Left: Members */}
+        <div>
+          <h3 className="font-semibold mb-1 text-sm text-stone-900">
+            All Members
+          </h3>
+          <p className="text-xs text-stone-500 mb-3">
+            Click &quot;Enroll&quot; to add a member into this class.
+          </p>
+
+          {membershipsLoading ? (
+            <div className="space-y-2">
+              {[1, 2, 3].map((i) => (
+                <div
+                  key={i}
+                  className="h-10 w-full animate-pulse rounded-md bg-stone-100"
+                />
+              ))}
+            </div>
+          ) : memberships.length === 0 ? (
+            <p className="text-sm text-stone-500">No memberships found.</p>
+          ) : (
+            <div className="border rounded-lg overflow-hidden">
+              <table className="w-full text-xs">
+                <thead className="bg-stone-50">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-semibold text-stone-800">
+                      Member
+                    </th>
+                    <th className="px-3 py-2 text-left font-semibold text-stone-800">
+                      Plan
+                    </th>
+                    <th className="px-3 py-2 text-right font-semibold text-stone-800">
+                      Action
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {memberships.map((m) => {
+                    const alreadyEnrolled =
+                      enrolledEmails.has(m.user_email);
+                    return (
+                      <tr
+                        key={m.id}
+                        className="border-t border-stone-100"
+                      >
+                        <td className="px-3 py-2 align-top">
+                          <div className="flex flex-col">
+                            <span className="font-medium text-stone-900">
+                              {m.user_name || "Unnamed"}
+                            </span>
+                            <span className="text-[11px] text-stone-500">
+                              {m.user_email}
                             </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>
+                          </div>
+                        </td>
+                        <td className="px-3 py-2 align-top">
+                          <span className="text-[11px] text-stone-700">
+                            {m.plan_name}
+                          </span>
+                        </td>
+                        <td className="px-3 py-2 align-top text-right">
+                          <button
+                            type="button"
+                            onClick={() => handleEnroll(m)}
+                            disabled={
+                              alreadyEnrolled || enrollMutation.isPending
+                            }
+                            className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium ${
+                              alreadyEnrolled
+                                ? "border border-stone-300 text-stone-500 bg-stone-50"
+                                : "bg-stone-900 text-white hover:bg-stone-800"
+                            } disabled:opacity-60`}
+                          >
+                            <UserPlus className="w-3 h-3" />
+                            {alreadyEnrolled ? "Enrolled" : "Enroll"}
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
 
-          {/* 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.
+        {/* Right: Enrollments */}
+        <div>
+          <h3 className="font-semibold mb-1 text-sm text-stone-900">
+            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) => (
+                <div
+                  key={i}
+                  className="h-10 w-full animate-pulse rounded-md bg-stone-100"
+                />
+              ))}
+            </div>
+          ) : activeEnrollments.length === 0 ? (
+            <p className="text-sm text-stone-500">
+              No students enrolled yet.
             </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="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 className="space-y-2">
+              {activeEnrollments.map((enroll) => (
+                <div
+                  key={enroll.id}
+                  className="flex items-center justify-between rounded-lg border border-stone-200 px-3 py-2"
+                >
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-stone-900">
+                      {enroll.student_name || "Student"}
+                    </span>
+                    <span className="text-[11px] text-stone-500">
+                      {enroll.student_email}
+                    </span>
+                    <span className="mt-0.5 inline-flex items-center rounded-full bg-stone-100 px-2 py-0.5 text-[10px] font-medium text-stone-700">
+                      {enroll.status}
+                    </span>
                   </div>
-                ))}
-              </div>
-            )}
-          </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemove(enroll.id)}
+                    disabled={removeMutation.isPending}
+                    className="rounded-md p-2 text-red-600 hover:bg-red-50 disabled:opacity-60"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }