Add profile stats cards to dashboardAdd profile stats cards to dashboard

src/app/api/metrics/profile-stats/route.ts

@@ -0,0 +1,74 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+
+export const dynamic = "force-dynamic";
+
+const GITHUB_API = "https://api.github.com";
+
+type GithubRepo = {
+  stargazers_count: number;
+  forks_count: number;
+};
+
+export async function GET() {
+  const session = await getServerSession(authOptions);
+
+  if (!session?.accessToken || !session.githubLogin) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const userRes = await fetch(`${GITHUB_API}/user`, {
+    headers: {
+      Authorization: `Bearer ${session.accessToken}`,
+      Accept: "application/vnd.github+json",
+    },
+    cache: "no-store",
+  });
+
+  if (!userRes.ok) {
+    return Response.json(
+      { error: "Failed to fetch profile stats" },
+      { status: 502 }
+    );
+  }
+
+  const user = await userRes.json();
+
+  const reposRes = await fetch(
+    `${GITHUB_API}/user/repos?per_page=100&type=owner&sort=updated`,
+    {
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+        Accept: "application/vnd.github+json",
+      },
+      cache: "no-store",
+    }
+  );
+
+  if (!reposRes.ok) {
+    return Response.json(
+      { error: "Failed to fetch repo stats" },
+      { status: 502 }
+    );
+  }
+
+  const repos = (await reposRes.json()) as GithubRepo[];
+
+  const totalStars = repos.reduce(
+    (sum, repo) => sum + (repo.stargazers_count ?? 0),
+    0
+  );
+
+  const totalForks = repos.reduce(
+    (sum, repo) => sum + (repo.forks_count ?? 0),
+    0
+  );
+
+  return Response.json({
+    memberSince: user.created_at,
+    publicRepos: user.public_repos,
+    totalStars,
+    totalForks,
+    followers: user.followers,
+  });
+}

src/app/dashboard/page.tsx

@@ -17,6 +17,7 @@ import WeeklySummaryCard from "@/components/WeeklySummaryCard";
 import ExportButton from "@/components/ExportButton";
 import Link from "next/link";
 import PersonalRecords from "@/components/PersonalRecords";
+import ProfileStats from "@/components/ProfileStats";
 import { authOptions } from "@/lib/auth";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
@@ -31,27 +32,32 @@ export default async function DashboardPage() {
   return (
     <div className="min-h-screen bg-[var(--background)] p-4 md:p-8 text-[var(--foreground)] transition-colors">
       <DashboardHeader />
-      <div className="mb-6 flex justify-end items-center gap-2">
+
+      <div className="mb-6 flex items-center justify-end gap-2">
         <Link
           href="/dashboard/settings"
-          className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-1 text-sm text-[var(--foreground)] hover:opacity-90 transition-opacity"
+          className="rounded-lg border border-[var(--border)] bg-[var(--control)] px-3 py-1 text-sm text-[var(--foreground)] transition-opacity hover:opacity-90"
         >
           Settings
         </Link>
         <ExportButton />
       </div>
+
       <StreakAtRiskBanner />
 
       <div className="mb-6">
         <WeeklySummaryCard />
       </div>
 
+      <div className="mb-6">
+        <ProfileStats />
+      </div>
+
       <div className="mb-6">
         <PersonalRecords />
       </div>
 
-      {/* Row 1: Contribution graph + Streak + Friend Comparison */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <div className="lg:col-span-2">
           <ContributionGraph />
           <div className="mt-6">
@@ -65,32 +71,28 @@ export default async function DashboardPage() {
         </div>
       </div>
 
-      {/* Row 2: PR metrics, PR breakdown & Time Chart */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
         <PRMetrics />
         <PRBreakdownChart />
         <CommitTimeChart />
       </div>
 
-      {/* Row 3: Issue metrics + CI analytics */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
         <div className="lg:col-span-2">
           <IssueMetrics />
         </div>
         <CIAnalytics />
       </div>
 
-      {/* Row 4: Pinned repositories */}
       <div className="mt-6">
         <PinnedRepos />
       </div>
 
-      {/* Row 5: Top repos + Language breakdown + Goal tracker */}
-      <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
         <TopRepos />
         <LanguageBreakdown />
         <GoalTracker />
       </div>
     </div>
   );
-}
+}

src/components/ProfileStats.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+type ProfileStatsData = {
+  memberSince: string;
+  publicRepos: number;
+  totalStars: number;
+  totalForks: number;
+  followers: number;
+};
+
+type StatCard = {
+  label: string;
+  value: string;
+  icon: string;
+};
+
+function formatCompactNumber(value: number) {
+  return new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value);
+}
+
+function formatMemberSince(dateString: string) {
+  const date = new Date(dateString);
+
+  return new Intl.DateTimeFormat("en", {
+    month: "short",
+    year: "numeric",
+  }).format(date);
+}
+
+export default function ProfileStats() {
+  const [data, setData] = useState<ProfileStatsData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/metrics/profile-stats")
+      .then(async (r) => {
+        const res = await r.json();
+
+        if (!r.ok) {
+          throw new Error(res.error || "Failed to load profile stats");
+        }
+
+        return res as ProfileStatsData;
+      })
+      .then((res) => setData(res))
+      .catch((error) => {
+        console.error(error);
+        setData(null);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const stats: StatCard[] = useMemo(() => {
+    if (!data) return [];
+
+    return [
+      {
+        label: "Member Since",
+        value: formatMemberSince(data.memberSince),
+        icon: "📅",
+      },
+      {
+        label: "Public Repos",
+        value: formatCompactNumber(data.publicRepos),
+        icon: "📦",
+      },
+      {
+        label: "Total Stars",
+        value: formatCompactNumber(data.totalStars),
+        icon: "⭐",
+      },
+      {
+        label: "Total Forks",
+        value: formatCompactNumber(data.totalForks),
+        icon: "🍴",
+      },
+      {
+        label: "Followers",
+        value: formatCompactNumber(data.followers),
+        icon: "👥",
+      },
+    ];
+  }, [data]);
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm">
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-[var(--card-foreground)]">
+          GitHub Profile Stats
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5">
+        {loading
+          ? Array.from({ length: 5 }).map((_, i) => (
+              <div
+                key={i}
+                className="rounded-lg border border-[var(--border)] bg-[var(--control)] p-4"
+              >
+                <div className="mb-3 h-4 w-20 rounded bg-[var(--card-muted)] animate-pulse" />
+                <div className="h-6 w-16 rounded bg-[var(--card-muted)] animate-pulse" />
+              </div>
+            ))
+          : stats.map((stat) => (
+              <div
+                key={stat.label}
+                className="rounded-lg border border-[var(--border)] bg-[var(--control)] p-4"
+              >
+                <div className="mb-2 flex items-center gap-2 text-xs font-medium text-[var(--muted-foreground)]">
+                  <span>{stat.icon}</span>
+                  <span>{stat.label}</span>
+                </div>
+
+                <div className="text-lg font-semibold text-[var(--card-foreground)]">
+                  {stat.value}
+                </div>
+              </div>
+            ))}
+      </div>
+    </div>
+  );
+}