Update frontend/src/pages/AdminClasses.jsx

frontend/src/pages/AdminClasses.jsx

@@ -1,102 +1,57 @@
 // frontend/src/pages/AdminClasses.jsx
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { base44 } from "@/api/base44Client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
 import {
-  LayoutDashboard,
-  Users2,
-  FileText,
-  Trophy,
-  ShoppingBag,
-  Menu,
-  Plus,
-} from "lucide-react";
-
-import api from "../api/client";
-import UserMenu from "../components/UserMenu";
+  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 ClassEnrollments from "../components/admin/ClassEnrollments";
-import dojoLogo from "../assets/dojo-logo.png";
+import ClassStudentManager from "../components/admin/ClassStudentManager";
 
 export default function AdminClasses() {
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
-
   const [showForm, setShowForm] = useState(false);
   const [editingClass, setEditingClass] = useState(null);
-  const [selectedClass, setSelectedClass] = useState(null);
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);
-
-  const storedAdmin = JSON.parse(sessionStorage.getItem("admin") || "{}");
-  const adminName = storedAdmin.name || "Admin";
-  const adminEmail = storedAdmin.email || "admin@dojo.com";
+  const [managingClass, setManagingClass] = useState(null);
 
-  function handleAdminLogout() {
-    sessionStorage.removeItem("admin");
-    navigate("/login");
-  }
-
-  // ---- DATA QUERIES ----
-
-  const {
-    data: classes = [],
-    isLoading: classesLoading,
-  } = useQuery({
+  const { data: classes = [], isLoading } = useQuery({
     queryKey: ["classes"],
-    queryFn: async () => {
-      const res = await api.get("/admin/classes");
-      return Array.isArray(res.data) ? res.data : [];
-    },
-    initialData: [],
+    queryFn: () => base44.entities.Class.list("-created_date"),
+    initialData: []
   });
 
-  const { data: plans = [], isLoading: plansLoading } = useQuery({
-    queryKey: ["membership-plans"],
-    queryFn: async () => {
-      const res = await api.get("/admin/plans");
-      return Array.isArray(res.data) ? res.data : [];
-    },
-    initialData: [],
-  });
-
-  // ---- MUTATIONS ----
-
   const createClassMutation = useMutation({
-    mutationFn: async (classData) => {
-      const res = await api.post("/admin/classes", classData);
-      return res.data;
-    },
+    mutationFn: (classData) => base44.entities.Class.create(classData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["classes"] });
       setShowForm(false);
       setEditingClass(null);
-    },
+    }
   });
 
   const updateClassMutation = useMutation({
-    mutationFn: async ({ id, classData }) => {
-      const res = await api.put(`/admin/classes/${id}`, classData);
-      return res.data;
-    },
+    mutationFn: ({ id, classData }) => base44.entities.Class.update(id, classData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["classes"] });
       setShowForm(false);
       setEditingClass(null);
-    },
+    }
   });
 
   const deleteClassMutation = useMutation({
-    mutationFn: async (id) => {
-      await api.delete(`/admin/classes/${id}`);
-    },
+    mutationFn: (id) => base44.entities.Class.delete(id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["classes"] });
-    },
+    }
   });
 
-  // ---- HANDLERS ----
-
   const handleSaveClass = (classData) => {
     if (editingClass) {
       updateClassMutation.mutate({ id: editingClass.id, classData });
@@ -105,265 +60,88 @@ export default function AdminClasses() {
     }
   };
 
-  const handleEditClass = (classItem) => {
-    setEditingClass(classItem);
-    setShowForm(true);
-  };
-
-  const handleDeleteClass = (classId) => {
-    if (window.confirm("Are you sure you want to delete this class?")) {
-      deleteClassMutation.mutate(classId);
-    }
-  };
-
-  const navItems = [
-    { label: "Dashboard", to: "/admin", icon: LayoutDashboard },
-    { label: "Classes", to: "/admin/classes", icon: Users2 },
-    { label: "Exams", to: "/admin/exams", icon: FileText },
-    { label: "Competitions", to: "/admin/competitions", icon: Trophy },
-    { label: "Shop", to: "/admin/products", icon: ShoppingBag },
-  ];
-
-  const handleNavClick = (to) => {
-    navigate(to);
-    setMobileNavOpen(false);
-  };
-
-  const isActivePath = (to) => {
-    if (to === "/admin") {
-      return window.location.pathname === "/admin";
-    }
-    return window.location.pathname === to;
-  };
-
-  // ---- RENDER ----
-
   return (
-    <div className="min-h-screen bg-stone-50 flex flex-col">
-      {/* TOP HEADER */}
-      <header className="border-b border-stone-100 bg-white flex items-center justify-between px-4 sm:px-6 lg:px-10 py-3">
-        <div className="flex items-center gap-3">
-          {/* Mobile hamburger */}
-          <button
-            type="button"
-            className="inline-flex md:hidden items-center justify-center h-9 w-9 rounded-full border border-stone-200 text-stone-700 hover:bg-stone-50"
-            onClick={() => setMobileNavOpen(true)}
-            aria-label="Open navigation"
-          >
-            <Menu className="w-4 h-4" />
-          </button>
-          {/* Logo */}
-          <img
-            src={dojoLogo}
-            alt="Dojo logo"
-            className="h-9 w-9 rounded-full border border-stone-200 bg-white object-cover"
-          />
-          <div className="hidden sm:block">
-            <div className="text-sm font-semibold text-stone-900">
-              Karate Dojo
-            </div>
-            <div className="text-xs text-stone-500">Admin Portal</div>
-          </div>
-        </div>
-        <UserMenu
-          name={adminName}
-          email={adminEmail}
-          onLogout={handleAdminLogout}
-        />
-      </header>
+    <div className="p-6 max-w-7xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-stone-900">Classes Management</h1>
+        <p className="text-stone-600 mt-1">
+          Create classes and manage student enrollments
+        </p>
+      </div>
 
-      {/* BODY */}
-      <div className="flex flex-1">
-        {/* DESKTOP SIDEBAR */}
-        <aside className="hidden md:flex w-64 flex-col bg-white">
-          <nav className="flex-1 px-3 pt-4 pb-2 space-y-1">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              const active = isActivePath(item.to);
-              return (
-                <button
-                  key={item.to}
-                  type="button"
-                  onClick={() => handleNavClick(item.to)}
-                  className={`w-full flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-left ${
-                    active
-                      ? "bg-rose-50 text-rose-700 font-semibold"
-                      : "text-stone-600 hover:bg-stone-50"
-                  }`}
-                >
-                  <span
-                    className={`inline-flex h-8 w-8 items-center justify-center rounded-xl border ${
-                      active
-                        ? "border-rose-100 bg-rose-50 text-rose-600"
-                        : "border-stone-200 bg-white text-stone-500"
-                    }`}
-                  >
-                    <Icon className="w-4 h-4" />
-                  </span>
-                  <span>{item.label}</span>
-                </button>
-              );
-            })}
-          </nav>
-          <div className="px-4 pb-5">
-            <div className="rounded-2xl border border-rose-100 bg-rose-50 px-3 py-2">
-              <div className="text-[11px] font-semibold text-rose-700">
-                Admin Mode
-              </div>
-              <div className="text-[11px] text-rose-500">Full Access</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>
           </div>
-        </aside>
-
-        {/* MAIN CONTENT */}
-        <div className="flex-1 border-l border-stone-100">
-          <main className="px-4 sm:px-6 lg:px-10 py-6 sm:py-8 pb-10">
-            {/* Page title */}
-            <div className="mb-8">
-              <h1 className="text-2xl sm:text-3xl font-bold text-stone-900">
-                Classes Management
-              </h1>
-              <p className="text-stone-600 mt-1">
-                Create classes and invite students
-              </p>
-            </div>
-
-            {/* CLASS SETUP CARD */}
-            <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>
-                  <h2 className="text-base font-semibold text-stone-900">
-                    Class Setup
-                  </h2>
-                  <p className="text-sm text-stone-500">
-                    Configure class schedule and invite students
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setEditingClass(null);
-                    setShowForm((v) => !v);
-                  }}
-                  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 shadow-sm"
-                >
-                  <Plus className="w-4 h-4" />
-                  {showForm ? "Cancel" : "New Class"}
-                </button>
-              </div>
-              {showForm && (
-                <div className="px-4 sm:px-6 py-4">
-                  <ClassForm
-                    classData={editingClass}
-                    plans={plans}
-                    plansLoading={plansLoading}
-                    onSave={handleSaveClass}
-                    onCancel={() => {
-                      setShowForm(false);
-                      setEditingClass(null);
-                    }}
-                    isLoading={
-                      createClassMutation.isPending ||
-                      updateClassMutation.isPending
-                    }
-                  />
-                </div>
-              )}
-            </div>
-
-            {/* ACTIVE CLASSES CARD */}
-            <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">
-                <h2 className="text-base font-semibold text-stone-900">
-                  Active Classes
-                </h2>
-                <p className="text-sm text-stone-500">
-                  Manage your classes and enrollments
-                </p>
-              </div>
-              <div className="px-4 sm:px-6 py-4">
-                <ClassesTable
-                  classes={classes}
-                  isLoading={classesLoading}
-                  onEdit={handleEditClass}
-                  onDelete={handleDeleteClass}
-                  onViewEnrollments={setSelectedClass}
-                />
-              </div>
-            </div>
-
-            {/* ENROLLMENTS MODAL / PANEL */}
-            {selectedClass && (
-              <ClassEnrollments
-                classData={selectedClass}
-                onClose={() => setSelectedClass(null)}
-              />
-            )}
-          </main>
+        </CardHeader>
+        {showForm && (
+          <CardContent>
+            <ClassForm
+              classData={editingClass}
+              onSave={handleSaveClass}
+              onCancel={() => {
+                setShowForm(false);
+                setEditingClass(null);
+              }}
+              isLoading={
+                createClassMutation.isPending || updateClassMutation.isPending
+              }
+            />
+          </CardContent>
+        )}
+      </Card>
+
+      {/* Student Manager (when a class is selected) */}
+      {managingClass && (
+        <div className="mb-6">
+          <ClassStudentManager
+            classData={managingClass}
+            onClose={() => setManagingClass(null)}
+          />
         </div>
-      </div>
+      )}
 
-      {/* MOBILE DRAWER NAV */}
-      {mobileNavOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-40 bg-black/20 md:hidden"
-            onClick={() => setMobileNavOpen(false)}
+      {/* Classes Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>All Classes</CardTitle>
+          <CardDescription>
+            Manage class schedules and enrollments
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ClassesTable
+            classes={classes}
+            isLoading={isLoading}
+            onEdit={(cls) => {
+              setEditingClass(cls);
+              setShowForm(true);
+            }}
+            onDelete={(id) => {
+              if (confirm("Are you sure you want to delete this class?")) {
+                deleteClassMutation.mutate(id);
+              }
+            }}
+            onManageStudents={(cls) => setManagingClass(cls)}
           />
-          <div className="fixed inset-y-0 left-0 z-50 w-72 max-w-full bg-white border-r border-stone-100 shadow-lg flex flex-col md:hidden">
-            <div className="px-5 pt-5 pb-4 flex items-center gap-3 border-b border-stone-100">
-              <img
-                src={dojoLogo}
-                alt="Dojo logo"
-                className="h-9 w-9 rounded-full border border-stone-200 bg-white object-cover"
-              />
-              <div>
-                <div className="text-sm font-semibold text-stone-900">
-                  Karate Dojo
-                </div>
-                <div className="text-xs text-stone-500">Admin Portal</div>
-              </div>
-            </div>
-            <nav className="flex-1 px-3 pt-4 pb-2 space-y-1 overflow-y-auto">
-              {navItems.map((item) => {
-                const Icon = item.icon;
-                const active = isActivePath(item.to);
-                return (
-                  <button
-                    key={item.to}
-                    type="button"
-                    onClick={() => handleNavClick(item.to)}
-                    className={`w-full flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-left ${
-                      active
-                        ? "bg-rose-50 text-rose-700 font-semibold"
-                        : "text-stone-600 hover:bg-stone-50"
-                    }`}
-                  >
-                    <span
-                      className={`inline-flex h-8 w-8 items-center justify-center rounded-xl border ${
-                        active
-                          ? "border-rose-100 bg-rose-50 text-rose-600"
-                          : "border-stone-200 bg-white text-stone-500"
-                      }`}
-                    >
-                      <Icon className="w-4 h-4" />
-                    </span>
-                    <span>{item.label}</span>
-                  </button>
-                );
-              })}
-            </nav>
-            <div className="px-4 pb-5">
-              <div className="rounded-2xl border border-rose-100 bg-rose-50 px-3 py-2">
-                <div className="text-[11px] font-semibold text-rose-700">
-                  Admin Mode
-                </div>
-                <div className="text-[11px] text-rose-500">Full Access</div>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
+        </CardContent>
+      </Card>
     </div>
   );
 }