fix: apply all PR reviewer feedback

Agent-Logs-Url: https://github.com/Debugging-Disciples/community-software/sessions/d3f0fef2-78ac-4e1f-b292-1f68e4126a94

Co-authored-by: JustinhSE <84724234+JustinhSE@users.noreply.github.com>

Author: Copilot

app/admin/page.tsx

@@ -10,9 +10,19 @@ export default async function AdminPage() {
     redirect("/");
   }
 
-  // TODO: Add role-based authorization once user roles are stored in the session.
-  // Only users with an "admin" or "Leader" role should be allowed to access this page.
-  // Example: if (session.user.role !== "admin") redirect("/dashboard");
+  // Temporary authorization: restrict access to a configured allowlist of admin emails.
+  // When roles are available on the session (e.g., session.user.role), replace this with a role check.
+  const adminEmails =
+    process.env.ADMIN_EMAILS
+      ?.split(",")
+      .map((email) => email.trim())
+      .filter(Boolean) ?? [];
+
+  const userEmail = session.user?.email;
+
+  if (!userEmail || (adminEmails.length > 0 && !adminEmails.includes(userEmail))) {
+    redirect("/");
+  }
 
   return <AdminDashboardClient session={session} />;
 }

app/globals.css

@@ -71,3 +71,11 @@ body {
 .engagement-score-value {
   animation: counter-up 0.6s ease-out forwards;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .badge-flame,
+  .badge-gradient-animated,
+  .engagement-score-value {
+    animation: none;
+  }
+}

components/AdminDashboardClient.tsx

@@ -115,6 +115,11 @@ function MiniLineGraph({ data, color }: { data: number[]; color: string }) {
 
 function DonutChart({ segments }: { segments: { label: string; value: number; color: string }[] }) {
   const total = segments.reduce((s, seg) => s + seg.value, 0);
+
+  if (segments.length === 0 || total <= 0) {
+    return <p className="text-gray-500 text-sm">No data</p>;
+  }
+
   const r = 36;
   const cx = 50;
   const cy = 50;
@@ -160,7 +165,11 @@ function DonutChart({ segments }: { segments: { label: string; value: number; co
 }
 
 function StackedBar({ items }: { items: { label: string; value: number; color: string }[] }) {
+  if (items.length === 0) {
+    return <p className="text-gray-500 text-sm">No data</p>;
+  }
   const max = Math.max(...items.map((i) => i.value));
+  const safeMax = max > 0 ? max : 1;
   return (
     <div className="space-y-2">
       {items.map((item) => (
@@ -169,7 +178,7 @@ function StackedBar({ items }: { items: { label: string; value: number; color: s
           <div className="flex-1 h-5 rounded bg-white/10 overflow-hidden">
             <div
               className="h-full rounded transition-all duration-700"
-              style={{ width: `${(item.value / max) * 100}%`, background: item.color }}
+              style={{ width: `${(item.value / safeMax) * 100}%`, background: item.color }}
             />
           </div>
           <span className="text-xs w-5 text-right" style={{ color: item.color }}>

components/DashboardClient.tsx

@@ -98,6 +98,7 @@ export function DashboardClient({ session }: DashboardClientProps) {
             score={mockStats.engagementScore}
             breakdown={mockScoreBreakdown}
             monthlyRank={8}
+            allTimeRank={23}
             weeklyTopN={5}
           />
         </section>

components/EngagementScore.tsx

@@ -13,13 +13,15 @@ interface EngagementScoreProps {
   score: number;
   breakdown: ScoreBreakdown;
   monthlyRank: number;
+  allTimeRank?: number;
   weeklyTopN?: number;
 }
 
 export function EngagementScore({
   score,
   breakdown,
   monthlyRank,
+  allTimeRank,
   weeklyTopN,
 }: EngagementScoreProps) {
   const [period, setPeriod] = useState<"month" | "alltime">("month");
@@ -74,9 +76,10 @@ export function EngagementScore({
         </div>
 
         {/* Period toggle */}
-        <div className="flex gap-4 text-sm mt-1">
+        <div className="flex gap-4 text-sm mt-1" role="group" aria-label="Score period">
           <button
             onClick={() => setPeriod("month")}
+            aria-pressed={period === "month"}
             className={`pb-1 transition-colors ${
               period === "month"
                 ? "text-brand-cyan border-b-2 border-brand-cyan font-semibold"
@@ -87,6 +90,7 @@ export function EngagementScore({
           </button>
           <button
             onClick={() => setPeriod("alltime")}
+            aria-pressed={period === "alltime"}
             className={`pb-1 transition-colors ${
               period === "alltime"
                 ? "text-brand-cyan border-b-2 border-brand-cyan font-semibold"
@@ -100,9 +104,15 @@ export function EngagementScore({
 
       {/* Leaderboard position */}
       <div className="flex flex-wrap items-center gap-3 mb-5">
-        <span className="text-brand-cyan font-medium text-sm">
-          You&apos;re ranked #{monthlyRank} this month
-        </span>
+        {period === "month" ? (
+          <span className="text-brand-cyan font-medium text-sm">
+            You&apos;re ranked #{monthlyRank} this month
+          </span>
+        ) : allTimeRank !== undefined ? (
+          <span className="text-brand-cyan font-medium text-sm">
+            You&apos;re ranked #{allTimeRank} all-time
+          </span>
+        ) : null}
         {weeklyTopN !== undefined && (
           <span className="text-brand-purple font-medium text-sm">
             Top {weeklyTopN} this week!