From 0e186540fd94c4c87416efc4e8623a87a69403c6 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Thu, 23 Oct 2025 21:23:07 +0530
Subject: [PATCH 01/14] feat: enhance user profile management and fix some
 state issues

    - Introduced a memoized ProfileManagement component to optimize rendering.
    - Fix re-renders on tabs switching
    - Improved form handling for user profile updates, including name, email, website, and GitHub.
    - Added `User Not Logged In` Contents.
    - Refactored state management for better clarity and performance.
---
 src/pages/Dashboard.tsx | 909 ++++++++++++++++++++--------------------
 1 file changed, 446 insertions(+), 463 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index b6e95b5..e001ecf 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -14,20 +14,13 @@ import {
 	Edit,
 	Eye,
 	LogOut,
-	Package,
 	Plus,
-	Search,
 	Settings,
 	Shield,
-	Star,
-	Trash2,
-	Upload,
-	Users,
-	Wallet,
 	X,
 	XCircle,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, memo } from "react";
 import { Link } from "react-router-dom";
 import { EarningsOverview } from "@/components/dashboard/earnings-overview";
 import { PaymentMethods } from "@/components/dashboard/payment-methods";
@@ -150,7 +143,7 @@ const handleUpdateProfile = async (
 	if (emailOtp) formData.append("otp", emailOtp.toString());
 
 	const response = await fetch(
-		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}api/user`,
+		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
 		{
 			method: "PUT",
 			body: formData,
@@ -193,13 +186,252 @@ const handleUpdateProfile = async (
 	};
 };
 
+const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
+	return originalEmail !== currentEmail;
+};
+
+// Memoized ProfileManagement component to prevent unnecessary re-renders
+const ProfileManagement = memo(({ 
+	currentUser, 
+	name, 
+	currentEmail, 
+	originalEmail, 
+	website, 
+	github, 
+	handleSubmit, 
+	isSubmitting, 
+	showOTPDialog, 
+	otpValue, 
+	otpError, 
+	isSendingOTP, 
+	isVerifyingOTP, 
+	handleOTPVerification, 
+	handleResendOTP, 
+	handleCancel,
+	queryClient,
+	handleLogOut,
+	setName,
+	setCurrentEmail,
+	setWebsite,
+	setGithub,
+	setOtpValue,
+	setOtpError
+}: {
+	currentUser: any;
+	name: string;
+	currentEmail: string;
+	originalEmail: string;
+	website: string;
+	github: string;
+	handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+	isSubmitting: boolean;
+	showOTPDialog: boolean;
+	otpValue: string;
+	otpError: string;
+	isSendingOTP: boolean;
+	isVerifyingOTP: boolean;
+	handleOTPVerification: () => void;
+	handleResendOTP: () => void;
+	handleCancel: () => void;
+	queryClient: any;
+	handleLogOut: (queryClient: any, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+	setName: (name: string) => void;
+	setCurrentEmail: (email: string) => void;
+	setWebsite: (website: string) => void;
+	setGithub: (github: string) => void;
+	setOtpValue: (value: string) => void;
+	setOtpError: (error: string) => void;
+}) => (
+	<div className="space-y-6">
+		{/* Profile Information */}
+		<Card>
+			<CardHeader>
+				<div className="flex items-center justify-between">
+					<CardTitle className="flex items-center gap-2">
+						<Settings className="w-5 h-5" />
+						Profile Information
+					</CardTitle>
+					<Button
+						variant="destructive"
+						size="sm"
+						onClick={(e) => handleLogOut(queryClient, e)}
+					>
+						<LogOut className="w-4 h-4 mr-2" />
+						Logout
+					</Button>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-6">
+				<div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-gradient-subtle rounded-lg border border-border/50">
+					<Avatar className="w-24 h-24 ring-2 ring-primary/20">
+						{currentUser.github ? (
+							<AvatarImage
+								src={`https://avatars.githubusercontent.com/${currentUser.github}`}
+								alt={currentUser.name}
+							/>
+						) : null}
+						<AvatarFallback className="text-2xl bg-gradient-primary text-white">
+							{currentUser.name
+								.split(" ")
+								.map((n) => n[0])
+								.join("")}
+						</AvatarFallback>
+					</Avatar>
+					<div className="flex-1 text-center sm:text-left">
+						<h3 className="text-xl font-semibold">{currentUser.name}</h3>
+						<p className="text-muted-foreground">{currentUser.email}</p>
+						<div className="flex items-center justify-center sm:justify-start gap-2 mt-2">
+							<Badge variant="outline">{currentUser.role}</Badge>
+							{currentUser.verified && (
+								<Badge variant="default" className="bg-green-500">
+									Verified
+								</Badge>
+							)}
+						</div>
+					</div>
+					<Button variant="outline" size="sm">
+						Change Avatar
+					</Button>
+				</div>
+				<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<Label htmlFor="name">Full Name</Label>
+							<Input 
+								id="name" 
+								name="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="email">Email</Label>
+							<Input
+								id="email"
+								name="email"
+								type="email"
+								value={currentEmail}
+								onChange={(e) => setCurrentEmail(e.target.value)}
+							/>
+							{/* Visual indicator when email has changed */}
+							{hasEmailChanged(originalEmail, currentEmail) && (
+								<p className="text-sm text-orange-600 mt-1">
+									Email will be changed from: {originalEmail}
+								</p>
+							)}
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="website">Website</Label>
+							<Input 
+								id="website" 
+								name="website"
+								value={website}
+								onChange={(e) => setWebsite(e.target.value)}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="github">GitHub</Label>
+							<Input 
+								id="github" 
+								name="github"
+								value={github}
+								onChange={(e) => setGithub(e.target.value)}
+							/>
+						</div>
+					</div>
+
+					<Button
+						className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
+						type="submit"
+						disabled={isSubmitting}
+					>
+						{isSubmitting ? "Updating..." : "Update Profile"}
+					</Button>
+				</form>
+
+				{/* Radix-UI Dialog for OTP Verification */}
+
+				<Dialog open={showOTPDialog} onOpenChange={() => {}}>
+					<DialogContent className="sm:max-w-md">
+						<DialogTitle>Verify Your New Email</DialogTitle>
+						<DialogDescription>
+							We've sent a 6-digit verification code to{" "}
+							<strong>{currentEmail}</strong>. Please enter the code below to
+							confirm your email change.
+						</DialogDescription>
+
+						<div className="space-y-4">
+							<div>
+								<Label htmlFor="otp">Verification Code</Label>
+								<Input
+									id="otp"
+									type="text"
+									value={otpValue}
+									onChange={(e) => {
+										const value = e.target.value
+											.replace(/\D/g, "")
+											.slice(0, 6);
+										setOtpValue(value);
+										setOtpError("");
+									}}
+									placeholder="Enter 6-digit code"
+									maxLength={6}
+									className="text-center text-lg tracking-widest"
+								/>
+								{otpError && (
+									<p className="text-sm text-destructive mt-1">{otpError}</p>
+								)}
+							</div>
+
+							<div className="text-center">
+								<Button
+									variant="link"
+									onClick={handleResendOTP}
+									disabled={isSendingOTP}
+								>
+									{isSendingOTP ? "Sending..." : "Resend Code"}
+								</Button>
+							</div>
+
+							<div className="flex gap-2 pt-4">
+								<Button
+									onClick={handleOTPVerification}
+									disabled={isVerifyingOTP || !otpValue.trim()}
+									className="flex-1"
+								>
+									{isVerifyingOTP ? "Verifying..." : "Verify & Update"}
+								</Button>
+								<Button
+									variant="outline"
+									onClick={handleCancel}
+									className="flex-1"
+								>
+									Cancel
+								</Button>
+							</div>
+						</div>
+					</DialogContent>
+				</Dialog>
+			</CardContent>
+		</Card>
+
+		{/* Payment Methods */}
+		<PaymentMethods />
+	</div>
+));
+
 export default function Dashboard() {
 	// states
-	const [activeTab, setActiveTab] = useState("overview");
+	// const [activeTab, setActiveTab] = useState("overview");
 	const [formData, setFormData] = useState(new FormData());
-	const [originalEmail, setOriginalEmail] = useState<string>();
+	const [originalEmail, setOriginalEmail] = useState<string>("");
 	const [currentEmail, setCurrentEmail] = useState<string>("");
 	const [pluginSearchQuery, setPluginSearchQuery] = useState("");
+	
+	// Form input states
+	const [name, setName] = useState("");
+	const [website, setWebsite] = useState("");
+	const [github, setGithub] = useState("");
 
 	// State to control when the OTP dialog should be open
 	const [showOTPDialog, setShowOTPDialog] = useState(false);
@@ -215,44 +447,7 @@ export default function Dashboard() {
 	// State for Error Msgs.
 	const [otpError, setOtpError] = useState("");
 
-	const userMutation = useMutation({
-		mutationFn: async (body: {
-			formData: FormData;
-			currentUser: User;
-			emailOtp?: number;
-		}) =>
-			await handleUpdateProfile(body.formData, body.currentUser, body.emailOtp),
-		onSuccess: async (data) => {
-			const { statusCode, body } = data;
-
-			// handleUpdateProfile, handles 401. & redirects the User.
-			if (statusCode !== 401 && body.message) {
-				toast({
-					title: "Successfully Updated - User Profile",
-					description: `${body.message}` || "User Updated",
-				});
-				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
-
-				setIsSubmitting(false);
-				setIsVerifyingOTP(false);
-				setOriginalEmail(currentEmail);
-				return;
-			}
-
-			return;
-		},
-		onError: (error) => {
-			toast({
-				title: "Failed to Update Profile",
-				description: `${error.message}`,
-				variant: "destructive",
-			});
-
-			setOtpError(`${error.message}`);
-			return;
-		},
-	});
-
+	// All hooks must be called before any conditional returns
 	const queryClient = useQueryClient();
 	const deletePluginMutation = useDeletePlugin();
 	const {
@@ -261,98 +456,26 @@ export default function Dashboard() {
 		isLoading,
 		...args
 	} = useLoggedInUser();
-	const {
-		data: userPlugins,
-		isLoading: isPluginsLoading,
-		error: pluginsError,
-		...pluginArgs
-	} = useQuery({
-		queryKey: ["loggedInUser", "plugins"],
-		staleTime: 2 * 60 * 1000, // 2 minutes
-		gcTime: 10 * 60 * 1000, // 10 minutes
-		refetchOnWindowFocus: false,
-		queryFn: async () => {
-			const response = await fetch(
-				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/plugin?user=${currentLoggedUser.id}`,
-			);
-			const data = response.headers
-				.get("content-type")
-				.includes("application/json")
-				? await response.json()
-				: null;
 
-			if (!response.ok) {
-				throw new Error(
-					`Could not get Your Plugins (request status code: ${response.status})`,
-				);
-			}
-
-			return data;
-		},
-		enabled: !!currentLoggedUser?.id,
-	});
-
-	console.log(
-		"Logged In User: ",
-		currentLoggedUser,
-		"IsError: ",
-		isError,
-		"isLoading: ",
-		isLoading,
-		"Args: ",
-		args,
-	);
-	console.log(userPlugins, isPluginsLoading, pluginsError, pluginArgs);
-	if (isError) {
-		toast({
-			title: "User Not Logged in. redirecting...",
-		});
-		//
-		// setTimeout(() => {
-		//   window.location.href = "/login"
-		// }, 1000)
-		return;
-	}
-
-	if (isLoading) {
-		return <LoadingDashboard />;
-	}
-
-	// also using mocked data for now.
-	const currentUser = {
+	// Memoize currentUser to prevent unnecessary re-renders
+	const currentUser = useMemo(() => ({
 		...currentMockUser,
 		...currentLoggedUser,
-	};
-
-	// Filter plugins based on search query
-	const filteredUserPlugins =
-		userPlugins?.filter(
-			(plugin) =>
-				plugin.name.toLowerCase().includes(pluginSearchQuery.toLowerCase()) ||
-				plugin.author?.toLowerCase().includes(pluginSearchQuery.toLowerCase()),
-		) || [];
-	// useEffect(() => setCurrentEmail(currentUser.email), [currentLoggedUser.email]);
-
-	const handleDeletePlugin = async (
-		pluginId: string,
-		mode: "soft" | "hard",
-	) => {
-		try {
-			await deletePluginMutation.mutateAsync({ pluginId, mode });
-			toast({
-				title: "Plugin Deleted",
-				description: `Plugin ${mode === "hard" ? "permanently deleted" : "deleted"} successfully`,
-			});
-		} catch (error) {
-			toast({
-				title: "Delete Failed",
-				description: "Failed to delete plugin. Please try again.",
-				variant: "destructive",
-			});
+	}), [currentLoggedUser]);
+
+	useEffect(() => {
+		if (currentLoggedUser?.email) {
+			console.log("useEffect :: setCurrentEmail")
+			setCurrentEmail(currentUser.email);
+			setOriginalEmail(currentUser.email);
+			setName(currentUser.name || "");
+			setWebsite(currentUser.website || "");
+			setGithub(currentUser.github || "");
 		}
-	};
+	}, [currentUser.email, currentUser.name, currentUser.website, currentUser.github]);
 
-	const UserDashboard = () => (
+	// Memoize UserDashboard component to prevent unnecessary re-renders
+	const UserDashboard = useMemo(() => (
 		<div className="space-y-6">
 			{/* Overview Grid */}
 			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -387,12 +510,110 @@ export default function Dashboard() {
 				</div>
 			</div>
 		</div>
-	);
+	), []);
+
+
+	// const {
+	// 	data: userPlugins,
+	// 	isLoading: isPluginsLoading,
+	// 	error: pluginsError,
+	// 	...pluginArgs
+	// } = useQuery({
+	// 	queryKey: ["loggedInUser", "plugins"],
+	// 	staleTime: 2 * 60 * 1000, // 2 minutes
+	// 	gcTime: 10 * 60 * 1000, // 10 minutes
+	// 	refetchOnWindowFocus: false,
+	// 	queryFn: async () => {
+	// 		const response = await fetch(
+	// 			`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/plugin?user=${currentLoggedUser.id}`,
+	// 		);
+	// 		const data = response.headers
+	// 			.get("content-type")
+	// 			.includes("application/json")
+	// 			? await response.json()
+	// 			: null;
+
+	// 		if (!response.ok) {
+	// 			throw new Error(
+	// 				`Could not get Your Plugins (request status code: ${response.status})`,
+	// 			);
+	// 		}
+
+	// 		return data;
+	// 	},
+	// 	enabled: !!currentLoggedUser?.id,
+	// });
 
-	// Profile Management Utils
-	const hasEmailChanged = () => {
-		return originalEmail !== currentEmail;
-	};
+	const userMutation = useMutation({
+		mutationFn: async (body: {
+			formData: FormData;
+			currentUser: User;
+			emailOtp?: number;
+		}) =>
+			await handleUpdateProfile(body.formData, body.currentUser, body.emailOtp),
+		onSuccess: async (data) => {
+			const { statusCode, body } = data;
+
+			// handleUpdateProfile, handles 401. & redirects the User.
+			if (statusCode !== 401 && body.message) {
+				toast({
+					title: "Successfully Updated - User Profile",
+					description: `${body.message}` || "User Updated",
+				});
+				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
+
+				setIsSubmitting(false);
+				setIsVerifyingOTP(false);
+				setOriginalEmail(currentEmail);
+				return;
+			}
+
+			return;
+		},
+		onError: (error) => {
+			toast({
+				title: "Failed to Update Profile",
+				description: `${error.message}`,
+				variant: "destructive",
+			});
+			setIsSubmitting(false)
+			setOtpError(`${error.message}`);
+			return;
+		},
+	});
+
+	console.log(
+		"Logged In User: ",
+		currentLoggedUser,
+		"IsError: ",
+		isError,
+		"isLoading: ",
+		isLoading,
+		"Args: ",
+		args,
+	);
+	// console.log(userPlugins, isPluginsLoading, pluginsError, pluginArgs);
+
+	// const handleDeletePlugin = async (
+	// 	pluginId: string,
+	// 	mode: "soft" | "hard",
+	// ) => {
+	// 	try {
+	// 		await deletePluginMutation.mutateAsync({ pluginId, mode });
+	// 		toast({
+	// 			title: "Plugin Deleted",
+	// 			description: `Plugin ${mode === "hard" ? "permanently deleted" : "deleted"} successfully`,
+	// 		});
+	// 	} catch (error) {
+	// 		toast({
+	// 			title: "Delete Failed",
+	// 			description: "Failed to delete plugin. Please try again.",
+	// 			variant: "destructive",
+	// 		});
+	// 	}
+	// };
+
+	// Profile Management Utils - memoize callback functions
 
 	const sendOTPToNewEmail = async (
 		email: string,
@@ -428,12 +649,32 @@ export default function Dashboard() {
 		}
 	};
 
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
+	const handleActualSubmit = useCallback(async (emailOtp?: number) => {
+		setIsSubmitting(true);
 
-		setFormData(new FormData(e.target as HTMLFormElement));
+		userMutation.mutate({
+			formData,
+			currentUser,
+			emailOtp,
+		});
 
-		if (hasEmailChanged()) {
+		// not resetting the states here,
+		// as we don't know if it success or failed. We clear/set updated states in mutation itself.
+	}, [formData, currentUser, userMutation]);
+
+	const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		// Create FormData from current form state
+		const newFormData = new FormData();
+		newFormData.append("name", name);
+		newFormData.append("email", currentEmail);
+		newFormData.append("website", website);
+		newFormData.append("github", github);
+		
+		console.log("handleSubmit", formData)
+		setFormData(newFormData);
+
+		if (hasEmailChanged(originalEmail, currentEmail)) {
 			// Email has changed, show OTP dialog and send OTP
 			setShowOTPDialog(true);
 
@@ -452,24 +693,10 @@ export default function Dashboard() {
 		} else {
 			await handleActualSubmit();
 		}
-	};
-
-	const handleActualSubmit = async (emailOtp?: number) => {
-		setIsSubmitting(true);
+	}, [name, currentEmail, website, github, originalEmail, sendOTPToNewEmail, handleActualSubmit]);
 
-		userMutation.mutate({
-			formData,
-			currentUser,
-			emailOtp,
-		});
-
-		// not resetting the states here,
-		// as we don't know if it success or failed. We clear/set updated states in mutation itself.
-	};
-
-	// Handle OTP verification
-
-	const handleOTPVerification = async () => {
+	// Handle OTP verification - memoize callback
+	const handleOTPVerification = useCallback(async () => {
 		if (!otpValue.trim()) {
 			setOtpError("Please enter the OTP");
 			return;
@@ -484,317 +711,48 @@ export default function Dashboard() {
 		} else {
 			setOtpError("Invalid OTP. Please check and try again.");
 		}
-	};
+	}, [otpValue, handleActualSubmit]);
 
-	// Handle when user cancels the OTP dialog
-	const handleCancel = () => {
+	// Handle when user cancels the OTP dialog - memoize callback
+	const handleCancel = useCallback(() => {
 		setShowOTPDialog(false);
 		setOtpValue("");
 		setOtpError("");
 		// Optionally reset the email to original value
 		setCurrentEmail(originalEmail);
-	};
+	}, [originalEmail]);
 
-	// Handle resending OTP
-	const handleResendOTP = async () => {
+	// Handle resending OTP - memoize callback
+	const handleResendOTP = useCallback(async () => {
 		setOtpValue(""); // Clear current OTP input
 		await sendOTPToNewEmail(currentEmail);
-	};
-
-	const ProfileManagement = () => (
-		<div className="space-y-6">
-			{/* Profile Information */}
-			<Card>
-				<CardHeader>
-					<div className="flex items-center justify-between">
-						<CardTitle className="flex items-center gap-2">
-							<Settings className="w-5 h-5" />
-							Profile Information
-						</CardTitle>
-						<Button
-							variant="destructive"
-							size="sm"
-							onClick={(e) => handleLogOut(queryClient, e)}
-						>
-							<LogOut className="w-4 h-4 mr-2" />
-							Logout
-						</Button>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					<div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-gradient-subtle rounded-lg border border-border/50">
-						<Avatar className="w-24 h-24 ring-2 ring-primary/20">
-							{currentUser.github ? (
-								<AvatarImage
-									src={`https://avatars.githubusercontent.com/${currentUser.github}`}
-									alt={currentUser.name}
-								/>
-							) : null}
-							<AvatarFallback className="text-2xl bg-gradient-primary text-white">
-								{currentUser.name
-									.split(" ")
-									.map((n) => n[0])
-									.join("")}
-							</AvatarFallback>
-						</Avatar>
-						<div className="flex-1 text-center sm:text-left">
-							<h3 className="text-xl font-semibold">{currentUser.name}</h3>
-							<p className="text-muted-foreground">{currentUser.email}</p>
-							<div className="flex items-center justify-center sm:justify-start gap-2 mt-2">
-								<Badge variant="outline">{currentUser.role}</Badge>
-								{currentUser.verified && (
-									<Badge variant="default" className="bg-green-500">
-										Verified
-									</Badge>
-								)}
-							</div>
-						</div>
-						<Button variant="outline" size="sm">
-							Change Avatar
-						</Button>
-					</div>
-					<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-							<div className="space-y-2">
-								<Label htmlFor="name">Full Name</Label>
-								<Input id="name" defaultValue={currentUser.name} />
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="email">Email</Label>
-								<Input
-									id="email"
-									type="email"
-									defaultValue={currentUser.email}
-									onChange={(e) => setCurrentEmail(e.target.value)}
-								/>
-								{/* Visual indicator when email has changed */}
-								{hasEmailChanged() && (
-									<p className="text-sm text-orange-600 mt-1">
-										Email will be changed from: {originalEmail}
-									</p>
-								)}
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="website">Website</Label>
-								<Input id="website" defaultValue={currentUser.website} />
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="github">GitHub</Label>
-								<Input id="github" defaultValue={currentUser.github} />
-							</div>
-						</div>
-
-						<Button
-							className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
-							type="submit"
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Updating..." : "Update Profile"}
-						</Button>
-					</form>
-
-					{/* Radix-UI Dialog for OTP Verification */}
-
-					<Dialog open={showOTPDialog} onOpenChange={setShowOTPDialog}>
-						<DialogContent className="sm:max-w-md">
-							<DialogTitle>Verify Your New Email</DialogTitle>
-							<DialogDescription>
-								We've sent a 6-digit verification code to{" "}
-								<strong>{currentEmail}</strong>. Please enter the code below to
-								confirm your email change.
-							</DialogDescription>
-
-							<div className="space-y-4">
-								<div>
-									<Label htmlFor="otp">Verification Code</Label>
-									<Input
-										id="otp"
-										type="text"
-										value={otpValue}
-										onChange={(e) => {
-											const value = e.target.value
-												.replace(/\D/g, "")
-												.slice(0, 6);
-											setOtpValue(value);
-											setOtpError("");
-										}}
-										placeholder="Enter 6-digit code"
-										maxLength={6}
-										className="text-center text-lg tracking-widest"
-									/>
-									{otpError && (
-										<p className="text-sm text-destructive mt-1">{otpError}</p>
-									)}
-								</div>
-
-								<div className="text-center">
-									<Button
-										variant="link"
-										onClick={handleResendOTP}
-										disabled={isSendingOTP}
-									>
-										{isSendingOTP ? "Sending..." : "Resend Code"}
-									</Button>
-								</div>
-
-								<div className="flex gap-2 pt-4">
-									<Button
-										onClick={handleOTPVerification}
-										disabled={isVerifyingOTP || !otpValue.trim()}
-										className="flex-1"
-									>
-										{isVerifyingOTP ? "Verifying..." : "Verify & Update"}
-									</Button>
-									<Button
-										variant="outline"
-										onClick={handleCancel}
-										className="flex-1"
-									>
-										Cancel
-									</Button>
-								</div>
-							</div>
-						</DialogContent>
-					</Dialog>
-				</CardContent>
-			</Card>
+	}, [currentEmail, sendOTPToNewEmail]);
 
-			{/* Payment Methods */}
-			<PaymentMethods />
-		</div>
-	);
 
-	const DetailedEarningsOverview = () => (
-		<div className="space-y-6">
-			{/* Quick Stats */}
-			<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">
-							Total Earnings
-						</CardTitle>
-						<DollarSign className="h-4 w-4 text-muted-foreground" />
-					</CardHeader>
-					<CardContent>
-						{/*<div className="text-2xl font-bold">${currentUser.totalEarnings.toFixed(2)}</div>*/}
-						<div className="text-2xl font-bold">0</div>
-						<p className="text-xs text-muted-foreground">
-							Available for withdrawal
-						</p>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">This Month</CardTitle>
-						<BarChart3 className="h-4 w-4 text-muted-foreground" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">$89.99</div>
-						<p className="text-xs text-muted-foreground">
-							+12% from last month
-						</p>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">
-							Pending Payment
-						</CardTitle>
-						<Wallet className="h-4 w-4 text-muted-foreground" />
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">$156.78</div>
-						<p className="text-xs text-muted-foreground">
-							Next payment: Feb 15
-						</p>
-					</CardContent>
-				</Card>
-			</div>
+	if (isError) {
+		console.log("User Not Logged in. redirecting...")
+		//
+		// setTimeout(() => {
+		//   window.location.href = "/login"
+		// }, 1000)
+		return (
+			<div className="min-h-80 bg-gradient-dark flex flex-col items-center justify-center">
+					<XCircle className="w-16 h-16 text-destructive mb-4" />
+					<h2 className="text-2xl font-bold mb-2 text-primary-foreground">User Not Logged In.</h2>
+					<p className="text-muted-foreground mb-6 max-w-md">
+						You're not logged in! Redirecting...
+					</p>
+				</div>
+		);
+	}
 
-			{/* Quick Actions */}
-			<Card>
-				<CardHeader>
-					<CardTitle>Quick Actions</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="flex flex-wrap gap-4">
-						<Link to="/earnings">
-							<Button className="bg-gradient-primary">
-								<BarChart3 className="w-4 h-4 mr-2" />
-								View Detailed Earnings
-							</Button>
-						</Link>
-						<Button variant="outline">
-							<CreditCard className="w-4 h-4 mr-2" />
-							Request Payout
-						</Button>
-						<Button variant="outline">
-							<Building2 className="w-4 h-4 mr-2" />
-							Update Bank Details
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-
-			{/* Recent Transactions */}
-			<Card>
-				<CardHeader>
-					<CardTitle>Recent Transactions</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="space-y-4">
-						{[
-							{
-								date: "2024-01-28",
-								amount: 2.99,
-								plugin: "Git Manager",
-								type: "Sale",
-							},
-							{
-								date: "2024-01-27",
-								amount: 1.99,
-								plugin: "Code Formatter Pro",
-								type: "Sale",
-							},
-							{
-								date: "2024-01-26",
-								amount: 4.99,
-								plugin: "My Theme Studio",
-								type: "Sale",
-							},
-						].map((transaction, index) => (
-							<div
-								key={index}
-								className="flex items-center justify-between p-3 border border-border/50 rounded-lg"
-							>
-								<div>
-									<h4 className="font-medium">{transaction.plugin}</h4>
-									<p className="text-sm text-muted-foreground">
-										{transaction.type} • {transaction.date}
-									</p>
-								</div>
-								<div className="text-right">
-									<p className="font-medium text-primary">
-										+${transaction.amount.toFixed(2)}
-									</p>
-								</div>
-							</div>
-						))}
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
+	// if (isLoading) {
+	// 	console.log("showing loading Dashboard")
+	// 	return <LoadingDashboard />;
+	// }
 
-	return isLoading ? (
-		<div className="min-h-screen bg-gradient-dark flex items-center justify-center">
-			<div className="text-center">
-				<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-				<p className="text-muted-foreground">Loading dashboard...</p>
-			</div>
-		</div>
+	return isLoading || isError ? (
+		<LoadingDashboard />
 	) : (
 		<div className="container mx-auto px-4 py-8">
 			{/* Header */}
@@ -830,18 +788,43 @@ export default function Dashboard() {
 			</div>
 
 			{/* Tabs */}
-			<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+			<Tabs defaultValue="overview" className="w-full">
 				<TabsList className="grid w-full grid-cols-2">
 					<TabsTrigger value="overview">Overview</TabsTrigger>
 					<TabsTrigger value="profile">Profile</TabsTrigger>
 				</TabsList>
 
 				<TabsContent value="overview" className="space-y-6 mt-6">
-					<UserDashboard />
+					{UserDashboard}
 				</TabsContent>
 
 				<TabsContent value="profile" className="space-y-6 mt-6">
-					<ProfileManagement />
+					<ProfileManagement
+						currentUser={currentUser}
+						name={name}
+						currentEmail={currentEmail}
+						originalEmail={originalEmail}
+						website={website}
+						github={github}
+						handleSubmit={handleSubmit}
+						isSubmitting={isSubmitting}
+						showOTPDialog={showOTPDialog}
+						otpValue={otpValue}
+						otpError={otpError}
+						isSendingOTP={isSendingOTP}
+						isVerifyingOTP={isVerifyingOTP}
+						handleOTPVerification={handleOTPVerification}
+						handleResendOTP={handleResendOTP}
+						handleCancel={handleCancel}
+						queryClient={queryClient}
+						handleLogOut={handleLogOut}
+						setName={setName}
+						setCurrentEmail={setCurrentEmail}
+						setWebsite={setWebsite}
+						setGithub={setGithub}
+						setOtpValue={setOtpValue}
+						setOtpError={setOtpError}
+					/>
 				</TabsContent>
 			</Tabs>
 		</div>

From c9fcb8ddd98cde9b87993e43b0cc9e33f9b7527c Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Fri, 31 Oct 2025 21:47:40 +0530
Subject: [PATCH 02/14] Improve dashboard and login functionalities

- Move profileManagement to it's own component, to avoid states cluttering on parent component
- Adds `.env*` and `certs` to `.gitignore` to ignore environmental and setup files.
- Introduces lazy loading for images in the UserPluginsOverview component to improve performance.
- Refactors Dashboard, Login and Plugins pages to use `useNavigate` hook instead of `window.location.href` to improve routing.
---
 .gitignore                                    |   7 +
 .../dashboard/profile-management.tsx          | 572 +++++++++++
 .../dashboard/user-plugins-overview.tsx       |   3 +
 src/pages/Dashboard.tsx                       | 931 +++++++-----------
 src/pages/Login.tsx                           |   6 +-
 src/pages/Plugins.tsx                         |   5 +-
 src/pages/Signup.tsx                          |   1 -
 7 files changed, 953 insertions(+), 572 deletions(-)
 create mode 100644 src/components/dashboard/profile-management.tsx

diff --git a/.gitignore b/.gitignore
index a547bf3..30d38e6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# ignore Environmental & setup Files
+.env
+.env.production
+.env.prod
+*/certs/**
+_cert.pem
\ No newline at end of file
diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
new file mode 100644
index 0000000..4dac8d7
--- /dev/null
+++ b/src/components/dashboard/profile-management.tsx
@@ -0,0 +1,572 @@
+import {
+	BarChart3,
+	Building2,
+	CheckCircle,
+	Clock,
+	CreditCard,
+	DollarSign,
+	Edit,
+	Eye,
+	LogOut,
+	Plus,
+	Settings,
+	Shield,
+	X,
+	XCircle,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState, useRef, memo } from "react";
+import { Link, redirect, useNavigate } from "react-router-dom";
+import { type QueryClient, useMutation, useQueryClient } from "@tanstack/react-query";
+import { PaymentMethods } from "@/components/dashboard/payment-methods";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DeletePluginDialog } from "@/components/ui/delete-plugin-dialog";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/hooks/use-toast.ts";
+import { User } from "@/types";
+
+// Mock user data
+const currentMockUser = {
+	name: "John Doe",
+	email: "john@example.com",
+	role: "user", // "user" or "admin"
+	avatar: "JD",
+	joinDate: "2024-01-15",
+	bio: "Full-stack developer passionate about mobile development and creating tools that enhance productivity.",
+	website: "https://johndoe.dev",
+	github: "johndoe",
+	location: "San Francisco, CA",
+	totalEarnings: 245.67,
+	bankAccount: {
+		accountHolder: "John Doe",
+		bankName: "Chase Bank",
+		accountNumber: "****1234",
+		routingNumber: "****567",
+	},
+};
+
+/**
+ * Handles the user log out process.
+ * This function typically invalidates or removes local authentication data,
+ * cleans up the cache, and redirects the user.
+ * @param {import('@tanstack/react-query').QueryClient} queryClient - The TanStack Query client instance to manage and clear the cache.
+ * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} e - The React mouse event from the button click.
+ * @param {(to: string) => void} handleRedirect - A callback function used to redirect the user to a new URL after successful log out.
+ * It accepts a single string parameter `to` which is the destination URL (e.g., '/login').
+ * @returns {Promise<void>} A promise that resolves when the log out process is complete.
+ */
+const handleLogOut = async (
+	queryClient: QueryClient,
+	e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+	handleRedirect: (to: string) => void,
+): Promise<void> => {
+	// invalidate the Access Token received while Login.
+	try {
+		const response = await fetch(
+			`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
+			{
+				method: "DELETE",
+				credentials: "include",
+			},
+		);
+
+		const responseData =
+			response.headers.get("content-type") === "application/json"
+				? await response.json()
+				: null;
+		if (responseData?.error || !response.ok) {
+			toast({
+				title: "Unable to Log Out!",
+				description:
+					responseData.error ||
+					`Something went wrong, server responded empty (request status code: ${response.status}). Please try again.`,
+			});
+			// Bad Request, in this case means: response as {error: 'Not Logged in'}
+			if (response.status === 400) {
+				setTimeout(() => {
+					handleRedirect("/login");
+				}, 1000);
+			}
+		} else if (response.ok) {
+			toast({
+				title: "Logged Out!",
+				description:
+					responseData.message || "Logged Out Successfully, redirecting....",
+			});
+		}
+
+		await queryClient.invalidateQueries({
+			queryKey: ["loggedInUser"],
+		});
+
+		setTimeout(() => {
+			window.location.href = "/login";
+		}, 1000);
+	} catch (error) {
+		toast({
+			title: "Unable to Log Out!",
+			description: `Something went wrong, server responded empty (error: ${error.message}). Please try again.`,
+		});
+	}
+};
+
+/**
+ * Handles Updating of Profile.
+ * @param formData the formData received from the event or mutation (from Tanstack query).
+ * @param {(to: string) => void} handleRedirect - A callback function used to redirect the user to a new URL after successful log out.
+ * @param emailOtp email OTP only required if Email has been changed/opted to update the email.
+ * @returns 
+ */
+const handleUpdateProfile = async (
+	formData: FormData,
+	handleRedirect: (to: string) => void,
+	emailOtp?: number,
+) => {
+	if (emailOtp) formData.append("otp", emailOtp.toString());
+
+	const response = await fetch(
+		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
+		{
+			method: "PUT",
+			body: formData,
+			credentials: "include",
+		},
+	);
+
+	const responseData = response.headers
+		.get("content-type")
+		.includes("application/json")
+		? await response.json()
+		: null;
+
+	if (responseData?.error || !response.ok) {
+		// Not Logged-In/Authorized
+		if (response.status === 401) {
+			toast({
+				title: "Failed to Update Profile",
+				description: `${responseData?.error} | redirecting....`,
+				variant: "destructive",
+			});
+			setTimeout(() => {
+				handleRedirect("/login");
+			}, 1000);
+			return { statusCode: response.status };
+		}
+
+		const error = new Error(
+			`${responseData?.error}` ||
+				`Failed to Update Profile (request status code: ${response.status}). Please try again.)`,
+		);
+		error["code"] = response.status;
+
+		throw error;
+	}
+
+	return {
+		statusCode: response.status,
+		body: responseData as { message: string },
+	};
+};
+
+const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
+	return originalEmail !== currentEmail;
+};
+
+
+type ProfileManagementProps = {
+	currentUser: User;
+};
+
+// Memoized ProfileManagement component to prevent unnecessary re-renders
+const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
+	const navigate = useNavigate()
+	// Form input states
+	const [name, setName] = useState(currentUser?.name || "");
+	const [currentEmail, setCurrentEmail] = useState(currentUser?.email || "");
+	const [originalEmail, setOriginalEmail] = useState(currentUser?.email || "");
+	const [website, setWebsite] = useState(currentUser?.website || "");
+	const [github, setGithub] = useState(currentUser?.github || "");
+
+	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
+	console.table({ name, originalEmail, currentEmail, website, github })
+
+	// State to control when the OTP dialog should be open
+	const [showOTPDialog, setShowOTPDialog] = useState(false);
+
+	// State to track the OTP input value
+	const otpRef = useRef(null);
+
+	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
+	console.log(otpRef.current)
+
+	// State to track loading states
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isSendingOTP, setIsSendingOTP] = useState(false);
+	const [isVerifyingOTP, setIsVerifyingOTP] = useState(false);
+
+	// State for Error Msgs.
+	const [otpError, setOtpError] = useState("");
+
+	const queryClient = useQueryClient();
+
+	const userMutation = useMutation({
+		mutationFn: async (body: {
+			formData: FormData;
+			currentUser: User;
+			emailOtp?: number;
+		}) =>
+			await handleUpdateProfile(body.formData, (toUrl) => navigate(`${toUrl}`), body.emailOtp),
+		onSuccess: async (data) => {
+			const { statusCode, body } = data;
+
+			// handleUpdateProfile, handles 401. & redirects the User.
+			if (statusCode !== 401 && body.message) {
+				toast({
+					title: "Successfully Updated - User Profile",
+					description: `${body.message}` || "User Updated",
+				});
+				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
+
+				setIsSubmitting(false);
+				setIsVerifyingOTP(false);
+				setOriginalEmail(currentEmail);
+				return;
+			}
+
+			return;
+		},
+		onError: (error) => {
+			toast({
+				title: "Failed to Update Profile",
+				description: `${error.message}`,
+				variant: "destructive",
+			});
+			setIsSubmitting(false)
+			setOtpError(`${error.message}`);
+			setIsVerifyingOTP(false)
+			return;
+		},
+	});
+
+	// Profile Management Utils - memoize callback functions
+
+	const sendOTPToNewEmail = useCallback(async (
+		email: string,
+		type: "reset" | (string & {}) = "signup",
+	) => {
+		console.log({ email, type })
+		setIsSendingOTP(true);
+		const formData = new FormData();
+		formData.append("email", email);
+
+		try {
+			const res = await fetch(
+				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/otp?type=${type}`,
+				{
+					method: "POST",
+					credentials: "include",
+					body: formData,
+					cache: "no-store",
+				}
+			);
+			const responseData = res.headers
+				.get("content-type")
+				.includes("application/json")
+				? await res.json()
+				: null;
+
+			if (!res.ok) {
+				throw new Error(
+					`Email OTP Sending Failed (request status: ${res.status}). As server responded: ${responseData?.error || "empty, Please Try again."}`,
+				);
+			}
+
+			return responseData as { message: string };
+		} catch (error) {
+			setOtpError(
+				`Failed to send OTP(Please Try Again). Error: ${error.message}`,
+			);
+		} finally {
+			setIsSendingOTP(false);
+		}
+	}, []);
+
+	const handleActualSubmit = useCallback(async (emailOtp?: number) => {
+		setIsSubmitting(true);
+
+		// Create FormData from current form state
+		const formData = new FormData();
+		formData.append("name", name);
+		formData.append("email", currentEmail);
+		formData.append("website", website);
+		formData.append("github", github);
+
+		userMutation.mutate({
+			formData,
+			currentUser,
+			emailOtp,
+		});
+
+		// not resetting the states here,
+		// as we don't know if it success or failed. We clear/set updated states in mutation itself.
+	}, [name, currentEmail, website, github, currentUser, userMutation]);
+
+	const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		
+		if (hasEmailChanged(originalEmail, currentEmail)) {
+			// Email has changed, show OTP dialog and send OTP
+			setShowOTPDialog(true);
+
+			// send email OTP
+			await sendOTPToNewEmail(currentEmail).catch((e) => {
+				toast({
+					title: `Email OTP Sending Failed to ${currentEmail} | Try again, by clicking Submit button.`,
+					description: e.message,
+					variant: "destructive",
+				});
+				// not closing the OTP Dialog as User could, click to resend button.
+				return null;
+			});
+
+			return;
+		} else {
+			await handleActualSubmit();
+		}
+	}, [originalEmail, currentEmail, sendOTPToNewEmail, handleActualSubmit]);
+
+	// Handle OTP verification - memoize callback
+	const handleOTPVerification = useCallback(async () => {
+		console.log(otpRef.current?.value)
+		console.log(otpRef.current?.value)
+		if (!otpRef.current?.value?.trim()) {
+			setOtpError("Please enter the OTP");
+			return;
+		}
+
+		setIsVerifyingOTP(true);
+		setOtpError("");
+
+		if (otpRef.current?.value.length === 6 && /^\d+$/.test(otpRef.current?.value)) {
+			// OTP is valid, proceed with form submission
+			await handleActualSubmit(Number(otpRef.current));
+		} else {
+			setOtpError("Invalid OTP. Please check and try again.");
+			setIsVerifyingOTP(false);
+		}
+	}, [otpRef?.current?.value, handleActualSubmit]);
+
+	// Handle when user cancels the OTP dialog - memoize callback
+	const handleCancel = useCallback(() => {
+		setShowOTPDialog(false);
+		otpRef.current.value = "";
+		setOtpError("");
+		if(isVerifyingOTP) setIsVerifyingOTP(false)
+		setCurrentEmail(originalEmail);
+	}, [originalEmail]);
+
+	// Handle resending OTP - memoize callback
+	const handleResendOTP = useCallback(async () => {
+		otpRef.current.value = ""; // Clear current OTP input
+		await sendOTPToNewEmail(currentEmail);
+	}, [currentEmail, sendOTPToNewEmail]);
+
+	return (
+		<div className="space-y-6">
+			{/* Profile Information */}
+			<Card>
+				<CardHeader>
+					<div className="flex items-center justify-between">
+						<CardTitle className="flex items-center gap-2">
+							<Settings className="w-5 h-5" />
+							Profile Information
+						</CardTitle>
+						<Button
+							variant="destructive"
+							size="sm"
+							onClick={(e) => handleLogOut(queryClient, e, (toUrl) => navigate(`${toUrl}`))}
+						>
+							<LogOut className="w-4 h-4 mr-2" />
+							Logout
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					<div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-gradient-subtle rounded-lg border border-border/50">
+						<Avatar className="w-24 h-24 ring-2 ring-primary/20">
+							{currentUser.github ? (
+								<AvatarImage
+									src={`https://avatars.githubusercontent.com/${currentUser.github}`}
+									alt={currentUser.name}
+									loading="lazy"
+								/>
+							) : null}
+							<AvatarFallback className="text-2xl bg-gradient-primary text-white">
+								{currentUser.name
+									.split(" ")
+									.map((n) => n[0])
+									.join("")}
+							</AvatarFallback>
+						</Avatar>
+						<div className="flex-1 text-center sm:text-left">
+							<h3 className="text-xl font-semibold">{currentUser.name}</h3>
+							<p className="text-muted-foreground">{currentUser.email}</p>
+							<div className="flex items-center justify-center sm:justify-start gap-2 mt-2">
+								<Badge variant="outline">{currentUser.role}</Badge>
+								{currentUser.verified && (
+									<Badge variant="default" className="bg-green-500">
+										Verified
+									</Badge>
+								) || ""}
+							</div>
+						</div>
+						<Button variant="outline" size="sm">
+							Change Avatar
+						</Button>
+					</div>
+					<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<div className="space-y-2">
+								<Label htmlFor="name">Full Name</Label>
+								<Input 
+									id="name" 
+									name="name"
+									value={name}
+									onChange={(e) => setName(e.target.value)}
+								/>
+							</div>
+							<div className="space-y-2">
+								<Label htmlFor="email">Email</Label>
+								<Input
+									id="email"
+									name="email"
+									type="email"
+									value={currentEmail}
+									onChange={(e) => setCurrentEmail(e.target.value)}
+								/>
+								{/* Visual indicator when email has changed */}
+								{hasEmailChanged(originalEmail, currentEmail) && (
+									<p className="text-sm text-orange-600 mt-1">
+										Email will be changed from: {originalEmail}
+									</p>
+								)}
+							</div>
+							<div className="space-y-2">
+								<Label htmlFor="website">Website</Label>
+								<Input 
+									id="website" 
+									name="website"
+									value={website}
+									onChange={(e) => setWebsite(e.target.value)}
+								/>
+							</div>
+							<div className="space-y-2">
+								<Label htmlFor="github">GitHub</Label>
+								<Input 
+									id="github" 
+									name="github"
+									value={github}
+									onChange={(e) => setGithub(e.target.value)}
+								/>
+							</div>
+						</div>
+
+						<Button
+							className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
+							type="submit"
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Updating..." : "Update Profile"}
+						</Button>
+					</form>
+
+					{/* Radix-UI Dialog for OTP Verification */}
+
+					<Dialog open={showOTPDialog}>
+						<DialogContent className="sm:max-w-md">
+							<DialogTitle>Verify Your New Email</DialogTitle>
+							<DialogDescription>
+								We've sent a 6-digit verification code to{" "}
+								<strong>{currentEmail}</strong>. Please enter the code below to
+								confirm your email change.
+							</DialogDescription>
+
+							<div className="space-y-4">
+								<div>
+									<Label htmlFor="otp">Verification Code</Label>
+									<Input
+										id="otp"
+										type="text"
+										ref={otpRef}
+										onChange={(e) => {
+											const value = e.target.value
+												.replace(/\D/g, "")
+												.slice(0, 6);
+											otpRef.current.value = value;
+											setOtpError("");
+										}}
+										placeholder="Enter 6-digit code"
+										maxLength={6}
+										className="text-center text-lg tracking-widest"
+									/>
+									{otpError && (
+										<p className="text-sm text-destructive mt-1">{otpError}</p>
+									)}
+								</div>
+
+								<div className="text-center">
+									<Button
+										variant="link"
+										onClick={handleResendOTP}
+										disabled={isSendingOTP}
+									>
+										{isSendingOTP ? "Sending..." : "Resend Code"}
+									</Button>
+								</div>
+
+								<div className="flex gap-2 pt-4">
+									<DialogClose>
+										<Button
+											onClick={handleOTPVerification}
+											disabled={isVerifyingOTP}
+											className="flex-1"
+										>
+											{isVerifyingOTP ? "Verifying..." : "Verify & Update"}
+										</Button>
+									</DialogClose>
+									<DialogClose>	
+										<Button
+											variant="outline"
+											onClick={handleCancel}
+											className="flex-1"
+										>
+											Cancel
+										</Button>
+									</DialogClose>
+								</div>
+							</div>
+						</DialogContent>
+					</Dialog>
+				</CardContent>
+			</Card>
+
+			{/* Payment Methods */}
+			<PaymentMethods />
+		</div>
+	);
+});
+
+export default ProfileManagement;
\ No newline at end of file
diff --git a/src/components/dashboard/user-plugins-overview.tsx b/src/components/dashboard/user-plugins-overview.tsx
index b18f677..50b31a4 100644
--- a/src/components/dashboard/user-plugins-overview.tsx
+++ b/src/components/dashboard/user-plugins-overview.tsx
@@ -119,6 +119,7 @@ export function UserPluginsOverview() {
 	);
 
 	// Reset pagination when filters change
+	// biome-ignore lint/correctness/useExhaustiveDependencies: It's necessary, for resetting of pagination
 	useEffect(() => {
 		setCurrentPage(1);
 	}, [searchQuery, statusFilter, sortBy, sortOrder]);
@@ -328,6 +329,7 @@ export function UserPluginsOverview() {
 												const target = e.target as HTMLImageElement;
 												target.style.display = "none";
 											}}
+											loading="lazy"
 										/>
 										<div className="flex-1 min-w-0">
 											<div className="font-medium truncate">{plugin.name}</div>
@@ -444,6 +446,7 @@ export function UserPluginsOverview() {
 															const target = e.target as HTMLImageElement;
 															target.style.display = "none";
 														}}
+														loading="lazy"
 													/>
 													<div>
 														<div className="font-medium">{plugin.name}</div>
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index e001ecf..68cda0a 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -20,25 +20,15 @@ import {
 	X,
 	XCircle,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState, memo } from "react";
-import { Link } from "react-router-dom";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { EarningsOverview } from "@/components/dashboard/earnings-overview";
-import { PaymentMethods } from "@/components/dashboard/payment-methods";
 import { UserPluginsOverview } from "@/components/dashboard/user-plugins-overview";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DeletePluginDialog } from "@/components/ui/delete-plugin-dialog";
-import {
-	Dialog,
-	DialogClose,
-	DialogContent,
-	DialogDescription,
-	DialogOverlay,
-	DialogPortal,
-	DialogTitle,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -47,6 +37,7 @@ import { toast } from "@/hooks/use-toast.ts";
 import { useDeletePlugin } from "@/hooks/use-user-plugins";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser.ts";
 import { User } from "@/types";
+import ProfileManagement from "@/components/dashboard/profile-management";
 
 // Mock user data
 const currentMockUser = {
@@ -81,375 +72,359 @@ const LoadingDashboard = () => {
 	);
 };
 
-const handleLogOut = async (
-	queryClient: QueryClient,
-	e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-) => {
-	// invalidate the Access Token received while Login.
-	try {
-		const response = await fetch(
-			`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
-			{
-				method: "DELETE",
-				credentials: "include",
-			},
-		);
-
-		const responseData =
-			response.headers.get("content-type") === "application/json"
-				? await response.json()
-				: null;
-		if (responseData?.error || !response.ok) {
-			toast({
-				title: "Unable to Log Out!",
-				description:
-					responseData.error ||
-					`Something went wrong, server responded empty (request status code: ${response.status}). Please try again.`,
-			});
-			// Bad Request, in this case means: response as {error: 'Not Logged in'}
-			if (response.status === 400) {
-				setTimeout(() => {
-					window.location.href = "/login";
-				}, 1000);
-			}
-		} else if (response.ok) {
-			toast({
-				title: "Logged Out!",
-				description:
-					responseData.message || "Logged Out Successfully, redirecting....",
-			});
-		}
-
-		await queryClient.invalidateQueries({
-			queryKey: ["loggedInUser"],
-		});
-
-		setTimeout(() => {
-			window.location.href = "/login";
-		}, 1000);
-	} catch (error) {
-		toast({
-			title: "Unable to Log Out!",
-			description: `Something went wrong, server responded empty (error: ${error.message}). Please try again.`,
-		});
-	}
-};
-
-const handleUpdateProfile = async (
-	formData: FormData,
-	currentUser: User,
-	emailOtp?: number,
-) => {
-	if (emailOtp) formData.append("otp", emailOtp.toString());
-
-	const response = await fetch(
-		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
-		{
-			method: "PUT",
-			body: formData,
-			credentials: "include",
-		},
-	);
-
-	const responseData = response.headers
-		.get("content-type")
-		.includes("application/json")
-		? await response.json()
-		: null;
-
-	if (responseData?.error || !response.ok) {
-		// Not Logged-In/Authorized
-		if (response.status === 401) {
-			toast({
-				title: "Failed to Update Profile",
-				description: `${responseData?.error} | redirecting....`,
-				variant: "destructive",
-			});
-			setTimeout(() => {
-				window.location.href = "/login";
-			}, 1000);
-			return { statusCode: response.status };
-		}
-
-		const error = new Error(
-			`${responseData?.error}` ||
-				`Failed to Update Profile (request status code: ${response.status}). Please try again.)`,
-		);
-		error["code"] = response.status;
-
-		throw error;
-	}
-
-	return {
-		statusCode: response.status,
-		body: responseData as { message: string },
-	};
-};
-
-const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
-	return originalEmail !== currentEmail;
-};
+// Kept for Reference. 
+// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
+// const handleLogOut = async (
+// 	queryClient: QueryClient,
+// 	e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+// ) => {
+// 	// invalidate the Access Token received while Login.
+// 	try {
+// 		const response = await fetch(
+// 			`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
+// 			{
+// 				method: "DELETE",
+// 				credentials: "include",
+// 			},
+// 		);
+
+// 		const responseData =
+// 			response.headers.get("content-type") === "application/json"
+// 				? await response.json()
+// 				: null;
+// 		if (responseData?.error || !response.ok) {
+// 			toast({
+// 				title: "Unable to Log Out!",
+// 				description:
+// 					responseData.error ||
+// 					`Something went wrong, server responded empty (request status code: ${response.status}). Please try again.`,
+// 			});
+// 			// Bad Request, in this case means: response as {error: 'Not Logged in'}
+// 			if (response.status === 400) {
+// 				setTimeout(() => {
+// 					window.location.href = "/login";
+// 				}, 1000);
+// 			}
+// 		} else if (response.ok) {
+// 			toast({
+// 				title: "Logged Out!",
+// 				description:
+// 					responseData.message || "Logged Out Successfully, redirecting....",
+// 			});
+// 		}
+
+// 		await queryClient.invalidateQueries({
+// 			queryKey: ["loggedInUser"],
+// 		});
+
+// 		setTimeout(() => {
+// 			window.location.href = "/login";
+// 		}, 1000);
+// 	} catch (error) {
+// 		toast({
+// 			title: "Unable to Log Out!",
+// 			description: `Something went wrong, server responded empty (error: ${error.message}). Please try again.`,
+// 		});
+// 	}
+// };
+
+// const handleUpdateProfile = async (
+// 	formData: FormData,
+// 	currentUser: User,
+// 	emailOtp?: number,
+// ) => {
+// 	if (emailOtp) formData.append("otp", emailOtp.toString());
+
+// 	const response = await fetch(
+// 		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
+// 		{
+// 			method: "PUT",
+// 			body: formData,
+// 			credentials: "include",
+// 		},
+// 	);
+
+// 	const responseData = response.headers
+// 		.get("content-type")
+// 		.includes("application/json")
+// 		? await response.json()
+// 		: null;
+
+// 	if (responseData?.error || !response.ok) {
+// 		// Not Logged-In/Authorized
+// 		if (response.status === 401) {
+// 			toast({
+// 				title: "Failed to Update Profile",
+// 				description: `${responseData?.error} | redirecting....`,
+// 				variant: "destructive",
+// 			});
+// 			setTimeout(() => {
+// 				window.location.href = "/login";
+// 			}, 1000);
+// 			return { statusCode: response.status };
+// 		}
+
+// 		const error = new Error(
+// 			`${responseData?.error}` ||
+// 				`Failed to Update Profile (request status code: ${response.status}). Please try again.)`,
+// 		);
+// 		error["code"] = response.status;
+
+// 		throw error;
+// 	}
+
+// 	return {
+// 		statusCode: response.status,
+// 		body: responseData as { message: string },
+// 	};
+// };
+
+// const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
+// 	return originalEmail !== currentEmail;
+// };
 
 // Memoized ProfileManagement component to prevent unnecessary re-renders
-const ProfileManagement = memo(({ 
-	currentUser, 
-	name, 
-	currentEmail, 
-	originalEmail, 
-	website, 
-	github, 
-	handleSubmit, 
-	isSubmitting, 
-	showOTPDialog, 
-	otpValue, 
-	otpError, 
-	isSendingOTP, 
-	isVerifyingOTP, 
-	handleOTPVerification, 
-	handleResendOTP, 
-	handleCancel,
-	queryClient,
-	handleLogOut,
-	setName,
-	setCurrentEmail,
-	setWebsite,
-	setGithub,
-	setOtpValue,
-	setOtpError
-}: {
-	currentUser: any;
-	name: string;
-	currentEmail: string;
-	originalEmail: string;
-	website: string;
-	github: string;
-	handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-	isSubmitting: boolean;
-	showOTPDialog: boolean;
-	otpValue: string;
-	otpError: string;
-	isSendingOTP: boolean;
-	isVerifyingOTP: boolean;
-	handleOTPVerification: () => void;
-	handleResendOTP: () => void;
-	handleCancel: () => void;
-	queryClient: any;
-	handleLogOut: (queryClient: any, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-	setName: (name: string) => void;
-	setCurrentEmail: (email: string) => void;
-	setWebsite: (website: string) => void;
-	setGithub: (github: string) => void;
-	setOtpValue: (value: string) => void;
-	setOtpError: (error: string) => void;
-}) => (
-	<div className="space-y-6">
-		{/* Profile Information */}
-		<Card>
-			<CardHeader>
-				<div className="flex items-center justify-between">
-					<CardTitle className="flex items-center gap-2">
-						<Settings className="w-5 h-5" />
-						Profile Information
-					</CardTitle>
-					<Button
-						variant="destructive"
-						size="sm"
-						onClick={(e) => handleLogOut(queryClient, e)}
-					>
-						<LogOut className="w-4 h-4 mr-2" />
-						Logout
-					</Button>
-				</div>
-			</CardHeader>
-			<CardContent className="space-y-6">
-				<div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-gradient-subtle rounded-lg border border-border/50">
-					<Avatar className="w-24 h-24 ring-2 ring-primary/20">
-						{currentUser.github ? (
-							<AvatarImage
-								src={`https://avatars.githubusercontent.com/${currentUser.github}`}
-								alt={currentUser.name}
-							/>
-						) : null}
-						<AvatarFallback className="text-2xl bg-gradient-primary text-white">
-							{currentUser.name
-								.split(" ")
-								.map((n) => n[0])
-								.join("")}
-						</AvatarFallback>
-					</Avatar>
-					<div className="flex-1 text-center sm:text-left">
-						<h3 className="text-xl font-semibold">{currentUser.name}</h3>
-						<p className="text-muted-foreground">{currentUser.email}</p>
-						<div className="flex items-center justify-center sm:justify-start gap-2 mt-2">
-							<Badge variant="outline">{currentUser.role}</Badge>
-							{currentUser.verified && (
-								<Badge variant="default" className="bg-green-500">
-									Verified
-								</Badge>
-							)}
-						</div>
-					</div>
-					<Button variant="outline" size="sm">
-						Change Avatar
-					</Button>
-				</div>
-				<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<Label htmlFor="name">Full Name</Label>
-							<Input 
-								id="name" 
-								name="name"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="email">Email</Label>
-							<Input
-								id="email"
-								name="email"
-								type="email"
-								value={currentEmail}
-								onChange={(e) => setCurrentEmail(e.target.value)}
-							/>
-							{/* Visual indicator when email has changed */}
-							{hasEmailChanged(originalEmail, currentEmail) && (
-								<p className="text-sm text-orange-600 mt-1">
-									Email will be changed from: {originalEmail}
-								</p>
-							)}
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="website">Website</Label>
-							<Input 
-								id="website" 
-								name="website"
-								value={website}
-								onChange={(e) => setWebsite(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="github">GitHub</Label>
-							<Input 
-								id="github" 
-								name="github"
-								value={github}
-								onChange={(e) => setGithub(e.target.value)}
-							/>
-						</div>
-					</div>
-
-					<Button
-						className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
-						type="submit"
-						disabled={isSubmitting}
-					>
-						{isSubmitting ? "Updating..." : "Update Profile"}
-					</Button>
-				</form>
-
-				{/* Radix-UI Dialog for OTP Verification */}
-
-				<Dialog open={showOTPDialog} onOpenChange={() => {}}>
-					<DialogContent className="sm:max-w-md">
-						<DialogTitle>Verify Your New Email</DialogTitle>
-						<DialogDescription>
-							We've sent a 6-digit verification code to{" "}
-							<strong>{currentEmail}</strong>. Please enter the code below to
-							confirm your email change.
-						</DialogDescription>
-
-						<div className="space-y-4">
-							<div>
-								<Label htmlFor="otp">Verification Code</Label>
-								<Input
-									id="otp"
-									type="text"
-									value={otpValue}
-									onChange={(e) => {
-										const value = e.target.value
-											.replace(/\D/g, "")
-											.slice(0, 6);
-										setOtpValue(value);
-										setOtpError("");
-									}}
-									placeholder="Enter 6-digit code"
-									maxLength={6}
-									className="text-center text-lg tracking-widest"
-								/>
-								{otpError && (
-									<p className="text-sm text-destructive mt-1">{otpError}</p>
-								)}
-							</div>
-
-							<div className="text-center">
-								<Button
-									variant="link"
-									onClick={handleResendOTP}
-									disabled={isSendingOTP}
-								>
-									{isSendingOTP ? "Sending..." : "Resend Code"}
-								</Button>
-							</div>
-
-							<div className="flex gap-2 pt-4">
-								<Button
-									onClick={handleOTPVerification}
-									disabled={isVerifyingOTP || !otpValue.trim()}
-									className="flex-1"
-								>
-									{isVerifyingOTP ? "Verifying..." : "Verify & Update"}
-								</Button>
-								<Button
-									variant="outline"
-									onClick={handleCancel}
-									className="flex-1"
-								>
-									Cancel
-								</Button>
-							</div>
-						</div>
-					</DialogContent>
-				</Dialog>
-			</CardContent>
-		</Card>
-
-		{/* Payment Methods */}
-		<PaymentMethods />
-	</div>
-));
-
+// const ProfileManagement = memo(({ 
+// 	currentUser, 
+// 	name, 
+// 	currentEmail, 
+// 	originalEmail, 
+// 	website, 
+// 	github, 
+// 	handleSubmit, 
+// 	isSubmitting, 
+// 	showOTPDialog, 
+// 	otpValue, 
+// 	otpError, 
+// 	isSendingOTP, 
+// 	isVerifyingOTP, 
+// 	handleOTPVerification, 
+// 	handleResendOTP, 
+// 	handleCancel,
+// 	queryClient,
+// 	handleLogOut,
+// 	setName,
+// 	setCurrentEmail,
+// 	setWebsite,
+// 	setGithub,
+// 	setOtpValue,
+// 	setOtpError
+// }: {
+// 	currentUser: any;
+// 	name: string;
+// 	currentEmail: string;
+// 	originalEmail: string;
+// 	website: string;
+// 	github: string;
+// 	handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+// 	isSubmitting: boolean;
+// 	showOTPDialog: boolean;
+// 	otpValue: string;
+// 	otpError: string;
+// 	isSendingOTP: boolean;
+// 	isVerifyingOTP: boolean;
+// 	handleOTPVerification: () => void;
+// 	handleResendOTP: () => void;
+// 	handleCancel: () => void;
+// 	queryClient: any;
+// 	handleLogOut: (queryClient: any, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+// 	setName: (name: string) => void;
+// 	setCurrentEmail: (email: string) => void;
+// 	setWebsite: (website: string) => void;
+// 	setGithub: (github: string) => void;
+// 	setOtpValue: (value: string) => void;
+// 	setOtpError: (error: string) => void;
+// }) => (
+// 	<div className="space-y-6">
+// 		{/* Profile Information */}
+// 		<Card>
+// 			<CardHeader>
+// 				<div className="flex items-center justify-between">
+// 					<CardTitle className="flex items-center gap-2">
+// 						<Settings className="w-5 h-5" />
+// 						Profile Information
+// 					</CardTitle>
+// 					<Button
+// 						variant="destructive"
+// 						size="sm"
+// 						onClick={(e) => handleLogOut(queryClient, e)}
+// 					>
+// 						<LogOut className="w-4 h-4 mr-2" />
+// 						Logout
+// 					</Button>
+// 				</div>
+// 			</CardHeader>
+// 			<CardContent className="space-y-6">
+// 				<div className="flex flex-col sm:flex-row items-center gap-6 p-6 bg-gradient-subtle rounded-lg border border-border/50">
+// 					<Avatar className="w-24 h-24 ring-2 ring-primary/20">
+// 						{currentUser.github ? (
+// 							<AvatarImage
+// 								src={`https://avatars.githubusercontent.com/${currentUser.github}`}
+// 								alt={currentUser.name}
+// 								loading="lazy"
+// 							/>
+// 						) : null}
+// 						<AvatarFallback className="text-2xl bg-gradient-primary text-white">
+// 							{currentUser.name
+// 								.split(" ")
+// 								.map((n) => n[0])
+// 								.join("")}
+// 						</AvatarFallback>
+// 					</Avatar>
+// 					<div className="flex-1 text-center sm:text-left">
+// 						<h3 className="text-xl font-semibold">{currentUser.name}</h3>
+// 						<p className="text-muted-foreground">{currentUser.email}</p>
+// 						<div className="flex items-center justify-center sm:justify-start gap-2 mt-2">
+// 							<Badge variant="outline">{currentUser.role}</Badge>
+// 							{currentUser.verified && (
+// 								<Badge variant="default" className="bg-green-500">
+// 									Verified
+// 								</Badge>
+// 							) || ""}
+// 						</div>
+// 					</div>
+// 					<Button variant="outline" size="sm">
+// 						Change Avatar
+// 					</Button>
+// 				</div>
+// 				<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
+// 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+// 						<div className="space-y-2">
+// 							<Label htmlFor="name">Full Name</Label>
+// 							<Input 
+// 								id="name" 
+// 								name="name"
+// 								value={name}
+// 								onChange={(e) => setName(e.target.value)}
+// 							/>
+// 						</div>
+// 						<div className="space-y-2">
+// 							<Label htmlFor="email">Email</Label>
+// 							<Input
+// 								id="email"
+// 								name="email"
+// 								type="email"
+// 								value={currentEmail}
+// 								onChange={(e) => setCurrentEmail(e.target.value)}
+// 							/>
+// 							{/* Visual indicator when email has changed */}
+// 							{hasEmailChanged(originalEmail, currentEmail) && (
+// 								<p className="text-sm text-orange-600 mt-1">
+// 									Email will be changed from: {originalEmail}
+// 								</p>
+// 							)}
+// 						</div>
+// 						<div className="space-y-2">
+// 							<Label htmlFor="website">Website</Label>
+// 							<Input 
+// 								id="website" 
+// 								name="website"
+// 								value={website}
+// 								onChange={(e) => setWebsite(e.target.value)}
+// 							/>
+// 						</div>
+// 						<div className="space-y-2">
+// 							<Label htmlFor="github">GitHub</Label>
+// 							<Input 
+// 								id="github" 
+// 								name="github"
+// 								value={github}
+// 								onChange={(e) => setGithub(e.target.value)}
+// 							/>
+// 						</div>
+// 					</div>
+
+// 					<Button
+// 						className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
+// 						type="submit"
+// 						disabled={isSubmitting}
+// 					>
+// 						{isSubmitting ? "Updating..." : "Update Profile"}
+// 					</Button>
+// 				</form>
+
+// 				{/* Radix-UI Dialog for OTP Verification */}
+
+// 				<Dialog open={showOTPDialog} onOpenChange={() => {}}>
+// 					<DialogContent className="sm:max-w-md">
+// 						<DialogTitle>Verify Your New Email</DialogTitle>
+// 						<DialogDescription>
+// 							We've sent a 6-digit verification code to{" "}
+// 							<strong>{currentEmail}</strong>. Please enter the code below to
+// 							confirm your email change.
+// 						</DialogDescription>
+
+// 						<div className="space-y-4">
+// 							<div>
+// 								<Label htmlFor="otp">Verification Code</Label>
+// 								<Input
+// 									id="otp"
+// 									type="text"
+// 									value={otpValue}
+// 									onChange={(e) => {
+// 										const value = e.target.value
+// 											.replace(/\D/g, "")
+// 											.slice(0, 6);
+// 										setOtpValue(value);
+// 										setOtpError("");
+// 									}}
+// 									placeholder="Enter 6-digit code"
+// 									maxLength={6}
+// 									className="text-center text-lg tracking-widest"
+// 								/>
+// 								{otpError && (
+// 									<p className="text-sm text-destructive mt-1">{otpError}</p>
+// 								)}
+// 							</div>
+
+// 							<div className="text-center">
+// 								<Button
+// 									variant="link"
+// 									onClick={handleResendOTP}
+// 									disabled={isSendingOTP}
+// 								>
+// 									{isSendingOTP ? "Sending..." : "Resend Code"}
+// 								</Button>
+// 							</div>
+
+// 							<div className="flex gap-2 pt-4">
+// 								<Button
+// 									onClick={handleOTPVerification}
+// 									disabled={isVerifyingOTP || !otpValue.trim()}
+// 									className="flex-1"
+// 								>
+// 									{isVerifyingOTP ? "Verifying..." : "Verify & Update"}
+// 								</Button>
+// 								<Button
+// 									variant="outline"
+// 									onClick={handleCancel}
+// 									className="flex-1"
+// 								>
+// 									Cancel
+// 								</Button>
+// 							</div>
+// 						</div>
+// 					</DialogContent>
+// 				</Dialog>
+// 			</CardContent>
+// 		</Card>
+
+// 		{/* Payment Methods */}
+// 		<PaymentMethods />
+// 	</div>
+// ));
+
+// All hooks must be called before any conditional returns
 export default function Dashboard() {
-	// states
+	// states & Hooks
 	// const [activeTab, setActiveTab] = useState("overview");
-	const [formData, setFormData] = useState(new FormData());
-	const [originalEmail, setOriginalEmail] = useState<string>("");
-	const [currentEmail, setCurrentEmail] = useState<string>("");
-	const [pluginSearchQuery, setPluginSearchQuery] = useState("");
-	
-	// Form input states
-	const [name, setName] = useState("");
-	const [website, setWebsite] = useState("");
-	const [github, setGithub] = useState("");
-
-	// State to control when the OTP dialog should be open
-	const [showOTPDialog, setShowOTPDialog] = useState(false);
-
-	// State to track the OTP input value
-	const [otpValue, setOtpValue] = useState("");
-
-	// State to track loading states
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [isSendingOTP, setIsSendingOTP] = useState(false);
-	const [isVerifyingOTP, setIsVerifyingOTP] = useState(false);
-
-	// State for Error Msgs.
-	const [otpError, setOtpError] = useState("");
-
-	// All hooks must be called before any conditional returns
-	const queryClient = useQueryClient();
-	const deletePluginMutation = useDeletePlugin();
+	// const [pluginSearchQuery, setPluginSearchQuery] = useState("");
+
+	// const queryClient = useQueryClient();
+	// const deletePluginMutation = useDeletePlugin();
+	// Used for Navigation instead of `window.href.location`
+	const navigate = useNavigate()
+
 	const {
 		data: currentLoggedUser,
 		isError,
@@ -463,16 +438,14 @@ export default function Dashboard() {
 		...currentLoggedUser,
 	}), [currentLoggedUser]);
 
+	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
+	console.log(currentUser)
+
 	useEffect(() => {
 		if (currentLoggedUser?.email) {
-			console.log("useEffect :: setCurrentEmail")
-			setCurrentEmail(currentUser.email);
-			setOriginalEmail(currentUser.email);
-			setName(currentUser.name || "");
-			setWebsite(currentUser.website || "");
-			setGithub(currentUser.github || "");
+			console.log("useEffect :: ran on change of currentUser")
 		}
-	}, [currentUser.email, currentUser.name, currentUser.website, currentUser.github]);
+	}, [currentLoggedUser?.email]);
 
 	// Memoize UserDashboard component to prevent unnecessary re-renders
 	const UserDashboard = useMemo(() => (
@@ -544,44 +517,7 @@ export default function Dashboard() {
 	// 	enabled: !!currentLoggedUser?.id,
 	// });
 
-	const userMutation = useMutation({
-		mutationFn: async (body: {
-			formData: FormData;
-			currentUser: User;
-			emailOtp?: number;
-		}) =>
-			await handleUpdateProfile(body.formData, body.currentUser, body.emailOtp),
-		onSuccess: async (data) => {
-			const { statusCode, body } = data;
-
-			// handleUpdateProfile, handles 401. & redirects the User.
-			if (statusCode !== 401 && body.message) {
-				toast({
-					title: "Successfully Updated - User Profile",
-					description: `${body.message}` || "User Updated",
-				});
-				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
-
-				setIsSubmitting(false);
-				setIsVerifyingOTP(false);
-				setOriginalEmail(currentEmail);
-				return;
-			}
-
-			return;
-		},
-		onError: (error) => {
-			toast({
-				title: "Failed to Update Profile",
-				description: `${error.message}`,
-				variant: "destructive",
-			});
-			setIsSubmitting(false)
-			setOtpError(`${error.message}`);
-			return;
-		},
-	});
-
+	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
 	console.log(
 		"Logged In User: ",
 		currentLoggedUser,
@@ -592,6 +528,8 @@ export default function Dashboard() {
 		"Args: ",
 		args,
 	);
+
+	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
 	// console.log(userPlugins, isPluginsLoading, pluginsError, pluginArgs);
 
 	// const handleDeletePlugin = async (
@@ -613,127 +551,13 @@ export default function Dashboard() {
 	// 	}
 	// };
 
-	// Profile Management Utils - memoize callback functions
-
-	const sendOTPToNewEmail = async (
-		email: string,
-		type: "reset" | (string & {}) = "signup",
-	) => {
-		setIsSendingOTP(true);
-		const formData = new FormData();
-		formData.append("email", email);
-
-		try {
-			const res = await fetch(
-				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/otp?type=${type}`,
-			);
-			const responseData = res.headers
-				.get("content-type")
-				.includes("application/json")
-				? await res.json()
-				: null;
-
-			if (!res.ok) {
-				throw new Error(
-					`Email OTP Sending Failed (request status: ${res.status}). As server responded: ${responseData?.error || "empty, Please Try again."}`,
-				);
-			}
-
-			return responseData as { message: string };
-		} catch (error) {
-			setOtpError(
-				`Failed to send OTP(Please Try Again). Error: ${error.message}`,
-			);
-		} finally {
-			setIsSendingOTP(false);
-		}
-	};
-
-	const handleActualSubmit = useCallback(async (emailOtp?: number) => {
-		setIsSubmitting(true);
-
-		userMutation.mutate({
-			formData,
-			currentUser,
-			emailOtp,
-		});
-
-		// not resetting the states here,
-		// as we don't know if it success or failed. We clear/set updated states in mutation itself.
-	}, [formData, currentUser, userMutation]);
-
-	const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		// Create FormData from current form state
-		const newFormData = new FormData();
-		newFormData.append("name", name);
-		newFormData.append("email", currentEmail);
-		newFormData.append("website", website);
-		newFormData.append("github", github);
-		
-		console.log("handleSubmit", formData)
-		setFormData(newFormData);
-
-		if (hasEmailChanged(originalEmail, currentEmail)) {
-			// Email has changed, show OTP dialog and send OTP
-			setShowOTPDialog(true);
-
-			// send email OTP
-			await sendOTPToNewEmail(currentEmail).catch((e) => {
-				toast({
-					title: `Email OTP Sending Failed to ${currentEmail} | Try again, by clicking Submit button.`,
-					description: e.message,
-					variant: "destructive",
-				});
-				// not closing the OTP Dialog as User could, click to resend button.
-				return null;
-			});
-
-			return;
-		} else {
-			await handleActualSubmit();
-		}
-	}, [name, currentEmail, website, github, originalEmail, sendOTPToNewEmail, handleActualSubmit]);
-
-	// Handle OTP verification - memoize callback
-	const handleOTPVerification = useCallback(async () => {
-		if (!otpValue.trim()) {
-			setOtpError("Please enter the OTP");
-			return;
-		}
-
-		setIsVerifyingOTP(true);
-		setOtpError("");
-
-		if (otpValue.length === 6 && /^\d+$/.test(otpValue)) {
-			// OTP is valid, proceed with form submission
-			await handleActualSubmit(Number(otpValue));
-		} else {
-			setOtpError("Invalid OTP. Please check and try again.");
-		}
-	}, [otpValue, handleActualSubmit]);
-
-	// Handle when user cancels the OTP dialog - memoize callback
-	const handleCancel = useCallback(() => {
-		setShowOTPDialog(false);
-		setOtpValue("");
-		setOtpError("");
-		// Optionally reset the email to original value
-		setCurrentEmail(originalEmail);
-	}, [originalEmail]);
-
-	// Handle resending OTP - memoize callback
-	const handleResendOTP = useCallback(async () => {
-		setOtpValue(""); // Clear current OTP input
-		await sendOTPToNewEmail(currentEmail);
-	}, [currentEmail, sendOTPToNewEmail]);
-
 
 	if (isError) {
+		// TODO: Move this to Middleware or make use of contexts.
+		// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
 		console.log("User Not Logged in. redirecting...")
-		//
 		// setTimeout(() => {
-		//   window.location.href = "/login"
+			// navigate("/login")
 		// }, 1000)
 		return (
 			<div className="min-h-80 bg-gradient-dark flex flex-col items-center justify-center">
@@ -746,11 +570,6 @@ export default function Dashboard() {
 		);
 	}
 
-	// if (isLoading) {
-	// 	console.log("showing loading Dashboard")
-	// 	return <LoadingDashboard />;
-	// }
-
 	return isLoading || isError ? (
 		<LoadingDashboard />
 	) : (
@@ -770,6 +589,7 @@ export default function Dashboard() {
 								<AvatarImage
 									src={`https://avatars.githubusercontent.com/${currentUser.github}`}
 									alt={currentUser.name}
+									loading="lazy"
 								/>
 							) : null}
 							<AvatarFallback className="text-2xl">
@@ -801,29 +621,6 @@ export default function Dashboard() {
 				<TabsContent value="profile" className="space-y-6 mt-6">
 					<ProfileManagement
 						currentUser={currentUser}
-						name={name}
-						currentEmail={currentEmail}
-						originalEmail={originalEmail}
-						website={website}
-						github={github}
-						handleSubmit={handleSubmit}
-						isSubmitting={isSubmitting}
-						showOTPDialog={showOTPDialog}
-						otpValue={otpValue}
-						otpError={otpError}
-						isSendingOTP={isSendingOTP}
-						isVerifyingOTP={isVerifyingOTP}
-						handleOTPVerification={handleOTPVerification}
-						handleResendOTP={handleResendOTP}
-						handleCancel={handleCancel}
-						queryClient={queryClient}
-						handleLogOut={handleLogOut}
-						setName={setName}
-						setCurrentEmail={setCurrentEmail}
-						setWebsite={setWebsite}
-						setGithub={setGithub}
-						setOtpValue={setOtpValue}
-						setOtpError={setOtpError}
 					/>
 				</TabsContent>
 			</Tabs>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index fd78e8f..d2ed00f 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,6 +1,6 @@
 import { Eye, EyeOff, Github, Lock, LogIn, Mail } from "lucide-react";
 import { useState } from "react";
-import { Link, redirect, useParams } from "react-router-dom";
+import { Link, redirect, useNavigate, useParams } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -9,11 +9,13 @@ import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/hooks/use-toast";
 
 export default function Login() {
+	// States & Hooks.
 	const [showPassword, setShowPassword] = useState(false);
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 	const { toast } = useToast();
+	const navigate = useNavigate();
 	const params = useParams();
 
 	const handleLogin = async (e: React.FormEvent) => {
@@ -67,7 +69,7 @@ export default function Login() {
 					redirectUrl = `acode://user/login/${responseData.token}`;
 				}
 
-				window.location.href = redirectUrl || "/dashboard";
+				navigate(`${redirectUrl || "/dashboard"}`);
 			}, 1000);
 		} catch (error) {
 			console.error(`Login attempt Failed: `, error);
diff --git a/src/pages/Plugins.tsx b/src/pages/Plugins.tsx
index 6a35855..19765e9 100644
--- a/src/pages/Plugins.tsx
+++ b/src/pages/Plugins.tsx
@@ -7,7 +7,7 @@ import {
 	Trash2,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { DeletePluginDialog } from "@/components/ui/delete-plugin-dialog";
@@ -73,6 +73,7 @@ const adminFilters = [
 	},
 ];
 export default function Plugins() {
+	const navigate = useNavigate()
 	const [searchQuery, setSearchQuery] = useState("");
 	const [selectedFilter, setSelectedFilter] = useState("default");
 
@@ -287,7 +288,7 @@ export default function Plugins() {
 						variant="outline"
 						size="sm"
 						onClick={() => {
-							window.location.href = "/submit-plugin";
+							 navigate("/submit-plugin");
 						}}
 					>
 						<ExternalLink className="w-4 h-4 mr-2" />
diff --git a/src/pages/Signup.tsx b/src/pages/Signup.tsx
index 41e2727..241361a 100644
--- a/src/pages/Signup.tsx
+++ b/src/pages/Signup.tsx
@@ -134,7 +134,6 @@ export default function Signup() {
 				});
 
 				setTimeout(() => {					
-					// window.location.href = `/login${params?.redirect ? `?redirect=${params?.redirect}` : ""}`
 					navigate(`/login${params?.redirect ? `?redirect=${params?.redirect}` : ""}`)
 				}, 2000)
 			} else {

From 339dfe0a18611a9ea408b4fefc91795dc028ff3c Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Sat, 1 Nov 2025 19:35:45 +0530
Subject: [PATCH 03/14] update: profile management and login components

- Updated logout handling to improve user feedback with toast notifications and added redirect functionality.
- Refactored OTP verification process to ensure proper event handling and improved error messaging.
- Adjusted button attributes in the Login component to indicate upcoming features and improved accessibility.
---
 .../dashboard/profile-management.tsx          | 39 +++++++++++++------
 src/pages/Login.tsx                           |  4 +-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index 4dac8d7..54f8871 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -84,7 +84,7 @@ const handleLogOut = async (
 		);
 
 		const responseData =
-			response.headers.get("content-type") === "application/json"
+			response.headers.get("content-type").includes("application/json")
 				? await response.json()
 				: null;
 		if (responseData?.error || !response.ok) {
@@ -93,6 +93,9 @@ const handleLogOut = async (
 				description:
 					responseData.error ||
 					`Something went wrong, server responded empty (request status code: ${response.status}). Please try again.`,
+				duration: 1500,
+				variant: "destructive",
+				type: "background"
 			});
 			// Bad Request, in this case means: response as {error: 'Not Logged in'}
 			if (response.status === 400) {
@@ -102,23 +105,27 @@ const handleLogOut = async (
 			}
 		} else if (response.ok) {
 			toast({
-				title: "Logged Out!",
+				title: "Logged Out! Redirecting....",
 				description:
-					responseData.message || "Logged Out Successfully, redirecting....",
+					responseData.message || "Logged Out Successfully",
+				duration: 4000,
+				type: "background"
 			});
 		}
 
+		setTimeout(() => {
+			handleRedirect("/login")
+		}, 1000);
+
 		await queryClient.invalidateQueries({
 			queryKey: ["loggedInUser"],
 		});
 
-		setTimeout(() => {
-			window.location.href = "/login";
-		}, 1000);
 	} catch (error) {
 		toast({
 			title: "Unable to Log Out!",
-			description: `Something went wrong, server responded empty (error: ${error.message}). Please try again.`,
+			description: `Something went wrong, server responded empty (error: ${error?.message}). Please try again.`,
+			duration: 4000,
 		});
 	}
 };
@@ -159,6 +166,8 @@ const handleUpdateProfile = async (
 				title: "Failed to Update Profile",
 				description: `${responseData?.error} | redirecting....`,
 				variant: "destructive",
+				duration: 1500,
+				type: "background"
 			});
 			setTimeout(() => {
 				handleRedirect("/login");
@@ -207,10 +216,10 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 	const [showOTPDialog, setShowOTPDialog] = useState(false);
 
 	// State to track the OTP input value
-	const otpRef = useRef(null);
+	const otpRef = useRef<HTMLInputElement>(null);
 
 	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
-	console.log(otpRef.current)
+	console.log("otpRef current Value", otpRef.current?.value)
 
 	// State to track loading states
 	const [isSubmitting, setIsSubmitting] = useState(false);
@@ -237,11 +246,13 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 				toast({
 					title: "Successfully Updated - User Profile",
 					description: `${body.message}` || "User Updated",
+					duration: 5000,
 				});
 				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
 
 				setIsSubmitting(false);
 				setIsVerifyingOTP(false);
+				setShowOTPDialog(false);
 				setOriginalEmail(currentEmail);
 				return;
 			}
@@ -253,6 +264,8 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 				title: "Failed to Update Profile",
 				description: `${error.message}`,
 				variant: "destructive",
+				duration: 5000,
+				type: "background"
 			});
 			setIsSubmitting(false)
 			setOtpError(`${error.message}`);
@@ -349,7 +362,9 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 	}, [originalEmail, currentEmail, sendOTPToNewEmail, handleActualSubmit]);
 
 	// Handle OTP verification - memoize callback
-	const handleOTPVerification = useCallback(async () => {
+	const handleOTPVerification = useCallback(async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+		e.preventDefault();
+		e.stopPropagation();
 		console.log(otpRef.current?.value)
 		console.log(otpRef.current?.value)
 		if (!otpRef.current?.value?.trim()) {
@@ -362,7 +377,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 
 		if (otpRef.current?.value.length === 6 && /^\d+$/.test(otpRef.current?.value)) {
 			// OTP is valid, proceed with form submission
-			await handleActualSubmit(Number(otpRef.current));
+			await handleActualSubmit(Number(otpRef.current?.value));
 		} else {
 			setOtpError("Invalid OTP. Please check and try again.");
 			setIsVerifyingOTP(false);
@@ -495,7 +510,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 
 					{/* Radix-UI Dialog for OTP Verification */}
 
-					<Dialog open={showOTPDialog}>
+					<Dialog open={showOTPDialog} onOpenChange={open => !open && handleCancel()}>
 						<DialogContent className="sm:max-w-md">
 							<DialogTitle>Verify Your New Email</DialogTitle>
 							<DialogDescription>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index d2ed00f..b2f1ffe 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -108,11 +108,11 @@ export default function Login() {
 						<div className="space-y-2">
 							<Button
 								variant="outline"
-								className="w-full"
+								className="w-full disabled aria-disabled"
 								onClick={() => handleSocialLogin("GitHub")}
 							>
 								<Github className="w-4 h-4 mr-2" />
-								Continue with GitHub
+								Continue with GitHub (Soon)
 							</Button>
 						</div>
 

From 25436d8cc55c41a54dcfc16f707182177da0be4c Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Sat, 1 Nov 2025 19:36:46 +0530
Subject: [PATCH 04/14] remove(Login): console.log

---
 src/pages/Login.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index b2f1ffe..1ee72c1 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -24,12 +24,6 @@ export default function Login() {
 
 		try {
 			const formData = new FormData(e.target as HTMLFormElement);
-			console.log(
-				formData.get("email"),
-				formData.get("password"),
-				formData.get("password"),
-			);
-			console.log(import.meta.env);
 			const response = await fetch(
 				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
 				{
@@ -44,7 +38,7 @@ export default function Login() {
 				.includes("application/json")
 				? await response.json()
 				: null;
-			console.log(responseData);
+
 			if (responseData?.error || !response.ok) {
 				setIsLoading(false);
 				return toast({

From 2da20b35e08aac7d7298f7482a6cbc70ea551928 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Sat, 1 Nov 2025 19:39:57 +0530
Subject: [PATCH 05/14] refactor(Dashboard): clean up imports and remove mock
 data

- Removed unused imports and mock user data from the Dashboard component.
- Simplified the component structure by retaining only necessary hooks and elements.
- Updated the memoization of the current user to directly use the logged-in user data.
---
 src/pages/Dashboard.tsx | 51 ++---------------------------------------
 1 file changed, 2 insertions(+), 49 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 68cda0a..c9b4861 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,64 +1,20 @@
-import {
-	type QueryClient,
-	useMutation,
-	useQuery,
-	useQueryClient,
-} from "@tanstack/react-query";
 import {
 	BarChart3,
-	Building2,
-	CheckCircle,
-	Clock,
-	CreditCard,
-	DollarSign,
-	Edit,
-	Eye,
-	LogOut,
 	Plus,
-	Settings,
-	Shield,
-	X,
 	XCircle,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useMemo } from "react";
+import { Link } from "react-router-dom";
 import { EarningsOverview } from "@/components/dashboard/earnings-overview";
 import { UserPluginsOverview } from "@/components/dashboard/user-plugins-overview";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { DeletePluginDialog } from "@/components/ui/delete-plugin-dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { toast } from "@/hooks/use-toast.ts";
-import { useDeletePlugin } from "@/hooks/use-user-plugins";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser.ts";
-import { User } from "@/types";
 import ProfileManagement from "@/components/dashboard/profile-management";
 
-// Mock user data
-const currentMockUser = {
-	name: "John Doe",
-	email: "john@example.com",
-	role: "user", // "user" or "admin"
-	avatar: "JD",
-	joinDate: "2024-01-15",
-	bio: "Full-stack developer passionate about mobile development and creating tools that enhance productivity.",
-	website: "https://johndoe.dev",
-	github: "johndoe",
-	location: "San Francisco, CA",
-	totalEarnings: 245.67,
-	bankAccount: {
-		accountHolder: "John Doe",
-		bankName: "Chase Bank",
-		accountNumber: "****1234",
-		routingNumber: "****567",
-	},
-};
-
 // Note: Mock data removed - using real API data
 
 const LoadingDashboard = () => {
@@ -422,8 +378,6 @@ export default function Dashboard() {
 
 	// const queryClient = useQueryClient();
 	// const deletePluginMutation = useDeletePlugin();
-	// Used for Navigation instead of `window.href.location`
-	const navigate = useNavigate()
 
 	const {
 		data: currentLoggedUser,
@@ -434,7 +388,6 @@ export default function Dashboard() {
 
 	// Memoize currentUser to prevent unnecessary re-renders
 	const currentUser = useMemo(() => ({
-		...currentMockUser,
 		...currentLoggedUser,
 	}), [currentLoggedUser]);
 

From a1154aba7ba212a0c92cf3834bd67bb7cdf22e1f Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Sat, 1 Nov 2025 21:37:32 +0530
Subject: [PATCH 06/14] feat: enhance profile management with ZOD form
 validation

- Integrated @tanstack/react-form for improved form handling in the ProfileManagement component.
- Added validation schema using zod for user inputs including name, email, website, and GitHub ID.
- Refactored form submission logic to utilize the new form library, enhancing user experience and feedback.
- Cleaned up unused imports and improved code readability.
---
 package-lock.json                             | 128 +++++++++++-
 package.json                                  |   3 +-
 .../dashboard/profile-management.tsx          | 196 ++++++++++++------
 src/lib/utils.ts                              |   5 +
 src/pages/Login.tsx                           |   6 +-
 5 files changed, 273 insertions(+), 65 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 784284b..b282cb4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-toggle-group": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.4",
+        "@tanstack/react-form": "^1.23.8",
         "@tanstack/react-query": "^5.83.0",
         "@types/jszip": "^3.4.1",
         "@types/markdown-it": "^14.1.2",
@@ -63,7 +64,7 @@
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
         "vaul": "^0.9.3",
-        "zod": "^3.23.8"
+        "zod": "^4.1.12"
       },
       "devDependencies": {
         "@biomejs/biome": "2.1.2",
@@ -3917,6 +3918,51 @@
         "node": ">=4"
       }
     },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.3.4.tgz",
+      "integrity": "sha512-eq+PpuutUyubXu+ycC1GIiVwBs86NF/8yYJJAKSpPcJLWl6R/761F1H4F/9ziX6zKezltFUH1ah3Cz8Ah+KJrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/form-core": {
+      "version": "1.24.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/form-core/-/form-core-1.24.4.tgz",
+      "integrity": "sha512-+eIR7DiDamit1zvTVgaHxuIRA02YFgJaXMUGxsLRJoBpUjGl/g/nhUocQoNkRyfXqOlh8OCMTanjwDprWSRq6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.3.3",
+        "@tanstack/pacer": "^0.15.3",
+        "@tanstack/store": "^0.7.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/pacer": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/pacer/-/pacer-0.15.4.tgz",
+      "integrity": "sha512-vGY+CWsFZeac3dELgB6UZ4c7OacwsLb8hvL2gLS6hTgy8Fl0Bm/aLokHaeDIP+q9F9HUZTnp360z9uv78eg8pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.3.2",
+        "@tanstack/store": "^0.7.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.83.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.83.0.tgz",
@@ -3927,6 +3973,31 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/react-form": {
+      "version": "1.23.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-form/-/react-form-1.23.8.tgz",
+      "integrity": "sha512-ivfkiOHAI3aIWkCY4FnPWVAL6SkQWGWNVjtwIZpaoJE4ulukZWZ1KB8TQKs8f4STl+egjTsMHrWJuf2fv3Xh1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/form-core": "1.24.4",
+        "@tanstack/react-store": "^0.7.7",
+        "decode-formdata": "^0.9.0",
+        "devalue": "^5.3.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-start": "^1.130.10",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@tanstack/react-start": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.83.0",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.83.0.tgz",
@@ -3943,6 +4014,34 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.7.7.tgz",
+      "integrity": "sha512-qqT0ufegFRDGSof9D/VqaZgjNgp4tRPHZIJq2+QIHkMUtHjaJ0lYrrXjeIUJvjnTbgPfSD1XgOMEt0lmANn6Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.7.7",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.7.7.tgz",
+      "integrity": "sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -5340,6 +5439,12 @@
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
+    "node_modules/decode-formdata": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/decode-formdata/-/decode-formdata-0.9.0.tgz",
+      "integrity": "sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==",
+      "license": "MIT"
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
@@ -5368,6 +5473,12 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devalue": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.4.2.tgz",
+      "integrity": "sha512-MwPZTKEPK2k8Qgfmqrd48ZKVvzSQjgW0lXLxiIBA8dQjtf/6mw6pggHNLcyDKyf+fI6eXxlQwPsfaCMTU5U+Bw==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -8415,6 +8526,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8712,9 +8832,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+      "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 19e7ac7..56e63d1 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
+    "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-query": "^5.83.0",
     "@types/jszip": "^3.4.1",
     "@types/markdown-it": "^14.1.2",
@@ -67,7 +68,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.3",
-    "zod": "^3.23.8"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.2",
diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index 54f8871..e53ef1f 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -1,28 +1,15 @@
 import {
-	BarChart3,
-	Building2,
-	CheckCircle,
-	Clock,
-	CreditCard,
-	DollarSign,
-	Edit,
-	Eye,
 	LogOut,
-	Plus,
 	Settings,
-	Shield,
-	X,
-	XCircle,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, useRef, memo } from "react";
-import { Link, redirect, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { type QueryClient, useMutation, useQueryClient } from "@tanstack/react-query";
 import { PaymentMethods } from "@/components/dashboard/payment-methods";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { DeletePluginDialog } from "@/components/ui/delete-plugin-dialog";
 import {
 	Dialog,
 	DialogClose,
@@ -34,9 +21,12 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/hooks/use-toast.ts";
-import { User } from "@/types";
+import type { User } from "@/types";
+import { z } from "zod"
+import { useForm } from '@tanstack/react-form'
+import type { AnyFieldApi } from '@tanstack/react-form'
+import { isValidGithubId } from "@/lib/utils";
 
 // Mock user data
 const currentMockUser = {
@@ -191,17 +181,53 @@ const handleUpdateProfile = async (
 };
 
 const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
+	console.log("hasEmailChanged :: ", { originalEmail, currentEmail})
 	return originalEmail !== currentEmail;
 };
 
+function FieldInfo({ field }: { field: AnyFieldApi }) {
+	console.log(field.state)
+	return (
+		<>
+		  {field.state.meta.isTouched && !field.state.meta.isValid ? (
+			<em className="text-sm text-red-600 mt-1">{field.state.meta.errors.map(e => e?.message).join(", ")}</em>
+		  ) : null}
+		  {field.state.meta.isValidating ? 'Validating...' : null}
+		</>
+	  )
+}
 
 type ProfileManagementProps = {
 	currentUser: User;
 };
 
+const profileManagementSchema = z.object({
+	name: z.string().trim().min(3, "Name must be at least 3 characters long").max(255, "Name must not exceed 255 characters"),
+	email: z.email().max(255, "Email must not exceed 255 characters").toLowerCase(),
+	website: z.url().trim().toLowerCase(),
+	github: z.string().trim().refine(val => isValidGithubId(val), "Github Id Must be Valid").max(255, "Github Id Must Not Exceed 255 characters.")
+})
+
 // Memoized ProfileManagement component to prevent unnecessary re-renders
 const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
+	console.log(currentUser)
 	const navigate = useNavigate()
+	const form = useForm({
+		defaultValues: {
+			name: currentUser?.name || "",
+			email: currentUser?.email || "",
+			website: currentUser?.website || "",
+			github: currentUser?.github || "",
+		},
+
+		onSubmit: async (values) => {
+			console.log("tanstack form :: on-submit values ", values)
+		},
+		validators: {
+			onChange: profileManagementSchema
+		}
+	});
+	
 	// Form input states
 	const [name, setName] = useState(currentUser?.name || "");
 	const [currentEmail, setCurrentEmail] = useState(currentUser?.email || "");
@@ -452,60 +478,114 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 							Change Avatar
 						</Button>
 					</div>
-					<form onSubmit={(e) => handleSubmit(e)} className="space-y-4">
+					<form onSubmit={(e) => {
+						 e.preventDefault()
+						 e.stopPropagation()
+						 form.handleSubmit()
+					}} className="space-y-4">
 						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<form.Field 
+								name="name" 
+								children={(field) => {
+									return (
+										<>
+										<div className="space-y-2">
+											<Label htmlFor={`${field.name}`}>Full Name</Label>
+											<Input 
+												id={`${field.name}`}
+												name={`${field.name}`}
+												value={field.state.value}
+												onBlur={field.handleBlur}
+												onChange={(e) => field.handleChange(e.target.value)}
+											/>
+											<FieldInfo field={field} />
+										</div>
+										</>
+									)
+								}}
+							/>
+
 							<div className="space-y-2">
-								<Label htmlFor="name">Full Name</Label>
-								<Input 
-									id="name" 
-									name="name"
-									value={name}
-									onChange={(e) => setName(e.target.value)}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="email">Email</Label>
-								<Input
-									id="email"
-									name="email"
-									type="email"
-									value={currentEmail}
-									onChange={(e) => setCurrentEmail(e.target.value)}
+								<form.Field 
+									name="email" 
+									children={(field) => {
+										return (
+											<>
+												<Label htmlFor={`${field.name}`}>Email</Label>
+												<Input 
+													id={`${field.name}`}
+													name={`${field.name}`}
+													value={field.state.value}
+													onBlur={field.handleBlur}
+													onChange={(e) => field.handleChange(e.target.value)}
+												/>
+												<FieldInfo field={field} />
+												{/* FIX: Checks on blurs  */}
+												{/* Visual indicator when email has changed */}
+												{hasEmailChanged(originalEmail, field.state.value) && (
+													<p className="text-sm text-orange-600 mt-1">
+														Email will be changed from: {originalEmail}
+													</p>
+												)}
+											</>
+										)
+									}}
 								/>
-								{/* Visual indicator when email has changed */}
-								{hasEmailChanged(originalEmail, currentEmail) && (
-									<p className="text-sm text-orange-600 mt-1">
-										Email will be changed from: {originalEmail}
-									</p>
-								)}
 							</div>
 							<div className="space-y-2">
-								<Label htmlFor="website">Website</Label>
-								<Input 
-									id="website" 
-									name="website"
-									value={website}
-									onChange={(e) => setWebsite(e.target.value)}
+							<form.Field 
+									name="website" 
+									children={(field) => {
+										return (
+											<>
+												<Label htmlFor={`${field.name}`}>Website</Label>
+												<Input 
+													id={`${field.name}`}
+													name={`${field.name}`}
+													value={field.state.value}
+													onBlur={field.handleBlur}
+													onChange={(e) => field.handleChange(e.target.value)}
+												/>
+												<FieldInfo field={field} />
+											</>
+										)
+									}}
 								/>
 							</div>
 							<div className="space-y-2">
-								<Label htmlFor="github">GitHub</Label>
-								<Input 
-									id="github" 
-									name="github"
-									value={github}
-									onChange={(e) => setGithub(e.target.value)}
+							<form.Field 
+									name="github" 
+									children={(field) => {
+										return (
+											<>
+												<Label htmlFor={`${field.name}`}>Github</Label>
+												<Input 
+													id={`${field.name}`}
+													name={`${field.name}`}
+													value={field.state.value}
+													onBlur={field.handleBlur}
+													onChange={(e) => field.handleChange(e.target.value)}
+												/>
+												<FieldInfo field={field} />
+											</>
+										)
+									}}
 								/>
 							</div>
 						</div>
 
-						<Button
-							className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
-							type="submit"
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Updating..." : "Update Profile"}
-						</Button>
+						<form.Subscribe
+							selector={(state) => [state.canSubmit, state.isSubmitting]}
+							children={([canSubmit, isSubmitting]) => (
+								<Button
+								className="bg-gradient-primary transition-colors disabled:bg-gradient-dark"
+								type="submit"
+								disabled={!canSubmit}
+								>
+									{isSubmitting ? "Updating..." : "Update Profile"}
+								</Button>
+							)}
+						/>
 					</form>
 
 					{/* Radix-UI Dialog for OTP Verification */}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ac680b3..980abf5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,8 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
+export function isValidGithubId(id: string) {
+	if (!id) return true;
+	return /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i.test(id);
+  }
\ No newline at end of file
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 1ee72c1..6163f23 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -103,6 +103,8 @@ export default function Login() {
 							<Button
 								variant="outline"
 								className="w-full disabled aria-disabled"
+								disabled={true}
+								aria-disabled={true}
 								onClick={() => handleSocialLogin("GitHub")}
 							>
 								<Github className="w-4 h-4 mr-2" />
@@ -125,7 +127,7 @@ export default function Login() {
 					<CardContent>
 						<form onSubmit={handleLogin} className="space-y-4">
 							<div className="space-y-2">
-								<Label htmlFor="email">Email</Label>
+								<Label htmlFor="email">Email *</Label>
 								<Input
 									id="email"
 									type="email"
@@ -139,7 +141,7 @@ export default function Login() {
 							</div>
 
 							<div className="space-y-2">
-								<Label htmlFor="password">Password</Label>
+								<Label htmlFor="password">Password *</Label>
 								<div className="relative">
 									<Input
 										id="password"

From 47692691c007233f3f53ae8c56c45bcd2e10f614 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Tue, 4 Nov 2025 19:14:38 +0530
Subject: [PATCH 07/14] feat: integrate AuthContext for user authentication

- Added AuthProvider to the main application structure for centralized authentication management.
- Refactored FloatingNav component to utilize useAuth hook for user state and logout functionality.
- Improved user login state handling by replacing previous user data fetching logic.
---
 src/App.tsx                                |  69 +++++++------
 src/components/navigation/floating-nav.tsx |  13 +--
 src/context/AuthContext.tsx                | 112 +++++++++++++++++++++
 3 files changed, 152 insertions(+), 42 deletions(-)
 create mode 100644 src/context/AuthContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b5bc5a1..121302d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import Privacy from "./pages/Privacy";
 import Signup from "./pages/Signup";
 import SubmitPlugin from "./pages/SubmitPlugin";
 import Terms from "./pages/Terms";
+import { AuthProvider } from "./context/AuthContext";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -42,39 +43,41 @@ const App = () => (
 		<QueryClientProvider client={queryClient}>
 			<ThemeProvider defaultTheme="dark" storageKey="acode-ui-theme">
 				<TooltipProvider>
-					<Toaster />
-					<Sonner />
-					<BrowserRouter>
-						<MainLayout>
-							<Routes>
-								<Route path="/" element={<Index />} />
-								<Route path="/plugins" element={<Plugins />} />
-								<Route path="/plugins/:id" element={<PluginDetail />} />
-								<Route path="/submit-plugin" element={<SubmitPlugin />} />
-								<Route path="/faq" element={<FAQ />} />
-								<Route path="/privacy" element={<Privacy />} />
-								<Route path="/terms" element={<Terms />} />
-								<Route path="/login" element={<Login />} />
-								<Route path="/signup" element={<Signup />} />
-								<Route path="/register" element={<Signup />} />
-								<Route path="/forgot-password" element={<ForgotPassword />} />
-								<Route path="/dashboard" element={<Dashboard />} />
-								<Route path="/admin" element={<AdminDashboard />} />
-								<Route path="/admin/payments" element={<AdminPayments />} />
-								<Route path="/earnings" element={<Earnings />} />
-								<Route path="/earnings/:userId" element={<Earnings />} />
-								<Route
-									path="/plugin-orders/:pluginId"
-									element={<PluginOrders />}
-								/>
-								<Route
-									path="/developer/:email"
-									element={<DeveloperProfile />}
-								/>
-								<Route path="*" element={<NotFound />} />
-							</Routes>
-						</MainLayout>
-					</BrowserRouter>
+					<AuthProvider>
+						<Toaster />
+						<Sonner />
+						<BrowserRouter>
+							<MainLayout>
+								<Routes>
+									<Route path="/" element={<Index />} />
+									<Route path="/plugins" element={<Plugins />} />
+									<Route path="/plugins/:id" element={<PluginDetail />} />
+									<Route path="/submit-plugin" element={<SubmitPlugin />} />
+									<Route path="/faq" element={<FAQ />} />
+									<Route path="/privacy" element={<Privacy />} />
+									<Route path="/terms" element={<Terms />} />
+									<Route path="/login" element={<Login />} />
+									<Route path="/signup" element={<Signup />} />
+									<Route path="/register" element={<Signup />} />
+									<Route path="/forgot-password" element={<ForgotPassword />} />
+									<Route path="/dashboard" element={<Dashboard />} />
+									<Route path="/admin" element={<AdminDashboard />} />
+									<Route path="/admin/payments" element={<AdminPayments />} />
+									<Route path="/earnings" element={<Earnings />} />
+									<Route path="/earnings/:userId" element={<Earnings />} />
+									<Route
+										path="/plugin-orders/:pluginId"
+										element={<PluginOrders />}
+									/>
+									<Route
+										path="/developer/:email"
+										element={<DeveloperProfile />}
+									/>
+									<Route path="*" element={<NotFound />} />
+								</Routes>
+							</MainLayout>
+						</BrowserRouter>
+					</AuthProvider>
 				</TooltipProvider>
 			</ThemeProvider>
 		</QueryClientProvider>
diff --git a/src/components/navigation/floating-nav.tsx b/src/components/navigation/floating-nav.tsx
index 2cf4d0e..a6245dc 100644
--- a/src/components/navigation/floating-nav.tsx
+++ b/src/components/navigation/floating-nav.tsx
@@ -26,6 +26,7 @@ import { EXTERNAL_LINKS } from "@/config/links";
 import { useToast } from "@/hooks/use-toast";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser";
 import { cn } from "@/lib/utils";
+import { useAuth } from "@/context/AuthContext";
 
 const baseNavItems = [
 	{ name: "FAQ", href: "/faq", external: false },
@@ -45,9 +46,9 @@ export function FloatingNav() {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const { toast } = useToast();
-	const { data: user, isLoading, error } = useLoggedInUser();
+	const { user, isLoading, isError, logout } = useAuth();
 
-	const isLoggedIn = !isLoading && !error && user;
+	const isLoggedIn = !isLoading && !isError && user;
 
 	useEffect(() => {
 		const handleScroll = () => {
@@ -59,13 +60,7 @@ export function FloatingNav() {
 
 	const handleLogout = async () => {
 		try {
-			const response = await fetch(
-				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
-				{
-					method: "DELETE",
-					credentials: "include",
-				},
-			);
+			const response = await logout()
 
 			if (response.ok) {
 				toast({
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
new file mode 100644
index 0000000..0a54037
--- /dev/null
+++ b/src/context/AuthContext.tsx
@@ -0,0 +1,112 @@
+import React, { createContext, useCallback, useContext, useMemo } from "react"
+import { useQuery, useQueryClient, QueryObserverResult, RefetchOptions, useMutation } from "@tanstack/react-query"
+import { fetchLoggedInUser } from "@/hooks/useLoggedInUser"
+import { User } from "@/types"
+
+type AuthContextState = {
+    user: User,
+    login: ({ formData }: { formData: FormData}) => Promise<Response>
+    logout: () => Promise<Response>
+    updateProfile: (
+        formData: FormData,
+        handleRedirect: (to: string) => void,
+        emailOtp?: number
+    ) => Promise<Response>,
+    refetchUser: (options?: RefetchOptions) => Promise<QueryObserverResult<User, Error>>
+    isLoading: boolean,
+    isError: boolean
+}
+
+const AuthContext = createContext<AuthContextState>(null)
+
+export function AuthProvider({ children }) {
+    const queryClient = useQueryClient()
+
+    const { data: user, isLoading, isError, refetch } = useQuery({
+        queryKey: ["loggedInUser"],
+        queryFn: fetchLoggedInUser,
+        staleTime: 2 * 60 * 1000,
+        refetchOnWindowFocus: false,
+    })
+
+    const loginMutation = useMutation<Response, Error, { formData: FormData }>({
+          mutationFn: async ({ formData }: { formData: FormData }) => {
+            const res = await fetch(
+              `${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
+              {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: formData,
+              }
+            );
+            if (!res.ok) throw new Error("Login failed");
+            // Invalidate / refetch current user to hydrate client
+            await queryClient.invalidateQueries({ queryKey: ["loggedInUser"] });
+            return res;
+          },
+    });
+    
+    const login = useCallback(
+            async ({ formData }: { formData: FormData}): Promise<Response> => {
+              return loginMutation.mutateAsync({ formData });
+            },
+            [loginMutation]
+    );
+
+
+    const logout = async (): Promise<Response> => {
+        const response = await fetch(
+			`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
+			{
+				method: "DELETE",
+				credentials: "include",
+			},
+		);
+        // no need to await; AS we don't need to block it. I want the response to return As soon as possible.
+        queryClient.invalidateQueries({ queryKey: ["loggedInUser"] });
+
+        return response;
+    }
+
+    const updateProfile = async (
+        formData: FormData,
+        handleRedirect: (to: string) => void,
+        emailOtp?: number
+    ): Promise<Response> => {
+        if(!(formData instanceof FormData) || typeof handleRedirect !== "function" || typeof emailOtp !== "number") throw Error(`[updateProfile] Params used must be: 'formData' as FormData, 'handleRedirect' as a typeof Function, (optionally) emailOTP? as a number`)
+
+        if (emailOtp) formData.append("otp", emailOtp.toString());
+
+        const response = await fetch(
+            `${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
+            {
+                method: "PUT",
+                body: formData,
+                credentials: "include",
+            },
+        );
+
+        return response;
+    }
+
+    const value = useMemo(() => ({
+        user,
+        isLoading,
+        isError,
+        login, 
+        logout,
+        updateProfile,
+        refetchUser: refetch
+    }), [user, isLoading, isError, login, logout, refetch])
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+export function useAuth() {
+    return useContext(AuthContext);
+}
\ No newline at end of file

From 9a81ca6cd2ee9afc33f998cd8246b0c1a178deef Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Tue, 4 Nov 2025 20:22:40 +0530
Subject: [PATCH 08/14] feat: integrate AuthContext in dashboard components

- Refactored ProfileManagement and UserPluginsOverview components to utilize useAuth for user state management.
- Updated handleUpdateProfile function to leverage the new updateProfile method from AuthContext.
- Simplified user data retrieval in Dashboard and usePlugins hooks by replacing useLoggedInUser with useAuth.
- Enhanced code readability and maintainability by centralizing authentication logic.
---
 src/components/dashboard/profile-management.tsx    | 14 +++++---------
 src/components/dashboard/user-plugins-overview.tsx |  3 ++-
 src/context/AuthContext.tsx                        |  2 +-
 src/hooks/use-plugins.ts                           |  3 ++-
 src/pages/Dashboard.tsx                            |  5 +++--
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index e53ef1f..fdbcf63 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -27,6 +27,7 @@ import { z } from "zod"
 import { useForm } from '@tanstack/react-form'
 import type { AnyFieldApi } from '@tanstack/react-form'
 import { isValidGithubId } from "@/lib/utils";
+import { AuthContextState, useAuth } from "@/context/AuthContext";
 
 // Mock user data
 const currentMockUser = {
@@ -130,18 +131,12 @@ const handleLogOut = async (
 const handleUpdateProfile = async (
 	formData: FormData,
 	handleRedirect: (to: string) => void,
+	updateProfile: AuthContextState["updateProfile"],
 	emailOtp?: number,
 ) => {
 	if (emailOtp) formData.append("otp", emailOtp.toString());
 
-	const response = await fetch(
-		`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/user`,
-		{
-			method: "PUT",
-			body: formData,
-			credentials: "include",
-		},
-	);
+	const response = await updateProfile(formData, handleRedirect, emailOtp);
 
 	const responseData = response.headers
 		.get("content-type")
@@ -210,6 +205,7 @@ const profileManagementSchema = z.object({
 
 // Memoized ProfileManagement component to prevent unnecessary re-renders
 const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
+	const { updateProfile } = useAuth()
 	console.log(currentUser)
 	const navigate = useNavigate()
 	const form = useForm({
@@ -263,7 +259,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 			currentUser: User;
 			emailOtp?: number;
 		}) =>
-			await handleUpdateProfile(body.formData, (toUrl) => navigate(`${toUrl}`), body.emailOtp),
+			await handleUpdateProfile(body.formData, (toUrl) => navigate(`${toUrl}`), updateProfile,body.emailOtp),
 		onSuccess: async (data) => {
 			const { statusCode, body } = data;
 
diff --git a/src/components/dashboard/user-plugins-overview.tsx b/src/components/dashboard/user-plugins-overview.tsx
index 50b31a4..15c6711 100644
--- a/src/components/dashboard/user-plugins-overview.tsx
+++ b/src/components/dashboard/user-plugins-overview.tsx
@@ -54,9 +54,10 @@ import {
 import { toast } from "@/hooks/use-toast";
 import { useDeletePlugin, useUserPlugins } from "@/hooks/use-user-plugins";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser";
+import { useAuth } from "@/context/AuthContext";
 
 export function UserPluginsOverview() {
-	const { data: user } = useLoggedInUser();
+	const { user } = useAuth();
 	const { data: plugins = [], isLoading } = useUserPlugins(
 		user?.id?.toString() || "",
 	);
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 0a54037..e29aa3d 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -3,7 +3,7 @@ import { useQuery, useQueryClient, QueryObserverResult, RefetchOptions, useMutat
 import { fetchLoggedInUser } from "@/hooks/useLoggedInUser"
 import { User } from "@/types"
 
-type AuthContextState = {
+export type AuthContextState = {
     user: User,
     login: ({ formData }: { formData: FormData}) => Promise<Response>
     logout: () => Promise<Response>
diff --git a/src/hooks/use-plugins.ts b/src/hooks/use-plugins.ts
index 253b7a2..82631e2 100644
--- a/src/hooks/use-plugins.ts
+++ b/src/hooks/use-plugins.ts
@@ -1,6 +1,7 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser";
 import type { Plugin, PluginFilterType } from "@/types";
+import { useAuth } from "@/context/AuthContext";
 
 const fallbackPlugins: Plugin[] = [
 	{
@@ -111,7 +112,7 @@ const fetchPlugins = async (
 };
 
 export const usePlugins = (filter: PluginFilterType = "default") => {
-	const { data: loggedInUser } = useLoggedInUser();
+	const { user: loggedInUser } = useAuth();
 	const isAuthenticated = !!loggedInUser;
 
 	return useInfiniteQuery({
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index c9b4861..16c21bb 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -14,6 +14,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser.ts";
 import ProfileManagement from "@/components/dashboard/profile-management";
+import { useAuth } from "@/context/AuthContext";
 
 // Note: Mock data removed - using real API data
 
@@ -380,11 +381,11 @@ export default function Dashboard() {
 	// const deletePluginMutation = useDeletePlugin();
 
 	const {
-		data: currentLoggedUser,
+		user: currentLoggedUser,
 		isError,
 		isLoading,
 		...args
-	} = useLoggedInUser();
+	} = useAuth();
 
 	// Memoize currentUser to prevent unnecessary re-renders
 	const currentUser = useMemo(() => ({

From ecf56a8bdd2b3ff172d089a167cb9eaf142f3f14 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Tue, 4 Nov 2025 20:37:11 +0530
Subject: [PATCH 09/14] refactor: replace useLoggedInUser with useAuth in
 dashboard components

- Updated EarningsOverview, AdminDashboard, DeveloperProfile, and FAQ components to utilize useAuth for user state management.
- Simplified user data retrieval by centralizing authentication logic through AuthContext.
- Enhanced code maintainability and readability by removing deprecated hooks.
---
 src/components/dashboard/earnings-overview.tsx | 4 ++--
 src/pages/AdminDashboard.tsx                   | 4 ++--
 src/pages/DeveloperProfile.tsx                 | 3 ++-
 src/pages/FAQ.tsx                              | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/earnings-overview.tsx b/src/components/dashboard/earnings-overview.tsx
index f00bec6..61490c1 100644
--- a/src/components/dashboard/earnings-overview.tsx
+++ b/src/components/dashboard/earnings-overview.tsx
@@ -1,10 +1,10 @@
 import { DollarSign, TrendingUp } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useCurrentMonthEarnings } from "@/hooks/use-earnings";
-import { useLoggedInUser } from "@/hooks/useLoggedInUser";
+import { useAuth } from "@/context/AuthContext";
 
 export function EarningsOverview() {
-	const { data: user } = useLoggedInUser();
+	const { user } = useAuth();
 	const { data: earnings, isLoading } = useCurrentMonthEarnings(
 		user?.id?.toString() || "",
 	);
diff --git a/src/pages/AdminDashboard.tsx b/src/pages/AdminDashboard.tsx
index 05c93c5..2931d20 100644
--- a/src/pages/AdminDashboard.tsx
+++ b/src/pages/AdminDashboard.tsx
@@ -55,9 +55,9 @@ import {
 import { VerificationToggle } from "@/components/ui/verification-toggle";
 import { usePluginsByStatus } from "@/hooks/use-plugins-by-status";
 import { toast } from "@/hooks/use-toast";
-import { useLoggedInUser } from "@/hooks/useLoggedInUser";
 import { formatCurrency, formatDate } from "@/lib/date-utils";
 import { Plugin, User } from "@/types";
+import { useAuth } from "@/context/AuthContext";
 
 interface AdminStats {
 	users: number;
@@ -79,7 +79,7 @@ const LoadingSpinner = () => (
 );
 
 export default function AdminDashboard() {
-	const { data: currentUser, isLoading: userLoading } = useLoggedInUser();
+	const { user: currentUser, isLoading: userLoading } = useAuth();
 	const [currentPage, setCurrentPage] = useState(1);
 	const [searchName, setSearchName] = useState("");
 	const [searchEmail, setSearchEmail] = useState("");
diff --git a/src/pages/DeveloperProfile.tsx b/src/pages/DeveloperProfile.tsx
index 2016715..a2627de 100644
--- a/src/pages/DeveloperProfile.tsx
+++ b/src/pages/DeveloperProfile.tsx
@@ -26,6 +26,7 @@ import { useDeletePlugin } from "@/hooks/use-user-plugins";
 import { useLoggedInUser } from "@/hooks/useLoggedInUser";
 import { DeveloperProfile as DeveloperType } from "@/types/developer";
 import { Plugin } from "@/types/plugin";
+import { useAuth } from "@/context/AuthContext";
 
 interface Developer extends DeveloperType {
 	role: string;
@@ -62,7 +63,7 @@ const fetchDeveloperPlugins = async (userId: string): Promise<Plugin[]> => {
 export default function DeveloperProfile() {
 	const { email } = useParams<{ email: string }>();
 	const { toast } = useToast();
-	const { data: loggedInUser } = useLoggedInUser();
+	const { user: loggedInUser } = useAuth();
 	const deleteMutation = useDeletePlugin();
 
 	const {
diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
index 6dcfd78..63e8c01 100644
--- a/src/pages/FAQ.tsx
+++ b/src/pages/FAQ.tsx
@@ -60,8 +60,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { EXTERNAL_LINKS, openExternalLink } from "@/config/links";
 import "highlight.js/styles/github-dark.css";
 
-import { useLoggedInUser } from "@/hooks/useLoggedInUser";
 import type { FAQ } from "@/types";
+import { useAuth } from "@/context/AuthContext";
 
 const md = new MarkdownIt({
 	html: true,
@@ -91,7 +91,7 @@ export default function FAQ() {
 	const [loading, setLoading] = useState(true);
 
 	// Admin functionality
-	const { data: currentUser } = useLoggedInUser();
+	const { user: currentUser } = useAuth();
 	const isAdmin = currentUser?.role === "admin";
 
 	// Form state

From b8afc09967a7109c46ad0f5ebbb0f386d83b0d87 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Wed, 5 Nov 2025 21:21:53 +0530
Subject: [PATCH 10/14] chore: update dependencies and enhance profile
 management validation

- Upgraded @radix-ui/react-avatar to version 1.1.10 and updated related dependencies in package-lock.json.
- Refactored profile management form validation to utilize zod's superRefine for improved error handling and validation logic.
- Cleaned up unused console logs and improved the structure of the profile management component for better readability and maintainability.
---
 package-lock.json                             | 136 ++++++++++++-
 package.json                                  |   2 +-
 .../dashboard/profile-management.tsx          | 189 ++++++++++++------
 src/components/navigation/floating-nav.tsx    |   1 +
 src/context/AuthContext.tsx                   |   3 +-
 src/pages/Login.tsx                           |  13 +-
 6 files changed, 259 insertions(+), 85 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b282cb4..a3d0a15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-aspect-ratio": "^1.1.0",
-        "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-context-menu": "^2.2.1",
@@ -1101,15 +1101,69 @@
       }
     },
     "node_modules/@radix-ui/react-avatar": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz",
-      "integrity": "sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0"
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1126,6 +1180,54 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz",
@@ -3282,6 +3384,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
diff --git a/package.json b/package.json
index 56e63d1..e34feea 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
-    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-context-menu": "^2.2.1",
diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index fdbcf63..d4b064b 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -23,7 +23,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/hooks/use-toast.ts";
 import type { User } from "@/types";
-import { z } from "zod"
+import { superRefine, z,  } from "zod"
 import { useForm } from '@tanstack/react-form'
 import type { AnyFieldApi } from '@tanstack/react-form'
 import { isValidGithubId } from "@/lib/utils";
@@ -134,7 +134,6 @@ const handleUpdateProfile = async (
 	updateProfile: AuthContextState["updateProfile"],
 	emailOtp?: number,
 ) => {
-	if (emailOtp) formData.append("otp", emailOtp.toString());
 
 	const response = await updateProfile(formData, handleRedirect, emailOtp);
 
@@ -176,37 +175,84 @@ const handleUpdateProfile = async (
 };
 
 const hasEmailChanged = (originalEmail: string, currentEmail: string) => {
-	console.log("hasEmailChanged :: ", { originalEmail, currentEmail})
 	return originalEmail !== currentEmail;
 };
 
 function FieldInfo({ field }: { field: AnyFieldApi }) {
-	console.log(field.state)
 	return (
 		<>
 		  {field.state.meta.isTouched && !field.state.meta.isValid ? (
-			<em className="text-sm text-red-600 mt-1">{field.state.meta.errors.map(e => e?.message).join(", ")}</em>
+			<em className="text-sm text-red-600 mt-1">{field.state.meta.errors.map(e => e?.message || e).join(", ")}</em>
 		  ) : null}
 		  {field.state.meta.isValidating ? 'Validating...' : null}
 		</>
 	  )
 }
 
+// Helper: convert Zod safeParse result into the validator return shape
+function zodToFormValidator<T extends object>(schema: z.ZodTypeAny) {
+	return async ({ value }: { value: T } | any) => {
+	  const parsed = await schema["~standard"].validate(value);
+	  if (!parsed.issues) return undefined; // no errors
+  
+	  // Build { fields: { <path>: <message> } } where path is the field name
+	  const fields: Record<string, string> = {};
+	  for (const issue of parsed.issues) {
+		const path = issue.path.length ? issue.path.join(".") : "_form";
+		fields[path] =  fields[path] ? `${fields[path]}, ${issue.message}` : issue.message;
+	  }
+	  return { fields }; // TanStack Form will map fields -> field.state.meta.errors
+	};
+  }
+
 type ProfileManagementProps = {
 	currentUser: User;
 };
 
 const profileManagementSchema = z.object({
-	name: z.string().trim().min(3, "Name must be at least 3 characters long").max(255, "Name must not exceed 255 characters"),
-	email: z.email().max(255, "Email must not exceed 255 characters").toLowerCase(),
-	website: z.url().trim().toLowerCase(),
-	github: z.string().trim().refine(val => isValidGithubId(val), "Github Id Must be Valid").max(255, "Github Id Must Not Exceed 255 characters.")
-})
+	name: z
+	  .string()
+	  .trim()
+	  .min(3, "Name must be at least 3 characters long")
+	  .max(255, "Name must not exceed 255 characters"),
+	email: z
+	  .email()
+	  .trim()
+	  .max(255, "Email must not exceed 255 characters")
+	  .transform((s) => s.toLowerCase()),
+	website: z.preprocess(
+		(val) => {
+		  if (val === undefined || val === null) return "";
+		  return String(val).trim();
+		},
+		z.union([
+		  z.literal(""),
+		  z.string().max(2048, "Website URL must not exceed 2048 characters.").url("Invalid URL"),
+		])
+	  ),
+	github: z.preprocess(
+		(v) => (v == null ? "" : String(v).trim()),
+		z.string().superRefine((val, ctx) => {
+		  if (val === "") return; // allow empty
+		  if (val.length > 255) {
+			ctx.addIssue("Github Id must not exceed 255 characters");
+			return;
+		  }
+		  if (!isValidGithubId(val)) {
+			ctx.addIssue({ code: "custom", message: "Github Id must be valid" });
+		  }
+		})
+	  ),
+  });
+  
+type ProfileValues = z.infer<typeof profileManagementSchema>;
 
 // Memoized ProfileManagement component to prevent unnecessary re-renders
 const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
+	const name = (currentUser?.name || "");
+	const originalEmail = (currentUser?.email || "")
+
 	const { updateProfile } = useAuth()
-	console.log(currentUser)
 	const navigate = useNavigate()
 	const form = useForm({
 		defaultValues: {
@@ -215,24 +261,37 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 			website: currentUser?.website || "",
 			github: currentUser?.github || "",
 		},
-
-		onSubmit: async (values) => {
-			console.log("tanstack form :: on-submit values ", values)
-		},
 		validators: {
-			onChange: profileManagementSchema
-		}
-	});
+			onSubmitAsync: zodToFormValidator<ProfileValues>(profileManagementSchema),
+			onChangeAsync: zodToFormValidator<ProfileValues>(profileManagementSchema)
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				// value is the validated ProfileValues
+				if (hasEmailChanged(originalEmail, value.email)) {
+					setShowOTPDialog(true);
+					await sendOTPToNewEmail(value.email).catch((err) => {
+						toast({
+							title: `Email OTP Sending Failed to ${value.email} | Try again, by clicking Submit button.`,
+							description: err.message,
+							variant: "destructive",
+						});
+						// not closing the OTP Dialog as User could, click to resend button.
+						return null;
+				  });
+				  
+				  return;
+				}
 	
-	// Form input states
-	const [name, setName] = useState(currentUser?.name || "");
-	const [currentEmail, setCurrentEmail] = useState(currentUser?.email || "");
-	const [originalEmail, setOriginalEmail] = useState(currentUser?.email || "");
-	const [website, setWebsite] = useState(currentUser?.website || "");
-	const [github, setGithub] = useState(currentUser?.github || "");
+				  await handleActualSubmit(value);
+			} catch (error: any) {
+				
+			}
+		},
+	});
 
 	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
-	console.table({ name, originalEmail, currentEmail, website, github })
+	// console.table({ name, originalEmail, currentEmail, website, github })
 
 	// State to control when the OTP dialog should be open
 	const [showOTPDialog, setShowOTPDialog] = useState(false);
@@ -240,9 +299,6 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 	// State to track the OTP input value
 	const otpRef = useRef<HTMLInputElement>(null);
 
-	// biome-ignore lint: Kept for Reference Only Should be Removed in PROD.
-	console.log("otpRef current Value", otpRef.current?.value)
-
 	// State to track loading states
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [isSendingOTP, setIsSendingOTP] = useState(false);
@@ -270,12 +326,12 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 					description: `${body.message}` || "User Updated",
 					duration: 5000,
 				});
-				await queryClient.invalidateQueries({ queryKey: ["LoggedInUser"] });
+				await queryClient.invalidateQueries({ queryKey: ["loggedInUser"] });
 
 				setIsSubmitting(false);
 				setIsVerifyingOTP(false);
 				setShowOTPDialog(false);
-				setOriginalEmail(currentEmail);
+				// setOriginalEmail(currentEmail);
 				return;
 			}
 
@@ -298,11 +354,10 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 
 	// Profile Management Utils - memoize callback functions
 
-	const sendOTPToNewEmail = useCallback(async (
+	const sendOTPToNewEmail = async (
 		email: string,
 		type: "reset" | (string & {}) = "signup",
 	) => {
-		console.log({ email, type })
 		setIsSendingOTP(true);
 		const formData = new FormData();
 		formData.append("email", email);
@@ -337,15 +392,14 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 		} finally {
 			setIsSendingOTP(false);
 		}
-	}, []);
+	};
 
-	const handleActualSubmit = useCallback(async (emailOtp?: number) => {
+	const handleActualSubmit = async ({ name, email, website, github }, emailOtp?: number) => {
 		setIsSubmitting(true);
-
 		// Create FormData from current form state
 		const formData = new FormData();
 		formData.append("name", name);
-		formData.append("email", currentEmail);
+		formData.append("email", email);
 		formData.append("website", website);
 		formData.append("github", github);
 
@@ -357,38 +411,36 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 
 		// not resetting the states here,
 		// as we don't know if it success or failed. We clear/set updated states in mutation itself.
-	}, [name, currentEmail, website, github, currentUser, userMutation]);
+	};
 
-	const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
+	// const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+	// 	e.preventDefault();
 		
-		if (hasEmailChanged(originalEmail, currentEmail)) {
-			// Email has changed, show OTP dialog and send OTP
-			setShowOTPDialog(true);
-
-			// send email OTP
-			await sendOTPToNewEmail(currentEmail).catch((e) => {
-				toast({
-					title: `Email OTP Sending Failed to ${currentEmail} | Try again, by clicking Submit button.`,
-					description: e.message,
-					variant: "destructive",
-				});
-				// not closing the OTP Dialog as User could, click to resend button.
-				return null;
-			});
-
-			return;
-		} else {
-			await handleActualSubmit();
-		}
-	}, [originalEmail, currentEmail, sendOTPToNewEmail, handleActualSubmit]);
+	// 	if (hasEmailChanged(originalEmail, currentEmail)) {
+	// 		// Email has changed, show OTP dialog and send OTP
+	// 		setShowOTPDialog(true);
+
+	// 		// send email OTP
+	// 		await sendOTPToNewEmail(currentEmail).catch((e) => {
+	// 			toast({
+	// 				title: `Email OTP Sending Failed to ${currentEmail} | Try again, by clicking Submit button.`,
+	// 				description: e.message,
+	// 				variant: "destructive",
+	// 			});
+	// 			// not closing the OTP Dialog as User could, click to resend button.
+	// 			return null;
+	// 		});
+
+	// 		return;
+	// 	} else {
+	// 		await handleActualSubmit();
+	// 	}
+	// }, [originalEmail, currentEmail, sendOTPToNewEmail, handleActualSubmit]);
 
 	// Handle OTP verification - memoize callback
 	const handleOTPVerification = useCallback(async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 		e.preventDefault();
 		e.stopPropagation();
-		console.log(otpRef.current?.value)
-		console.log(otpRef.current?.value)
 		if (!otpRef.current?.value?.trim()) {
 			setOtpError("Please enter the OTP");
 			return;
@@ -399,7 +451,12 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 
 		if (otpRef.current?.value.length === 6 && /^\d+$/.test(otpRef.current?.value)) {
 			// OTP is valid, proceed with form submission
-			await handleActualSubmit(Number(otpRef.current?.value));
+			await handleActualSubmit({ 
+				name: form.getFieldValue("name"), 
+				email: form.getFieldValue("email"),
+				website: form.getFieldValue("website"),
+				github: form.getFieldValue("github")
+			}, Number(otpRef.current?.value));
 		} else {
 			setOtpError("Invalid OTP. Please check and try again.");
 			setIsVerifyingOTP(false);
@@ -412,14 +469,14 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 		otpRef.current.value = "";
 		setOtpError("");
 		if(isVerifyingOTP) setIsVerifyingOTP(false)
-		setCurrentEmail(originalEmail);
+		form.resetField("email")
 	}, [originalEmail]);
 
 	// Handle resending OTP - memoize callback
 	const handleResendOTP = useCallback(async () => {
 		otpRef.current.value = ""; // Clear current OTP input
-		await sendOTPToNewEmail(currentEmail);
-	}, [currentEmail, sendOTPToNewEmail]);
+		await sendOTPToNewEmail(currentUser.email);
+	}, [currentUser?.email, sendOTPToNewEmail]);
 
 	return (
 		<div className="space-y-6">
@@ -591,7 +648,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 							<DialogTitle>Verify Your New Email</DialogTitle>
 							<DialogDescription>
 								We've sent a 6-digit verification code to{" "}
-								<strong>{currentEmail}</strong>. Please enter the code below to
+								<strong>{currentUser.email}</strong>. Please enter the code below to
 								confirm your email change.
 							</DialogDescription>
 
diff --git a/src/components/navigation/floating-nav.tsx b/src/components/navigation/floating-nav.tsx
index a6245dc..88b774b 100644
--- a/src/components/navigation/floating-nav.tsx
+++ b/src/components/navigation/floating-nav.tsx
@@ -160,6 +160,7 @@ export function FloatingNav() {
 											<AvatarImage
 												src={`https://github.com/${user.github}.png`}
 												alt={`${user.name}'s avatar`}
+												loading="lazy"
 											/>
 										)}
 										<AvatarFallback className="text-xs bg-primary/10 text-primary">
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index e29aa3d..3997090 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -36,7 +36,6 @@ export function AuthProvider({ children }) {
               {
                 method: "POST",
                 credentials: "include",
-                headers: { "Content-Type": "application/json" },
                 body: formData,
               }
             );
@@ -74,7 +73,7 @@ export function AuthProvider({ children }) {
         handleRedirect: (to: string) => void,
         emailOtp?: number
     ): Promise<Response> => {
-        if(!(formData instanceof FormData) || typeof handleRedirect !== "function" || typeof emailOtp !== "number") throw Error(`[updateProfile] Params used must be: 'formData' as FormData, 'handleRedirect' as a typeof Function, (optionally) emailOTP? as a number`)
+        if(!(formData instanceof FormData) || typeof handleRedirect !== "function" || (emailOtp && typeof emailOtp !== "number")) throw Error(`[updateProfile] Params used must be: 'formData' as FormData, 'handleRedirect' as a typeof Function, (optionally) emailOTP? as a number`)
 
         if (emailOtp) formData.append("otp", emailOtp.toString());
 
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 6163f23..bd25598 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/context/AuthContext";
 
 export default function Login() {
 	// States & Hooks.
@@ -14,6 +15,7 @@ export default function Login() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
+	const { login } = useAuth()
 	const { toast } = useToast();
 	const navigate = useNavigate();
 	const params = useParams();
@@ -24,14 +26,7 @@ export default function Login() {
 
 		try {
 			const formData = new FormData(e.target as HTMLFormElement);
-			const response = await fetch(
-				`${import.meta.env.DEV ? import.meta.env.VITE_SERVER_URL : ""}/api/login`,
-				{
-					method: "POST",
-					body: formData,
-					credentials: "include",
-				},
-			);
+			const response = await login({ formData })
 
 			const responseData = response.headers
 				.get("content-type")
@@ -136,6 +131,7 @@ export default function Login() {
 									value={email}
 									onChange={(e) => setEmail(e.target.value)}
 									required
+									autoComplete="email"
 									className="bg-background/50"
 								/>
 							</div>
@@ -151,6 +147,7 @@ export default function Login() {
 										value={password}
 										onChange={(e) => setPassword(e.target.value)}
 										required
+										autoComplete="current-password"
 										className="bg-background/50 pr-10"
 									/>
 									<Button

From 5a80970fc259ba76e88c9f6001d1987bb78a0af8 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Wed, 5 Nov 2025 21:28:29 +0530
Subject: [PATCH 11/14] refactor: remove unused isSubmitting state and update
 avatar button as `(soon)`

- Removed the isSubmitting state from ProfileManagement as it was no longer needed.
- Updated the avatar button to be disabled and added a label indicating upcoming functionality.
---
 src/components/dashboard/profile-management.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index d4b064b..c17d145 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -300,7 +300,6 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 	const otpRef = useRef<HTMLInputElement>(null);
 
 	// State to track loading states
-	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [isSendingOTP, setIsSendingOTP] = useState(false);
 	const [isVerifyingOTP, setIsVerifyingOTP] = useState(false);
 
@@ -328,7 +327,6 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 				});
 				await queryClient.invalidateQueries({ queryKey: ["loggedInUser"] });
 
-				setIsSubmitting(false);
 				setIsVerifyingOTP(false);
 				setShowOTPDialog(false);
 				// setOriginalEmail(currentEmail);
@@ -345,7 +343,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 				duration: 5000,
 				type: "background"
 			});
-			setIsSubmitting(false)
+			
 			setOtpError(`${error.message}`);
 			setIsVerifyingOTP(false)
 			return;
@@ -395,7 +393,6 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 	};
 
 	const handleActualSubmit = async ({ name, email, website, github }, emailOtp?: number) => {
-		setIsSubmitting(true);
 		// Create FormData from current form state
 		const formData = new FormData();
 		formData.append("name", name);
@@ -527,8 +524,8 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 								) || ""}
 							</div>
 						</div>
-						<Button variant="outline" size="sm">
-							Change Avatar
+						<Button variant="outline" size="sm" className="disabled aria-disabled" disabled={true} aria-disabled={true}>
+							Change Avatar (Soon)
 						</Button>
 					</div>
 					<form onSubmit={(e) => {

From 19aa85c6f2b89db2ce10578722d44c6119db9767 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Wed, 5 Nov 2025 21:40:40 +0530
Subject: [PATCH 12/14] refactor: clean up profile management component by
 removing mock user data

- Removed unused mock user data from the ProfileManagement component to streamline the code.
- Simplified imports by eliminating the unused superRefine from zod.
---
 .../dashboard/profile-management.tsx          | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/dashboard/profile-management.tsx b/src/components/dashboard/profile-management.tsx
index c17d145..9eccbc4 100644
--- a/src/components/dashboard/profile-management.tsx
+++ b/src/components/dashboard/profile-management.tsx
@@ -23,32 +23,12 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/hooks/use-toast.ts";
 import type { User } from "@/types";
-import { superRefine, z,  } from "zod"
+import { z } from "zod"
 import { useForm } from '@tanstack/react-form'
 import type { AnyFieldApi } from '@tanstack/react-form'
 import { isValidGithubId } from "@/lib/utils";
 import { AuthContextState, useAuth } from "@/context/AuthContext";
 
-// Mock user data
-const currentMockUser = {
-	name: "John Doe",
-	email: "john@example.com",
-	role: "user", // "user" or "admin"
-	avatar: "JD",
-	joinDate: "2024-01-15",
-	bio: "Full-stack developer passionate about mobile development and creating tools that enhance productivity.",
-	website: "https://johndoe.dev",
-	github: "johndoe",
-	location: "San Francisco, CA",
-	totalEarnings: 245.67,
-	bankAccount: {
-		accountHolder: "John Doe",
-		bankName: "Chase Bank",
-		accountNumber: "****1234",
-		routingNumber: "****567",
-	},
-};
-
 /**
  * Handles the user log out process.
  * This function typically invalidates or removes local authentication data,
@@ -343,7 +323,7 @@ const ProfileManagement = memo(({ currentUser }: ProfileManagementProps) => {
 				duration: 5000,
 				type: "background"
 			});
-			
+
 			setOtpError(`${error.message}`);
 			setIsVerifyingOTP(false)
 			return;

From 1bceb5bc65f7b9fcc6e0231a1297ba53755cef74 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <unschooledgamer@gmail.com>
Date: Thu, 6 Nov 2025 21:47:21 +0530
Subject: [PATCH 13/14] refactor(Login): update redirect handling to use
 searchParams

- Replaced useParams with useSearchParams to retrieve redirect URL in the Login component.
- Improved redirect logic to handle navigation based on search parameters, enhancing user experience.
---
 src/pages/Login.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index bd25598..407b713 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,6 +1,6 @@
 import { Eye, EyeOff, Github, Lock, LogIn, Mail } from "lucide-react";
 import { useState } from "react";
-import { Link, redirect, useNavigate, useParams } from "react-router-dom";
+import { Link, redirect, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -18,8 +18,8 @@ export default function Login() {
 	const { login } = useAuth()
 	const { toast } = useToast();
 	const navigate = useNavigate();
-	const params = useParams();
-
+	const [searchParams] = useSearchParams();
+	console.log(searchParams)
 	const handleLogin = async (e: React.FormEvent) => {
 		e.preventDefault();
 		setIsLoading(true);
@@ -52,10 +52,13 @@ export default function Login() {
 			});
 
 			setTimeout(() => {
-				let redirectUrl = params?.redirect as string;
+				let redirectUrl = searchParams.get("redirect") as string;
 				setIsLoading(false);
-				if (params.redirect === "app") {
+				console.log(searchParams, redirectUrl)
+				if (searchParams.get("redirect") === "app") {
 					redirectUrl = `acode://user/login/${responseData.token}`;
+					window.location.href = `${redirectUrl}`
+					return;
 				}
 
 				navigate(`${redirectUrl || "/dashboard"}`);

From f089059e208e0c09b847a7e0074e9e2342aa4a20 Mon Sep 17 00:00:00 2001
From: UnschooledGamer <76094069+UnschooledGamer@users.noreply.github.com>
Date: Fri, 14 Nov 2025 18:58:50 +0530
Subject: [PATCH 14/14] refactor(UserPluginsOverview): adjust grid layout for
 improved responsiveness

- Modified the grid layout in the UserPluginsOverview component to use 2 columns on smaller screens, enhancing the visual presentation and responsiveness of the stats section.
---
 src/components/dashboard/user-plugins-overview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/user-plugins-overview.tsx b/src/components/dashboard/user-plugins-overview.tsx
index 15c6711..98972ac 100644
--- a/src/components/dashboard/user-plugins-overview.tsx
+++ b/src/components/dashboard/user-plugins-overview.tsx
@@ -246,7 +246,7 @@ export function UserPluginsOverview() {
 			</CardHeader>
 			<CardContent>
 				{/* Stats */}
-				<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+				<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
 					<div className="text-center p-4 bg-muted/30 rounded-lg">
 						<div className="text-2xl font-bold text-primary">
 							{totalPlugins}