Fix: Got data table to render total entries and entries alive. Also s…

…et the query.limit to 5000.

api/apiFunctions.ts

@@ -444,18 +444,27 @@ export async function getAllLeagueEntries({
   leagues,
 }: {
   leagues: string[];
-}): Promise<number[]> {
+}): Promise<{ totalEntries: number; alive: number }[]> {
   try {
     const response = await databases.listDocuments(
       appwriteConfig.databaseId,
       Collection.ENTRIES,
+      [Query.limit(5000)],
     );
     const entries = leagues.map((leagueId) => {
       const leagueEntries = response.documents.filter(
         (entry) => entry.league.$id === leagueId,
       );
-      return leagueEntries.length;
+      const aliveEntries = leagueEntries.filter(
+        (aliveEntry) => aliveEntry.eliminated === false,
+      );
+
+      return {
+        totalEntries: leagueEntries.length,
+        alive: aliveEntries.length,
+      };
     });
+
     return entries;
   } catch (error) {
     throw new Error('Error getting league entries:', { cause: error });

app/(admin)/admin/leagues/page.tsx

@@ -6,17 +6,17 @@ import { JSX, useEffect, useState } from 'react';
 import TableData from '@/components/TableData/TableData';
 import { leagueColumns } from '@/components/TableColumns/TableColumns';
 import { useDataStore } from '@/store/dataStore';
-import { getLeagueEntries, getUserLeagues } from '@/utils/utils';
-import { ILeague } from '@/api/apiFunctions.interface';
+import { getUserLeagues } from '@/utils/utils';
 import { getAllLeagueEntries } from '@/api/apiFunctions';
+import { IEntryWithLeague } from '@/components/TableColumns/TableColumns';
 
 /**
  * Renders the admin page.
  * @returns {JSX.Element} - The rendered Admin Leagues page.
  */
 const AdminLeagues = (): JSX.Element => {
   const { user } = useDataStore((state) => state);
-  const [leaguesData, setLeaguesData] = useState<ILeague[]>([]);
+  const [leaguesData, setLeaguesData] = useState<IEntryWithLeague[]>([]);
 
   /**
    * Get all leagues the user is a part of.
@@ -26,10 +26,13 @@ const AdminLeagues = (): JSX.Element => {
       const leagues = await getUserLeagues(user.leagues);
       const entries = await getAllLeagueEntries({ leagues: user.leagues });
       const combinedData = leagues.map((league, index) => ({
+        leagueId: '',
+        logo: '',
         leagueName: league.leagueName,
         participants: league.participants,
         survivors: league.survivors,
-        entries: entries[index], // Corresponding entry data
+        totalEntries: entries[index].totalEntries,
+        aliveEntries: entries[index].alive,
       }));
       setLeaguesData(combinedData);
     } catch (error) {

components/TableColumns/TableColumns.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../TableDropDownMenu/TableDropDownMenu';
+import { ILeague } from '@/api/apiFunctions.interface';
 
 export type LeagueDetailsHeader = {
   text: string;
@@ -21,12 +22,10 @@ export type LeagueDetailsHeader = {
   text4: string;
 };
 
-type leagueDataHeader = {
-  leagueName: string;
-  participants: string[];
-  survivors: string[];
-  entries: number;
-};
+export interface IEntryWithLeague extends ILeague {
+  totalEntries: number;
+  aliveEntries: number;
+}
 
 export type PlayersHeader = {
   text: string;
@@ -161,7 +160,7 @@ export const leagueDetailsColumns: ColumnDef<LeagueDetailsHeader>[] = [
   },
 ];
 
-export const leagueColumns: ColumnDef<leagueDataHeader>[] = [
+export const leagueColumns: ColumnDef<IEntryWithLeague>[] = [
   {
     accessorKey: 'leagueName',
     header: 'League Name',
@@ -249,7 +248,7 @@ export const leagueColumns: ColumnDef<leagueDataHeader>[] = [
     },
   },
   {
-    accessorKey: 'entries',
+    accessorKey: 'totalEntries',
 
     /**
      * Value of row.
@@ -276,8 +275,40 @@ export const leagueColumns: ColumnDef<leagueDataHeader>[] = [
      * @returns {JSX.Element} - The cell component.
      */
     cell: ({ row }): JSX.Element => {
-      const entries = row.getValue('entries') as number;
-      return <div>{entries}</div>;
+      const totalEntries = row.getValue('totalEntries') as number;
+      return <div>{totalEntries}</div>;
+    },
+  },
+  {
+    accessorKey: 'aliveEntries',
+
+    /**
+     * Value of row.
+     * @param {object} column - The column data.
+     * @param {object} column.column - The column definition
+     * @returns {JSX.Element} - The cell component.
+     */
+    header: ({ column }): JSX.Element => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Entries Still Alive
+          <ChevronsUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+
+    /**
+     * Value of row.
+     * @param {object} row - The row data.
+     * @param {object} row.row - The row definition
+     * @returns {JSX.Element} - The cell component.
+     */
+    cell: ({ row }): JSX.Element => {
+      const aliveEntries = row.getValue('aliveEntries') as number;
+      return <div>{aliveEntries}</div>;
     },
   },
   {