Update frontend/src/pages/AdminClasses.jsx

frontend/src/pages/AdminClasses.jsx

@@ -2,17 +2,7 @@
 import React, { useState } from "react";
 import api from "../api/client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-
-import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "../components/ui/card";
 import { Plus } from "lucide-react";
-
 import ClassForm from "../components/admin/ClassForm";
 import ClassesTable from "../components/admin/ClassesTable";
 import ClassStudentManager from "../components/admin/ClassStudentManager";
@@ -21,7 +11,7 @@ import ClassStudentManager from "../components/admin/ClassStudentManager";
 
 async function fetchClasses() {
   const res = await api.get("/api/admin/classes");
-  return res.data; // FastAPI returns list[ClassOut]
+  return res.data || [];
 }
 
 async function createClassRequest(classData) {
@@ -38,6 +28,8 @@ async function deleteClassRequest(id) {
   await api.delete(`/api/admin/classes/${id}`);
 }
 
+// --- Page component ---
+
 export default function AdminClasses() {
   const queryClient = useQueryClient();
   const [showForm, setShowForm] = useState(false);
@@ -98,30 +90,30 @@ export default function AdminClasses() {
         </p>
       </div>
 
-      {/* Class Form */}
-      <Card className="mb-6">
-        <CardHeader>
-          <div className="flex justify-between items-center">
-            <div>
-              <CardTitle>Class Setup</CardTitle>
-              <CardDescription>
-                Create classes with flexible schedules
-              </CardDescription>
-            </div>
-            <Button
-              onClick={() => {
-                setEditingClass(null);
-                setShowForm(!showForm);
-              }}
-              className="gap-2 bg-red-600 hover:bg-red-700"
-            >
-              <Plus className="w-4 h-4" />
-              {showForm ? "Cancel" : "New Class"}
-            </Button>
+      {/* Class Form Card */}
+      <div className="mb-6 border rounded-xl bg-white shadow-sm">
+        <div className="px-4 py-3 border-b flex items-center justify-between">
+          <div>
+            <h2 className="font-semibold text-stone-900">Class Setup</h2>
+            <p className="text-xs text-stone-500">
+              Create classes with flexible schedules
+            </p>
           </div>
-        </CardHeader>
+          <button
+            type="button"
+            onClick={() => {
+              setEditingClass(null);
+              setShowForm((prev) => !prev);
+            }}
+            className="inline-flex items-center gap-2 rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
+          >
+            <Plus className="w-4 h-4" />
+            {showForm ? "Cancel" : "New Class"}
+          </button>
+        </div>
+
         {showForm && (
-          <CardContent>
+          <div className="p-4">
             <ClassForm
               classData={editingClass}
               onSave={handleSaveClass}
@@ -133,9 +125,9 @@ export default function AdminClasses() {
                 createClassMutation.isPending || updateClassMutation.isPending
               }
             />
-          </CardContent>
+          </div>
         )}
-      </Card>
+      </div>
 
       {/* Student Manager (when a class is selected) */}
       {managingClass && (
@@ -147,15 +139,15 @@ export default function AdminClasses() {
         </div>
       )}
 
-      {/* Classes Table */}
-      <Card>
-        <CardHeader>
-          <CardTitle>All Classes</CardTitle>
-          <CardDescription>
+      {/* Classes Table Card */}
+      <div className="border rounded-xl bg-white shadow-sm">
+        <div className="px-4 py-3 border-b">
+          <h2 className="font-semibold text-stone-900">All Classes</h2>
+          <p className="text-xs text-stone-500">
             Manage class schedules and enrollments
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+          </p>
+        </div>
+        <div className="p-4">
           <ClassesTable
             classes={classes}
             isLoading={isLoading}
@@ -170,8 +162,8 @@ export default function AdminClasses() {
             }}
             onManageStudents={(cls) => setManagingClass(cls)}
           />
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 }