+
+ No idea where to start? Try this{" "} + + Code Triage + +
+
+
+
+ {isLoading ? (
+ Leader Board
+ +
+
+
+ ) : leaderboardData?.length === 0 ? (
+
+
+ ) : (
+ <>
+ + No leaderboard data +
+
+ {leaderboardData?.map(user => (
+
+ {!viewAll && (
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default LeaderboardCard;
\ No newline at end of file
diff --git a/frontend/src/features/UserDashboard/components/Overview.tsx b/frontend/src/features/UserDashboard/components/Overview.tsx
new file mode 100644
index 00000000..daeb90b1
--- /dev/null
+++ b/frontend/src/features/UserDashboard/components/Overview.tsx
@@ -0,0 +1,118 @@
+import { useState, type FC } from "react";
+import clsx from "clsx";
+import { Card } from "@/shared/components/ui/card";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "@/shared/components/ui/dropdown-menu";
+import OverviewCard from "@/features/UserDashboard/components/OverviewCard";
+import { ChevronDown, TrendingUp } from "lucide-react";
+import { format, subMonths } from "date-fns";
+import { useOverview } from "@/api/queries/Overview";
+
+interface OverviewProps {
+ className?: string;
+}
+
+const getLastNMonths = (n: number) => {
+ return Array.from({ length: n }).map((_, i) => {
+ const date = subMonths(new Date(), i);
+ return {
+ label: format(date, "MMMM yyyy"),
+ month: date.getMonth() + 1,
+ year: date.getFullYear()
+ };
+ });
+};
+
+const Overview: FC
+ {rank}
+
+
+
+ {username}
+
+ Contributed to{" "}
+
+ {repositories}{" "}
+ {repositories > 1 ? "Repositories" : "Repository"}
+
+
+
+
+
+
+
+ {monthOptions.find(
+ opt =>
+ opt.month === selectedPeriod.month &&
+ opt.year === selectedPeriod.year
+ )?.label ?? "Select Month"}
+
+
+ {monthOptions.map(option => (
+
+ setSelectedPeriod({ month: option.month, year: option.year })
+ }
+ className={clsx(
+ "cursor-pointer rounded-sm px-3 py-2 text-sm hover:bg-gray-100",
+ selectedPeriod.month === option.month &&
+ selectedPeriod.year === option.year &&
+ "bg-cc-app-gray-background"
+ )}
+ >
+ {option.label}
+
+ ))}
+
+
+
+ {isLoading ? (
+ Overview
+
+
+
+ ) : overviewData?.length === 0 ? (
+
+
+ ) : (
+ + No overview data +
+
+ No activity found for the selected period.
+
+ Try selecting a different month or start contributing!
+
+ {overviewData?.map(user => (
+
+ )}
+
+
+ {type}
+
+
+ {count}
+
+
+
+
+
+
+
+ {isLoading ? (
+ Recent Activities
+ +
+
+
+ ) : recentActivitiesData?.length === 0 ? (
+
+
+ ) : (
+ + No recent activities found +
+
+ {recentActivitiesData?.map((activity, index) => (
+
+ )}
+
+
+ How does points work?
+
+
+ )}
+
+
+ );
+};
+
+export default UserDashboardComponent;
diff --git a/frontend/src/features/UserDashboard/index.tsx b/frontend/src/features/UserDashboard/index.tsx
new file mode 100644
index 00000000..dcc63321
--- /dev/null
+++ b/frontend/src/features/UserDashboard/index.tsx
@@ -0,0 +1,12 @@
+import UserDashboardLayout from "@/shared/layout/UserDashboardLayout";
+import UserDashboardComponent from "@/features/UserDashboard/components/UserDashboardComponent";
+
+const UserDashboard = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default UserBadges;
diff --git a/frontend/src/shared/components/UserDashboard/UserGoals.tsx b/frontend/src/shared/components/UserDashboard/UserGoals.tsx
new file mode 100644
index 00000000..f6cdd95c
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/UserGoals.tsx
@@ -0,0 +1,42 @@
+import { Progress } from "@/shared/components/ui/progress";
+const goals = [
+ { name: "Issue Resolve", current: 2, total: 5, progress: 40 },
+ { name: "PR Review", current: 6, total: 8, progress: 75 },
+ { name: "PR Merge", current: 2, total: 2, progress: 100 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 },
+ { name: "PR Close", current: 1, total: 5, progress: 20 }
+];
+
+const UserGoals = () => {
+ return (
+ + BADGES +
+
+ {Object.entries(grouped).map(([type, badgeList]) => {
+ const color = badgeColorMap[type] ?? "text-gray-400";
+ return (
+
+
+
+ );
+ })}
+
+ {type}
+
+ +
+
+ );
+};
+
+export default UserGoals;
diff --git a/frontend/src/shared/components/UserDashboard/UserProfileCard.tsx b/frontend/src/shared/components/UserDashboard/UserProfileCard.tsx
new file mode 100644
index 00000000..36918e54
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/UserProfileCard.tsx
@@ -0,0 +1,28 @@
+import { Card } from "@/shared/components/ui/card";
+import { Separator } from "@/shared/components/ui/separator";
+import UserProfileDetails from "@/shared/components/UserDashboard/UserProfileDetails";
+import UserBadges from "@/shared/components/UserDashboard/UserBadges";
+import UserGoals from "@/shared/components/UserDashboard/UserGoals";
+
+const UserProfileCard = () => {
+ return (
+ + MY GOALS (BEGINNER) +
+
+ {goals.map((goal, index) => (
+
+
+
+ ))}
+
+ {goal.name}
+
+ {goal.current}/{goal.total}
+
+
+
+
+
+
+
+
+ {Array.from({ length: 30 }).map((_, i) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default UserProfileDetails;
diff --git a/frontend/src/shared/components/common/ActivityCard.tsx b/frontend/src/shared/components/common/ActivityCard.tsx
new file mode 100644
index 00000000..5d55a755
--- /dev/null
+++ b/frontend/src/shared/components/common/ActivityCard.tsx
@@ -0,0 +1,58 @@
+import type { FC } from "react";
+import Coin from "@/shared/components/common/Coin";
+
+interface ActivityCardProps {
+ contributionType: string;
+ repositoryName: string;
+ contributedAt: string;
+ balanceChange: number;
+ showLine: boolean;
+}
+
+const ActivityCard: FC
+
+
+
+
+
+ 
+
+
+
+ {user?.githubUsername || "username"}
+ + +
+
+
+
+
+
+
+
+
+ {showLine && (
+
+ )}
+
+
+
+
+ );
+};
+
+export default ActivityCard;
diff --git a/frontend/src/shared/components/common/Coin.tsx b/frontend/src/shared/components/common/Coin.tsx
new file mode 100644
index 00000000..e85fdbdf
--- /dev/null
+++ b/frontend/src/shared/components/common/Coin.tsx
@@ -0,0 +1,9 @@
+const Coin = () => {
+ return (
+
+
+
+
+
+ {balanceChange && (
+
+ {contributionType}
+
+
+ Contributed to{" "}
+
+ <{repositoryName}>
+
+
+
+ Contributed on {contributedAt}
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default Coin;
diff --git a/frontend/src/shared/components/ui/button.tsx b/frontend/src/shared/components/ui/button.tsx
new file mode 100644
index 00000000..61ab42c9
--- /dev/null
+++ b/frontend/src/shared/components/ui/button.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/shared/utils/tailwindcss";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ primary:
+ "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ ccAppOutlineMidBlue:
+ "bg-cc-app-mid-blue hover:bg-cc-app-blue rounded-sm border border-white text-white",
+ ccAppOutline:
+ "border-cc-app-mid-blue text-cc-app-blue hover:bg-cc-app-mid-blue/5 rounded-sm border focus:outline-none"
+ },
+ size: {
+ md: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9"
+ }
+ },
+ defaultVariants: {
+ variant: "primary",
+ size: "md"
+ }
+ }
+);
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps
+
+ );
+};
+
+export default AuthLayout;
diff --git a/frontend/src/shared/layout/UserDashboardLayout.tsx b/frontend/src/shared/layout/UserDashboardLayout.tsx
new file mode 100644
index 00000000..fd087c22
--- /dev/null
+++ b/frontend/src/shared/layout/UserDashboardLayout.tsx
@@ -0,0 +1,24 @@
+import type { FC, ReactNode } from "react";
+
+import Navbar from "@/shared/components/UserDashboard/Navbar";
+import UserProfileCard from "@/shared/components/UserDashboard/UserProfileCard";
+
+interface UserDashboardLayoutProps {
+ children?: ReactNode;
+}
+
+const UserDashboardLayout: FC
+
+
+
+
+ {children}
+
+
+
+
+
+
+ {Array.from({ length: 64 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ + Code Curiosity +
+
+ {[
+ "Earn and Upskill",
+ "Set Your Goals",
+ "Leader Board",
+ "Open Source Contribution"
+ ].map((text, i) => (
+
+
+
+ ))}
+
+
+
+ {Array.from({ length: 64 }).map((_, i) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default UserDashboardLayout;
diff --git a/frontend/src/shared/types/api.ts b/frontend/src/shared/types/api.ts
new file mode 100644
index 00000000..c4e703da
--- /dev/null
+++ b/frontend/src/shared/types/api.ts
@@ -0,0 +1,4 @@
+export interface ApiResponse
+
+
+ {children}
+
+