+ {/* Icons + Avatar + DarkMode */}
+
{topbarItems.map(({ icon: Icon, label, path }) => (
-
+
+
))}
-
+
+ {/* Avatar Dropdown */}
+
+
+
+
+
+ navigate("/profile")}>
+ Profile
+
+ navigate("/settings")}>
+ Settings
+
+ navigate("/logout")}>
+ Logout
+
+
+
+
+
);
}
-
-export default Topbar;
diff --git a/frontend/src/Components/Dashboard.jsx b/frontend/src/Components/Dashboard.jsx
index 310bf6a..1bdc43a 100644
--- a/frontend/src/Components/Dashboard.jsx
+++ b/frontend/src/Components/Dashboard.jsx
@@ -9,7 +9,9 @@ import TimeSpentCard from "./DashBoard/TimeSpentCard";
import ActivityHeatmap from "./DashBoard/ActivityHeatMap";
import NotesCard from "./DashBoard/NotesCard";
import { useNavigate } from "react-router-dom";
-
+import { Card } from "@/Components/ui/Card";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+import { Alert, AlertDescription, AlertTitle } from "@/Components/ui/alert";
export default function Dashboard() {
const [profile, setProfile] = useState(null);
@@ -18,8 +20,33 @@ export default function Dashboard() {
const [goals, setGoals] = useState([]);
const navigate = useNavigate();
+ const token = localStorage.getItem("token");
+
+ const fetchProfile = async () => {
+ if (!token) {
+ navigate("/login");
+ setLoading(false);
+ return;
+ }
+ try {
+ const res = await fetch(`${import.meta.env.VITE_API_URL}/api/profile`, {
+ headers: { "x-auth-token": token },
+ });
+ const data = await res.json();
+ if (!res.ok)
+ throw new Error(data.errors?.[0]?.msg || "Failed to load profile");
+
+ setProfile(data);
+ setGoals(data.goals || []);
+ } catch (err) {
+ console.error("Error fetching profile:", err);
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
useEffect(() => {
- // Capture token issued by backend OAuth redirect: /dashboard?token=...
const params = new URLSearchParams(window.location.search);
const oauthToken = params.get("token");
if (oauthToken) {
@@ -28,116 +55,171 @@ export default function Dashboard() {
} catch (e) {
console.error("Failed to persist OAuth token:", e);
}
- // Clean up URL after capturing token (avoid keeping token in address bar)
const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState({}, document.title, cleanUrl);
}
- const fetchProfile = async () => {
- try {
- const token = localStorage.getItem("token");
- if (!token) {
- navigate("/login");
- setLoading(false);
- return;
- }
-
- const res = await fetch(`${import.meta.env.VITE_API_URL}/api/profile`, {
- headers: { "x-auth-token": token },
- });
+ const fetchAndUpdateProfile = async () => {
+ await fetchProfile();
- const data = await res.json();
- if (!res.ok) {
- throw new Error(data.errors?.[0]?.msg || "Failed to load profile");
+ // After profile is loaded, add today to activity if not present
+ if (profile) {
+ const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
+ if (!profile.activity.includes(today)) {
+ handleActivityAdd(today);
}
-
- setProfile(data);
- setGoals(data.goals || []);
- } catch (err) {
- console.error("Error fetching profile:", err);
- setError(err.message);
- } finally {
- setLoading(false);
}
};
- fetchProfile();
+ fetchAndUpdateProfile();
}, [navigate]);
- // Show loading state
+ // --- Handlers for real-time updates ---
+ const handleGoalsChange = async (updatedGoals) => {
+ setGoals(updatedGoals);
+ try {
+ await fetch(`${import.meta.env.VITE_API_URL}/api/profile/goals`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json", "x-auth-token": token },
+ body: JSON.stringify({ goals: updatedGoals }),
+ });
+ } catch (err) {
+ console.error("Error updating goals:", err);
+ }
+ };
+
+ const handleNotesChange = async (updatedNotes) => {
+ setProfile((prev) => ({ ...prev, notes: updatedNotes }));
+ try {
+ await fetch(`${import.meta.env.VITE_API_URL}/api/profile/notes`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json", "x-auth-token": token },
+ body: JSON.stringify({ notes: updatedNotes }),
+ });
+ } catch (err) {
+ console.error("Error updating notes:", err);
+ }
+ };
+
+ const handleActivityAdd = async (date) => {
+ setProfile((prev) => ({ ...prev, activity: [...prev.activity, date] }));
+ try {
+ await fetch(`${import.meta.env.VITE_API_URL}/api/profile/activity`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json", "x-auth-token": token },
+ body: JSON.stringify({ date }),
+ });
+ } catch (err) {
+ console.error("Error updating activity:", err);
+ }
+ };
+
+ const handleTimeUpdate = async (newTime) => {
+ setProfile((prev) => ({ ...prev, timeSpent: newTime }));
+ try {
+ await fetch(`${import.meta.env.VITE_API_URL}/api/profile/time`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json", "x-auth-token": token },
+ body: JSON.stringify({ timeSpent: newTime }),
+ });
+ } catch (err) {
+ console.error("Error updating time spent:", err);
+ }
+ };
+
if (loading) {
return (
-
-
+
);
}
- // Show error state
if (error) {
return (
-
-
Error: {error}
-
+
+
+ Failed to Load Dashboard
+ {error}
+
+
);
}
- // Show message if no profile data is available
if (!profile) {
return (
-
-
No profile data available. Please try logging in again.
+
+
+ No profile data available. Please try logging in again.
+
);
}
- // Safely destructure with default values
const {
- socialLinks = [],
+ socialLinks = {},
streak = 0,
- githubUsername = null,
timeSpent = "0 minutes",
activity = [],
- notes = []
+ notes = [],
} = profile;
return (
-
+
-
+
-
-
+
+
{/* Row 1 */}
-
-
- {/* Row 2: Goals, Time Spent, Notes */}
-
-
-
- setProfile({ ...profile, notes: updatedNotes })
- }
- />
-
- {/* Row 3: Activity heatmap full width */}
-
-
+ {/* Row 2 */}
+
+
+
+
+ {/* Row 3: Heatmap full width */}
+
+
{
+ try {
+ const token = localStorage.getItem("token");
+ const res = await fetch(
+ `${import.meta.env.VITE_API_URL}/api/profile/activity`,
+ {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ "x-auth-token": token,
+ },
+ body: JSON.stringify({ date: day }),
+ }
+ );
+ if (res.ok) {
+ setProfile((prev) => ({
+ ...prev,
+ activity: [...prev.activity, day],
+ }));
+ }
+ } catch (err) {
+ console.error("Failed to add activity:", err);
+ }
+ }}
+ />
- {children}
-
+
);
}
-export function CardHeader({ children, className = "" }) {
+function CardAction({
+ className,
+ ...props
+}) {
return (
- {children}
+
);
}
-export function CardTitle({ children, className = "" }) {
- return {children}
;
+function CardContent({
+ className,
+ ...props
+}) {
+ return ();
}
-export function CardContent({ children, className = "" }) {
- return {children}
;
+function CardFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
}
-export function CardFooter({ children, className = "" }) {
- return {children}
;
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
}
diff --git a/frontend/src/Components/ui/alert.jsx b/frontend/src/Components/ui/alert.jsx
new file mode 100644
index 0000000..ab99ec0
--- /dev/null
+++ b/frontend/src/Components/ui/alert.jsx
@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+ "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+ {
+ variants: {
+ variant: {
+ default: "bg-card text-card-foreground",
+ destructive:
+ "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Alert({
+ className,
+ variant,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function AlertTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function AlertDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/src/Components/ui/avatar.jsx b/frontend/src/Components/ui/avatar.jsx
new file mode 100644
index 0000000..9ad399b
--- /dev/null
+++ b/frontend/src/Components/ui/avatar.jsx
@@ -0,0 +1,45 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function AvatarImage({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function AvatarFallback({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/src/Components/ui/dropdown-menu.jsx b/frontend/src/Components/ui/dropdown-menu.jsx
new file mode 100644
index 0000000..13051d5
--- /dev/null
+++ b/frontend/src/Components/ui/dropdown-menu.jsx
@@ -0,0 +1,221 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+ ...props
+}) {
+ return ;
+}
+
+function DropdownMenuPortal({
+ ...props
+}) {
+ return ();
+}
+
+function DropdownMenuTrigger({
+ ...props
+}) {
+ return ();
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}) {
+ return (
+
+
+
+ );
+}
+
+function DropdownMenuGroup({
+ ...props
+}) {
+ return ();
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}) {
+ return ();
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function DropdownMenuSub({
+ ...props
+}) {
+ return ;
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}) {
+ return (
+
+ {children}
+
+
+ );
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
diff --git a/frontend/src/Components/ui/hover-card.jsx b/frontend/src/Components/ui/hover-card.jsx
new file mode 100644
index 0000000..fed943d
--- /dev/null
+++ b/frontend/src/Components/ui/hover-card.jsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+ ...props
+}) {
+ return ;
+}
+
+function HoverCardTrigger({
+ ...props
+}) {
+ return ();
+}
+
+function HoverCardContent({
+ className,
+ align = "center",
+ sideOffset = 4,
+ ...props
+}) {
+ return (
+
+
+
+ );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/src/Components/ui/scroll-area.jsx b/frontend/src/Components/ui/scroll-area.jsx
new file mode 100644
index 0000000..2cea9bc
--- /dev/null
+++ b/frontend/src/Components/ui/scroll-area.jsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}) {
+ return (
+
+
+ {children}
+
+
+
+
+ );
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}) {
+ return (
+
+
+
+ );
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/src/Components/ui/sheet.jsx b/frontend/src/Components/ui/sheet.jsx
new file mode 100644
index 0000000..21faa4c
--- /dev/null
+++ b/frontend/src/Components/ui/sheet.jsx
@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({
+ ...props
+}) {
+ return ;
+}
+
+function SheetTrigger({
+ ...props
+}) {
+ return ;
+}
+
+function SheetClose({
+ ...props
+}) {
+ return ;
+}
+
+function SheetPortal({
+ ...props
+}) {
+ return ;
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ ...props
+}) {
+ return (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ );
+}
+
+function SheetHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function SheetDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 960027c..d3c8977 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -111,6 +111,17 @@
--sidebar-border: oklch(0.9 0.03 250);
--sidebar-ring: oklch(0.65 0.12 250);
--heatmap-bg: #ebedf0;
+ --calendar-empty: var(--heatmap-bg);
+ /* fallback background for empty days */
+ --calendar-level-1: var(--chart-5);
+ /* lightest activity */
+ --calendar-level-2: var(--chart-3);
+ --calendar-level-3: var(--chart-2);
+ --calendar-level-4: var(--chart-1);
+ /* darkest activity */
+ --calendar-day-border: var(--background);
+ /* ensures contrast with card bg */
+ --calendar-month-border: var(--background);
}
.dark {
@@ -156,6 +167,13 @@
--sidebar-border: oklch(0.25 0.05 250);
--sidebar-ring: oklch(0.65 0.12 250);
--heatmap-bg: #1f2937;
+ --calendar-empty: var(--heatmap-bg);
+ --calendar-level-1: var(--chart-5);
+ --calendar-level-2: var(--chart-3);
+ --calendar-level-3: var(--chart-2);
+ --calendar-level-4: var(--chart-1);
+ --calendar-day-border: var(--background);
+ --calendar-month-border: var(--background);
}
@layer base {
+ src={
+ user.avatar
+ ? user.avatar.startsWith("http")
+ ? user.avatar
+ : `${import.meta.env.VITE_API_URL}${user.avatar}`
+ : `https://api.dicebear.com/6.x/micah/svg?seed=fallback`
+ }
+ alt={user.name}
+ className="w-16 h-16 object-cover rounded-full"
+ />
-
-