copied over more stuff

apps/nextjs/src/app/organizations/[org_slug]/page.tsx

@@ -0,0 +1,95 @@
+// import TournamentsTable from "~/components/tournaments-table";
+import {
+  getOrganization,
+  getOrganizations,
+} from "~/app/server-actions/organizations/actions";
+import { getOrganizationTournaments } from "~/app/server-actions/organizations/tournaments/actions";
+
+import OrganizationHeader from "~/components/organizations/organization-header";
+
+export const revalidate = 200;
+export const dynamicParams = true;
+
+interface OrganizationDetailPageProps {
+  params: Promise<{ org_slug: string }>;
+}
+
+export async function generateMetadata(
+  props: Readonly<OrganizationDetailPageProps>,
+) {
+  const params = await props.params;
+  const { data: org } = await getOrganization(params.org_slug);
+
+  return { title: org?.name ?? "Organization" };
+}
+
+export async function generateStaticParams() {
+  const { partners, nonpartners } = await getOrganizations();
+
+  return [...partners, ...nonpartners].map(({ slug }) => ({ org_slug: slug }));
+}
+
+// const columns = [
+//   {
+//     key: "start_at",
+//     label: "DATE",
+//   },
+//   {
+//     key: "name",
+//     label: "NAME",
+//   },
+
+//   {
+//     key: "players",
+//     label: "PLAYERS",
+//   },
+//   {
+//     key: "registration",
+//     label: "REGISTRATION",
+//   },
+//   {
+//     key: "game",
+//     label: "GAME",
+//   },
+//   {
+//     key: "format",
+//     label: "FORMAT",
+//   },
+// ];
+
+export default async function OrganizationDetailPage(
+  props: Readonly<OrganizationDetailPageProps>,
+) {
+  const params = await props.params;
+  const { data: organization } = await getOrganization(params.org_slug);
+
+  if (!organization) {
+    return <div>404 - Not Found</div>;
+  }
+
+  const tournaments = await getOrganizationTournaments(params.org_slug);
+
+  return (
+    <>
+      <OrganizationHeader organization={organization}>
+        <div className="mx-4 flex h-full w-full flex-col items-center justify-between py-2 text-center">
+          <h1 className="text-2xl font-semibold">{organization?.name}</h1>
+          <p>{organization?.description}</p>
+        </div>
+      </OrganizationHeader>
+
+      <div>
+        <h2>TODO: tournament table</h2>
+        {tournaments.map((tournament) => (
+          <div key={tournament.id}>
+            <h3>{tournament.name}</h3>
+            <p>{tournament.start_at}</p>
+          </div>
+        ))}
+      </div>
+      {/* <Divider /> */}
+
+      {/* <TournamentsTable columns={columns} data={tournaments} /> */}
+    </>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@details/page.tsx

@@ -0,0 +1,7 @@
+export default function Details() {
+  return (
+    <div>
+      <h1>Tournament Details</h1>
+    </div>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@matches/[match_id]/page.tsx

@@ -0,0 +1,10 @@
+interface MatchPageProps {
+  org_slug: string;
+  tournament_id: string;
+  matchId: number;
+}
+
+export default function MatchPage({ matchId }: Readonly<MatchPageProps>) {
+  // return <ChatComponent channelName={"ChatChannel"} roomName={matchId} websocketUrl={websocketUrl()} />;
+  return <div>Match Page {matchId}</div>;
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@matches/page.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+
+interface MatchPageProps {
+  params: Promise<{
+    org_slug: string;
+    tournament_id: number;
+  }>;
+}
+export default async function MatchPage(props: Readonly<MatchPageProps>) {
+  const params = await props.params;
+  const { org_slug, tournament_id } = params;
+
+  return (
+    <Card>
+      <CardHeader>
+        Matches for {org_slug} Tournament {tournament_id}{" "}
+      </CardHeader>
+      <CardContent>
+        <p>Matches content</p>
+      </CardContent>
+    </Card>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@metagame/page.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+
+interface MetagameProps {
+  params: Promise<{
+    org_slug: string;
+    tournament_id: number;
+  }>;
+}
+
+export default async function Metagame(props: Readonly<MetagameProps>) {
+  const params = await props.params;
+  const { org_slug, tournament_id } = params;
+
+  return (
+    <Card>
+      <CardHeader>
+        Metagame for Organization {org_slug} Tournament {tournament_id}
+      </CardHeader>
+      <CardContent>
+        <p>Metagame content</p>
+      </CardContent>
+    </Card>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@pairings/page.tsx

@@ -0,0 +1,14 @@
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+
+const Pairings = () => {
+  return (
+    <Card>
+      <CardHeader>Pairings</CardHeader>
+      <CardContent>
+        <p>Pairings content</p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Pairings;

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@registrations/page.tsx

@@ -0,0 +1,35 @@
+// import PlayersTable from "~/app/players/players-table";
+import { getTournamentPlayers } from "~/app/server-actions/tournaments/actions";
+import { type OrganizationTournamentProps } from "~/types";
+
+// const columns = [
+//   {
+//     key: "username",
+//     label: "Username",
+//   },
+//   {
+//     key: "pronouns",
+//     label: "Pronouns",
+//   },
+// ];
+
+export default async function TournamentRegistrations(
+  props: Readonly<OrganizationTournamentProps>,
+) {
+  const params = await props.params;
+  const { tournament_id } = params;
+
+  const { players } = await getTournamentPlayers(tournament_id);
+
+  return (
+    <div>
+      <h2>TODO: Registrations</h2>
+      {players?.map((player) => (
+        <div key={player.id}>
+          <h3>{player.profile.username}</h3>
+        </div>
+      ))}
+    </div>
+    // <PlayersTable columns={columns} players={players?.map((p) => p.profile) ?? []} />
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/@standings/page.tsx

@@ -0,0 +1,13 @@
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+
+export default function Standings() {
+  return (
+    <Card>
+      <CardHeader>Standings</CardHeader>
+
+      <CardContent>
+        <p>Standings content</p>
+      </CardContent>
+    </Card>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/layout.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+// const tabs = [
+//   { key: "details", title: "Details" },
+//   { key: "registrations", title: "Registrations" },
+//   { key: "pairings", title: "Pairings" },
+//   { key: "standings", title: "Standings" },
+//   { key: "matches", title: "Matches" },
+//   { key: "meta", title: "Metagame" },
+// ];
+
+interface OrganizationTournamentsTournamentLayoutProps {
+  children: ReactNode;
+  standings: ReactNode;
+  pairings: ReactNode;
+  matches: ReactNode;
+  metagame: ReactNode;
+  registrations: ReactNode;
+  details: ReactNode;
+}
+
+// function renderTabContent(activeTab: string, props: Readonly<OrganizationTournamentsTournamentLayoutProps>) {
+//   switch (activeTab) {
+//     case "details":
+//       return props.details;
+//     case "registrations":
+//       return props.registrations;
+//     case "pairings":
+//       return props.pairings;
+//     case "standings":
+//       return props.standings;
+//     case "matches":
+//       return props.matches;
+//     case "meta":
+//       return props.metagame;
+//     default:
+//       return null;
+//   }
+// }
+
+export default function OrganizationTournamentsTournamentLayout(
+  props: Readonly<OrganizationTournamentsTournamentLayoutProps>,
+) {
+  return (
+    <div className="flex h-full w-full flex-col items-center">
+      {props.children}
+
+      <div className="py-2" />
+
+      {/* <Tabs renderTabContent={renderTabContent} tabContents={props} tabs={tabs} /> */}
+    </div>
+  );
+}

apps/nextjs/src/app/organizations/[org_slug]/tournaments/[tournament_id]/(tournament_page)/page.tsx

@@ -0,0 +1,104 @@
+import {
+  getTournament,
+  getTournaments,
+} from "~/app/server-actions/tournaments/actions";
+
+import OrganizationHeader from "~/components/organizations/organization-header";
+import { type OrganizationTournamentProps } from "~/types";
+
+import Link from "next/link";
+import Chip from "~/components/ui/chip";
+
+export const revalidate = 300;
+export const dynamicParams = true;
+
+export async function generateMetadata(
+  props: Readonly<OrganizationTournamentProps>,
+) {
+  const params = await props.params;
+  const tournament = (await getTournament(params.tournament_id)).data;
+
+  return { title: tournament?.name ?? "Tournament" };
+}
+
+export async function generateStaticParams() {
+  const tournaments = (await getTournaments()).data?.data ?? [];
+
+  return tournaments.map(({ organization, id }) => ({
+    org_slug: organization.slug,
+    tournament_id: id.toString(),
+  }));
+}
+
+export default async function OrganizationTournament(
+  props: Readonly<OrganizationTournamentProps>,
+) {
+  const params = await props.params;
+  const { org_slug, tournament_id } = params;
+  const tournament = (await getTournament(tournament_id)).data;
+
+  if (!tournament) {
+    return <div>404 - Not Found</div>;
+  }
+
+  const { organization } = tournament;
+
+  return (
+    <>
+      <div className="pt-2" />
+      <OrganizationHeader organization={organization}>
+        <div className="mx-4 flex h-full flex-col items-center justify-between text-center">
+          <h1 className="text-2xl font-semibold">{tournament.name}</h1>
+          <h2 className="flex flex-row gap-1">
+            <p className="font-bold">Presented By: </p>
+            {organization?.name}
+          </h2>
+
+          <div className="pt-2" />
+
+          <p>Registration: {tournament.registration_start_at}</p>
+          <p>Starts: {tournament.start_at}</p>
+          <p>Check in opens: {tournament.check_in_start_at} </p>
+
+          <div className="pt-2" />
+        </div>
+
+        <div className="pt-2" />
+
+        <TournamentDetailChips
+          org_slug={org_slug}
+          tournament_id={tournament_id}
+        />
+      </OrganizationHeader>
+
+      <div className="pt-2" />
+      {/* <Divider /> */}
+      <div>
+        <h2>TODO: Divider component</h2>
+      </div>
+      <div className="pt-2" />
+    </>
+  );
+}
+
+interface TournamentDetailChipsProps {
+  org_slug: string;
+  tournament_id: number;
+}
+function TournamentDetailChips(props: Readonly<TournamentDetailChipsProps>) {
+  const { org_slug, tournament_id } = props;
+
+  return (
+    <div className="flex w-full flex-row items-center justify-center gap-1">
+      <Chip variant="solid">Solid</Chip>
+      <Chip variant="bordered">Bordered</Chip>
+      <Chip variant="light">Light</Chip>
+      <Chip variant="flat">Flat</Chip>
+      <Link
+        href={`/organizations/${org_slug}/tournaments/${tournament_id}/register`}
+      >
+        <Chip>Register</Chip>
+      </Link>
+    </div>
+  );
+}