Profile dashboard

frontend/app/api/notes/route.ts

@@ -143,7 +143,7 @@ export async function GET(req: Request) {
 
   // Use service-role so download status is authoritative for this user only (no RLS ambiguity).
   const currentUserId = user.id;
-  let downloadedIds = new Set<string>();
+  const downloadedIds = new Set<string>();
   if (ids.length > 0) {
     const adminClient = createSupabaseClient(supabaseUrl, supabaseServiceRoleKey);
     const { data: downloadsData } = await adminClient

frontend/app/dashboard/dashboard.css

@@ -15,6 +15,12 @@
   gap: 24px;
 }
 
+.dashboard-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
 .dashboard-credit-summary {
   display: flex;
   align-items: center;
@@ -34,6 +40,32 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
+.dashboard-profile-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  border: 1px solid #d0cbc2;
+  background: #ffffff;
+  color: #5f594f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.35);
+}
+
+.dashboard-profile-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  border: 1px solid #d0cbc2;
+  background: #ffffff;
+  color: #5f594f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.35);
+}
+
 .dashboard-kicker {
   font-size: 0.9rem;
   color: #4ade80;
@@ -775,4 +807,4 @@
     align-self: stretch;
     text-align: center;
   }
-}
+}

frontend/app/dashboard/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { supabase } from "@/lib/supabaseClient";
 import PDFThumbnail from "@/app/components/pdf/PDFThumbnail";
 import "./dashboard.css";
+import ProfileIcons from "./profile-icon";
 
 type ClassOption = {
   id: string;
@@ -690,13 +691,16 @@ export default function DashboardPage() {
           <div className="dashboard-kicker">Notes hub</div>
           <h1 className="dashboard-title">Dashboard</h1>
         </div>
-        <div className="dashboard-credit-summary">
-          <span className="dashboard-credit-pill">
-            Credits: {credits ?? "—"}
-          </span>
-          <span className="dashboard-credit-pill">
-            Free Downloads: {freeDownloads ?? "—"}
-          </span>
+        <div className="dashboard-header-right">
+          <div className="dashboard-credit-summary">
+            <span className="dashboard-credit-pill">
+              Credits: {credits ?? "—"}
+            </span>
+            <span className="dashboard-credit-pill">
+              Free Downloads: {freeDownloads ?? "—"}
+            </span>
+          </div>
+          <ProfileIcons/>
         </div>
       </header>
 
@@ -1336,4 +1340,4 @@ export default function DashboardPage() {
       )}
     </main>
   );
-}
+}

frontend/app/dashboard/profile-dashboard/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabase } from "@/lib/supabaseClient";
+import "./profile-dashboard.css";
+
+export default function Page() {
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [tokenLoaded, setTokenLoaded] = useState(false);
+  const [credits, setCredits] = useState<number | null>(null);
+  const [creditsError, setCreditsError] = useState<string | null>(null);
+  const [loggingOut, setLoggingOut] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const loadSession = async () => {
+      const { data, error } = await supabase.auth.getSession();
+      if (error) {
+        setCreditsError("Not authenticated");
+      }
+      Promise.resolve().then(() => {
+        setAccessToken(data.session?.access_token ?? null);
+        setTokenLoaded(true);
+      });
+    };
+    loadSession();
+  }, []);
+
+  const refreshCredits = useCallback(async () => {
+    if (!accessToken) {
+      setCredits(null);
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/credits", {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      if (!res.ok) {
+        setCreditsError("Failed to load credits");
+        setCredits(null);
+        return;
+      }
+
+      const data = await res.json();
+      setCredits(Number.isFinite(data?.credits) ? Number(data.credits) : 0);
+      setCreditsError(null);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      setCreditsError("Failed to load credits");
+      setCredits(null);
+    }
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (!tokenLoaded) return;
+    const timeoutId = window.setTimeout(() => {
+      void refreshCredits();
+    }, 0);
+    return () => window.clearTimeout(timeoutId);
+  }, [refreshCredits, tokenLoaded]);
+
+  const handleLogout = useCallback(async () => {
+    setLoggingOut(true);
+    await supabase.auth.signOut();
+    router.replace("/");
+  }, [router]);
+
+  return (
+    <main aria-label="Profile dashboard" className="profile-dashboard">
+      <header className="profile-dashboard__header">
+        <div>
+          <p className="profile-dashboard__eyebrow">Cal Poly SLO</p>
+          <h1>Profile Dashboard</h1>
+        </div>
+        <Link className="profile-dashboard__back" href="/dashboard">
+          Back to Dashboard
+        </Link>
+      </header>
+      <section className="profile-dashboard__credits">
+        <div className="profile-dashboard__credit-card">
+          <span className="profile-dashboard__label">Credits</span>
+          <span className="profile-dashboard__value">{credits ?? "—"}</span>
+          <p className="profile-dashboard__hint">
+          </p>
+          {creditsError ? (
+            <p className="profile-dashboard__error">{creditsError}</p>
+          ) : null}
+        </div>
+      </section>
+      <section className="profile-dashboard__actions">
+          <button
+            className="profile-dashboard__logout"
+            type="button"
+            onClick={handleLogout}
+            disabled={loggingOut}
+          >
+            {loggingOut ? "Logging out..." : "Logout"}
+          </button>
+      </section>
+    </main>
+  );
+}

frontend/app/dashboard/profile-dashboard/profile-dashboard.css

@@ -0,0 +1,139 @@
+.profile-dashboard {
+  min-height: 100vh;
+  padding: 48px 24px 72px;
+  background: radial-gradient(circle at top right, #f7f0d4 0%, #f2f7e8 45%, #e6f4e6 100%);
+  color: #1f2d1f;
+  font-family: "Georgia", "Times New Roman", serif;
+}
+
+.profile-dashboard__header {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin: 0 auto 32px;
+  max-width: 960px;
+}
+
+.profile-dashboard__eyebrow {
+  font-size: 2rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #3b5f45;
+  margin: 0 0 8px;
+}
+
+.profile-dashboard__subtitle {
+  max-width: 520px;
+  margin: 10px 0 0;
+  color: #3b4a34;
+  font-size: 1.05rem;
+}
+
+.profile-dashboard__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 18px;
+  border-radius: 999px;
+  border: 1px solid #99b69a;
+  background: #f7f0d4;
+  color: #2b4a31;
+  text-decoration: none;
+  font-weight: 600;
+  box-shadow: 0 6px 16px rgba(67, 103, 68, 0.12);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.profile-dashboard__back:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgba(67, 103, 68, 0.18);
+}
+
+.profile-dashboard__credits {
+  margin: 0 auto 36px;
+  max-width: 960px;
+}
+
+.profile-dashboard__credit-card {
+  border-radius: 20px;
+  padding: 28px;
+  background: linear-gradient(135deg, #e6f4e6 0%, #f7f0d4 100%);
+  border: 1px solid #c2d7b9;
+  box-shadow: 0 18px 32px rgba(43, 74, 49, 0.12);
+}
+
+.profile-dashboard__label {
+  display: block;
+  font-size: 0.95rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #3b5f45;
+  margin-bottom: 10px;
+}
+
+.profile-dashboard__value {
+  display: block;
+  font-size: 3.1rem;
+  font-weight: 700;
+  color: #2f4f34;
+  margin-bottom: 8px;
+}
+
+.profile-dashboard__hint {
+  margin: 0;
+  color: #3f5a3f;
+  font-size: 1rem;
+}
+
+.profile-dashboard__error {
+  margin: 12px 0 0;
+  color: #7a2f2f;
+  font-weight: 600;
+}
+
+.profile-dashboard__actions {
+  margin: 0 auto;
+  max-width: 960px;
+  padding-top: 96px;
+  display: flex;
+  justify-content: center;
+}
+
+.profile-dashboard__logout {
+  border: none;
+  background: #2f5b3f;
+  color: #f7f0d4;
+  padding: 12px 22px;
+  font-size: 1rem;
+  border-radius: 999px;
+  cursor: pointer;
+  font-weight: 600;
+  box-shadow: 0 10px 18px rgba(47, 91, 63, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+  width: 33%;
+  min-width: 160px;
+  max-width: 240px;
+}
+
+.profile-dashboard__logout:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.profile-dashboard__logout:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 24px rgba(47, 91, 63, 0.24);
+}
+
+@media (min-width: 768px) {
+  .profile-dashboard__header {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .profile-dashboard__credit-card {
+    padding: 36px;
+  }
+}

frontend/app/dashboard/profile-icon.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export default function ProfileIcons() {
+  return (
+    <Link
+      href="dashboard/profile-dashboard"
+      className="dashboard-profile-icon"
+      aria-label="Open profile dashboard"
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M10 11.2c2.3 0 4.2-1.9 4.2-4.2S12.3 2.8 10 2.8 5.8 4.7 5.8 7s1.9 4.2 4.2 4.2Z"
+          stroke="currentColor"
+          strokeWidth="1.4"
+        />
+        <path
+          d="M3.6 17.2c1.7-2.4 3.9-3.6 6.4-3.6s4.7 1.2 6.4 3.6"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+        />
+      </svg>
+    </Link>
+  );
+}