Update frontend/src/pages/AdminDashboard.jsx

frontend/src/pages/AdminDashboard.jsx

@@ -3,8 +3,11 @@ import React, { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Users, Calendar, AlertCircle, Plus, Sparkles } from "lucide-react";
 import { differenceInDays } from "date-fns";
+import { Link, useNavigate } from "react-router-dom";
 
 import api from "../api/client";
+import AppHeader from "../components/AppHeader";
+import UserMenu from "../components/UserMenu";
 import OverviewCard from "../components/admin/OverviewCard";
 import AIInsightBox from "../components/admin/AIInsightBox";
 import PlanForm from "../components/admin/PlanForm";
@@ -13,12 +16,22 @@ import AdminAIAssistant from "../components/admin/AdminAIAssistant";
 
 export default function AdminDashboard() {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   const [showPlanForm, setShowPlanForm] = useState(false);
   const [editingPlan, setEditingPlan] = useState(null);
   const [showAIChat, setShowAIChat] = useState(false);
   const [planError, setPlanError] = useState("");
 
+  const storedAdmin = JSON.parse(sessionStorage.getItem("admin") || "{}");
+  const adminName = storedAdmin.name || "Admin";
+  const adminEmail = storedAdmin.email || "admin@dojo.com";
+
+  function handleAdminLogout() {
+    sessionStorage.removeItem("admin");
+    navigate("/login");
+  }
+
   // MEMBERSHIPS
   const membershipsQuery = useQuery({
     queryKey: ["all-memberships"],
@@ -122,122 +135,184 @@ export default function AdminDashboard() {
     }
   };
 
+  // simple nav config for left sidebar
+  const navItems = [
+    { label: "Dashboard", to: "/admin" },
+    { label: "Classes", to: "/admin/classes" },
+    { label: "Exams", to: "/admin/exams" },
+    { label: "Competitions", to: "/admin/competitions" },
+    { label: "Shop", to: "/admin/products" },
+  ];
+
   return (
-    <div className="min-h-screen bg-stone-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
-        {/* Header – matches Base44 layout */}
-        <div className="mb-8">
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-            <div>
-              <h1 className="text-2xl sm:text-3xl font-bold text-stone-900">
-                Admin Dashboard
-              </h1>
-              <p className="text-stone-600 mt-1">
-                Manage memberships and monitor your dojo
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => setShowAIChat(true)}
-              className="inline-flex items-center gap-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium px-4 py-2 shadow-sm"
-            >
-              <Sparkles className="w-4 h-4" />
-              AI Assistant
-            </button>
+    <div className="min-h-screen bg-stone-50 flex">
+      {/* LEFT SIDEBAR */}
+      <aside className="hidden md:flex w-60 flex-col border-r border-stone-200 bg-white">
+        <div className="px-5 pt-6 pb-4 border-b border-stone-100">
+          <div className="text-sm font-semibold text-stone-900">
+            Karate Dojo
           </div>
+          <div className="text-xs text-stone-500 mt-0.5">Admin Portal</div>
         </div>
-
-        {/* Overview Cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8">
-          <OverviewCard
-            title="Active Members"
-            value={membershipsLoading ? "…" : activeMembers}
-            icon={Users}
-            color="blue"
-            trend={`${memberships.length} total`}
-          />
-          <OverviewCard
-            title="Renewing Soon"
-            value={membershipsLoading ? "…" : renewingSoon}
-            icon={Calendar}
-            color="amber"
-            trend="Next 14 days"
-          />
-          <OverviewCard
-            title="Expired"
-            value={membershipsLoading ? "…" : expired}
-            icon={AlertCircle}
-            color="red"
-            trend="Needs attention"
-          />
+        <nav className="flex-1 px-3 py-4 space-y-1">
+          {navItems.map((item) => {
+            const isActive = item.to === "/admin"; // only dashboard active for now
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={`flex items-center gap-2 rounded-xl px-3 py-2 text-sm ${
+                  isActive
+                    ? "bg-rose-50 text-rose-700 font-semibold"
+                    : "text-stone-600 hover:bg-stone-50"
+                }`}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </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>
+      </aside>
 
-        {/* AI Insight Box */}
-        <AIInsightBox memberships={memberships} />
+      {/* MAIN AREA */}
+      <div className="flex-1 flex flex-col">
+        {/* TOP HEADER: brand + user menu */}
+        <AppHeader
+          title="Karate Dojo"
+          subtitle="Admin Portal"
+          right={
+            <UserMenu
+              name={adminName}
+              email={adminEmail}
+              onLogout={handleAdminLogout}
+            />
+          }
+        />
 
-        {/* Plan Management – card layout similar to Base44 */}
-        <div className="mb-8 bg-white border border-stone-200 rounded-2xl shadow-sm">
-          <div className="px-4 sm:px-6 py-4 border-b border-stone-100">
+        {/* PAGE CONTENT */}
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+          {/* Page heading + AI button (Base44 style) */}
+          <div className="mb-8">
             <div className="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">
-                  Membership Plans
-                </h2>
-                <p className="text-sm text-stone-500">
-                  Create and manage membership offerings
+                <h1 className="text-2xl sm:text-3xl font-bold text-stone-900">
+                  Admin Dashboard
+                </h1>
+                <p className="text-stone-600 mt-1">
+                  Manage memberships and monitor your dojo
                 </p>
               </div>
               <button
                 type="button"
-                onClick={() => {
-                  setEditingPlan(null);
-                  setShowPlanForm((v) => !v);
-                  setPlanError("");
-                }}
-                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"
+                onClick={() => setShowAIChat(true)}
+                className="inline-flex items-center gap-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium px-4 py-2 shadow-sm"
               >
-                <Plus className="w-4 h-4" />
-                New Plan
+                <Sparkles className="w-4 h-4" />
+                AI Assistant
               </button>
             </div>
           </div>
 
-          <div className="px-4 sm:px-6 py-4">
-            {planError && (
-              <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-md px-3 py-2">
-                {planError}
-              </p>
-            )}
-
-            {showPlanForm && (
-              <div className="mb-6">
-                <PlanForm
-                  plan={editingPlan}
-                  onSave={handleSavePlan}
-                  onCancel={() => {
-                    setShowPlanForm(false);
+          {/* Overview cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-8">
+            <OverviewCard
+              title="Active Members"
+              value={membershipsLoading ? "…" : activeMembers}
+              icon={Users}
+              color="blue"
+              trend={`${memberships.length} total`}
+            />
+            <OverviewCard
+              title="Renewing Soon"
+              value={membershipsLoading ? "…" : renewingSoon}
+              icon={Calendar}
+              color="amber"
+              trend="Next 14 days"
+            />
+            <OverviewCard
+              title="Expired"
+              value={membershipsLoading ? "…" : expired}
+              icon={AlertCircle}
+              color="red"
+              trend="Needs attention"
+            />
+          </div>
+
+          {/* AI Assistant Insights */}
+          <AIInsightBox memberships={memberships} />
+
+          {/* Membership Plans */}
+          <div className="mb-8 bg-white border border-stone-200 rounded-2xl shadow-sm">
+            <div className="px-4 sm:px-6 py-4 border-b border-stone-100">
+              <div className="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">
+                    Membership Plans
+                  </h2>
+                  <p className="text-sm text-stone-500">
+                    Create and manage membership offerings
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
                     setEditingPlan(null);
+                    setShowPlanForm((v) => !v);
                     setPlanError("");
                   }}
-                  isLoading={
-                    createPlanMutation.isPending ||
-                    updatePlanMutation.isPending
-                  }
-                />
+                  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" />
+                  New Plan
+                </button>
               </div>
-            )}
+            </div>
 
-            <PlansTable
-              plans={plans}
-              isLoading={plansLoading}
-              onEdit={handleEditPlan}
-              onDelete={handleDeletePlan}
-            />
+            <div className="px-4 sm:px-6 py-4">
+              {planError && (
+                <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-100 rounded-md px-3 py-2">
+                  {planError}
+                </p>
+              )}
+
+              {showPlanForm && (
+                <div className="mb-6">
+                  <PlanForm
+                    plan={editingPlan}
+                    onSave={handleSavePlan}
+                    onCancel={() => {
+                      setShowPlanForm(false);
+                      setEditingPlan(null);
+                      setPlanError("");
+                    }}
+                    isLoading={
+                      createPlanMutation.isPending ||
+                      updatePlanMutation.isPending
+                    }
+                  />
+                </div>
+              )}
+
+              <PlansTable
+                plans={plans}
+                isLoading={plansLoading}
+                onEdit={handleEditPlan}
+                onDelete={handleDeletePlan}
+              />
+            </div>
           </div>
-        </div>
+        </main>
       </div>
 
-      {/* AI Assistant */}
+      {/* AI chat modal */}
       <AdminAIAssistant
         open={showAIChat}
         onClose={() => setShowAIChat(false)}