Hackathon analytics

app/(landing)/hackathons/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { HackathonResources } from '@/components/hackathons/resources/resources'
 import SubmissionTab from '@/components/hackathons/submissions/submissionTab';
 import { HackathonDiscussions } from '@/components/hackathons/discussion/comment';
 import { TeamFormationTab } from '@/components/hackathons/team-formation/TeamFormationTab';
+import { WinnersTab } from '@/components/hackathons/winners/WinnersTab';
 import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
 import { useTimelineEvents } from '@/hooks/hackathon/use-timeline-events';
 import { toast } from 'sonner';
@@ -22,6 +23,7 @@ import { HackathonParticipants } from '@/components/hackathons/participants/hack
 import { useCommentSystem } from '@/hooks/use-comment-system';
 import { CommentEntityType } from '@/types/comment';
 import { useTeamPosts } from '@/hooks/hackathon/use-team-posts';
+import { HackathonWinner } from '@/lib/api/hackathons';
 
 export default function HackathonPage() {
   const router = useRouter();
@@ -31,6 +33,7 @@ export default function HackathonPage() {
   const {
     currentHackathon,
     submissions,
+    winners,
     loading,
     setCurrentHackathon,
     refreshCurrentHackathon,
@@ -75,6 +78,19 @@ export default function HackathonPage() {
     const isTabEnabled =
       currentHackathon?.enabledTabs?.includes('joinATeamTab') !== false;
 
+    // For testing: Use mock winners if real winners are empty
+    // const displayWinners =
+    //   winners && winners.length > 0 ? winners : MOCK_WINNERS;
+    // const hasWinners = displayWinners.length > 0;
+    const hasWinners = winners && winners.length > 0;
+
+    // For testing: Force enable winners tab
+    // const isWinnersTabEnabled =
+    //   currentHackathon?.enabledTabs?.includes('winnersTab') !== false;
+    // const isWinnersTabEnabled = true;
+    const isWinnersTabEnabled =
+      currentHackathon?.enabledTabs?.includes('winnersTab') !== false;
+
     const tabs = [
       { id: 'overview', label: 'Overview' },
       ...(hasParticipants
@@ -115,6 +131,13 @@ export default function HackathonPage() {
       });
     }
 
+    if (hasWinners && isWinnersTabEnabled) {
+      tabs.push({
+        id: 'winners',
+        label: 'Winners',
+      });
+    }
+
     return tabs;
   }, [
     currentHackathon?.participants,
@@ -126,6 +149,7 @@ export default function HackathonPage() {
     discussionComments.comments.length,
     teamPosts.length,
     hackathonId,
+    winners,
   ]);
 
   // Refresh hackathon data
@@ -342,11 +366,9 @@ export default function HackathonPage() {
             )}
 
             {activeTab === 'resources' &&
-              currentHackathon.resources?.length > 0 && ( // Direct array check
-                <HackathonResources />
-              )}
+              currentHackathon.resources?.length > 0 && <HackathonResources />}
             {activeTab === 'participants' &&
-              currentHackathon.participants?.length > 0 && ( // Direct array check
+              currentHackathon.participants?.length > 0 && (
                 <HackathonParticipants />
               )}
 
@@ -365,7 +387,14 @@ export default function HackathonPage() {
             )}
 
             {activeTab === 'team-formation' && (
-              <TeamFormationTab hackathonSlugOrId={hackathonId} />
+              <TeamFormationTab
+                hackathonSlugOrId={hackathonId}
+                isRegistered={isRegistered}
+              />
+            )}
+
+            {activeTab === 'winners' && (
+              <WinnersTab winners={winners} hackathonSlug={hackathonId} />
             )}
 
             {activeTab === 'resources' && currentHackathon?.resources?.[0] && (

app/(landing)/hackathons/layout.tsx

@@ -1,4 +1,5 @@
 import { HackathonDataProvider } from '@/lib/providers/hackathonProvider';
+import { OrganizationProvider } from '@/lib/providers/OrganizationProvider';
 import { use } from 'react';
 
 interface HackathonLayoutProps {
@@ -15,8 +16,10 @@ export default function HackathonLayout({
   const resolvedParams = use(params);
 
   return (
-    <HackathonDataProvider hackathonSlug={resolvedParams.slug}>
-      {children}
-    </HackathonDataProvider>
+    <OrganizationProvider>
+      <HackathonDataProvider hackathonSlug={resolvedParams.slug}>
+        {children}
+      </HackathonDataProvider>
+    </OrganizationProvider>
   );
 }

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

@@ -1,7 +1,13 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import { Loader2, AlertCircle, Calendar, TrendingUp } from 'lucide-react';
+import {
+  Loader2,
+  AlertCircle,
+  Calendar,
+  TrendingUp,
+  Check,
+} from 'lucide-react';
 import { useHackathons } from '@/hooks/use-hackathons';
 import { useEffect } from 'react';
 import { useHackathonAnalytics } from '@/hooks/use-hackathon-analytics';
@@ -23,8 +29,10 @@ export default function HackathonPage() {
       autoFetch: false,
     });
 
-  const { statistics, statisticsLoading, timeSeriesData, timeSeriesLoading } =
-    useHackathonAnalytics(organizationId, hackathonId);
+  const { analytics, loading: analyticsLoading } = useHackathonAnalytics(
+    organizationId,
+    hackathonId
+  );
 
   useEffect(() => {
     if (organizationId && hackathonId) {
@@ -60,6 +68,29 @@ export default function HackathonPage() {
     );
   }
 
+  // Adapt key metrics
+  const statistics = analytics?.summary || null;
+
+  // Adapt charts data
+  const timeSeriesData = analytics?.trends
+    ? {
+        submissions: {
+          daily: analytics.trends.submissionsOverTime.map(p => ({
+            date: p.date,
+            count: p.count,
+          })),
+          weekly: [],
+        },
+        participants: {
+          daily: analytics.trends.participantSignupsOverTime.map(p => ({
+            date: p.date,
+            count: p.count,
+          })),
+          weekly: [],
+        },
+      }
+    : null;
+
   return (
     <AuthGuard redirectTo='/auth?mode=signin' fallback={<Loading />}>
       <div className='min-h-screen bg-black'>
@@ -69,11 +100,6 @@ export default function HackathonPage() {
             <h1 className='text-3xl font-light tracking-tight text-white sm:text-4xl'>
               {currentHackathon?.name || 'Hackathon Dashboard'}
             </h1>
-            {/* {currentHackathon?.information?.description && (
-            <p className='mt-3 max-w-2xl text-sm text-gray-400'>
-              {currentHackathon.information.description}
-            </p>
-          )} */}
           </div>
         </div>
 
@@ -89,15 +115,15 @@ export default function HackathonPage() {
             </div>
             <HackathonStatistics
               statistics={statistics}
-              loading={statisticsLoading}
+              loading={analyticsLoading}
             />
           </section>
 
           {/* Charts Section */}
           <section className='mb-16'>
             <HackathonCharts
               timeSeriesData={timeSeriesData}
-              loading={timeSeriesLoading}
+              loading={analyticsLoading}
             />
           </section>
 
@@ -109,21 +135,97 @@ export default function HackathonPage() {
                 Timeline
               </h2>
             </div>
-            <HackathonTimeline
-              timeline={{
-                startDate: currentHackathon?.startDate || '',
-                submissionDeadline: currentHackathon?.submissionDeadline || '',
-                judgingDate: currentHackathon?.endDate || '',
-                winnerAnnouncementDate:
-                  currentHackathon?.registrationDeadline || '',
-                timezone: currentHackathon?.timezone || '',
-                phases: currentHackathon?.phases?.map(phase => ({
-                  name: phase.name || '',
-                  startDate: phase.startDate || '',
-                  endDate: phase.endDate || '',
-                })),
-              }}
-            />
+
+            {/* Render new timeline from analytics */}
+            <div className='relative'>
+              <div className='space-y-0'>
+                {(() => {
+                  const timelineEvents = analytics?.timeline || [];
+                  const hasWinnerAnnouncement = timelineEvents.some(
+                    e => e.phase === 'Winner Announcement'
+                  );
+
+                  // Manually append Winner Announcement if missing and date exists
+                  const fullTimeline = [...timelineEvents];
+                  if (!hasWinnerAnnouncement && currentHackathon?.endDate) {
+                    const winnerDate = new Date(currentHackathon.endDate);
+                    const now = new Date();
+                    // Simple status logic for single date event
+                    // If date is passed, completed. If today (roughly), ongoing?
+                    // Or just use 'upcoming' if future, 'completed' if past.
+                    // Ideally we'd match the phase logic, but for a single date event:
+                    let status: 'completed' | 'ongoing' | 'upcoming' =
+                      'upcoming';
+                    if (now > winnerDate) {
+                      status = 'completed';
+                    }
+                    // For "Winner Announcement", it might be "ongoing" on the day of?
+                    // keeping simple for now.
+
+                    fullTimeline.push({
+                      phase: 'Winner Announcement',
+                      description:
+                        'Final results published and prizes distributed to winners.',
+                      date: currentHackathon.endDate,
+                      status: status,
+                    });
+                  }
+
+                  return fullTimeline.map((phase, index) => {
+                    const isLast = index === fullTimeline.length - 1;
+                    const isActive = phase.status === 'ongoing';
+                    const isCompleted = phase.status === 'completed';
+
+                    return (
+                      <div
+                        key={`${phase.phase}-${index}`}
+                        className={`relative flex items-start gap-3 sm:gap-4 ${!isLast ? 'pb-6' : ''}`}
+                      >
+                        <div className='relative flex flex-col items-center'>
+                          {isActive ? (
+                            <div className='bg-active-bg z-10 flex shrink-0 items-center justify-center rounded-full p-1'>
+                              <div className='bg-primary z-10 flex h-4 w-4 shrink-0 items-center justify-center rounded-full' />
+                            </div>
+                          ) : isCompleted ? (
+                            <div className='z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-green-500/20 bg-green-500/10'>
+                              <Check className='h-3 w-3 text-green-500' />
+                            </div>
+                          ) : (
+                            <div className='bg-inactive z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-[#1C1C1C] opacity-50' />
+                          )}
+                          {!isLast && (
+                            <div className='absolute top-6 left-1/2 h-6 w-0.5 -translate-x-1/2'>
+                              <div className='h-full border-l-2 border-dashed border-gray-600' />
+                            </div>
+                          )}
+                        </div>
+                        <div className='flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4'>
+                          <div className='min-w-0 flex-1'>
+                            <h3 className='mb-1 text-sm font-medium text-white sm:text-base'>
+                              {phase.phase}
+                            </h3>
+                            <p
+                              className={`text-xs sm:text-sm ${
+                                isCompleted
+                                  ? 'text-gray-400'
+                                  : isActive
+                                    ? 'text-white/60'
+                                    : 'text-white/40'
+                              }`}
+                            >
+                              {phase.description}
+                            </p>
+                          </div>
+                          <div className='flex-shrink-0 text-xs whitespace-nowrap text-white/60 sm:text-sm'>
+                            {new Date(phase.date).toLocaleDateString()}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  });
+                })()}
+              </div>
+            </div>
           </section>
         </div>
       </div>

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

@@ -12,6 +12,7 @@ import {
   Trophy,
   Handshake,
   Sliders,
+  Eye,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/lib/api/api';
@@ -21,6 +22,7 @@ import ParticipantSettingsTab from '@/components/organization/hackathons/setting
 import RewardsSettingsTab from '@/components/organization/hackathons/settings/RewardsSettingsTab';
 import CollaborationSettingsTab from '@/components/organization/hackathons/settings/CollaborationSettingsTab';
 import AdvancedSettingsTab from '@/components/organization/hackathons/settings/AdvancedSettingsTab';
+import SubmissionVisibilitySettingsTab from '@/components/organization/hackathons/settings/SubmissionVisibilitySettingsTab';
 import { AuthGuard } from '@/components/auth';
 import Loading from '@/components/Loading';
 
@@ -189,6 +191,13 @@ export default function SettingsPage() {
                       <Sliders className='h-4 w-4' />
                       Advanced
                     </TabsTrigger>
+                    <TabsTrigger
+                      value='submissions'
+                      className={tabTriggerClassName}
+                    >
+                      <Eye className='h-4 w-4' />
+                      Submissions
+                    </TabsTrigger>
                   </TabsList>
                 </div>
                 <ScrollBar orientation='horizontal' className='h-px' />
@@ -253,6 +262,13 @@ export default function SettingsPage() {
                 isLoading={isSaving}
               />
             </TabsContent>
+
+            <TabsContent value='submissions' className='mt-0'>
+              <SubmissionVisibilitySettingsTab
+                organizationId={organizationId}
+                hackathonId={hackathonId}
+              />
+            </TabsContent>
           </Tabs>
         </div>
       </div>