Add pick the winner to daily prizes

src/app/(authenticated)/prizes/DailyPrizesTable.tsx

@@ -3,16 +3,25 @@
 import EventDayButton from "@/components/EventDayButton";
 import GridList from "@/components/GridList";
 import List from "@/components/List";
-import { PrizeTile } from "@/components/prize";
-import { getEventFullDate } from "@/utils/utils";
-import { useEffect, useMemo, useState } from "react";
+import { PrizeParticipant, PrizeTile } from "@/components/prize";
+import { AchievementService } from "@/services/AchievementService";
+import { getEventFullDate, isMember } from "@/utils/utils";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 interface DailyPrizesTable {
+  user?: User;
+  cannonToken: string;
   prizes: Prize[];
 }
 
-export default function DailyPrizesTable({ prizes }: DailyPrizesTable) {
+export default function DailyPrizesTable({
+  user,
+  cannonToken,
+  prizes,
+}: DailyPrizesTable) {
   const [showingDay, setShowingDay] = useState<string | null>(null);
+  const [dailyParticipants, setDailyParticipants] =
+    useState<PrizeParticipant[]>();
 
   const prizesByDay = useMemo(() => {
     const sortedPrizes = prizes.sort((a, b) => a.name.localeCompare(b.name));
@@ -38,6 +47,35 @@ export default function DailyPrizesTable({ prizes }: DailyPrizesTable) {
     setShowingDay(sortedDays.find((d) => d === today) || sortedDays[0]);
   }, [sortedDays]);
 
+  useEffect(() => {
+    if (showingDay) getDailyPrizeParticipants(showingDay);
+  }, [showingDay]);
+
+  async function getDailyPrizeParticipants(day: string) {
+    const achievements = await AchievementService.getAchievements();
+    const startDate = new Date(day);
+    const endDate = new Date(`${day}T23:59:59Z`);
+    const entries = achievements
+      ?.filter(
+        (a) =>
+          startDate <= new Date(a.validity?.from ?? "") &&
+          endDate >= new Date(a.validity?.to ?? ""),
+      )
+      .reduce(
+        (acc, a) => {
+          a.users?.forEach((u) => {
+            acc[u] = (acc[u] ?? 0) + a.value;
+          });
+          return acc;
+        },
+        {} as Record<string, number>,
+      );
+    setDailyParticipants(
+      entries &&
+        Object.keys(entries).map((u) => ({ userId: u, entries: entries[u] })),
+    );
+  }
+
   return (
     <>
       <GridList>
@@ -55,7 +93,13 @@ export default function DailyPrizesTable({ prizes }: DailyPrizesTable) {
         .map((d) => (
           <List key={d} description={getEventFullDate(d)}>
             {prizesByDay[d].map((p) => (
-              <PrizeTile key={p.id} prize={p} />
+              <PrizeTile
+                key={p.id}
+                participants={dailyParticipants}
+                prize={p}
+                cannonToken={cannonToken}
+                pickWinner={!!user && isMember(user.role)}
+              />
             ))}
           </List>
         ))}

src/app/(authenticated)/prizes/page.tsx

@@ -72,7 +72,11 @@ export default async function Prizes() {
             Visit SINFO and get the chance to win
           </span>
         </div>
-        <DailyPrizesTable prizes={dailyPrizes} />
+        <DailyPrizesTable
+          prizes={dailyPrizes}
+          cannonToken={session!.cannonToken}
+          user={user || undefined}
+        />
       </div>
 
       {/* Sessions Prizes */}

src/components/GridCard.tsx

@@ -46,7 +46,7 @@ export default function GridCard({
             />
           )}
           {label && (
-            <span className="m-auto bg-sinfo-primary text-white rounded-md px-2 py-1 uppercase">
+            <span className="m-auto bg-sinfo-secondary font-bold text-white rounded-md px-2 py-1 uppercase">
               {label}
             </span>
           )}