Fix Hire Codevs Showcase Qualification Filter

fix(in-house): enhance table spacing per team lead feedbackfix(in-house): improve table spacing and alignment

Author: raineer

apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx

@@ -6,6 +6,7 @@ import { useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import CodevBadge from "@/components/CodevBadge";
+import { getTotalCodevPoints } from "@/utils/codev-qualification";
 import {
   AnimatePresence,
   motion,
@@ -31,41 +32,32 @@ interface Props {
   color: string;
 }
 
-const STATUS_CONFIG: Record<
-  InternalStatus,
-  { label: string; className: string }
-> = {
+const STATUS_CONFIG = {
   TRAINING: {
     label: "Training",
-    className:
-      "bg-yellow-500/20 backdrop-blur-sm text-yellow-200 border border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
+    className: "bg-yellow-500/20 backdrop-blur-sm text-yellow-200 border border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
   },
   GRADUATED: {
     label: "Graduated",
-    className:
-      "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
+    className: "bg-green-500/20 backdrop-blur-sm text-green-200 border border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
   },
   INACTIVE: {
     label: "Inactive",
-    className:
-      "bg-gray-500/20 backdrop-blur-sm text-gray-200 border border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
+    className: "bg-gray-500/20 backdrop-blur-sm text-gray-200 border border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
   },
   MENTOR: {
     label: "Mentor",
-    className:
-      "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
+    className: "bg-purple-500/20 backdrop-blur-sm text-purple-200 border border-purple-500/30 dark:bg-purple-500/10 dark:text-purple-300",
   },
   ADMIN: {
     label: "Admin",
-    className:
-      "bg-blue-500/20 backdrop-blur-sm text-blue-200 border border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
+    className: "bg-blue-500/20 backdrop-blur-sm text-blue-200 border border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
   },
   DEPLOYED: {
     label: "Deployed",
-    className:
-      "bg-indigo-500/20 backdrop-blur-sm text-indigo-200 border border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
+    className: "bg-indigo-500/20 backdrop-blur-sm text-indigo-200 border border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
   },
-};
+} as const;
 
 const CodevCard = ({ codev, color }: Props) => {
   const [hovered, setHovered] = useState(false);
@@ -86,13 +78,10 @@ const CodevCard = ({ codev, color }: Props) => {
   };
 
   const internalStatus = codev.internal_status || "MENTOR";
-  const statusConfig =
-    STATUS_CONFIG[internalStatus as InternalStatus] || STATUS_CONFIG.MENTOR;
+  const statusConfig = STATUS_CONFIG[internalStatus as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.MENTOR;
 
   const filteredLevel = useMemo(() => {
-    return codev.level &&
-      codev.codev_points &&
-      Array.isArray(codev.codev_points)
+    return codev.level && codev.codev_points && Array.isArray(codev.codev_points)
       ? Object.fromEntries(
           Object.entries(codev.level)
             .filter(([skillCategoryId, levelValue]) => {
@@ -104,160 +93,82 @@ const CodevCard = ({ codev, color }: Props) => {
               );
             })
             .sort(([skillCategoryIdA], [skillCategoryIdB]) => {
-              const pointsA =
-                codev.codev_points!.find(
-                  (point) => point?.skill_category_id === skillCategoryIdA,
-                )?.points || 0;
-              const pointsB =
-                codev.codev_points!.find(
-                  (point) => point?.skill_category_id === skillCategoryIdB,
-                )?.points || 0;
+              const pointsA = codev.codev_points!.find((point) => point?.skill_category_id === skillCategoryIdA)?.points || 0;
+              const pointsB = codev.codev_points!.find((point) => point?.skill_category_id === skillCategoryIdB)?.points || 0;
               return pointsB - pointsA;
             }),
         )
       : {};
   }, [codev.level, codev.codev_points]);
 
-  // Line 119: Enhanced card wrapper with click redirect
+  const totalPoints = getTotalCodevPoints(codev.codev_points);
+
   return (
-    <div
-      className="h-64"
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <div
-        onClick={() =>
-          (window.location.href = `https://www.codebility.tech/profiles/${codev.id}`)
-        }
-        className="group relative flex h-full w-full cursor-pointer 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:scale-[1.02] hover:bg-white/20 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10"
-      >
-        {/* Background decoration */}
+    <div className="h-64" onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
+      <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">
         <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" />
         <div className="grid w-full grid-cols-4 gap-2">
           <div className="col-span-1" />
           <div className="relative col-span-2 flex justify-center">
-            <Image
-              alt={`${codev.first_name} Avatar`}
-              src={
-                codev.image_url &&
-                (codev.image_url.startsWith("http") ||
-                  codev.image_url.startsWith("/"))
-                  ? codev.image_url
-                  : "/assets/svgs/icon-codebility-black.svg"
-              }
-              width={70}
-              height={70}
-              className={`${color} h-[70px] w-[70px] rounded-full bg-cover object-cover p-0.5`}
-              onMouseMove={handleMouseMove}
-              onError={(e) => {
-                console.error(
-                  `Failed to load image for ${codev.first_name}: ${codev.image_url}`,
-                );
-                e.currentTarget.src = "/assets/svgs/icon-codebility-black.svg";
-              }}
-            />
+            <div className="absolute -top-2 -right-2 z-20">
+              <TooltipProvider>
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-1 rounded-full border border-yellow-500/30 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 px-2.5 py-1 shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:from-yellow-500/30 hover:to-orange-500/30">
+                      <span className="text-xs font-bold text-yellow-200">⭐</span>
+                      <span className="text-xs font-bold text-yellow-200">{totalPoints}</span>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent className="border border-white/20 bg-white/10 px-3 py-2 text-xs text-white backdrop-blur-md dark:border-white/10 dark:bg-white/5">
+                    <div className="flex flex-col gap-1">
+                      <p className="font-semibold">Total Skill Points</p>
+                      <p className="text-gray-200">Qualification: ≥100 points</p>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <Image alt={`${codev.first_name} Avatar`} src={codev.image_url && (codev.image_url.startsWith("http") || codev.image_url.startsWith("/")) ? codev.image_url : "/assets/svgs/icon-codebility-black.svg"} width={70} height={70} className={`${color} h-[70px] w-[70px] rounded-full bg-cover object-cover p-0.5`} onMouseMove={handleMouseMove} onError={(e) => { console.error(`Failed to load image for ${codev.first_name}: ${codev.image_url}`); e.currentTarget.src = "/assets/svgs/icon-codebility-black.svg"; }} />
             <AnimatePresence>
               {hovered && internalStatus && (
-                <motion.div
-                  initial={{ opacity: 0, y: 20, scale: 0.6 }}
-                  animate={{
-                    opacity: 1,
-                    y: 0,
-                    scale: 1,
-                    transition: {
-                      type: "spring",
-                      stiffness: 260,
-                      damping: 10,
-                    },
-                  }}
-                  exit={{ opacity: 0, y: 20, scale: 0.6 }}
-                  style={{
-                    translateX: translateX,
-                    rotate: rotate,
-                    whiteSpace: "nowrap",
-                  }}
-                  className={cn(
-                    "absolute -top-8 right-1/2 z-50 flex -translate-x-1/2 transform flex-col items-center justify-center rounded-lg px-4 py-2 shadow-xl",
-                    statusConfig.className,
-                  )}
-                >
-                  <div className="relative z-30 text-base">
-                    {statusConfig.label}
-                  </div>
+                <motion.div initial={{ opacity: 0, y: 20, scale: 0.6 }} animate={{ opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 260, damping: 10 } }} exit={{ opacity: 0, y: 20, scale: 0.6 }} style={{ translateX: translateX, rotate: rotate, whiteSpace: "nowrap" }} className={cn("absolute -top-8 right-1/2 z-50 flex -translate-x-1/2 transform flex-col items-center justify-center rounded-lg px-4 py-2 shadow-xl", statusConfig.className)}>
+                  <div className="relative z-30 text-base">{statusConfig.label}</div>
                 </motion.div>
               )}
             </AnimatePresence>
             <div className="absolute bottom-[1px] right-[1px]">
-              <p
-                className={cn(
-                  "rounded-full border-2 p-2 text-[9px]",
-                  codev.availability_status
-                    ? "border-green-600 bg-green-500"
-                    : "border-red-600 bg-red-500",
-                )}
-              ></p>
+              <p className={cn("rounded-full border-2 p-2 text-[9px]", codev.availability_status ? "border-green-600 bg-green-500" : "border-red-600 bg-red-500")}></p>
             </div>
           </div>
           <div className="col-span-1 flex justify-end">
             <TooltipProvider>
               <Tooltip delayDuration={100}>
                 <TooltipTrigger asChild>
-                  {/* 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"
-                      className="h-8 w-8 rounded-full border-white/30 bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/20"
-                    >
+                  <Link href={`/profiles/${codev.id}`} target="_blank" onClick={(e) => e.stopPropagation()}>
+                    <Button variant="outline" size="icon" className="h-8 w-8 rounded-full border-white/30 bg-white/20 backdrop-blur-sm transition-all duration-300 hover:bg-white/30 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/20">
                       <BookOpenIcon className="h-3.5 w-3.5" />
                     </Button>
                   </Link>
                 </TooltipTrigger>
-                <TooltipContent className="border border-white/20 bg-white/10 px-2 py-1 text-xs text-white backdrop-blur-md dark:border-white/10 dark:bg-white/5">
-                  Read Bio
-                </TooltipContent>
+                <TooltipContent className="border border-white/20 bg-white/10 px-2 py-1 text-xs text-white backdrop-blur-md dark:border-white/10 dark:bg-white/5">Read Bio</TooltipContent>
               </Tooltip>
             </TooltipProvider>
           </div>
         </div>
         <div className="flex flex-col items-center gap-0.5">
           <div className="flex flex-col gap-1 text-center">
-            <p className="md:text-md relative z-10 text-sm capitalize text-white dark:text-white lg:text-base">
-              {codev.first_name} {codev.last_name}
-            </p>
-            {codev.display_position ? (
-              <p className="relative z-10 text-sm text-gray-200 dark:text-gray-300">
-                {codev.display_position}
-              </p>
-            ) : (
-              <div className="relative z-10 text-sm lg:text-base">&nbsp;</div>
-            )}
+            <p className="md:text-md relative z-10 text-sm capitalize text-white dark:text-white lg:text-base">{codev.first_name} {codev.last_name}</p>
+            {codev.display_position ? (<p className="relative z-10 text-sm text-gray-200 dark:text-gray-300">{codev.display_position}</p>) : (<div className="relative z-10 text-sm lg:text-base">&nbsp;</div>)}
           </div>
         </div>
         <div className="flex min-h-[20px] items-center justify-center">
-          {filteredLevel && Object.keys(filteredLevel).length > 0 ? (
-            <CodevBadge
-              level={filteredLevel}
-              className="transition-transform group-hover:scale-100"
-            />
-          ) : null}
-        </div>
-        <div
-          className="relative z-20"
-          onMouseEnter={(e) => e.stopPropagation()}
-          onMouseLeave={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <CodevHireCodevButton codevId={codev.id} />
+          {filteredLevel && Object.keys(filteredLevel).length > 0 ? (<CodevBadge level={filteredLevel} className="transition-transform group-hover:scale-100" />) : null}
         </div>
+        <CodevHireCodevButton codevId={codev.id}/>
       </div>
     </div>
   );
 };
 
-export default CodevCard;
+export default CodevCard;

apps/codebility/app/(marketing)/profiles/page.tsx

@@ -2,10 +2,8 @@ import { Suspense } from "react";
 import { UsersSkeleton } from "@/components/ui/skeleton/UsersSkeleton";
 import { getCodevs } from "@/lib/server/codev.service";
 import { Codev } from "@/types/home/codev";
-import {
-  getPrioritizedAndFilteredCodevs,
-  prioritizeCodevs,
-} from "@/utils/codev-priority"; // Import the utility
+import { prioritizeCodevs } from "@/utils/codev-priority"; // ← CHANGED: Only import prioritizeCodevs
+import { getQualifiedCodevs } from "@/utils/codev-qualification";
 
 import Section from "../_shared/CodevsSection";
 import CodevContainer from "./_components/CodevContainer";
@@ -16,22 +14,35 @@ export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
 export default async function Profiles() {
+  // Fetch all passed codevs (includes admins, mentors, codevs)
   const [{ data: allCodevs, error }] = await Promise.all([
-    getCodevs({ filters: { role_id: 10 } }), // show only Codevs with role_id 10 which is Codev
+    getCodevs({ filters: { application_status: "passed" } }),
   ]);
 
   if (error) {
     throw new Error("Failed to fetch profiles data");
   }
 
+  // Convert to array safely
   const codevsArray: Codev[] = Array.isArray(allCodevs) ? allCodevs : [];
 
-  // Use the utility function with filterAdminAndFailed set to true
-  const sortedCodevs = getPrioritizedAndFilteredCodevs(
-    codevsArray,
-    { activeStatus: ["active"] },
-    true,
-  );
+  // ✅ STEP 1: Filter by qualification criteria (100+ points, TRAINING/GRADUATED/NULL, available)
+  // This handles ALL filtering logic - no need for additional filters
+  const qualifiedCodevs = getQualifiedCodevs(codevsArray);
+
+  // ✅ STEP 2: Apply priority sorting only (no additional filtering)
+  // We already filtered everything in getQualifiedCodevs(), so just prioritize by:
+  // - Active projects > No projects
+  // - Available > Unavailable
+  const sortedCodevs = prioritizeCodevs(qualifiedCodevs); // ← CHANGED: Direct prioritization
+
+  // Debug logging in development
+  if (process.env.NODE_ENV === "development") {
+    console.log("📊 PROFILES PAGE STATS:");
+    console.log(`   Total codevs fetched: ${codevsArray.length}`);
+    console.log(`   Qualified codevs: ${qualifiedCodevs.length}`);
+    console.log(`   Final displayed: ${sortedCodevs.length}`);
+  }
 
   return (
     <>
@@ -54,4 +65,4 @@ export default async function Profiles() {
       <CodevHireCodevModal />
     </>
   );
-}
+}