Update frontend/src/pages/StudentDashboard.jsx

frontend/src/pages/StudentDashboard.jsx

@@ -1,7 +1,7 @@
 // frontend/src/pages/StudentDashboard.jsx
-import React, { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Sparkles } from "lucide-react";
 
 import api from "../api/client";
 import AppHeader from "../components/AppHeader";
@@ -9,49 +9,58 @@ import UserMenu from "../components/UserMenu";
 import StudentAIAssistant from "../components/student/StudentAIAssistant";
 
 export default function StudentDashboard() {
-  const [showChat, setShowChat] = useState(false);
   const navigate = useNavigate();
 
-  // Read student from sessionStorage
-  const storedStudent = JSON.parse(sessionStorage.getItem("student") || "{}");
-  const studentName = storedStudent.name || "Student";
-  const studentEmail = storedStudent.email || "student@example.com";
+  const stored = JSON.parse(sessionStorage.getItem("student") || "{}");
+  const studentName = stored.name || "student1";
+  const studentEmail = stored.email || "student1@example.com";
 
-  function handleStudentLogout() {
+  const [plans, setPlans] = useState([]);
+  const [memberships, setMemberships] = useState([]);
+  const [upcomingRenewal, setUpcomingRenewal] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [aiOpen, setAiOpen] = useState(false);
+
+  function handleLogout() {
     sessionStorage.removeItem("student");
     navigate("/login");
   }
 
-  const email = storedStudent.email;
-
-  // Fetch plans
-  const plansQuery = useQuery({
-    queryKey: ["student-plans"],
-    queryFn: async () => {
-      const res = await api.get("/student/plans");
-      return Array.isArray(res.data) ? res.data : [];
-    },
-    initialData: [],
-  });
-
-  // Fetch memberships
-  const membershipsQuery = useQuery({
-    queryKey: ["student-memberships", email],
-    queryFn: async () => {
-      if (!email) return [];
-      const res = await api.get(`/student/memberships?email=${email}`);
-      return Array.isArray(res.data) ? res.data : [];
-    },
-    enabled: !!email,
-    initialData: [],
-  });
-
-  const plans = plansQuery.data || [];
-  const memberships = membershipsQuery.data || [];
+  useEffect(() => {
+    if (!studentEmail) return;
+
+    async function loadData() {
+      setLoading(true);
+      try {
+        // Available plans
+        const plansRes = await api.get("/student/plans");
+        setPlans(Array.isArray(plansRes.data) ? plansRes.data : []);
+
+        // Memberships for this student
+        const membershipsRes = await api.get("/student/memberships", {
+          params: { email: studentEmail },
+        });
+        setMemberships(Array.isArray(membershipsRes.data) ? membershipsRes.data : []);
+
+        // Upcoming renewal (may 404 if none)
+        try {
+          const upcomingRes = await api.get("/student/upcoming-renewal", {
+            params: { email: studentEmail },
+          });
+          setUpcomingRenewal(upcomingRes.data);
+        } catch (err) {
+          setUpcomingRenewal(null);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [studentEmail]);
 
   return (
     <div className="min-h-screen bg-slate-50">
-      {/* ---------- HEADER ---------- */}
       <AppHeader
         title="Karate Student Portal"
         subtitle={`Welcome back, ${studentName}. Train hard, stay consistent.`}
@@ -59,154 +68,205 @@ export default function StudentDashboard() {
           <div className="flex items-center gap-3">
             <button
               type="button"
-              onClick={() => setShowChat(true)}
+              onClick={() => setAiOpen(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" />
               Ask the Sensei
             </button>
             <UserMenu
               name={studentName}
               email={studentEmail}
-              onLogout={handleStudentLogout}
+              onLogout={handleLogout}
             />
           </div>
         }
       />
 
-      {/* ---------- CONTENT ---------- */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className="max-w-6xl mx-auto px-4 py-6 sm:py-8 space-y-6">
         {/* Available plans */}
-        <div className="mb-8 bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
-          <h2 className="text-lg font-semibold text-slate-900">
-            Available membership plans
-          </h2>
-          <p className="text-sm text-slate-500 mb-4">
-            Choose a plan and pay securely via Stripe.
-          </p>
-
-          {plans.length === 0 ? (
-            <p className="text-sm text-slate-500">
-              No public plans are available right now. Please check back later
-              or ask at the front desk.
+        <section className="bg-white rounded-2xl shadow-sm border border-slate-200">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+            <h2 className="text-sm font-semibold text-slate-900">
+              Available membership plans
+            </h2>
+            <p className="text-xs text-slate-500">
+              Choose a plan and pay securely via Stripe.
             </p>
-          ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
-              {plans.map((p) => (
-                <div
-                  key={p.id}
-                  className="p-5 rounded-xl border border-slate-200 bg-slate-50 shadow-sm"
-                >
-                  <h3 className="text-lg font-semibold text-slate-800">
-                    {p.name}
-                  </h3>
-                  {p.description && (
-                    <p className="text-sm text-slate-500 mb-3">
-                      {p.description}
-                    </p>
-                  )}
-                  <p className="text-base font-semibold mb-4">
-                    ${p.price} / {p.billing_period}
-                  </p>
-                  {p.stripe_link && (
-                    <a
-                      href={p.stripe_link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center justify-center w-full bg-blue-600 text-white text-sm font-medium py-2.5 rounded-lg hover:bg-blue-700"
-                    >
-                      Pay with Stripe
-                    </a>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+          </div>
+          <div className="px-5 py-4">
+            {loading ? (
+              <p className="text-sm text-slate-500">Loading plans…</p>
+            ) : plans.length === 0 ? (
+              <p className="text-sm text-slate-500">
+                No public plans are available right now. Please check back later
+                or ask at the front desk.
+              </p>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {plans.map((plan) => (
+                  <div
+                    key={plan.id}
+                    className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-4 flex flex-col justify-between"
+                  >
+                    <div className="space-y-1">
+                      <h3 className="text-sm font-semibold text-slate-900">
+                        {plan.name}
+                      </h3>
+                      {plan.description && (
+                        <p className="text-xs text-slate-500">
+                          {plan.description}
+                        </p>
+                      )}
+                      <p className="text-sm font-medium text-slate-900 mt-2">
+                        ${plan.price.toFixed(2)}{" "}
+                        <span className="text-xs text-slate-500">
+                          / {plan.billing_period}
+                        </span>
+                      </p>
+                    </div>
+                    {plan.stripe_link && (
+                      <a
+                        href={plan.stripe_link}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="mt-4 inline-flex justify-center items-center rounded-md bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium px-4 py-2"
+                      >
+                        Pay with Stripe
+                      </a>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </section>
 
         {/* Rank / Next class / Attendance */}
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-10">
-          <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
-            <h4 className="text-xs font-semibold text-slate-500 uppercase">
+        <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 px-5 py-4">
+            <p className="text-xs font-semibold text-slate-500 uppercase">
               Current rank
-            </h4>
-            <p className="text-xl font-bold text-slate-800 mt-2">White Belt</p>
-            <p className="text-sm text-slate-500 mt-1">
+            </p>
+            <p className="mt-2 text-base font-semibold text-slate-900">
+              White Belt
+            </p>
+            <p className="mt-1 text-xs text-slate-500">
               Progress updates will appear here.
             </p>
           </div>
 
-          <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
-            <h4 className="text-xs font-semibold text-slate-500 uppercase">
+          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 px-5 py-4">
+            <p className="text-xs font-semibold text-slate-500 uppercase">
               Next class
-            </h4>
-            <p className="text-xl font-bold text-slate-800 mt-2">
+            </p>
+            <p className="mt-2 text-base font-semibold text-slate-900">
               Tuesday, 6:00 PM
             </p>
-            <p className="text-sm text-slate-500 mt-1">
+            <p className="mt-1 text-xs text-slate-500">
               Location: Main Dojo, Kamloops.
             </p>
           </div>
 
-          <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
-            <h4 className="text-xs font-semibold text-slate-500 uppercase">
+          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 px-5 py-4">
+            <p className="text-xs font-semibold text-slate-500 uppercase">
               Attendance
-            </h4>
-            <p className="text-xl font-bold text-slate-800 mt-2">
+            </p>
+            <p className="mt-2 text-base font-semibold text-slate-900">
               0 / 8 classes
             </p>
-            <p className="text-sm text-slate-500 mt-1">
-              This month’s attendance summary.
+            <p className="mt-1 text-xs text-slate-500">
+              This month&apos;s attendance summary.
             </p>
           </div>
-        </div>
+        </section>
 
-        {/* Upcoming renewals & payments */}
-        <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm mb-10">
-          <h4 className="text-sm font-semibold text-slate-900">
+        {/* Upcoming renewals */}
+        <section className="bg-white rounded-2xl shadow-sm border border-slate-200 px-5 py-4">
+          <h2 className="text-sm font-semibold text-slate-900">
             Upcoming renewals &amp; payments
-          </h4>
-          <p className="text-sm text-slate-500 mt-2">
-            Once you complete a Stripe payment for a membership, you&apos;ll see
-            your renewal date, plan, and payment details here.
-          </p>
-        </div>
-
-        {/* Membership records */}
-        <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
-          <h4 className="text-sm font-semibold text-slate-900">
-            Your memberships
-          </h4>
-
-          {memberships.length === 0 ? (
-            <p className="text-sm text-slate-500 mt-2">
-              You don&apos;t have an active membership yet. Pick a plan above to
-              get started.
+          </h2>
+          <div className="mt-2 text-sm text-slate-600">
+            {upcomingRenewal ? (
+              <p>
+                Your next renewal is{" "}
+                <span className="font-semibold">
+                  {upcomingRenewal.plan_name}
+                </span>{" "}
+                on{" "}
+                <span className="font-semibold">
+                  {upcomingRenewal.renewal_date}
+                </span>
+                . Your membership status is{" "}
+                <span className="font-semibold">
+                  {upcomingRenewal.status}
+                </span>
+                .
+              </p>
+            ) : (
+              <p>
+                Once you complete a Stripe payment for a membership, you&apos;ll
+                see your renewal date, plan, and payment details here.
+              </p>
+            )}
+          </div>
+        </section>
+
+        {/* Your memberships */}
+        <section className="bg-white rounded-2xl shadow-sm border border-slate-200">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+            <h2 className="text-sm font-semibold text-slate-900">
+              Your memberships
+            </h2>
+            <p className="text-xs text-slate-500">
+              {memberships.length} record{memberships.length === 1 ? "" : "s"}
             </p>
-          ) : (
-            <div className="mt-4 space-y-4">
-              {memberships.map((m) => (
-                <div
-                  key={m.id}
-                  className="border-b border-slate-100 pb-4 last:border-none"
-                >
-                  <p className="text-base font-semibold text-slate-800">
-                    {m.plan_name}
-                  </p>
-                  <p className="text-sm text-slate-500 mt-1">
-                    Status: {m.status} — Renews on {m.renewal_date}
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Ask the Sensei side panel */}
-      <StudentAIAssistant
-        open={showChat}
-        onClose={() => setShowChat(false)}
-      />
+          </div>
+          <div className="px-5 py-4 text-sm text-slate-700">
+            {loading ? (
+              <p className="text-slate-500">Loading memberships…</p>
+            ) : memberships.length === 0 ? (
+              <p className="text-slate-500">
+                You don&apos;t have an active membership yet. Pick a plan above
+                to get started.
+              </p>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="min-w-full text-sm">
+                  <thead>
+                    <tr className="text-left text-xs text-slate-500 uppercase border-b border-slate-100">
+                      <th className="py-2 pr-4">Plan</th>
+                      <th className="py-2 pr-4">Status</th>
+                      <th className="py-2 pr-4">Started</th>
+                      <th className="py-2 pr-4">Renewal</th>
+                      <th className="py-2 pr-4">Price</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {memberships.map((m) => (
+                      <tr key={m.id} className="border-b border-slate-50">
+                        <td className="py-2 pr-4">{m.plan_name}</td>
+                        <td className="py-2 pr-4">
+                          <span className="inline-flex items-center rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">
+                            {m.status}
+                          </span>
+                        </td>
+                        <td className="py-2 pr-4">{m.start_date}</td>
+                        <td className="py-2 pr-4">{m.renewal_date}</td>
+                        <td className="py-2 pr-4">
+                          ${m.price.toFixed(2)} / {m.billing_period}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </section>
+      </main>
+
+      <StudentAIAssistant open={aiOpen} onClose={() => setAiOpen(false)} />
     </div>
   );
 }