{children}
+
+
+ );
+};
+
+export default AdminLeaderboard;
diff --git a/frontend/src/features/Admin/AdminLogin.tsx b/frontend/src/features/Admin/AdminLogin.tsx
new file mode 100644
index 00000000..a99d4d0b
--- /dev/null
+++ b/frontend/src/features/Admin/AdminLogin.tsx
@@ -0,0 +1,101 @@
+import { type FC, useState } from "react";
+import type { AdminCredentials } from "@/shared/types/types";
+import { useLogInAdmin } from "@/api/queries/Admin";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import {
+ ACCESS_TOKEN_KEY,
+ USER_DATA_KEY
+} from "@/shared/constants/local-storage";
+import { Button } from "@/shared/components/ui/button";
+import { toast } from "sonner";
+import { Eye, EyeOff } from "lucide-react";
+
+const AdminLogin: FC = () => {
+ const { register, handleSubmit } = useFormLoading...
;
+ if (isError || !data?.data)
+ return Failed to load contribution types.
;
+
+ // Initialize state with current scores (so they are controlled)
+ if (Object.keys(scores).length === 0) {
+ const init: Record
+
+ );
+};
+
+export default ScoreConfigure;
diff --git a/frontend/src/features/Admin/Users.tsx b/frontend/src/features/Admin/Users.tsx
new file mode 100644
index 00000000..9725e630
--- /dev/null
+++ b/frontend/src/features/Admin/Users.tsx
@@ -0,0 +1,394 @@
+import { type FC, useEffect, useState } from "react";
+import {
+ type ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ useReactTable
+} from "@tanstack/react-table";
+import defaultAvatar from "@/assets/default-profile-pic.svg";
+import {
+ Loader,
+ User,
+ Shield,
+ ShieldOff,
+ ChevronLeft,
+ ChevronRight,
+ ChevronsLeft,
+ ChevronsRight,
+ Search,
+ X
+} from "lucide-react";
+import { useGetAllUsers, useUpdateUserBlockStatus } from "@/api/queries/Admin";
+import Coin from "@/shared/components/common/Coin";
+import { toast } from "sonner";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow
+} from "@/shared/components/ui/table";
+import { Button } from "@/shared/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from "@/shared/components/ui/select";
+import { Input } from "@/shared/components/ui/input";
+
+interface User {
+ userId: number;
+ githubUsername: string;
+ avatarUrl?: string;
+ currentBalance: number;
+ isBlocked: boolean;
+}
+
+export const AllUsersList: FC = () => {
+ const { data, isLoading } = useGetAllUsers();
+ const { mutate: updateBlockStatus } = useUpdateUserBlockStatus();
+ const [users, setUsers] = useState
+
+
+ + Configure Contribution Scores +
+
+ {sortedData.map((item: ContributionScore) => (
+
+
+
+
+ ))}
+
+ {item.contributionType.replace(/([a-z])([A-Z])/g, "$1 $2")}
+
+
+
+ handleScoreChange(item.contributionType, e.target.value)
+ }
+ />
+
+
+
+
+ 
+
+ {user.githubUsername}
+
+
+ );
+ }
+ },
+ {
+ accessorKey: "currentBalance",
+ header: "Balance",
+ cell: ({ row }) => {
+ return (
+
+
+ );
+ }
+ },
+ {
+ accessorKey: "isBlocked",
+ header: "Status",
+ cell: ({ row }) => {
+ const isBlocked = row.getValue("isBlocked") as boolean;
+ return (
+
+ {isBlocked ? (
+ <>
+ Actions
,
+ cell: ({ row }) => {
+ const user = row.original;
+ return (
+
+
+
+ );
+ }
+ }
+ ];
+
+ const table = useReactTable({
+ data: users,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ initialState: {
+ pagination: {
+ pageSize: 10
+ }
+ }
+ });
+
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ if (!users.length) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ No users found
+
+
+ );
+};
diff --git a/frontend/src/features/Login/components/LoginComponent.tsx b/frontend/src/features/Login/components/LoginComponent.tsx
new file mode 100644
index 00000000..4d26387a
--- /dev/null
+++ b/frontend/src/features/Login/components/LoginComponent.tsx
@@ -0,0 +1,78 @@
+import { Button } from "@/shared/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader
+} from "@/shared/components/ui/card";
+import { GITHUB_AUTH_URL } from "@/shared/constants/endpoints";
+import Coder from "@/assets/coder.svg";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import { setAccessToken } from "@/shared/utils/local-storage";
+import { useGithubOauthLogin } from "@/api/queries/Auth";
+import { toast } from "sonner";
+import githubIcon from "@/assets/github-white-icon.svg";
+const LoginComponent = () => {
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
+
+ const code = searchParams.get("code");
+ console.log("code", code);
+ const { data, isSuccess, isError } = useGithubOauthLogin(code);
+ console.log("data", data);
+ console.log("isSuccess", isSuccess);
+ useEffect(() => {
+ if (!code) return;
+
+ if (isSuccess && data?.data) {
+ const token = data.data;
+ setAccessToken(token);
+
+ console.log("hello");
+ navigate("/");
+ }
+
+ if (isError) {
+ toast.error("OAuth login failed:");
+ }
+ }, [isSuccess, isError, data, navigate]);
+
+ const handleGithubLogin = () => {
+ window.location.href = GITHUB_AUTH_URL || "";
+ };
+
+ return (
+
+
+
+ + User Management +
+
+
+ + Showing{" "} + {table.getState().pagination.pageIndex * + table.getState().pagination.pageSize + + 1} + - + {Math.min( + (table.getState().pagination.pageIndex + 1) * + table.getState().pagination.pageSize, + table.getFilteredRowModel().rows.length + )}{" "} + of {table.getFilteredRowModel().rows.length} users + {table.getState().globalFilter && + ` (filtered from ${users.length} total)`} +
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Pagination */}
+
+
+
+
+
+ Rows per page
+ +
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+
+
+
+
+
+ +
+ No idea where to start? Try this{" "} + + Code Triage + +
+
+
+
+ );
+
+ const filteredRepos = repositoriesData
+ .filter(
+ repo =>
+ repo.repoName.toLowerCase().includes(search.toLowerCase()) ||
+ repo.description?.toLowerCase().includes(search.toLowerCase()) ||
+ repo.languages?.some((lang: string) =>
+ lang.toLowerCase().includes(search.toLowerCase())
+ )
+ )
+ .filter(repo =>
+ language === "All" ? true : repo.languages?.includes(language)
+ )
+ .sort((a, b) => {
+ if (sort === "latest")
+ return (
+ new Date(b.updateDate).getTime() - new Date(a.updateDate).getTime()
+ );
+ if (sort === "oldest")
+ return (
+ new Date(a.updateDate).getTime() - new Date(b.updateDate).getTime()
+ );
+ return 0;
+ });
+
+ return (
+
+
+ );
+};
+
+export default Repositories;
diff --git a/frontend/src/features/MyContributions/components/RepositoriesCard.tsx b/frontend/src/features/MyContributions/components/RepositoriesCard.tsx
new file mode 100644
index 00000000..266df629
--- /dev/null
+++ b/frontend/src/features/MyContributions/components/RepositoriesCard.tsx
@@ -0,0 +1,65 @@
+import Coin from "@/shared/components/common/Coin";
+import { Card, CardContent } from "@/shared/components/ui/card";
+import { LangColor } from "@/shared/constants/constants";
+import { format } from "date-fns";
+import type { FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface RepositoriesCardProps {
+ id: number;
+ name: string;
+ languages: string[];
+ description: string;
+ updatedOn: string;
+ coins: number;
+}
+
+const RepositoriesCard: FC
+ setSearch(e.target.value)}
+ className="border-cc-app-blue text-cc-app-blue placeholder-cc-app-blue focus:border-cc-app-blue focus:ring-cc-app-blue/70 h-10 flex-1 rounded-lg border bg-blue-50 px-4 text-sm shadow-sm transition focus:ring-2 focus:outline-none"
+ />
+
+
+
+ {filteredRepos.length === 0 ? (
+
+
+
+
+
+
+
+ ) : (
+ filteredRepos.map(repo => (
+ + No repositories found +
++ Try adjusting your search or filters +
+
+
+ ))
+ )}
+ navigate(`/repositories/${id}`)}
+ >
+
+
+ {name}
+
+
+
+ {languages?.map((language, index) => {
+ const color = LangColor[language] || "bg-gray-400";
+ return (
+
+
+
+
+ {language}
+
+ );
+ })}
+ + {description || "No description for the given repository"} +
+ ++ Updated on {format(new Date(updatedOn), "MMM d, yyyy")} +
+
+
+ );
+};
+
+export default MyContributions;
diff --git a/frontend/src/features/RepositoryDetails/components/Contributors.tsx b/frontend/src/features/RepositoryDetails/components/Contributors.tsx
new file mode 100644
index 00000000..4f2325cf
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/components/Contributors.tsx
@@ -0,0 +1,64 @@
+import { useRepositoryContributors } from "@/api/queries/Contributors";
+import { useParams } from "react-router-dom";
+import ContributorsCard from "./ContributorsCard";
+import { useState } from "react";
+import { Button } from "@/shared/components/ui/button";
+import clsx from "clsx";
+
+const ContributorsList = () => {
+ const [viewAll, setViewAll] = useState(false);
+
+ const handleViewAll = () => {
+ setViewAll(!viewAll);
+ };
+
+ const { repoid } = useParams();
+ const repoId = Number(repoid);
+ const { data, isLoading } = useRepositoryContributors(repoId);
+ const contributors = data?.data ?? [];
+
+ const contributorsData = viewAll ? contributors : contributors?.slice(0, 20);
+
+ return (
+
+
+
+
+ );
+};
+
+export default ContributorsList;
diff --git a/frontend/src/features/RepositoryDetails/components/ContributorsCard.tsx b/frontend/src/features/RepositoryDetails/components/ContributorsCard.tsx
new file mode 100644
index 00000000..56428ac9
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/components/ContributorsCard.tsx
@@ -0,0 +1,40 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import type { FC } from "react";
+import { Link } from "react-router-dom";
+
+interface ContributorsCardProps {
+ name: string;
+ avatarUrl: string;
+ contributions: number;
+ githubUrl: string;
+}
+
+const ContributorsCard: FC
+
+ {isLoading ? (
+ + Contributors {contributors.length} +
+ +
+
+
+ ) : (
+
+
+ )}
+
+ {contributorsData?.map(contributor => (
+
+
+
+
+ Contributors-Image
+
+ {/* Tooltip */}
+
+
+ );
+};
+
+export default ContributorsCard;
diff --git a/frontend/src/features/RepositoryDetails/components/Languages.tsx b/frontend/src/features/RepositoryDetails/components/Languages.tsx
new file mode 100644
index 00000000..d47572f6
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/components/Languages.tsx
@@ -0,0 +1,26 @@
+import { type FC } from "react";
+import { useRepositoryLanguages } from "@/api/queries/Languages";
+import { useParams } from "react-router-dom";
+import LanguageCard from "./LanguagesCard";
+
+interface LanguagesProps {
+ className?: string;
+}
+
+const Languages: FC
+
+
+ {name}
+{contributions} Contributions
+
+
+ );
+};
+
+export default LanguageCard;
+export type { LanguageCardProps };
diff --git a/frontend/src/features/RepositoryDetails/components/Repository.tsx b/frontend/src/features/RepositoryDetails/components/Repository.tsx
new file mode 100644
index 00000000..fc5f4cb6
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/components/Repository.tsx
@@ -0,0 +1,26 @@
+import RepositoryCard from "./RepositoryCard";
+import { useRepository } from "@/api/queries/Repository";
+import { useParams } from "react-router-dom";
+
+const Repository = () => {
+ const { repoid } = useParams();
+ const repoId = Number(repoid);
+ const { data } = useRepository(repoId);
+ const repo = data?.data;
+
+ return (
+ {title}
+ +
+ {languages.map((language, index) => {
+ console.log(language.name);
+ const bgColor = LangColor[language.name] || "bg-gray-400";
+ return (
+
+ );
+ })}
+
+
+
+ {languages.map((language, index) => {
+ const color = LangColor[language.name] || "bg-gray-400";
+ return (
+
+
+
+
+ {language.name} {language.percentage}%
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default Repository;
diff --git a/frontend/src/features/RepositoryDetails/components/RepositoryActivities.tsx b/frontend/src/features/RepositoryDetails/components/RepositoryActivities.tsx
new file mode 100644
index 00000000..06d3e9f9
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/components/RepositoryActivities.tsx
@@ -0,0 +1,98 @@
+import { useState, type FC } from "react";
+import clsx from "clsx";
+import { Button } from "@/shared/components/ui/button";
+import { Card } from "@/shared/components/ui/card";
+import ActivityCard from "@/shared/components/common/ActivityCard";
+import { useParams } from "react-router-dom";
+import { TrendingUp } from "lucide-react";
+import { useRepositoryActivities } from "@/api/queries/RepostoryActivities";
+import CoinsInfo from "@/shared/components/common/CoinsInfo";
+
+interface RepositoryActivitiesProps {
+ className?: string;
+}
+
+const RepositoryActivities: FC
+
+
+ );
+ } else if (repositoryActivitiesData?.length === 0) {
+ content = (
+
+
+ );
+ } else {
+ content = (
+ + No recent activities found +
+
+ {repositoryActivitiesData?.map((activity, index) => (
+
+ );
+ }
+
+ return (
+
+
+ )}
+
+
+ {content}
+ Recent Activities
+ +
+
+ );
+};
+
+export default RepositoryCard;
diff --git a/frontend/src/features/RepositoryDetails/index.tsx b/frontend/src/features/RepositoryDetails/index.tsx
new file mode 100644
index 00000000..85dcfce5
--- /dev/null
+++ b/frontend/src/features/RepositoryDetails/index.tsx
@@ -0,0 +1,37 @@
+import Repository from "./components/Repository";
+import Languages from "./components/Languages";
+import RecentActivities from "./components/RepositoryActivities";
+import ContributorsList from "./components/Contributors";
+import { ArrowLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Separator } from "@/shared/components/ui/separator";
+
+const RepositoryDetails = () => {
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+ {name}
+
+
+
+
+ + Owned By: {owner} +
+
+ {languages?.map((language, index) => {
+ const color = LangColor[language] || "bg-gray-400";
+ return (
+
+
+
+
+ {language}
+
+ );
+ })}
+ + {description || + "No description for the given repository. Lorem ipsum dolor sit amet."} +
+
+
+ );
+};
+
+export default RepositoryDetails;
diff --git a/frontend/src/features/UserDashboard/components/Leaderboard.tsx b/frontend/src/features/UserDashboard/components/Leaderboard.tsx
new file mode 100644
index 00000000..86900d64
--- /dev/null
+++ b/frontend/src/features/UserDashboard/components/Leaderboard.tsx
@@ -0,0 +1,94 @@
+import { useState, type FC } from "react";
+import clsx from "clsx";
+
+import { Button } from "@/shared/components/ui/button";
+import { Card } from "@/shared/components/ui/card";
+import LeaderboardCard from "@/features/UserDashboard/components/LeaderboardCard";
+import { useCurrentUserRank, useLeaderboard } from "@/api/queries/Leaderboard";
+import { TrendingUp } from "lucide-react";
+import { useLocation } from "react-router-dom";
+import { ADMIN_LEADERBOARD_PATH } from "@/shared/constants/routes";
+
+interface LeaderboardProps {
+ className?: string;
+}
+
+const Leaderboard: FC navigate("/my-contributions")}
+ >
+
+
+
+
+
+
+
+
+
+
+ {isLoading ? (
+ Leader Board
+ +
+
+
+ ) : leaderboardData?.length === 0 ? (
+
+
+ ) : (
+ <>
+ + No leaderboard data +
+
+ {leaderboardData?.map(user => (
+
+ {!viewAll && !isAdmin && (
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+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..e5fb648f
--- /dev/null
+++ b/frontend/src/features/UserDashboard/components/Overview.tsx
@@ -0,0 +1,113 @@
+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 for the selected period. +
+
+ {overviewData?.map(user => (
+
+ )}
+
+
+ + {type.replace(/([A-Z])/g, " $1")} +
+
+
+ {count}
+
+
+
+
+
+
+
+ {isLoading ? (
+ Recent Activities
+ +
+
+
+ ) : recentActivitiesData?.length === 0 ? (
+
+
+ ) : (
+ + No recent activities found +
+
+ {recentActivitiesData?.map((activity, index) => (
+
+ )}
+
+
+ )}
+
+
+ );
+};
+
+export default UserDashboardComponent;
diff --git a/frontend/src/features/UserDashboard/components/UserGoalSummary.tsx b/frontend/src/features/UserDashboard/components/UserGoalSummary.tsx
new file mode 100644
index 00000000..2d668f39
--- /dev/null
+++ b/frontend/src/features/UserDashboard/components/UserGoalSummary.tsx
@@ -0,0 +1,69 @@
+import { useUserGoalSummary } from "@/api/queries/UserGoals";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer
+} from "recharts";
+
+const UserGoalSummaryChart = () => {
+ const { data, isLoading, isError } = useUserGoalSummary();
+
+ if (isLoading) return
+
+
+
+
+
+ Loading...
;
+ if (!data)
+ return (
+
+ Please set goals to view goal summary. Goal summary is update after 24
+ hours.
+
+ );
+ if (isError) return Error loading goal summary
;
+
+ const summaryData = data.data;
+ const chartData = summaryData.map(item => ({
+ day: new Date(item.snapshotDate).toLocaleDateString("en-GB", {
+ day: "2-digit",
+ month: "short"
+ }),
+ incomplete: item.incompleteGoalsCount,
+ targetSet: item.targetSet,
+ targetCompleted: item.targetCompleted
+ }));
+
+ return (
+
+
+ );
+};
+
+export default UserBadges;
diff --git a/frontend/src/shared/components/UserDashboard/UserEmail.tsx b/frontend/src/shared/components/UserDashboard/UserEmail.tsx
new file mode 100644
index 00000000..c291dc78
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/UserEmail.tsx
@@ -0,0 +1,72 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { Button } from "@/shared/components/ui/button";
+import { useState } from "react";
+import { useUpdateUserEmail } from "@/api/queries/UserProfileDetails";
+import { queryClient } from "@/api/react-query";
+import { LOGGED_IN_USER_QUERY_KEY } from "@/shared/constants/query-keys";
+import { toast } from "sonner";
+
+interface Props {
+ defaultEmail: string;
+ onClose: () => void;
+}
+
+const UserEmail = ({ defaultEmail, onClose }: Props) => {
+ const [email, setEmail] = useState(defaultEmail);
+ const { mutate: updateEmail, isPending } = useUpdateUserEmail();
+
+ const isValidEmail = (email: string) =>
+ /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+ const handleUpdate = () => {
+ if (!isValidEmail(email)) return;
+ updateEmail(email, {
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: [LOGGED_IN_USER_QUERY_KEY]
+ });
+ toast.success("email updated successfully");
+ onClose();
+ }
+ });
+ };
+
+ return (
+
+ );
+};
+
+export default UserEmail;
diff --git a/frontend/src/shared/components/UserDashboard/UserGoals.tsx b/frontend/src/shared/components/UserDashboard/UserGoals.tsx
new file mode 100644
index 00000000..46005dd2
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/UserGoals.tsx
@@ -0,0 +1,499 @@
+import { useState } from "react";
+import { Progress } from "@/shared/components/ui/progress";
+import { Button } from "@/shared/components/ui/button";
+import {
+ Dialog,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogFooter
+} from "@/shared/components/ui/dialog";
+import { Loader2 } from "lucide-react";
+import {
+ useAllContributionTypes,
+ useGoalLevels,
+ useGoalLevelTargets,
+ useResetUserGoalStatus,
+ useSetUserGoalLevel,
+ useUserCurrentGoalStatus
+} from "@/api/queries/UserGoals";
+import { useQueryClient } from "@tanstack/react-query";
+import { USER_ACTIVE_GOAL_LEVEL_QUERY_KEY } from "@/shared/constants/query-keys";
+import type {
+ ContributionTypeDetail,
+ CustomGoalLevelTarget
+} from "@/shared/types/types";
+import { toast } from "sonner";
+import information from "@/assets/information.png";
+
+const UserGoals = () => {
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [resetDialogOpen, setResetDialogOpen] = useState(false);
+ const [isSettingLevel, setIsSettingLevel] = useState(false);
+ const [isCustomDialogOpen, setIsCustomDialogOpen] = useState(false);
+ const [levelTargetDialogOpen, setLevelTargetDialogOpen] = useState(false);
+
+ const [customGoals, setCustomGoals] = useState+ BADGES +
+
+ {Object.entries(grouped).map(([type, badgeList]) => {
+ const badge = badgeColorMap[type] ?? "";
+ return (
+
+
+ 
+ {badgeList.length > 1 && (
+
+ ×{badgeList.length}
+
+ )}
+
+ );
+ })}
+
+ {type}
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+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..42bed017
--- /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 (
+
+
+
+ {userLevel ? (
+
+
+
+ {isWithin48HoursOrGreaterThan30Days(createdAt) && (
+
+ )}
+ + MY GOALS {userLevel?.level && `(${userLevel.level.toUpperCase()})`} +
+ +
+ {userLevel.goalTargetProgress?.map((goal, idx) => {
+ const percent = goal.target
+ ? Math.min((goal.progress / goal.target) * 100, 100)
+ : 0;
+ return (
+
+ ) : (
+
+
+ );
+ })}
+
+
+ {goal.contributionType.replace(/([A-Z])/g, " $1")}
+
+
+ {goal.progress}/{goal.target}
+
+
+
+
+
+ )}
+
+ {/* Level Target Dialog */}
+
+
+ {/* Custom Goal Dialog */}
+
+ No Active Goal Set
++ You haven't selected a goal level yet. Choose a level to start + tracking contributions. +
+ +
+
+
+
+
+ {Array.from({ length: 30 }).map((_, i) => (
+
+ ))}
+
+
+ setShowSettingsDialog(false)}
+ onUpdateEmail={handleUpdateEmail}
+ />
+ {showEmailDialog && (
+ setShowEmailDialog(false)}
+ />
+ )}
+
+ );
+};
+
+export default UserProfileDetails;
diff --git a/frontend/src/shared/components/UserDashboard/UserProfileMenu.tsx b/frontend/src/shared/components/UserDashboard/UserProfileMenu.tsx
new file mode 100644
index 00000000..b62108d5
--- /dev/null
+++ b/frontend/src/shared/components/UserDashboard/UserProfileMenu.tsx
@@ -0,0 +1,47 @@
+import { MoreVertical } from "lucide-react";
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator
+} from "@/shared/components/ui/dropdown-menu";
+import { Button } from "@/shared/components/ui/button";
+
+interface Props {
+ onSettingsClick: () => void;
+ onLogoutClick: () => void;
+}
+
+const UserProfileMenu = ({ onSettingsClick, onLogoutClick }: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ + {user?.githubUsername || "username"} +
+ +
+
+
+
+
+
+
+
+
+
+ {showLine && (
+
+ )}
+
+
+
+
+ );
+};
+
+export default ActivityCard;
diff --git a/frontend/src/shared/components/common/BlockedAccountPage.tsx b/frontend/src/shared/components/common/BlockedAccountPage.tsx
new file mode 100644
index 00000000..6ee86350
--- /dev/null
+++ b/frontend/src/shared/components/common/BlockedAccountPage.tsx
@@ -0,0 +1,52 @@
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardFooter
+} from "@/shared/components/ui/card";
+import { Button } from "@/shared/components/ui/button";
+import { clearAccessToken } from "@/shared/utils/local-storage";
+import { useNavigate } from "react-router-dom";
+import { AlertTriangle } from "lucide-react";
+
+const BlockedAccountPage = () => {
+ const navigate = useNavigate();
+ clearAccessToken();
+
+ const handleBackToLogin = () => {
+ clearAccessToken();
+ navigate("/login");
+ };
+
+ return (
+
+
+
+
+
+ {balanceChange && (
+
+ {contributionType.replace(/([A-Z])/g, " $1")}
+
+ {isRepositoryActivity ? null : (
+
+ Contributed to <{repositoryName}>
+
+ )}
+
+
+ Contributed on {format(new Date(contributedAt), "MMM d yyyy")}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BlockedAccountPage;
diff --git a/frontend/src/shared/components/common/Coin.tsx b/frontend/src/shared/components/common/Coin.tsx
new file mode 100644
index 00000000..0ba372f8
--- /dev/null
+++ b/frontend/src/shared/components/common/Coin.tsx
@@ -0,0 +1,9 @@
+import coinSvg from "@/assets/Coin.svg";
+
+const Coin = () => {
+ return (
+ + Account Blocked +
++ Your account has been blocked due to policy violations or unusual + activity. If you believe this is a mistake, please contact our + support team. +
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+ );
+};
+
+export default AdminLayout;
diff --git a/frontend/src/shared/layout/AppLayout.tsx b/frontend/src/shared/layout/AppLayout.tsx
new file mode 100644
index 00000000..b41c295f
--- /dev/null
+++ b/frontend/src/shared/layout/AppLayout.tsx
@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+
+interface AppLayoutProps {
+ children: ReactNode;
+}
+
+const AppLayout = ({ children }: AppLayoutProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 24 }).map((_, i) => (
+
+ ))}
+
+
+
+
+ </>
+
+
+
+ CODE CURIOSITY
+
+
+ Admin Portal
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {activeItem} +
++ Manage your {activeItem.toLowerCase()} settings and + configurations +
+
+
+
+
+
+
+
+
+ Admin
+
+ Administrator
+
+
+
+ );
+};
+
+export default AppLayout;
diff --git a/frontend/src/shared/layout/AuthLayout.tsx b/frontend/src/shared/layout/AuthLayout.tsx
new file mode 100644
index 00000000..8f7d7750
--- /dev/null
+++ b/frontend/src/shared/layout/AuthLayout.tsx
@@ -0,0 +1,96 @@
+import { type FC, type ReactNode, useEffect } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { CheckCircle } from "lucide-react";
+
+import { Card } from "@/shared/components/ui/card";
+import { LOGIN_PATH, USER_DASHBOARD_PATH } from "@/shared/constants/routes";
+import { getAccessToken } from "@/shared/utils/local-storage";
+import { AuthLayoutDetails } from "../constants/constants";
+
+interface AuthLayoutProps {
+ children: ReactNode;
+}
+
+const AuthLayout: FC
+ {children}
+
+
+
+ );
+};
+
+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}
+ {location.pathname.startsWith("/admin") ? (
+
+ Log in as user?
+
+ ) : (
+
+ {/* Log in as admin? */}
+
+ )}
+
+
+
+
+
+
+ {Array.from({ length: 64 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ + Code Curiosity +
+
+ {AuthLayoutDetails.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}
+
+