upcoming tournament page, minor changes

src/features/tournaments/components/enroll-free-agent.tsx

@@ -0,0 +1,29 @@
+import Button from "@/components/button";
+import Sheet from "@/components/sheet/sheet";
+import { useAuth } from "@/contexts/auth-context";
+import { useSheet } from "@/hooks/use-sheet";
+import { Text } from "@mantine/core";
+
+const EnrollFreeAgent = () => {
+  const { open, isOpen, toggle } = useSheet();
+  const { user } = useAuth();
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={open}>
+        Enroll As Free Agent
+      </Button>
+
+      <Sheet title="Free Agent Enrollment" opened={isOpen} onChange={toggle}>
+        <Text size="md" mb="md">
+          Enrolling as a free agent will enter you in a pool of players wanting to play but don't have a teammate yet.
+        </Text>
+        <Text size="sm" mb="md" c='dimmed'>
+          You will be automatically paired with a partner before the tournament starts, and you will be able to see your new team and set a walkout song in the app.
+        </Text>
+        <Button onClick={console.log}>Confirm</Button>
+      </Sheet>
+    </>
+  );
+};
+
+export default EnrollFreeAgent;

src/features/tournaments/components/enroll-team/index.tsx

@@ -0,0 +1,63 @@
+import Button from "@/components/button";
+import Sheet from "@/components/sheet/sheet";
+import { useAuth } from "@/contexts/auth-context";
+import { useSheet } from "@/hooks/use-sheet";
+import { useMemo, useState, useCallback } from "react";
+import TeamSelectionView from "./team-selection-view";
+
+const EnrollTeam = () => {
+  const { open, isOpen, toggle } = useSheet();
+  const { user } = useAuth();
+  
+  const hasTeams = useMemo(() => !!user?.teams?.length, [user?.teams]);
+  const [selectedTeamId, setSelectedTeamId] = useState<string>();
+  const [showTeamForm, setShowTeamForm] = useState<boolean>(!hasTeams);
+
+  const teamOptions = useMemo(() => 
+    user?.teams?.map(team => ({
+      value: team.id,
+      label: team.name
+    })) || [],
+    [user?.teams]
+  );
+
+  const handleBack = useCallback(() => {
+    setShowTeamForm(false);
+    setSelectedTeamId(undefined);
+  }, []);
+
+  const handleSelect = useCallback((teamId: string | undefined) => {
+    setSelectedTeamId(teamId);
+    setShowTeamForm(true);
+  }, [])
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={open}>
+        Enroll Your Team
+      </Button>
+
+      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={isOpen} onChange={toggle}>
+        {showTeamForm ? (
+          <>
+            <p>Team Form {selectedTeamId === undefined ? "new team" : selectedTeamId}</p>
+            <Button variant="subtle" color="red" onClick={handleBack}>Back</Button>
+          </>
+        ) : (
+          <>
+            <TeamSelectionView
+              options={teamOptions}
+              onSelect={handleSelect}
+            />
+            <Button mt='sm' variant="subtle" color='red' size="sm" onClick={toggle}>
+              Cancel
+            </Button>
+          </>
+        )}
+        
+      </Sheet>
+    </>
+  );
+};
+
+export default EnrollTeam;

src/features/tournaments/components/enroll-team/team-selection-view.tsx

@@ -0,0 +1,57 @@
+import { Stack, Button, Divider, Autocomplete, Group, ComboboxItem } from '@mantine/core';
+import { PlusIcon } from '@phosphor-icons/react';
+import React, { useMemo, useState } from 'react';
+
+interface TeamSelectionViewProps {
+  options: ComboboxItem[];
+  onSelect: (teamId: string | undefined) => void;
+}
+
+const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
+  options,
+  onSelect
+}) => {
+  const [value, setValue] = useState<string>();
+  const selectedOption = useMemo(() => options.find(option => option.label === value), [value])
+
+
+  const handleCreateNewTeamClicked = () => onSelect(undefined);
+  const handleSelectExistingTeam = () => onSelect(selectedOption?.value)
+
+  return (
+    <Stack gap="md">
+      <Button
+        leftSection={<PlusIcon weight="bold" />}
+        onClick={handleCreateNewTeamClicked}
+        variant="light"
+        fullWidth
+      >
+        Create New Team
+      </Button>
+      
+      <Divider my="sm" label="or" />
+      
+      <Stack gap="sm">
+        <Autocomplete
+          placeholder="Select one of your existing teams"
+          value={selectedOption?.label || ''}
+          onChange={setValue}
+          data={options.map(option => option.label)}
+          comboboxProps={{ withinPortal: false }}
+        />
+        
+        <Button 
+          onClick={handleSelectExistingTeam}
+          disabled={!selectedOption}
+          fullWidth
+        >
+          Enroll Selected Team
+        </Button>
+      </Stack>
+    </Stack>
+  );
+});
+
+TeamSelectionView.displayName = 'TeamSelectionView';
+
+export default TeamSelectionView;

src/features/tournaments/components/tournament-form.tsx

@@ -10,8 +10,8 @@ import toast from "@/lib/sonner";
 import { logger } from "..";
 import { useQueryClient } from "@tanstack/react-query";
 import { tournamentKeys } from "@/features/tournaments/queries";
-import { DateTimePicker } from "@mantine/dates";
 import { useCallback } from "react";
+import { DateTimePicker } from "@/components/date-time-picker";
 
 interface TournamentFormProps {
   close: () => void;
@@ -166,6 +166,7 @@ const TournamentForm = ({
           label="Start Date"
           withAsterisk
           formatValue={(date) =>
+            !date ? 'Select a time' :
             new Date(date).toLocaleDateString("en-US", {
               weekday: "short",
               year: "numeric",
@@ -186,6 +187,7 @@ const TournamentForm = ({
           label="Enrollment Due"
           withAsterisk
           formatValue={(date) =>
+            !date ? 'Select a time' :
             new Date(date).toLocaleDateString("en-US", {
               weekday: "short",
               year: "numeric",
@@ -206,17 +208,16 @@ const TournamentForm = ({
             title="Select End Date"
             label="End Date (Optional)"
             formatValue={(date) =>
-              date
-                ? new Date(date).toLocaleDateString("en-US", {
-                    weekday: "short",
-                    year: "numeric",
-                    month: "short",
-                    day: "numeric",
-                    hour: "numeric",
-                    minute: "numeric",
-                    hour12: true,
-                  })
-                : "Not set"
+              !date ? 'Select a time' :
+              new Date(date).toLocaleDateString("en-US", {
+                weekday: "short",
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                hour12: true,
+              })
             }
           />
         )}

src/features/tournaments/components/upcoming-tournament.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useMemo, useState } from "react";
+import { Tournament } from "../types";
+import { useAuth } from "@/contexts/auth-context";
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Group,
+  Stack,
+  Title,
+  Text,
+} from "@mantine/core";
+import Avatar from "@/components/avatar";
+import Countdown from "@/components/countdown";
+import ListLink from "@/components/list-link";
+import ListButton from "@/components/list-button";
+import {
+  TrophyIcon,
+  CalendarIcon,
+  MapPinIcon,
+  UsersIcon,
+  ListIcon,
+} from "@phosphor-icons/react";
+import EnrollTeam from "./enroll-team";
+import EnrollFreeAgent from "./enroll-free-agent";
+
+const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
+  tournament,
+}) => {
+  const { user, roles } = useAuth();
+
+  const isAdmin = useMemo(() => roles.includes("Admin"), [roles]);
+  const userTeam = useMemo(
+    () =>
+      tournament.teams?.find((team) =>
+        team.players?.some((player) => player.id === user?.id)
+      ),
+    [tournament.teams, user?.id]
+  );
+  const isUserEnrolled = !!userTeam;
+
+  const enrollmentDeadline = tournament.enroll_time
+    ? new Date(tournament.enroll_time)
+    : new Date(tournament.start_time);
+  const tournamentStart = new Date(tournament.start_time);
+  const isEnrollmentOpen = enrollmentDeadline > new Date();
+
+  return (
+    <Stack gap="lg">
+      <Group justify="space-between" align="flex-start">
+        <Group align="flex-start" gap="lg">
+          <Avatar
+            name={tournament.name}
+            src={
+              tournament.logo
+                ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                : undefined
+            }
+            radius="md"
+            size={80}
+            withBorder={false}
+          >
+            <TrophyIcon size={32} />
+          </Avatar>
+          <Stack gap="xs">
+            <Group gap="sm">
+              <Title order={2}>{tournament.name}</Title>
+            </Group>
+            {tournament.location && (
+              <Group gap="xs">
+                <MapPinIcon size={16} />
+                <Text size="sm" c="dimmed">
+                  {tournament.location}
+                </Text>
+              </Group>
+            )}
+            <Group gap="xs">
+              <CalendarIcon size={16} />
+              <Text size="sm" c="dimmed">
+                {tournamentStart.toLocaleDateString()} at{" "}
+                {tournamentStart.toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </Text>
+            </Group>
+          </Stack>
+        </Group>
+      </Group>
+
+      {tournament.desc && (
+        <Text size="sm">
+          {tournament.desc}
+        </Text>
+      )}
+
+      <Card withBorder radius="md" p="lg">
+        <Stack gap="md">
+          <Group gap="xs" align="center">
+            <UsersIcon size={16} />
+            <Text size="sm" fw={500}>
+              Enrollment
+            </Text>
+            {isEnrollmentOpen && (
+              <Box ml="auto">
+                <Countdown
+                  date={enrollmentDeadline}
+                  label="Time left"
+                  color="yellow"
+                />
+              </Box>
+            )}
+          </Group>
+
+          {!isUserEnrolled && isEnrollmentOpen && (
+            <>
+              <EnrollTeam />
+              <Divider label="or" />
+              <EnrollFreeAgent />
+            </>
+          )}
+        </Stack>
+      </Card>
+
+      <Box>
+        <Divider />
+        {isAdmin && (
+          <ListLink
+            label={`Manage ${tournament.name}`}
+            to={`/admin/tournaments/${tournament.id}`}
+            Icon={UsersIcon}
+          />
+        )}
+        <ListButton label="View Rules" Icon={ListIcon} onClick={() => {}} />
+        <ListButton
+          label={`View Teams (${tournament.teams?.length || 0})`}
+          Icon={UsersIcon}
+          onClick={() => {}}
+        />
+      </Box>
+    </Stack>
+  );
+};
+
+export default UpcomingTournament;

src/features/tournaments/queries.ts

@@ -1,9 +1,10 @@
-import { getTournament, getUnenrolledTeams, listTournaments } from "./server";
+import { getCurrentTournament, getTournament, getUnenrolledTeams, listTournaments } from "./server";
 import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
 
 export const tournamentKeys = {
   list: ['tournaments', 'list'] as const,
   details: (id: string) => ['tournaments', 'details', id] as const,
+  current: ['tournaments', 'current'] as const,
   unenrolled: (id: string) => ['tournaments', 'unenrolled', id] as const
 };
 
@@ -16,6 +17,10 @@ export const tournamentQueries = {
     queryKey: tournamentKeys.details(id),
     queryFn: () => getTournament({ data: id })
   }),
+  current: () => ({
+    queryKey: tournamentKeys.current,
+    queryFn: getCurrentTournament
+  }),
   unenrolled: (id: string) => ({
     queryKey: tournamentKeys.unenrolled(id),
     queryFn: () => getUnenrolledTeams({ data: id })
@@ -28,5 +33,8 @@ export const useTournaments = () =>
 export const useTournament = (id: string) =>
   useServerSuspenseQuery(tournamentQueries.details(id));
 
+export const useCurrentTournament = () =>
+  useServerSuspenseQuery(tournamentQueries.current());
+
 export const useUnenrolledTeams = (tournamentId: string) => 
   useServerSuspenseQuery(tournamentQueries.unenrolled(tournamentId));

src/features/tournaments/server.ts

@@ -36,6 +36,12 @@ export const getTournament = createServerFn()
     toServerResult(() => pbAdmin.getTournament(tournamentId))
   );
 
+export const getCurrentTournament = createServerFn()
+  .middleware([superTokensFunctionMiddleware])
+  .handler(async () => 
+    toServerResult(() => pbAdmin.getMostRecentTournament())
+  );
+
 export const enrollTeam = createServerFn()
   .validator(z.object({
     tournamentId: z.string(),