Update frontend/src/pages/AdminDashboard.jsx

frontend/src/pages/AdminDashboard.jsx

@@ -1,6 +1,6 @@
 // frontend/src/pages/AdminDashboard.jsx
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Users,
@@ -29,6 +29,7 @@ import dojoLogo from "../assets/dojo-logo.png";
 export default function AdminDashboard() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [showPlanForm, setShowPlanForm] = useState(false);
   const [editingPlan, setEditingPlan] = useState(null);
@@ -36,6 +37,9 @@ export default function AdminDashboard() {
   const [planError, setPlanError] = useState("");
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  // which members-filter view is active: "active" | "renewing" | "expired" | null
+  const [membersFilter, setMembersFilter] = useState(null);
+
   const storedAdmin = JSON.parse(sessionStorage.getItem("admin") || "{}");
   const adminName = storedAdmin.name || "Admin";
   const adminEmail = storedAdmin.email || "admin@dojo.com";
@@ -45,6 +49,17 @@ export default function AdminDashboard() {
     navigate("/login");
   }
 
+  // Sync filter with URL (?filter=...)
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const filter = params.get("filter");
+    if (filter === "active" || filter === "renewing" || filter === "expired") {
+      setMembersFilter(filter);
+    } else {
+      setMembersFilter(null);
+    }
+  }, [location.search]);
+
   // MEMBERSHIPS
   const membershipsQuery = useQuery({
     queryKey: ["all-memberships"],
@@ -165,11 +180,34 @@ export default function AdminDashboard() {
     return window.location.pathname === to;
   };
 
-  // NEW: helper for clicking overview cards
+  // Clicking overview cards -> stay in /admin, but switch view & update query param
   const handleMembersFilterClick = (filter) => {
-    navigate(`/admin/members?filter=${filter}`);
+    navigate(`/admin?filter=${filter}`);
   };
 
+  // Build filtered list for members view
+  let filteredMembers = memberships;
+  if (membersFilter === "active") {
+    filteredMembers = memberships.filter((m) => m.status === "active");
+  } else if (membersFilter === "expired") {
+    filteredMembers = memberships.filter((m) => m.status === "expired");
+  } else if (membersFilter === "renewing") {
+    filteredMembers = memberships.filter((m) => {
+      if (m.status !== "active" || !m.renewal_date) return false;
+      const days = differenceInDays(new Date(m.renewal_date), new Date());
+      return days >= 0 && days <= 14;
+    });
+  }
+
+  const membersTitle =
+    membersFilter === "active"
+      ? "Active members"
+      : membersFilter === "renewing"
+      ? "Renewing soon"
+      : membersFilter === "expired"
+      ? "Expired members"
+      : "";
+
   return (
     <div className="min-h-screen bg-stone-50 flex flex-col">
       {/* TOP HEADER: logo (desktop) + hamburger (mobile) + user menu */}
@@ -262,105 +300,174 @@ export default function AdminDashboard() {
                     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>
-            </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`}
-                onClick={() => handleMembersFilterClick("active")}
-              />
-              <OverviewCard
-                title="Renewing Soon"
-                value={membershipsLoading ? "…" : renewingSoon}
-                icon={Calendar}
-                color="amber"
-                trend="Next 14 days"
-                onClick={() => handleMembersFilterClick("renewing")}
-              />
-              <OverviewCard
-                title="Expired"
-                value={membershipsLoading ? "…" : expired}
-                icon={AlertCircle}
-                color="red"
-                trend="Needs attention"
-                onClick={() => handleMembersFilterClick("expired")}
-              />
-            </div>
 
-            {/* AI 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>
+                {/* Back to overview for members filter view */}
+                {membersFilter ? (
                   <button
                     type="button"
                     onClick={() => {
-                      setEditingPlan(null);
-                      setShowPlanForm((v) => !v);
-                      setPlanError("");
+                      setMembersFilter(null);
+                      navigate("/admin");
                     }}
-                    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"
+                    className="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white text-sm text-stone-700 px-4 py-2 hover:bg-stone-50"
                   >
-                    <Plus className="w-4 h-4" />
-                    New Plan
+                    Back to overview
+                  </button>
+                ) : (
+                  <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>
-              </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);
-                        setEditingPlan(null);
-                        setPlanError("");
-                      }}
-                      isLoading={
-                        createPlanMutation.isPending ||
-                        updatePlanMutation.isPending
-                      }
+              </div>
+            </div>
+
+            {/* If no filter selected -> original dashboard view */}
+            {!membersFilter && (
+              <>
+                {/* 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`}
+                    onClick={() => handleMembersFilterClick("active")}
+                  />
+                  <OverviewCard
+                    title="Renewing Soon"
+                    value={membershipsLoading ? "…" : renewingSoon}
+                    icon={Calendar}
+                    color="amber"
+                    trend="Next 14 days"
+                    onClick={() => handleMembersFilterClick("renewing")}
+                  />
+                  <OverviewCard
+                    title="Expired"
+                    value={membershipsLoading ? "…" : expired}
+                    icon={AlertCircle}
+                    color="red"
+                    trend="Needs attention"
+                    onClick={() => handleMembersFilterClick("expired")}
+                  />
+                </div>
+
+                {/* AI 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("");
+                        }}
+                        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>
+                  <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>
-                )}
-                <PlansTable
-                  plans={plans}
-                  isLoading={plansLoading}
-                  onEdit={handleEditPlan}
-                  onDelete={handleDeletePlan}
-                />
+                </div>
+              </>
+            )}
+
+            {/* If a filter is selected -> inline members list card */}
+            {membersFilter && (
+              <div className="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 items-center justify-between">
+                  <div className="text-sm font-semibold text-stone-900">
+                    {membersTitle}
+                  </div>
+                  <div className="text-xs text-stone-500">
+                    Showing {filteredMembers.length} of {memberships.length} total
+                  </div>
+                </div>
+                <div className="px-4 sm:px-6 py-4">
+                  {membershipsLoading ? (
+                    <p className="text-sm text-stone-500">Loading members…</p>
+                  ) : filteredMembers.length === 0 ? (
+                    <p className="text-sm text-stone-500">
+                      No members match this filter yet.
+                    </p>
+                  ) : (
+                    <ul className="divide-y divide-stone-100">
+                      {filteredMembers.map((m) => (
+                        <li
+                          key={m.id}
+                          className="py-3 flex items-center justify-between"
+                        >
+                          <div>
+                            <div className="text-sm font-medium text-stone-900">
+                              {m.user_name || m.user_email}
+                            </div>
+                            <div className="text-xs text-stone-500">
+                              {m.plan_name || "No plan name"} ·{" "}
+                              {m.billing_period || "—"} · {m.status}
+                            </div>
+                          </div>
+                          <div className="text-xs text-stone-500 text-right">
+                            {m.renewal_date
+                              ? `Renews on ${new Date(
+                                  m.renewal_date
+                                ).toLocaleDateString()}`
+                              : ""}
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </main>
         </div>
       </div>