Pr 486 (#490)

* feat: Implement comprehensive hackathon detail page with new header, sidebar, and tabbed content sections including teams, announcements, winners, participants, and resources.

* fix: update coderabit

* feat: Enhance hackathon team invitation flow, recruitment post management, and dynamic tab visibility.

* feat: Integrate AuthModalProvider for authentication handling and enhance messaging features across hackathon components

* fix: fix pagination issues in particiapants and submissions page for organizers

* fix: remove any type

* fix: enhanced filtering for organizations

* fix: fix coderabbit corrections

---------

Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>

Author: Benjtalkshow

app/(landing)/hackathons/[slug]/components/header/ActionButtons.tsx

@@ -38,7 +38,8 @@ const ActionButtons = () => {
   const isParticipant = user
     ? !!hackathon?.isParticipant ||
       (hackathon?.participants || []).some(
-        (p: Participant) => p.userId === user.id
+        (p: Participant) =>
+          (p as any).userId === user.id || p.user?.id === user.id
       )
     : false;
 

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

@@ -6,6 +6,7 @@ import {
   useHackathon,
   useHackathonParticipants,
 } from '@/hooks/hackathon/use-hackathon-queries';
+import { useDebounce } from '@/hooks/use-debounce';
 import { TabsContent } from '@/components/ui/tabs';
 import { ChevronDown, Search, Filter, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -53,6 +54,12 @@ const Participants = () => {
     'all' | 'submitted' | 'in_progress'
   >('all');
   const [skillFilter, setSkillFilter] = useState<string>('all');
+  const [participationType, setParticipationType] = useState<
+    'all' | 'individual' | 'team'
+  >('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 300);
+
   const [page, setPage] = useState(1);
   const [accumulatedParticipants, setAccumulatedParticipants] = useState<
     Participant[]
@@ -68,13 +75,15 @@ const Participants = () => {
     limit,
     status: statusFilter === 'all' ? undefined : statusFilter,
     skill: skillFilter === 'all' ? undefined : skillFilter,
+    type: participationType === 'all' ? undefined : participationType,
+    search: debouncedSearch || undefined,
   });
 
   // Reset page and list when filters change
   React.useEffect(() => {
     setPage(1);
     setAccumulatedParticipants([]);
-  }, [statusFilter, skillFilter]);
+  }, [statusFilter, skillFilter, participationType, debouncedSearch]);
 
   // Accumulate participants as they are fetched
   React.useEffect(() => {
@@ -133,14 +142,28 @@ const Participants = () => {
     >
       {/* Header with Count and Filters */}
       <div className='flex flex-col gap-6 md:flex-row md:items-end md:justify-between'>
-        <div>
-          <h2 className='text-2xl font-bold text-white'>Participants</h2>
-          <p className='mt-1 text-gray-500'>
-            <span className='font-bold text-gray-300'>
-              {totalBuilders.toLocaleString()}
-            </span>{' '}
-            builders competing in {hackathon.name}
-          </p>
+        <div className='flex flex-1 flex-col gap-4'>
+          <div>
+            <h2 className='text-2xl font-bold text-white'>Participants</h2>
+            <p className='mt-1 text-gray-500'>
+              <span className='font-bold text-gray-300'>
+                {totalBuilders.toLocaleString()}
+              </span>{' '}
+              builders competing in {hackathon.name}
+            </p>
+          </div>
+
+          {/* Search Bar */}
+          <div className='relative w-full max-w-md'>
+            <input
+              type='text'
+              placeholder='Search by name, username, or project...'
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              className='hover:border-primary/20 focus:border-primary/30 h-10 w-full rounded-xl border border-white/5 bg-[#141517] pr-4 pl-10 text-sm text-white transition-all outline-none placeholder:text-gray-500'
+            />
+            <Search className='absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-gray-500' />
+          </div>
         </div>
 
         <div className='flex items-center gap-3'>
@@ -175,6 +198,38 @@ const Participants = () => {
             </DropdownMenuContent>
           </DropdownMenu>
 
+          {/* Type Filter */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className='hover:border-primary/20 flex min-w-[140px] items-center justify-between gap-2 rounded-xl border border-white/5 bg-[#141517] px-4 py-2.5 text-sm font-medium text-gray-400 transition-all hover:text-white'>
+                <span>
+                  {participationType === 'all'
+                    ? 'Type: All'
+                    : participationType === 'individual'
+                      ? 'Type: Individual'
+                      : 'Type: Team'}
+                </span>
+                <ChevronDown className='h-4 w-4 opacity-50' />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align='end'
+              className='w-48 border-white/10 bg-[#141517] text-gray-300'
+            >
+              <DropdownMenuItem onClick={() => setParticipationType('all')}>
+                All Types
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setParticipationType('individual')}
+              >
+                Individual
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setParticipationType('team')}>
+                Team
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           {/* Status Filter */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -222,7 +277,7 @@ const Participants = () => {
               key={p.id}
               name={p.user.profile.name}
               username={p.user.profile.username}
-              image={p.user.profile.image}
+              image={p.user.profile.image || undefined}
               submitted={!!p.submittedAt}
               skills={p.user.profile.skills}
               userId={p.userId ?? p.user?.id}

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

@@ -228,45 +228,11 @@ const ParticipantsPage: React.FC = () => {
     }
   };
 
-  // Frontend-side filtering as per requirement
-  const filteredParticipants = useMemo(() => {
-    return participants.filter(participant => {
-      // Search: filter by name or username
-      const search = filters.search.toLowerCase();
-      const matchesSearch = search
-        ? (participant.user?.profile?.name || '')
-            .toLowerCase()
-            .includes(search) ||
-          (participant.user?.profile?.username || '')
-            .toLowerCase()
-            .includes(search)
-        : true;
-
-      // Status: filter by participant.submission.status
-      // Filter values are 'submitted', 'not_submitted', etc.
-      // ParticipantSubmission.status values are 'submitted', 'shortlisted', etc.
-      const matchesStatus =
-        filters.status === 'all'
-          ? true
-          : filters.status === 'not_submitted'
-            ? !participant.submission
-            : participant.submission?.status?.toLowerCase() ===
-              filters.status.toLowerCase();
-
-      // Type: filter by participant.participationType
-      const matchesType =
-        filters.type === 'all'
-          ? true
-          : participant.participationType?.toLowerCase() ===
-            filters.type.toLowerCase();
-
-      return matchesSearch && matchesStatus && matchesType;
-    });
-  }, [participants, filters.search, filters.status, filters.type]);
+  // Removed redundant frontend-side filtering as backend now handles it.
 
   // Mock table instance for DataTablePagination
   const table = useReactTable({
-    data: filteredParticipants,
+    data: participants,
     columns: [], // Not used for rendering here
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
@@ -352,15 +318,15 @@ const ParticipantsPage: React.FC = () => {
             <div className='space-y-6'>
               {view === 'table' ? (
                 <ParticipantsTable
-                  data={filteredParticipants}
+                  data={participants}
                   loading={participantsLoading}
                   onReview={handleReview}
                   onViewTeam={handleViewTeam}
                   onGrade={handleGrade}
                 />
               ) : (
                 <ParticipantsGrid
-                  data={filteredParticipants}
+                  data={participants}
                   loading={participantsLoading}
                   onReview={handleReview}
                   onViewTeam={handleViewTeam}

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

@@ -72,27 +72,8 @@ export default function SubmissionsPage() {
     fetchSession();
   }, []);
 
-  // Frontend-side filtering
-  const filteredSubmissions = useMemo(() => {
-    return allSubmissions.filter(sub => {
-      const search = filters.search?.toLowerCase() || '';
-      const matchesSearch = search
-        ? (sub.projectName || '').toLowerCase().includes(search) ||
-          (sub.participant?.name || '').toLowerCase().includes(search) ||
-          (sub.participant?.username || '').toLowerCase().includes(search)
-        : true;
-
-      const matchesStatus = !filters.status || sub.status === filters.status;
-
-      const matchesType =
-        !filters.type || sub.participationType === filters.type;
-
-      return matchesSearch && matchesStatus && matchesType;
-    });
-  }, [allSubmissions, filters.search, filters.status, filters.type]);
-
   const table = useReactTable({
-    data: filteredSubmissions,
+    data: allSubmissions,
     columns: [],
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
@@ -162,7 +143,7 @@ export default function SubmissionsPage() {
           ) : (
             <div className='space-y-6'>
               <SubmissionsManagement
-                submissions={filteredSubmissions}
+                submissions={allSubmissions}
                 pagination={pagination}
                 filters={filters}
                 loading={loading}

components/hackathons/submissions/submissionCard.tsx

@@ -28,7 +28,7 @@ interface SubmissionCardProps {
   title: string;
   description: string;
   submitterName: string;
-  submitterAvatar?: string;
+  submitterAvatar?: string | null;
   category?: string;
   categories?: string[];
   status?: 'Pending' | 'Approved' | 'Rejected';

components/hackathons/submissions/submissionCard2.tsx

@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
 interface SubmissionCard2Props {
   title: string;
   submitterName: string;
-  submitterAvatar?: string;
+  submitterAvatar?: string | null;
   image?: string;
   upvotes?: number;
   comments?: number;

components/organization/cards/ParticipantInfo.tsx

@@ -25,7 +25,7 @@ export const ParticipantInfo: React.FC<ParticipantInfoProps> = ({
     <div className='flex flex-row items-center justify-start p-5'>
       <div className='flex-1'>
         <Avatar className='h-10.5 w-10.5'>
-          <AvatarImage src={userAvatar} />
+          <AvatarImage src={userAvatar || undefined} />
           <AvatarFallback>{userName.charAt(0).toUpperCase()}</AvatarFallback>
         </Avatar>
         <h4 className='text-sm text-white'>{userName}</h4>

components/organization/cards/ReviewSubmissionModal/SubmissionVotesTab.tsx

@@ -11,7 +11,7 @@ interface Voter {
   id: string;
   name: string;
   username: string;
-  avatar?: string;
+  avatar?: string | null;
   votedAt?: string;
   voteType?: 'positive' | 'negative';
 }
@@ -42,7 +42,10 @@ export const SubmissionVotesTab: React.FC<SubmissionVotesTabProps> = ({
               <div className='flex min-w-0 items-center gap-4'>
                 <div className='relative'>
                   <Avatar className='h-12 w-12 shrink-0 border border-gray-800'>
-                    <AvatarImage src={voter.avatar} alt={voter.name} />
+                    <AvatarImage
+                      src={voter.avatar || undefined}
+                      alt={voter.name}
+                    />
                     <AvatarFallback className='bg-background-card font-bold text-gray-400'>
                       {voter.name.charAt(0).toUpperCase()}
                     </AvatarFallback>

components/organization/cards/ReviewSubmissionModal/TeamSection.tsx

@@ -11,7 +11,7 @@ interface TeamMember {
   id: string;
   name: string;
   role: string;
-  avatar?: string;
+  avatar?: string | null;
   username?: string;
 }
 
@@ -37,7 +37,10 @@ export const TeamSection: React.FC<TeamSectionProps> = ({ teamMembers }) => {
               className='group bg-background-card/20 hover:bg-background-card/40 flex items-center gap-4 rounded-xl border border-gray-900/60 p-4 transition-all hover:border-gray-800'
             >
               <Avatar className='h-12 w-12 border border-gray-800 transition-transform group-hover:scale-105'>
-                <AvatarImage src={member.avatar} alt={member.name} />
+                <AvatarImage
+                  src={member.avatar || undefined}
+                  alt={member.name}
+                />
                 <AvatarFallback className='bg-background-card font-bold text-gray-400'>
                   {member.name.charAt(0).toUpperCase()}
                 </AvatarFallback>

components/organization/cards/ReviewSubmissionModal/types.ts

@@ -2,15 +2,15 @@ export interface TeamMember {
   id: string;
   name: string;
   role: string;
-  avatar?: string;
+  avatar?: string | null;
   username?: string;
 }
 
 export interface Voter {
   id: string;
   name: string;
   username: string;
-  avatar?: string;
+  avatar?: string | null;
   votedAt?: string;
   voteType?: 'positive' | 'negative';
 }
@@ -21,7 +21,7 @@ export interface Comment {
   author: {
     name: string;
     username: string;
-    avatar?: string;
+    avatar?: string | null;
   };
   createdAt: string;
   reactions?: {