feat(hackathons): owner submission visibility, team UX, organizer teams page (#552)

Submission visibility on the public submissions tab
- Surface the user's own submission first on the hackathon submissions tab, regardless of submissionStatusVisibility setting. Team members (non-leader) see their team's submission too.

Find Team tab UX
- Stop replacing the whole tab with MyTeamView when the user has a team. Render MyTeamView at the top and the open-teams list below.
- Filter the user's own team out of the "Other Teams" list to avoid duplication.
- Wire the team count badge on the team-formation tab.

Team details
- New /hackathons/[slug]/teams/[teamId] page with team header, members list (clickable links to profiles), roles needed, leader card, and contact card.
- TeamCard click opens the team details page in a new tab.
- MyTeamView team name is now a clickable link to the same page.
- Add useTeam hook + query key.

Organizer submissions page
- Replace raw Buttons on review actions with BoundlessButton (default / outline / destructive) so colors come from the design system.
- Remove the "Before Deadline" gating on the Approve action; backend organizer override now allows it.

Organizer participants page
- Add Solo Participants and Teams metric cards next to the existing Total Participants and Total Submissions cards.

Organizer submissions page
- Add a metric strip with Total / Solo / Team Submissions sourced from the statistics endpoint.

Organizer Teams page (new)
- New route /organizations/[id]/hackathons/[hackathonId]/teams.
- Stats (Total / Open / Submitted / Not submitted), search by team or leader (server-side), status and submission filters (client-side), server-side pagination matching the participants page pattern, click to view team details in a new tab.
- Add "Teams" entry to the existing organizer hackathon sidebar (HackathonSidebar.tsx).

Image fit fixes for cropped logos/banners
- SubmissionCard banner and logo overlay use object-contain (banner was object-cover, cropping wordmarks and tall banners).
- /me/hackathons/submissions: banner, logo overlay, and small table thumbnail all use object-contain.
- ProjectSidebarHeader logo uses object-contain.

Type changes
- lib/api/hackathons/teams.ts Team interface gains optional hasSubmission flag.

Author: Benjtalkshow

app/(landing)/hackathons/[slug]/components/tabs/contents/FindTeam.tsx

@@ -88,7 +88,9 @@ const FindTeam = () => {
     !!hackathon?.id && hackathon.participantType !== 'INDIVIDUAL'
   );
 
-  const teams = teamsResponse?.data?.teams || [];
+  const teams = (teamsResponse?.data?.teams || []).filter(
+    t => !myTeam || t.id !== myTeam.id
+  );
 
   const handleJoin = (team: Team) => {
     setSelectedTeam(team);
@@ -99,14 +101,6 @@ const FindTeam = () => {
 
   const isIndividualOnly = hackathon.participantType === 'INDIVIDUAL';
 
-  if (myTeam) {
-    return (
-      <TabsContent value='team-formation' className='mt-0 w-full outline-none'>
-        <MyTeamView team={myTeam} hackathonSlug={slug} />
-      </TabsContent>
-    );
-  }
-
   return (
     <TabsContent
       value='team-formation'
@@ -129,9 +123,18 @@ const FindTeam = () => {
         </div>
       ) : (
         <>
+          {myTeam && (
+            <div className='space-y-4'>
+              <MyTeamView team={myTeam} hackathonSlug={slug} />
+              <div className='h-px w-full bg-white/5' />
+            </div>
+          )}
+
           <div className='flex items-center justify-between'>
             <div>
-              <h2 className='text-2xl font-bold text-white'>Open Teams</h2>
+              <h2 className='text-2xl font-bold text-white'>
+                {myTeam ? 'Other Teams' : 'Open Teams'}
+              </h2>
               <p className='mt-1 text-sm text-gray-500'>
                 Find builders to collaborate with on your project.
               </p>

app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx

@@ -94,7 +94,7 @@ const SubmissionCard = ({ submission }: SubmissionCardProps) => {
           <img
             src={banner}
             alt={`${projectName} banner`}
-            className='h-full w-full object-cover transition-transform duration-300 group-hover:scale-105'
+            className='h-full w-full object-contain transition-transform duration-300 group-hover:scale-105'
           />
         ) : logo ? (
           // eslint-disable-next-line @next/next/no-img-element

app/(landing)/hackathons/[slug]/components/tabs/contents/teams/MyTeamView.tsx

@@ -186,7 +186,14 @@ const MyTeamView = ({ team, hackathonSlug }: MyTeamViewProps) => {
           </div>
           <div>
             <h2 className='text-xl font-bold text-white sm:text-2xl'>
-              {team.teamName}
+              <a
+                href={`/hackathons/${hackathonSlug}/teams/${team.id}`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='hover:text-primary transition-colors'
+              >
+                {team.teamName}
+              </a>
             </h2>
             <div className='mt-1 flex flex-wrap items-center gap-2 sm:gap-3'>
               <span className='text-primary text-sm font-bold'>

app/(landing)/hackathons/[slug]/components/tabs/contents/teams/TeamCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useParams } from 'next/navigation';
 import { cn } from '@/lib/utils';
 import { Team, TeamMember } from '@/lib/api/hackathons/teams';
 import GroupAvatar from '@/components/avatars/GroupAvatar';
@@ -14,6 +15,16 @@ interface TeamCardProps {
 }
 
 const TeamCard = ({ team, onJoin, onMessageLeader }: TeamCardProps) => {
+  const { slug } = useParams<{ slug: string }>();
+
+  const openTeamDetails = useCallback(() => {
+    if (!slug || !team.id) return;
+    window.open(
+      `/hackathons/${slug}/teams/${team.id}`,
+      '_blank',
+      'noopener,noreferrer'
+    );
+  }, [slug, team.id]);
   const {
     teamName,
     description,
@@ -32,7 +43,18 @@ const TeamCard = ({ team, onJoin, onMessageLeader }: TeamCardProps) => {
   };
 
   return (
-    <div className='group hover:border-primary/20 flex h-full flex-col overflow-hidden rounded-2xl border border-white/5 bg-[#0A0B0D] p-8 transition-all hover:bg-[#0D0F12]'>
+    <div
+      role='link'
+      tabIndex={0}
+      onClick={openTeamDetails}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          openTeamDetails();
+        }
+      }}
+      className='group hover:border-primary/20 flex h-full cursor-pointer flex-col overflow-hidden rounded-2xl border border-white/5 bg-[#0A0B0D] p-8 transition-all hover:bg-[#0D0F12]'
+    >
       <div className='mb-6 flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between'>
         <div className='flex items-start gap-4'>
           <div className='text-primary flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-[#232B20] text-xl font-black'>
@@ -70,7 +92,10 @@ const TeamCard = ({ team, onJoin, onMessageLeader }: TeamCardProps) => {
                 variant='outline'
                 size='sm'
                 className='h-11 shrink-0 rounded-xl border-white/10 bg-white/5 px-4 text-sm font-bold text-white transition-all hover:bg-white/10'
-                onClick={e => onMessageLeader(team, e.currentTarget)}
+                onClick={e => {
+                  e.stopPropagation();
+                  onMessageLeader(team, e.currentTarget);
+                }}
                 aria-label='Message team leader'
               >
                 <MessageCircle className='mr-2 h-4 w-4' />
@@ -81,7 +106,10 @@ const TeamCard = ({ team, onJoin, onMessageLeader }: TeamCardProps) => {
               variant='outline'
               size='sm'
               className='border-primary/20 text-primary hover:bg-primary h-11 w-full rounded-xl bg-[#232B20]/30 px-6 text-sm font-bold transition-all hover:text-black sm:w-auto'
-              onClick={() => onJoin?.(team)}
+              onClick={e => {
+                e.stopPropagation();
+                onJoin?.(team);
+              }}
               disabled={memberCount >= maxSize}
             >
               Join Team

app/(landing)/hackathons/[slug]/components/tabs/index.tsx

@@ -14,7 +14,10 @@ import FindTeam from './contents/FindTeam';
 import SponsorsTab from './contents/SponsorsTab';
 import { useEffect, useState, useMemo } from 'react';
 import { useHackathonData } from '@/lib/providers/hackathonProvider';
-import { useHackathonAnnouncements } from '@/hooks/hackathon/use-hackathon-queries';
+import {
+  useHackathonAnnouncements,
+  useHackathonTeams,
+} from '@/hooks/hackathon/use-hackathon-queries';
 import { useCommentSystem } from '@/hooks/use-comment-system';
 import { CommentEntityType } from '@/types/comment';
 import { Megaphone } from 'lucide-react';
@@ -46,6 +49,17 @@ const HackathonTabs = ({ sidebar }: HackathonTabsProps) => {
     enabled: !!currentHackathon?.id,
   });
 
+  const participantType = currentHackathon?.participantType;
+  const isTeamHackathon =
+    participantType === 'TEAM' || participantType === 'TEAM_OR_INDIVIDUAL';
+
+  const { data: teamsCountResponse } = useHackathonTeams(
+    slug,
+    { page: 1, limit: 1 },
+    !!slug && isTeamHackathon
+  );
+  const teamsTotal = teamsCountResponse?.data?.pagination?.total ?? 0;
+
   const [activeTab, setActiveTab] = useState('overview');
 
   const hackathonTabs = useMemo(() => {
@@ -55,10 +69,6 @@ const HackathonTabs = ({ sidebar }: HackathonTabsProps) => {
     const hasWinners = !!(winners && winners.length > 0);
     const hasAnnouncements = announcements.length > 0;
 
-    const participantType = currentHackathon.participantType;
-    const isTeamHackathon =
-      participantType === 'TEAM' || participantType === 'TEAM_OR_INDIVIDUAL';
-
     const tabs = [
       { id: 'overview', label: 'Overview' },
       ...(hasParticipants
@@ -105,6 +115,7 @@ const HackathonTabs = ({ sidebar }: HackathonTabsProps) => {
       tabs.push({
         id: 'team-formation',
         label: 'Find Team',
+        badge: teamsTotal,
       });
     }
 
@@ -159,6 +170,8 @@ const HackathonTabs = ({ sidebar }: HackathonTabsProps) => {
     announcements,
     announcementsLoading,
     generalLoading,
+    isTeamHackathon,
+    teamsTotal,
   ]);
 
   useEffect(() => {