Update frontend/src/pages/StudentDashboard.jsx

frontend/src/pages/StudentDashboard.jsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import api from "../api/client";
 import { useNavigate } from "react-router-dom";
+import AppHeader from "../components/AppHeader";
 
 export default function StudentDashboard() {
   const [profile, setProfile] = useState({ email: "", name: "" });
@@ -60,28 +61,11 @@ export default function StudentDashboard() {
 
   return (
     <div className="min-h-screen bg-slate-50 text-slate-900">
-      {/* Top bar */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur">
-        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
-          {/* LEFT: logo + title */}
-          <div className="flex items-center gap-3">
-            <img
-              src="/karate-logo.svg" // change to /karate-logo.png if you use PNG
-              alt="Dojo logo"
-              className="h-8 w-8 rounded-full border border-slate-200 object-contain"
-            />
-            <div>
-              <div className="text-sm font-semibold tracking-tight">
-                Karate Student Portal
-              </div>
-              <div className="text-xs text-slate-500">
-                Welcome back, {profile.name}. Train hard, stay consistent.
-              </div>
-            </div>
-          </div>
-
-          {/* RIGHT: email + logout */}
-          <div className="flex items-center gap-3">
+      <AppHeader
+        title="Karate Student Portal"
+        subtitle={`Welcome back, ${profile.name}. Train hard, stay consistent.`}
+        right={
+          <>
             <span className="text-xs px-3 py-1 rounded-full bg-slate-100 text-slate-700">
               {profile.email}
             </span>
@@ -91,14 +75,13 @@ export default function StudentDashboard() {
             >
               Log out
             </button>
-          </div>
-        </div>
-      </header>
-
+          </>
+        }
+      />
 
       {/* Main content */}
       <main className="max-w-6xl mx-auto px-4 py-8 space-y-6">
-        {/* Available membership plans – moved to the top */}
+        {/* Available membership plans */}
         <section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
           <div className="flex items-center justify-between mb-2">
             <div className="text-sm font-semibold">
@@ -111,8 +94,8 @@ export default function StudentDashboard() {
 
           {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.
+              No public plans are available right now. Please check back later
+              or ask at the front desk.
             </p>
           ) : (
             <div className="grid gap-3 md:grid-cols-3">
@@ -121,7 +104,9 @@ export default function StudentDashboard() {
                   key={plan.id}
                   className="border border-slate-200 rounded-xl p-4 bg-slate-50"
                 >
-                  <div className="text-sm font-semibold mb-1">{plan.name}</div>
+                  <div className="text-sm font-semibold mb-1">
+                    {plan.name}
+                  </div>
                   <div className="text-xs text-slate-500 mb-2">
                     {plan.description || "Karate membership plan."}
                   </div>
@@ -131,14 +116,23 @@ export default function StudentDashboard() {
                       / {plan.billing_period}
                     </span>
                   </div>
-                  <a
-                    href={plan.stripe_link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center justify-center w-full text-xs font-medium rounded-lg bg-blue-600 text-white py-2 hover:bg-blue-700"
-                  >
-                    Pay with Stripe
-                  </a>
+                  {plan.stripe_link ? (
+                    <a
+                      href={plan.stripe_link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center justify-center w-full text-xs font-medium rounded-lg bg-blue-600 text-white py-2 hover:bg-blue-700"
+                    >
+                      Pay with Stripe
+                    </a>
+                  ) : (
+                    <button
+                      disabled
+                      className="inline-flex items-center justify-center w-full text-xs font-medium rounded-lg bg-slate-200 text-slate-500 py-2 cursor-not-allowed"
+                    >
+                      Stripe link not set
+                    </button>
+                  )}
                 </div>
               ))}
             </div>
@@ -209,13 +203,14 @@ export default function StudentDashboard() {
           <div className="flex items-center justify-between mb-3">
             <div className="text-sm font-semibold">Your memberships</div>
             <div className="text-[11px] text-slate-400">
-              {memberships.length} record{memberships.length === 1 ? "" : "s"}
+              {memberships.length} record
+              {memberships.length === 1 ? "" : "s"}
             </div>
           </div>
 
           {memberships.length === 0 ? (
             <p className="text-sm text-slate-500">
-              You don&apos;t have an active membership yet. Choose a plan above
+              You don&apos;t have an active membership yet. Pick a plan above
               to get started.
             </p>
           ) : (