From b6f69688e1dc2976ec8d5fd93583553e188595a3 Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Wed, 19 Nov 2025 02:10:18 +0800
Subject: [PATCH 1/2] Card Click Redirect Implementationbe a codev

---
 .../_components/landing/LandingIntern-CodevCard.tsx   |  3 +++
 .../(marketing)/profiles/_components/CodevCard.tsx    | 11 ++++++++---
 .../app/home/in-house/_components/cards/CodevCard.tsx |  6 ++++--
 .../orgchart/_components/OrgChartTeamMemberCard.tsx   | 10 ++++++++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingIntern-CodevCard.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingIntern-CodevCard.tsx
index 718b772e0..58bc08bd3 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingIntern-CodevCard.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingIntern-CodevCard.tsx
@@ -6,6 +6,7 @@ import { motion, useInView } from "framer-motion";
 import { Card, CardContent } from "@/components/ui/card";
 
 type Person = {
+  id: string; // ✅ Added id field for navigation
   name: string;
   role: 'Intern' | 'Codev'; // Only two possible roles from database
   image?: string; // image URL (optional)
@@ -231,6 +232,8 @@ export default function InternCards({ interns }: { interns: Person[] }) {
               }}
               whileTap={{ scale: 0.95 }}
               style={{ perspective: "1000px" }}
+              onClick={() => window.location.href = `https://www.codebility.tech/profiles/${intern.id}`}
+              className="cursor-pointer"
             >
               <motion.div
                 className="h-full relative"
diff --git a/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx b/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
index fe4e2d206..a41cbac93 100644
--- a/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
+++ b/apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx
@@ -118,13 +118,17 @@ const CodevCard = ({ codev, color }: Props) => {
       : {};
   }, [codev.level, codev.codev_points]);
 
+  // Line 119: Enhanced card wrapper with click redirect
   return (
     <div
       className="h-64"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <div className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 hover:bg-white/20 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
+      <div 
+        onClick={() => window.location.href = `https://www.codebility.tech/profiles/${codev.id}`}
+        className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 cursor-pointer hover:bg-white/20 hover:scale-[1.02] dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10"
+      >
         {/* Background decoration */}
         <div className="from-customBlue-50/30 dark:from-customBlue-950/10 absolute inset-0 bg-gradient-to-br to-purple-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:to-purple-950/10" />
         <div className="absolute -right-4 -top-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100" />
@@ -197,7 +201,8 @@ const CodevCard = ({ codev, color }: Props) => {
             <TooltipProvider>
               <Tooltip delayDuration={100}>
                 <TooltipTrigger asChild>
-                  <Link href={`/profiles/${codev.id}`} target="_blank">
+                  {/* Line 217: Added stopPropagation to prevent card click when button is clicked */}
+                  <Link href={`/profiles/${codev.id}`} target="_blank" onClick={(e) => e.stopPropagation()}>
                     <Button
                       variant="outline"
                       size="icon"
@@ -242,4 +247,4 @@ const CodevCard = ({ codev, color }: Props) => {
   );
 };
 
-export default CodevCard;
+export default CodevCard;
\ No newline at end of file
diff --git a/apps/codebility/app/home/in-house/_components/cards/CodevCard.tsx b/apps/codebility/app/home/in-house/_components/cards/CodevCard.tsx
index a2dd46d0c..7af6ef80e 100644
--- a/apps/codebility/app/home/in-house/_components/cards/CodevCard.tsx
+++ b/apps/codebility/app/home/in-house/_components/cards/CodevCard.tsx
@@ -95,6 +95,7 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
             alt={`${data.first_name} avatar`}
             width={80}
             height={80}
+            unoptimized={true}
             className="border-light-700 dark:border-dark-200 h-20 w-20 rounded-full border-2 object-cover"
           />
         </div>
@@ -182,10 +183,11 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
       </CardContent>
 
       <CardFooter className="border-light-700 dark:border-dark-200 flex justify-center gap-2 border-t py-1">
+        {/* Line 138: Enhanced View button with actual profile navigation */}
         <Button
           variant="ghost"
           size="sm"
-          onClick={() => alert("View action")}
+          onClick={() => window.location.href = `https://www.codebility.tech/profiles/${data.id}`}
           className="dark:text-light-900 hover:bg-light-800 dark:hover:bg-dark-200 p-1 text-black"
         >
           <Eye className="h-4 w-4" />
@@ -209,4 +211,4 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
       </CardFooter>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/codebility/app/home/orgchart/_components/OrgChartTeamMemberCard.tsx b/apps/codebility/app/home/orgchart/_components/OrgChartTeamMemberCard.tsx
index 4bc08e5c0..a26475bf7 100644
--- a/apps/codebility/app/home/orgchart/_components/OrgChartTeamMemberCard.tsx
+++ b/apps/codebility/app/home/orgchart/_components/OrgChartTeamMemberCard.tsx
@@ -6,7 +6,9 @@ import { Card, CardContent } from "@codevs/ui/card";
 
 import { TeamMemberCardProps } from "../_types/org-chart";
 
+// Line 8: Added id destructuring and onClick handler with hover effects
 export const TeamMemberCard = ({
+  id,
   first_name,
   last_name,
   display_position,
@@ -14,8 +16,12 @@ export const TeamMemberCard = ({
 }: TeamMemberCardProps) => {
   const validImageUrl = getValidImageUrl(image_url);
   
+  // Line 15: Card wrapper now clickable with cursor pointer and enhanced hover
   return (
-    <Card className="group relative h-32 w-36 overflow-hidden border-2 border-gray-200 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-gray-700">
+    <Card 
+      onClick={() => window.location.href = `https://www.codebility.tech/profiles/${id}`}
+      className="group relative h-32 w-36 overflow-hidden border-2 border-gray-200 shadow-lg transition-all duration-300 cursor-pointer hover:-translate-y-1 hover:shadow-2xl hover:scale-[1.02] dark:border-gray-700"
+    >
       <div className="absolute inset-0 bg-gradient-to-t from-customBlue-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
       <CardContent className="relative flex h-full flex-col items-center justify-center gap-1 p-2">
         <div className="relative">
@@ -40,4 +46,4 @@ export const TeamMemberCard = ({
       </CardContent>
     </Card>
   );
-};
+};
\ No newline at end of file

From 5ccace77c049de6fc8433083b8c3899cbaef97ed Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Wed, 19 Nov 2025 02:23:52 +0800
Subject: [PATCH 2/2] admin card redirect

---
 .../_components/landing/LandingAdminCard.tsx  | 144 +++++++++---------
 1 file changed, 74 insertions(+), 70 deletions(-)

diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingAdminCard.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingAdminCard.tsx
index 6bea186d9..c533594ee 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingAdminCard.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingAdminCard.tsx
@@ -8,81 +8,85 @@ import { useState } from "react";
 
 // Utility function to capitalize the first letter of each word
 const capitalizeWords = (text: string) => {
-	return text
-		.split(" ")
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-		.join(" ");
+    return text
+        .split(" ")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(" ");
 };
 
 const AdminCard = ({ admin }: { admin: Codev }) => {
-	const [imageLoaded, setImageLoaded] = useState(false);
-	const defaultImage = "/assets/svgs/icon-codebility-black.svg";
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const defaultImage = "/assets/svgs/icon-codebility-black.svg";
 
-	return (
-		<motion.div
-			className="h-full"
-		>
-			<div className="flex h-full w-full flex-col gap-4 rounded-lg">
-				<div className="relative h-[250px] w-full rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800">
-					{/* Image */}
-					<div className="relative w-full h-full">
-						<Image
-							alt={`${admin.first_name} Avatar`}
-							src={admin.image_url || defaultImage}
-							fill
-							sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-							priority
-							className="rounded-lg object-cover"
-							onLoad={() => setImageLoaded(true)}
-							onError={(e) => {
-								e.currentTarget.src = defaultImage;
-							}}
-						/>
-					</div>
+    // Line 18: Enhanced with onClick redirect and hover effects
+    return (
+        <motion.div
+            className="h-full cursor-pointer"
+            onClick={() => window.location.href = `https://www.codebility.tech/profiles/${admin.id}`}
+            whileHover={{ scale: 1.02 }}
+            transition={{ duration: 0.2 }}
+        >
+            <div className="flex h-full w-full flex-col gap-4 rounded-lg">
+                <div className="relative h-[250px] w-full rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800">
+                    {/* Image */}
+                    <div className="relative w-full h-full">
+                        <Image
+                            alt={`${admin.first_name} Avatar`}
+                            src={admin.image_url || defaultImage}
+                            fill
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                            priority
+                            className="rounded-lg object-cover"
+                            onLoad={() => setImageLoaded(true)}
+                            onError={(e) => {
+                                e.currentTarget.src = defaultImage;
+                            }}
+                        />
+                    </div>
 
-					{/* Loading skeleton */}
-					{!imageLoaded && (
-						<motion.div
-							className="absolute inset-0 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded-lg"
-							animate={{
-								backgroundPosition: ["200% 0", "-200% 0"],
-							}}
-							transition={{
-								duration: 1.5,
-								repeat: Infinity,
-								ease: "linear",
-							}}
-							style={{
-								backgroundSize: "200% 100%",
-							}}
-						/>
-					)}
-				</div>
+                    {/* Loading skeleton */}
+                    {!imageLoaded && (
+                        <motion.div
+                            className="absolute inset-0 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded-lg"
+                            animate={{
+                                backgroundPosition: ["200% 0", "-200% 0"],
+                            }}
+                            transition={{
+                                duration: 1.5,
+                                repeat: Infinity,
+                                ease: "linear",
+                            }}
+                            style={{
+                                backgroundSize: "200% 100%",
+                            }}
+                        />
+                    )}
+                </div>
 
-				{/* Text content */}
-				<motion.div 
-					className="flex w-full flex-col gap-1"
-					initial={{ opacity: 0, y: 10 }}
-					animate={{ opacity: 1, y: 0 }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-				>
-					<p className="md:text-md text-sm text-white lg:text-lg font-medium">
-						{capitalizeWords(admin.first_name)}{" "}
-						{capitalizeWords(admin.last_name)}
-					</p>
-					<div className="min-h-[2.5rem]">
-						{admin.display_position ? (
-							<p className="text-gray-300 text-sm lg:text-base">
-								{admin.display_position}
-							</p>
-						) : (
-							<div className="text-sm lg:text-base">&nbsp;</div>
-						)}
-					</div>
-				</motion.div>
-			</div>
-		</motion.div>
-	);
+                {/* Text content */}
+                <motion.div 
+                    className="flex w-full flex-col gap-1"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
+                >
+                    <p className="md:text-md text-sm text-white lg:text-lg font-medium">
+                        {capitalizeWords(admin.first_name)}{" "}
+                        {capitalizeWords(admin.last_name)}
+                    </p>
+                    <div className="min-h-[2.5rem]">
+                        {admin.display_position ? (
+                            <p className="text-gray-300 text-sm lg:text-base">
+                                {admin.display_position}
+                            </p>
+                        ) : (
+                            <div className="text-sm lg:text-base">&nbsp;</div>
+                        )}
+                    </div>
+                </motion.div>
+            </div>
+        </motion.div>
+    );
 };
 
-export default AdminCard;
+export default AdminCard;
\ No newline at end of file