feat: add LeetCode progress chart and profile page

Author: yashksaini-coder

app/dashboard/page.tsx

@@ -1,11 +1,15 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useAuthStore } from "@/store/AuthStore/useAuthStore";
 import DashboardNavbar from "@/components/dashboardComponents/DashboardNavbar";
 import { DashboardContentSkeleton } from "@/components/dashboardComponents/DashboardContentSkeleton";
+import { Bar } from "react-chartjs-2";
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from "chart.js";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement);
 
 function DashboardContent({ authUser }: any) {
   return (
@@ -25,7 +29,7 @@ function DashboardContent({ authUser }: any) {
           </p>
         </CardContent>
       </Card>
-
+{/* 
       <Card>
         <CardHeader>
           <CardTitle>LeetCode Stats</CardTitle>
@@ -35,24 +39,65 @@ function DashboardContent({ authUser }: any) {
             LeetCode stats are coming soon!
           </p>
         </CardContent>
-      </Card>
+      </Card> */}
     </main>
   );
 }
 
 export default function Dashboard() {
   const { authUser, fetchAuthUser, authUserLoading } = useAuthStore();
+  const [leetcodeStats, setLeetcodeStats] = useState<any>(null);
 
   useEffect(() => {
     fetchAuthUser();
   }, [fetchAuthUser]);
+
+  // Fetch and store stats once we have the user
+  useEffect(() => {
+    if (authUser?.leetcodeUsername && authUser?.id) {
+      const fetchStats = async () => {
+        const res = await fetch(
+          `/api/leetcode?username=${authUser.leetcodeUsername}&id=${authUser.id}`,
+          { method: "POST" }
+        );
+        if (res.ok) {
+          const data = await res.json();
+          setLeetcodeStats(data.stats);
+        }
+      };
+      fetchStats();
+    }
+  }, [authUser]);
+
+  // Simple bar chart config
+  const chartData = {
+    labels: ["Easy", "Medium", "Hard"],
+    datasets: [
+      {
+        label: "Solved",
+        data: leetcodeStats?.submitStats.acSubmissionNum?.map((i: any) => i.count) || [0, 0, 0],
+        backgroundColor: ["#4ade80", "#fbbf24", "#ef4444"],
+      },
+    ],
+  };
+
   return (
     <div className="min-h-screen w-full">
       <DashboardNavbar isLoading={authUserLoading} userId={authUser?.id} />
       {authUserLoading ? (
         <DashboardContentSkeleton />
       ) : (
-        <DashboardContent authUser={authUser} />
+        <>
+          <DashboardContent authUser={authUser} />
+          {leetcodeStats && (
+            <div className="container mx-auto mt-6">
+              <h2 className="text-xl font-semibold mb-4">Your LeetCode Progress</h2>
+              <div className="max-w-xl">
+                <Bar data={chartData} />
+              </div>
+            </div>
+          )}
+        </>
       )}
     </div>
   );

app/dashboard/profile/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ProfilePage: React.FC = () => {
+    return (
+        <div>
+            <h1>Profile Page</h1>
+            <p>Welcome to your profile!</p>
+        </div>
+    );
+};
+
+export default ProfilePage;

components/dashboardComponents/AppSidebar.tsx

@@ -2,6 +2,7 @@
 
 import {
   Calendar,
+  LayoutDashboard,
   ChevronUp,
   Search,
   Settings,
@@ -30,19 +31,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { signout } from "@/app/actions/action";
-import Dashboard from "@/app/dashboard/page";
 
 // Menu items.
 const items = [
   {
     title: "profile",
-    url: "#",
+    url: "/dashboard/profile",
     icon: User,
   },
   {
     title: "Problems",
     url: "#",
-    icon: Dashboard,
+    icon: LayoutDashboard,
   },
   {
     title: "Calendar",

package-lock.json

@@ -23,8 +23,10 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@supabase/ssr": "^0.5.2",
     "@types/bcryptjs": "^2.4.6",
+    "@types/react-chartjs-2": "^2.0.2",
     "axios": "^1.7.9",
     "bcryptjs": "^2.4.3",
+    "chart.js": "^4.4.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.5.1",
@@ -33,6 +35,7 @@
     "motion": "^11.17.0",
     "next": "15.1.2",
     "react": "^19.0.0",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^2.6.0",