+
+ 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 0000000..daeb90b
--- /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 0000000..dcc6332
--- /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 (
+
+
+ -
- No idea where to start? Try this{' '} - - Code Triage - -
-
-
- );
-};
-
-export default AuthLayout;
diff --git a/frontend/src/shared/components/UserDashboard/Navbar.tsx b/frontend/src/shared/components/UserDashboard/Navbar.tsx
new file mode 100644
index 0000000..b509d22
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/Navbar.tsx
@@ -0,0 +1,30 @@
+import { Link, useLocation } from "react-router-dom";
+
+import { Card } from "@/shared/components/ui/card";
+import { USER_DASHBOARD_NAVBAR_OPTIONS } from "@/shared/types/navbar";
+
+const Navbar = () => {
+ const location = useLocation();
+
+ const isActive = (path: string) => location.pathname === path;
+
+ return (
+
-
-
-
-
- {children}
-
-
-
-
-
-
- {Array.from({ length: 64 }).map((_, i) => (
-
- ))}
-
-
-
-
- {/* Bottom Grid Decoration */}
-
-
-
-
-
-
-
- - Code Curiosity -
-
- {[
- 'Earn and Upskill',
- 'Set Your Goals',
- 'Leader Board',
- 'Open Source Contribution'
- ].map((text, i) => (
-
-
-
- ))}
-
-
-
- {Array.from({ length: 64 }).map((_, i) => (
-
- ))}
-
-
+
+ );
+};
+
+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 0000000..f6cdd95
--- /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 0000000..36918e5
--- /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 0000000..5d55a75
--- /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 0000000..e85fdbd
--- /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/components/ui/button.tsx b/frontend/src/shared/components/ui/button.tsx
similarity index 70%
rename from frontend/src/components/ui/button.tsx
rename to frontend/src/shared/components/ui/button.tsx
index a2df8dc..61ab42c 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/shared/components/ui/button.tsx
@@ -1,15 +1,15 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@/lib/utils"
+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: {
- default:
+ 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",
@@ -20,20 +20,24 @@ const buttonVariants = cva(
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: {
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ 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",
- },
+ icon: "size-9"
+ }
},
defaultVariants: {
- variant: "default",
- size: "default",
- },
+ variant: "primary",
+ size: "md"
+ }
}
-)
+);
function Button({
className,
@@ -43,9 +47,9 @@ function Button({
...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 0000000..fd087c2
--- /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/lib/constants.ts b/frontend/src/shared/lib/constants.ts
deleted file mode 100644
index 7ed62cd..0000000
--- a/frontend/src/shared/lib/constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const ACCESS_TOKEN_KEY = 'accessToken';
-export const USER_DATA_KEY = 'userData';
diff --git a/frontend/src/shared/types/api.ts b/frontend/src/shared/types/api.ts
new file mode 100644
index 0000000..c4e703d
--- /dev/null
+++ b/frontend/src/shared/types/api.ts
@@ -0,0 +1,4 @@
+export interface ApiResponse
+
+
+ {children}
+
+