Merge branch 'dev' of https://github.com/CodebilityDev/codebility-plus into services-page-improvement

Author: novice-is-me

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

@@ -31,10 +31,7 @@ interface Props {
   color: string;
 }
 
-const STATUS_CONFIG: Record<
-  InternalStatus,
-  { label: string; className: string }
-> = {
+const STATUS_CONFIG: Record<InternalStatus, { label: string; className: string }> = {
   TRAINING: {
     label: "Training",
     className:
@@ -118,22 +115,20 @@ 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
-        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"
+      <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" />
+        
         <div className="grid w-full grid-cols-4 gap-2">
           <div className="col-span-1" />
           <div className="relative col-span-2 flex justify-center">
@@ -203,12 +198,7 @@ const CodevCard = ({ codev, color }: Props) => {
             <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()}
-                  >
+                  <Link href={`/profiles/${codev.id}`} target="_blank" onClick={(e) => e.stopPropagation()}>
                     <Button
                       variant="outline"
                       size="icon"
@@ -247,17 +237,10 @@ const CodevCard = ({ codev, color }: Props) => {
             />
           ) : null}
         </div>
-        <div
-          className="relative z-20"
-          onMouseEnter={(e) => e.stopPropagation()}
-          onMouseLeave={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <CodevHireCodevButton codevId={codev.id} />
-        </div>
+        <CodevHireCodevButton codevId={codev.id} hovered={hovered} />
       </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";
+import { getQualifiedCodevs } from "@/utils/codev-qualification";
 
 import Section from "../_shared/CodevsSection";
 import CodevContainer from "./_components/CodevContainer";
@@ -16,22 +14,33 @@ 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,
-  );
+  // Filter by qualification criteria (100+ points, passed, available)
+  // This handles ALL filtering logic - no internal_status restrictions
+  const qualifiedCodevs = getQualifiedCodevs(codevsArray);
+
+  // Apply priority sorting only (no additional filtering)
+  // Prioritize by: Active projects > No projects, Available > Unavailable
+  const sortedCodevs = prioritizeCodevs(qualifiedCodevs);
+
+  // 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 +63,4 @@ export default async function Profiles() {
       <CodevHireCodevModal />
     </>
   );
-}
+}

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

@@ -89,7 +89,7 @@ const ServicesPage = async () => {
           <ServicesPageContent servicesData={mappedData} />
         </ServiceProvider>
       </div>
-      <Footer />
+      
     </div>
   );
 };

apps/codebility/app/home/_components/Navbar.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/public/assets/svgs";
 import { useUserStore } from "@/store/codev-store";
 import { NotificationContainer } from "@/components/notifications/NotificationContainer";
+import { AnnouncementButton } from "@/app/home/announcements/AnnouncementButton";
 
 import {
   DropdownMenu,
@@ -84,6 +85,9 @@ const Navbar = () => {
           role="navigation"
           aria-label="User menu"
         >
+          {/* Announcement Button - NEW */}
+          <AnnouncementButton />
+          
           <NotificationContainer />
 
           <div>

apps/codebility/app/home/announcements/AnnouncementButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useState } from "react";
+import { Megaphone } from "lucide-react";
+import { AnnouncementModal } from "./AnnouncementModal";
+
+export const AnnouncementButton: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="relative rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+        aria-label="View announcements"
+        title="Announcements"
+      >
+        <Megaphone className="h-5 w-5" />
+      </button>
+
+      <AnnouncementModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </>
+  );
+};

apps/codebility/app/home/announcements/AnnouncementContent.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { AnnouncementPage } from "./types";
+
+interface AnnouncementContentProps {
+  page: AnnouncementPage;
+}
+
+export const AnnouncementContent: React.FC<AnnouncementContentProps> = ({
+  page,
+}) => {
+  return (
+    <div className="space-y-4 sm:space-y-6 md:space-y-8">
+      {/* Banner Image */}
+      <div className="relative aspect-video w-full overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800">
+        <Image
+          src={page.banner_image}
+          alt={page.title}
+          fill
+          className="object-cover"
+          sizes="(max-width: 640px) 100vw, (max-width: 768px) 90vw, 800px"
+          priority
+        />
+      </div>
+
+      {/* Title */}
+      <div>
+        <h3 className="text-xl sm:text-2xl md:text-3xl font-semibold text-gray-900 dark:text-gray-100">
+          {page.title}
+        </h3>
+        <p className="mt-1 sm:mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">
+          Last updated:{" "}
+          {new Date(page.last_updated).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </p>
+      </div>
+
+      {/* Content */}
+      <div className="prose prose-sm sm:prose-base md:prose-lg dark:prose-invert max-w-none">
+        <div
+          className="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: page.content }}
+        />
+      </div>
+    </div>
+  );
+};