feat: enhance hackathon status display and judging page functionality

- Introduced a new HackathonStatus type and a getStatusDisplay function to improve the display of hackathon statuses across the application.
- Updated the HackathonsPage to utilize the new status display logic for better visual representation of hackathon states.
- Added functionality to fetch and display winners in the JudgingPage, enhancing the user experience by indicating when results are published.
- Refactored the API response handling for fetching judging winners to ensure consistent data structure.
- Improved the ParticipantsPage to accurately reflect statistics for active participants and total submissions.

Author: 0xdevcollins

app/(landing)/organizations/[id]/hackathons/[hackathonId]/judging/page.tsx

@@ -24,7 +24,7 @@ import { getOrganizationMembers } from '@/lib/api/organization';
 import { getCrowdfundingProject } from '@/features/projects/api';
 import { authClient } from '@/lib/auth-client';
 import { useOrganization } from '@/lib/providers/OrganizationProvider';
-import { Loader2, Trophy } from 'lucide-react';
+import { Loader2, Trophy, CheckCircle2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { AuthGuard } from '@/components/auth/AuthGuard';
@@ -63,6 +63,7 @@ export default function JudgingPage() {
   const canManageJudges =
     currentUserRole === 'owner' || currentUserRole === 'admin';
   const canPublishResults = canManageJudges && isCurrentUserJudge;
+  const resultsPublished = winners.length > 0;
 
   const fetchJudges = useCallback(async () => {
     // Priority: activeOrgId from context, then params.id
@@ -180,6 +181,21 @@ export default function JudgingPage() {
     }
   }, [organizationId, hackathonId]);
 
+  const fetchWinners = useCallback(async () => {
+    if (!organizationId || !hackathonId) return;
+    setIsFetchingWinners(true);
+    try {
+      const res = await getJudgingWinners(organizationId, hackathonId);
+      if (res.success && res.data) {
+        setWinners(Array.isArray(res.data) ? res.data : []);
+      }
+    } catch (error) {
+      console.error('Error fetching winners:', error);
+    } finally {
+      setIsFetchingWinners(false);
+    }
+  }, [organizationId, hackathonId]);
+
   const fetchData = useCallback(async () => {
     if (!organizationId || !hackathonId) return;
 
@@ -191,9 +207,10 @@ export default function JudgingPage() {
         getJudgingCriteria(hackathonId),
       ]);
 
-      // Trigger judges and results fetch in parallel but handle separately
+      // Trigger judges, results, and winners fetch in parallel (winners => results published state)
       fetchJudges();
       fetchResults();
+      fetchWinners();
 
       let enrichedSubmissions: JudgingSubmission[] = [];
 
@@ -289,7 +306,7 @@ export default function JudgingPage() {
     } finally {
       setIsLoading(false);
     }
-  }, [organizationId, hackathonId, fetchJudges, fetchResults]);
+  }, [organizationId, hackathonId, fetchJudges, fetchResults, fetchWinners]);
 
   useEffect(() => {
     fetchData();
@@ -344,21 +361,6 @@ export default function JudgingPage() {
     }
   };
 
-  const fetchWinners = useCallback(async () => {
-    if (!organizationId || !hackathonId) return;
-    setIsFetchingWinners(true);
-    try {
-      const res = await getJudgingWinners(organizationId, hackathonId);
-      if (res.success && res.data) {
-        setWinners(Array.isArray(res.data) ? res.data : []);
-      }
-    } catch (error) {
-      console.error('Error fetching winners:', error);
-    } finally {
-      setIsFetchingWinners(false);
-    }
-  }, [organizationId, hackathonId]);
-
   const handlePublishResults = async () => {
     setIsPublishing(true);
     try {
@@ -650,26 +652,43 @@ export default function JudgingPage() {
 
             <TabsContent value='results' className='mt-6'>
               <div className='flex flex-col gap-6'>
-                {canPublishResults && judgingResults.length > 0 && (
-                  <div className='bg-primary/5 border-primary/10 flex items-center justify-between rounded-lg border p-4'>
+                {resultsPublished && (
+                  <div className='flex items-center gap-4 rounded-lg border border-green-500/20 bg-green-500/10 p-4'>
+                    <CheckCircle2 className='h-10 w-10 shrink-0 text-green-500' />
                     <div>
-                      <h3 className='text-primary text-sm font-semibold'>
-                        Finalize Competition
+                      <h3 className='text-sm font-semibold text-green-400'>
+                        Results published
                       </h3>
                       <p className='text-xs text-gray-400'>
-                        Publish the current rankings to name the winners.
+                        Winner rankings are live. This hackathon&apos;s results
+                        have been finalized.
                       </p>
                     </div>
-                    <Button
-                      onClick={handlePublishResults}
-                      disabled={isPublishing}
-                      className='bg-primary text-primary-foreground hover:bg-primary/90 px-8 font-bold'
-                    >
-                      {isPublishing ? 'Publishing...' : 'Publish Results'}
-                    </Button>
                   </div>
                 )}
 
+                {!resultsPublished &&
+                  canPublishResults &&
+                  judgingResults.length > 0 && (
+                    <div className='bg-primary/5 border-primary/10 flex items-center justify-between rounded-lg border p-4'>
+                      <div>
+                        <h3 className='text-primary text-sm font-semibold'>
+                          Finalize Competition
+                        </h3>
+                        <p className='text-xs text-gray-400'>
+                          Publish the current rankings to name the winners.
+                        </p>
+                      </div>
+                      <Button
+                        onClick={handlePublishResults}
+                        disabled={isPublishing}
+                        className='bg-primary text-primary-foreground hover:bg-primary/90 px-8 font-bold'
+                      >
+                        {isPublishing ? 'Publishing...' : 'Publish Results'}
+                      </Button>
+                    </div>
+                  )}
+
                 {winners.length > 0 && (
                   <div className='space-y-4'>
                     <h2 className='flex items-center gap-2 text-lg font-bold text-yellow-500'>

app/(landing)/organizations/[id]/hackathons/[hackathonId]/participants/page.tsx

@@ -137,9 +137,13 @@ const ParticipantsPage: React.FC = () => {
             organizationId,
             actualHackathonId
           );
+          const stats = response.data as {
+            totalSubmissions?: number;
+            activeParticipants?: number;
+          };
           setStatistics({
-            participantsCount: response.data.participantsCount,
-            submissionsCount: response.data.submissionsCount,
+            participantsCount: stats.activeParticipants ?? 0,
+            submissionsCount: stats.totalSubmissions ?? 0,
           });
         } catch (err) {
           console.error('Failed to load statistics', err);

app/(landing)/organizations/[id]/hackathons/page.tsx

@@ -72,6 +72,58 @@ const getTimeRemaining = (endDate: string): string => {
   return `${Math.floor(days / 365)}y`;
 };
 
+type HackathonStatus =
+  | 'DRAFT'
+  | 'UPCOMING'
+  | 'ACTIVE'
+  | 'JUDGING'
+  | 'COMPLETED'
+  | 'ARCHIVED'
+  | 'CANCELLED';
+
+const getStatusDisplay = (
+  status: HackathonStatus | undefined
+): { label: string; className: string } => {
+  switch (status) {
+    case 'UPCOMING':
+      return {
+        label: 'Upcoming',
+        className: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+      };
+    case 'ACTIVE':
+      return {
+        label: 'Live',
+        className: 'bg-green-500/10 text-green-400 border-green-500/20',
+      };
+    case 'JUDGING':
+      return {
+        label: 'Judging',
+        className: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
+      };
+    case 'COMPLETED':
+      return {
+        label: 'Ended',
+        className: 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20',
+      };
+    case 'ARCHIVED':
+      return {
+        label: 'Archived',
+        className: 'bg-zinc-600/10 text-zinc-500 border-zinc-600/20',
+      };
+    case 'CANCELLED':
+      return {
+        label: 'Cancelled',
+        className: 'bg-red-500/10 text-red-400 border-red-500/20',
+      };
+    case 'DRAFT':
+    default:
+      return {
+        label: status === 'DRAFT' ? 'Draft' : (status ?? 'Draft'),
+        className: 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20',
+      };
+  }
+};
+
 export default function HackathonsPage() {
   const params = useParams();
   const organizationId = params.id as string;
@@ -406,16 +458,19 @@ export default function HackathonsPage() {
                           )}
                           <div className='flex flex-1 flex-col gap-2 p-5'>
                             <div className='mb-1 flex items-center gap-2'>
-                              <Badge
-                                variant='outline'
-                                className={`rounded-full border-none px-3 py-1 text-xs font-semibold ${['UPCOMING', 'ACTIVE', 'JUDGING', 'COMPLETED'].includes(hackathon.status) ? 'bg-green-500/10 text-green-500' : 'bg-secondary-500/10 text-secondary-500'}`}
-                              >
-                                {['UPCOMING', 'ACTIVE', 'JUDGING'].includes(
-                                  hackathon.status
-                                )
-                                  ? 'Live'
-                                  : hackathon.status}
-                              </Badge>
+                              {(() => {
+                                const { label, className } = getStatusDisplay(
+                                  hackathon.status as HackathonStatus
+                                );
+                                return (
+                                  <Badge
+                                    variant='outline'
+                                    className={`rounded-full border px-3 py-1 text-xs font-semibold ${className}`}
+                                  >
+                                    {label}
+                                  </Badge>
+                                );
+                              })()}
                               {endDate && (
                                 <span className='flex items-center gap-1.5 text-xs text-zinc-500'>
                                   <Calendar className='h-3 w-3' />