From 8aabb180b370531d18bd96090b9df9d3c52510a8 Mon Sep 17 00:00:00 2001
From: Lowell <lmtorola@mit.edu>
Date: Thu, 1 Feb 2024 21:18:03 -0500
Subject: [PATCH] awesome scrim page

---
 frontend2/src/api/compete/competeApi.ts       |  13 +
 frontend2/src/api/compete/competeKeys.ts      |   3 +
 frontend2/src/api/compete/useCompete.ts       |  44 ++-
 frontend2/src/components/Modal.tsx            |   2 +-
 .../components/compete/MatchRatingDelta.tsx   |  41 +++
 .../src/components/compete/RatingDelta.tsx    |  45 ---
 .../src/components/compete/TeamWithRating.tsx |  62 ++++
 .../elements/DescriptiveCheckbox.tsx          |   8 +-
 frontend2/src/components/elements/Pill.tsx    |  19 +-
 .../src/components/elements/SelectMenu.tsx    |  24 +-
 .../elements/SelectMultipleMenu.tsx           | 118 ++++++++
 .../sidebar/__test__/sidebar.test.tsx         |   2 +-
 .../src/components/tables/QueueTable.tsx      |   2 +-
 .../src/components/tables/RankingsTable.tsx   |   8 +-
 .../tables/TournamentResultsTable.tsx         |   2 +-
 .../tables/scrimmaging/InboxTable.tsx         | 138 +++++++--
 .../tables/scrimmaging/OutboxTable.tsx        | 124 ++++++--
 .../tables/scrimmaging/RequestScrimModal.tsx  | 158 +++++++++++
 .../tables/scrimmaging/ScrimHistoryTable.tsx  | 194 +++++++------
 .../tables/scrimmaging/TeamsTable.tsx         | 267 ++++++++++++------
 .../scrimmaging/TournamentMatchesTable.tsx    | 195 +++++++------
 frontend2/src/utils/utilTypes.ts              |  20 ++
 frontend2/src/views/MyTeam.tsx                |  22 +-
 frontend2/src/views/Scrimmaging.tsx           | 242 +++++++---------
 frontend2/tsconfig.json                       |   1 +
 25 files changed, 1219 insertions(+), 535 deletions(-)
 create mode 100644 frontend2/src/components/compete/MatchRatingDelta.tsx
 delete mode 100644 frontend2/src/components/compete/RatingDelta.tsx
 create mode 100644 frontend2/src/components/compete/TeamWithRating.tsx
 create mode 100644 frontend2/src/components/elements/SelectMultipleMenu.tsx
 create mode 100644 frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx

diff --git a/frontend2/src/api/compete/competeApi.ts b/frontend2/src/api/compete/competeApi.ts
index 9a07b300a..a40fbf903 100644
--- a/frontend2/src/api/compete/competeApi.ts
+++ b/frontend2/src/api/compete/competeApi.ts
@@ -18,6 +18,7 @@ import {
   type CompeteMatchTournamentListRequest,
   type CompeteMatchListRequest,
   type CompeteSubmissionTournamentListRequest,
+  type CompeteRequestDestroyRequest,
 } from "../_autogen";
 import { DEFAULT_API_CONFIGURATION, downloadFile } from "../helpers";
 
@@ -111,6 +112,18 @@ export const rejectScrimmage = async ({
   await API.competeRequestRejectCreate({ episodeId, id });
 };
 
+/**
+ * Cancel a scrimmage request.
+ * @param episodeId The current episode's ID.
+ * @param id The scrimmage's ID to cancel.
+ */
+export const cancelScrimmage = async ({
+  episodeId,
+  id,
+}: CompeteRequestDestroyRequest): Promise<void> => {
+  await API.competeRequestDestroy({ episodeId, id });
+};
+
 /**
  * Get a paginated list of the currently logged in user's incoming scrimmage requests.
  * @param episodeId The current episode's ID.
diff --git a/frontend2/src/api/compete/competeKeys.ts b/frontend2/src/api/compete/competeKeys.ts
index 3c00fcd0f..107ec880e 100644
--- a/frontend2/src/api/compete/competeKeys.ts
+++ b/frontend2/src/api/compete/competeKeys.ts
@@ -80,4 +80,7 @@ export const competeMutationKeys = {
 
   rejectScrim: ({ episodeId }: { episodeId: string }) =>
     ["compete", episodeId, "scrimmage", "reject"] as const,
+
+  cancelScrim: ({ episodeId }: { episodeId: string }) =>
+    ["compete", episodeId, "scrimmage", "cancel"] as const,
 };
diff --git a/frontend2/src/api/compete/useCompete.ts b/frontend2/src/api/compete/useCompete.ts
index 86ef3982d..170a9367a 100644
--- a/frontend2/src/api/compete/useCompete.ts
+++ b/frontend2/src/api/compete/useCompete.ts
@@ -14,6 +14,7 @@ import type {
   CompeteMatchTournamentListRequest,
   CompeteRequestAcceptCreateRequest,
   CompeteRequestCreateRequest,
+  CompeteRequestDestroyRequest,
   CompeteRequestInboxListRequest,
   CompeteRequestOutboxListRequest,
   CompeteRequestRejectCreateRequest,
@@ -29,6 +30,7 @@ import type {
 } from "../_autogen";
 import {
   acceptScrimmage,
+  cancelScrimmage,
   getAllUserTournamentSubmissions,
   getMatchesList,
   getScrimmagesListByTeam,
@@ -403,7 +405,6 @@ export const useRequestScrimmage = (
         });
 
         // Invalidate the outbox query
-        // TODO: ensure correct invalidation behavior!
         queryClient
           .invalidateQueries({
             queryKey: competeQueryKeys.outbox({ episodeId }),
@@ -425,7 +426,7 @@ export const useRequestScrimmage = (
       return await toast.promise(toastFn(), {
         loading: "Requesting scrimmage...",
         success: "Scrimmage requested!",
-        error: "Error requesting scrimmage.",
+        error: "Error requesting scrimmage. Is the requested team eligible?",
       });
     },
   });
@@ -497,7 +498,6 @@ export const useRejectScrimmage = (
         await rejectScrimmage({ episodeId, id });
 
         // Invalidate the inbox query
-        // TODO: ensure correct invalidation behavior!
         queryClient
           .invalidateQueries({
             queryKey: competeQueryKeys.inbox({ episodeId }),
@@ -521,3 +521,41 @@ export const useRejectScrimmage = (
       });
     },
   });
+
+/**
+ * For cancelling a scrimmage request.
+ */
+export const useCancelScrimmage = (
+  { episodeId }: { episodeId: string },
+  queryClient: QueryClient,
+): UseMutationResult<void, Error, CompeteRequestDestroyRequest, unknown> =>
+  useMutation({
+    mutationKey: competeMutationKeys.cancelScrim({ episodeId }),
+    mutationFn: async ({ episodeId, id }: CompeteRequestDestroyRequest) => {
+      const toastFn = async (): Promise<void> => {
+        await cancelScrimmage({ episodeId, id });
+
+        // Invalidate the outbox query
+        queryClient
+          .invalidateQueries({
+            queryKey: competeQueryKeys.outbox({ episodeId }),
+          })
+          .catch((e) => toast.error((e as Error).message));
+
+        // Prefetch the first page of the outbox list
+        queryClient
+          .prefetchQuery({
+            queryKey: competeQueryKeys.outbox({ episodeId, page: 1 }),
+            queryFn: async () =>
+              await getUserScrimmagesOutboxList({ episodeId, page: 1 }),
+          })
+          .catch((e) => toast.error((e as Error).message));
+      };
+
+      await toast.promise(toastFn(), {
+        loading: "Cancelling scrimmage...",
+        success: "Scrimmage cancelled!",
+        error: "Error cancelling scrimmage.",
+      });
+    },
+  });
diff --git a/frontend2/src/components/Modal.tsx b/frontend2/src/components/Modal.tsx
index 80cc755ec..a405eb583 100644
--- a/frontend2/src/components/Modal.tsx
+++ b/frontend2/src/components/Modal.tsx
@@ -40,7 +40,7 @@ const Modal: React.FC<ModalProps> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
+              <Dialog.Panel className="w-full max-w-lg transform overflow-visible rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
                 <Dialog.Title
                   as="div"
                   className="mb-2 text-lg font-semibold tracking-wide"
diff --git a/frontend2/src/components/compete/MatchRatingDelta.tsx b/frontend2/src/components/compete/MatchRatingDelta.tsx
new file mode 100644
index 000000000..1a9e0df38
--- /dev/null
+++ b/frontend2/src/components/compete/MatchRatingDelta.tsx
@@ -0,0 +1,41 @@
+import { type MatchParticipant } from "api/_autogen";
+import React from "react";
+import TeamWithRating from "./TeamWithRating";
+
+interface RatingDeltaProps {
+  includeTeamName?: boolean;
+  participant: MatchParticipant;
+  ranked: boolean;
+}
+
+const MatchRatingDelta: React.FC<RatingDeltaProps> = ({
+  includeTeamName,
+  participant,
+  ranked,
+}) => {
+  let newRating = 0;
+  if (ranked) {
+    newRating =
+      participant.rating !== null
+        ? Math.round(participant.rating)
+        : Math.round(participant.old_rating);
+  } else {
+    newRating = Math.round(participant.old_rating);
+  }
+  const oldRating =
+    participant.old_rating !== null ? Math.round(participant.old_rating) : 0;
+  const ratingDelta = Math.abs(newRating - oldRating);
+
+  const includeName = includeTeamName === undefined || includeTeamName;
+  return (
+    <TeamWithRating
+      teamName={participant.teamname}
+      teamId={participant.team}
+      includeTeamName={includeName}
+      rating={newRating}
+      ratingDelta={ratingDelta}
+    />
+  );
+};
+
+export default MatchRatingDelta;
diff --git a/frontend2/src/components/compete/RatingDelta.tsx b/frontend2/src/components/compete/RatingDelta.tsx
deleted file mode 100644
index 784f2b124..000000000
--- a/frontend2/src/components/compete/RatingDelta.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { NavLink } from "react-router-dom";
-import { type MatchParticipant } from "../../api/_autogen";
-import React from "react";
-import { useEpisodeId } from "../../contexts/EpisodeContext";
-
-interface RatingDeltaProps {
-  participant: MatchParticipant;
-  ranked: boolean;
-}
-
-const RatingDelta: React.FC<RatingDeltaProps> = ({ participant, ranked }) => {
-  const { episodeId } = useEpisodeId();
-
-  const newRating = ranked
-    ? Math.round(participant.rating)
-    : Math.round(participant.old_rating);
-  const oldRating =
-    participant.old_rating !== null ? Math.round(participant.old_rating) : 0;
-  const ratingDelta = Math.abs(newRating - oldRating);
-  const deltaClass =
-    newRating > oldRating
-      ? "text-xs font-semibold slashed-zero text-green-700"
-      : newRating < oldRating
-      ? "text-xs font-semibold slashed-zero text-red-700"
-      : "text-xs font-semibold slashed-zero text-gray-700";
-  return (
-    <>
-      <NavLink
-        to={`/${episodeId}/team/${participant.team}`}
-        className="hover:underline"
-      >
-        {participant.teamname}
-      </NavLink>
-      <span>{` (${newRating} `}</span>
-      <span className={deltaClass}>
-        {`${
-          newRating > oldRating ? " +" : newRating < oldRating ? " -" : " ±"
-        }${ratingDelta}`}
-      </span>
-      <span>{`)`}</span>
-    </>
-  );
-};
-
-export default RatingDelta;
diff --git a/frontend2/src/components/compete/TeamWithRating.tsx b/frontend2/src/components/compete/TeamWithRating.tsx
new file mode 100644
index 000000000..2facbd92e
--- /dev/null
+++ b/frontend2/src/components/compete/TeamWithRating.tsx
@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import { useEpisodeId } from "../../contexts/EpisodeContext";
+import { NavLink } from "react-router-dom";
+
+interface TeamWithRatingProps {
+  teamName: string;
+  teamId: number;
+  includeTeamName: boolean;
+  rating: number;
+  ratingDelta?: number;
+}
+
+const TeamWithRating: React.FC<TeamWithRatingProps> = ({
+  teamName,
+  teamId,
+  includeTeamName,
+  rating,
+  ratingDelta,
+}) => {
+  const { episodeId } = useEpisodeId();
+
+  const ratingComponent = useMemo(() => {
+    if (ratingDelta !== undefined) {
+      const deltaClass =
+        ratingDelta > 0
+          ? "text-xs font-semibold slashed-zero text-green-700"
+          : rating < ratingDelta
+          ? "text-xs font-semibold slashed-zero text-red-700"
+          : "text-xs font-semibold slashed-zero text-gray-700";
+      return (
+        <span className={deltaClass}>
+          {" "}
+          {includeTeamName && <span>{"("}</span>}
+          {`${
+            ratingDelta > 0 ? " +" : ratingDelta < 0 ? " -" : " ±"
+          }${ratingDelta.toFixed(0)}`}
+          {includeTeamName && <span>{")"}</span>}
+        </span>
+      );
+    } else {
+      return (
+        <span>
+          {" "}
+          {includeTeamName && <span>{"("}</span>}
+          {rating.toFixed(0)}
+          {includeTeamName && <span>{")"}</span>}
+        </span>
+      );
+    }
+  }, [rating, ratingDelta, includeTeamName]);
+
+  return (
+    <>
+      <NavLink to={`/${episodeId}/team/${teamId}`} className="hover:underline">
+        {includeTeamName && <span>{teamName}</span>}
+        {ratingComponent}
+      </NavLink>
+    </>
+  );
+};
+
+export default TeamWithRating;
diff --git a/frontend2/src/components/elements/DescriptiveCheckbox.tsx b/frontend2/src/components/elements/DescriptiveCheckbox.tsx
index be3e70ff9..2e6f15216 100644
--- a/frontend2/src/components/elements/DescriptiveCheckbox.tsx
+++ b/frontend2/src/components/elements/DescriptiveCheckbox.tsx
@@ -25,6 +25,7 @@ export const getCheckboxState = (
 };
 
 interface DescriptiveCheckboxProps {
+  disabled?: boolean;
   status: CheckboxState;
   onChange: (checked: boolean) => void;
   title: string;
@@ -32,6 +33,7 @@ interface DescriptiveCheckboxProps {
 }
 
 const DescriptiveCheckbox: React.FC<DescriptiveCheckboxProps> = ({
+  disabled = false,
   status,
   onChange,
   title,
@@ -41,13 +43,13 @@ const DescriptiveCheckbox: React.FC<DescriptiveCheckboxProps> = ({
     <Switch
       checked={status === CheckboxState.CHECKED}
       onChange={onChange}
-      disabled={status === CheckboxState.LOADING}
+      disabled={disabled || status === CheckboxState.LOADING}
       className={`flex w-full
       flex-row items-center justify-between gap-3 rounded-lg px-6 py-4 shadow ring-2 ring-inset
-       ring-cyan-600/20 transition-all ui-checked:bg-cyan-900/80 ui-checked:ring-0`}
+       ring-cyan-600/20 transition-all disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400 disabled:ring-gray-400 ui-checked:bg-cyan-900/80 ui-checked:ring-0`}
     >
       <div className="flex flex-col gap-2 text-left">
-        <div className="font-semibold ui-checked:text-white ">{title}</div>
+        <div className="font-semibold ui-checked:text-white">{title}</div>
         <div className="text-sm text-cyan-700 ui-checked:text-cyan-100">
           {description}
         </div>
diff --git a/frontend2/src/components/elements/Pill.tsx b/frontend2/src/components/elements/Pill.tsx
index b0aaf8f6f..3b372e4cd 100644
--- a/frontend2/src/components/elements/Pill.tsx
+++ b/frontend2/src/components/elements/Pill.tsx
@@ -4,7 +4,7 @@ import Icon from "./Icon";
 interface PillProps {
   text: string;
   deletable?: boolean;
-  onDelete?: () => void;
+  onDelete?: (ev?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   className?: string;
 }
 
@@ -19,12 +19,17 @@ const Pill: React.FC<PillProps> = ({
       className={`gap flex max-w-max flex-row items-center justify-center gap-x-1 rounded-full bg-cyan-50 py-1 pl-3 pr-2 text-sm text-cyan-700 ring-1 ring-inset ring-cyan-600/20 ${className}`}
     >
       <span>{text}</span>
-      <button
-        onClick={onDelete}
-        className="cursor-pointer items-center rounded "
-      >
-        <Icon name="x_mark" size="xs" />
-      </button>
+      {deletable && (
+        <button
+          onClick={(ev) => {
+            onDelete?.(ev);
+            ev.stopPropagation();
+          }}
+          className="cursor-pointer items-center rounded "
+        >
+          <Icon name="x_mark" size="xs" />
+        </button>
+      )}
     </div>
   );
 };
diff --git a/frontend2/src/components/elements/SelectMenu.tsx b/frontend2/src/components/elements/SelectMenu.tsx
index 4bda266bb..2a6aa303c 100644
--- a/frontend2/src/components/elements/SelectMenu.tsx
+++ b/frontend2/src/components/elements/SelectMenu.tsx
@@ -6,6 +6,7 @@ import FormLabel from "./FormLabel";
 
 interface SelectMenuProps<T extends React.Key | null | undefined> {
   options: Array<{ value: T; label: string }>;
+  disabled?: boolean;
   label?: string;
   required?: boolean;
   value?: T;
@@ -15,11 +16,17 @@ interface SelectMenuProps<T extends React.Key | null | undefined> {
   onChange?: (value: T) => void;
 }
 
+const DISABLED = "bg-gray-200 ring-gray-200 text-gray-500 cursor-not-allowed";
+const INVALID = "ring-red-500 text-gray-900";
+const DEFAULT = "ring-gray-600 ring-cyan-600 text-gray-900";
+const PLACEHOLDER = "ring-gray-400 text-gray-400";
+
 function SelectMenu<T extends React.Key | null | undefined>({
   label,
   required = false,
   options,
   value,
+  disabled = false,
   placeholder,
   className = "",
   errorMessage,
@@ -30,9 +37,15 @@ function SelectMenu<T extends React.Key | null | undefined>({
     [options],
   );
   const invalid = errorMessage !== undefined;
+
+  let stateStyle = DEFAULT;
+  if (disabled) stateStyle = DISABLED;
+  else if (invalid) stateStyle = INVALID;
+  else if (value === undefined) stateStyle = PLACEHOLDER;
+
   return (
     <div className={`relative ${invalid ? "mb-2" : ""} ${className}`}>
-      <Listbox value={value} onChange={onChange}>
+      <Listbox value={value} onChange={onChange} disabled={disabled}>
         <div className="relative">
           {label !== undefined && (
             <Listbox.Label>
@@ -40,12 +53,11 @@ function SelectMenu<T extends React.Key | null | undefined>({
             </Listbox.Label>
           )}
           <Listbox.Button
-            className={`relative h-9 w-full truncate rounded-md bg-white py-1.5
-            pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
-            focus:outline-none focus:ring-1 focus:ring-cyan-600 ui-open:ring-cyan-600
-            sm:text-sm sm:leading-6 ${invalid ? "ring-red-500" : ""}`}
+            className={`relative h-9 w-full truncate rounded-md bg-white py-1.5 pl-3 pr-10
+            text-left shadow-sm ring-1 ring-inset focus:outline-none focus:ring-1
+            sm:text-sm sm:leading-6 ${stateStyle}`}
           >
-            <span className={`${value === undefined ? "text-gray-400" : ""}`}>
+            <span>
               {value === undefined ? placeholder : valueToLabel.get(value)}
             </span>
             <div
diff --git a/frontend2/src/components/elements/SelectMultipleMenu.tsx b/frontend2/src/components/elements/SelectMultipleMenu.tsx
new file mode 100644
index 000000000..0f108f0d5
--- /dev/null
+++ b/frontend2/src/components/elements/SelectMultipleMenu.tsx
@@ -0,0 +1,118 @@
+import { Listbox, Transition } from "@headlessui/react";
+import React, { Fragment, useMemo } from "react";
+import FormLabel from "./FormLabel";
+import Pill from "./Pill";
+import Icon from "./Icon";
+import FormError from "./FormError";
+
+interface SelectMultipleMenuProps<T extends React.Key | null | undefined> {
+  options: Array<{ value: T; label: string }>;
+  disabled?: boolean;
+  label?: string;
+  required?: boolean;
+  value?: T[];
+  placeholder?: string;
+  className?: string;
+  errorMessage?: string;
+  onChange?: (value: T[]) => void;
+}
+
+const DISABLED = "bg-gray-200 ring-gray-200 text-gray-500 cursor-not-allowed";
+const INVALID = "ring-red-500 text-gray-900";
+const DEFAULT = "ring-gray-600 ring-cyan-600 text-gray-900";
+const PLACEHOLDER = "ring-gray-400 text-gray-400";
+
+function SelectMultipleMenu<T extends React.Key | null | undefined>({
+  label,
+  required = false,
+  options,
+  disabled = false,
+  value,
+  placeholder,
+  className = "",
+  errorMessage,
+  onChange,
+}: SelectMultipleMenuProps<T>): JSX.Element {
+  const valueToLabel = useMemo(
+    () => new Map(options.map((option) => [option.value, option.label])),
+    [options],
+  );
+  const removeOption = (option: T): void => {
+    if (value === undefined || onChange === undefined) return;
+    onChange(value.filter((v) => v !== option));
+  };
+  const invalid = errorMessage !== undefined;
+
+  let stateStyle = DEFAULT;
+  if (disabled) stateStyle = DISABLED;
+  else if (invalid) stateStyle = INVALID;
+  else if (value === undefined || value.length === 0) stateStyle = PLACEHOLDER;
+
+  return (
+    <div className={`relative ${invalid ? "mb-4" : ""} ${className}`}>
+      <Listbox value={value} onChange={onChange} multiple disabled={disabled}>
+        <div className="relative">
+          {label !== undefined && (
+            <Listbox.Label>
+              <FormLabel label={label} required={required} />
+            </Listbox.Label>
+          )}
+          <Listbox.Button
+            className={`ring-insetfocus:outline-none relative flex w-full flex-row
+            items-center rounded-md bg-white py-1.5 pl-3 pr-2 shadow-sm ring-1 focus:ring-1
+            sm:text-sm sm:leading-6 ${stateStyle}`}
+          >
+            <div className={`flex h-full w-full flex-row flex-wrap gap-2`}>
+              {value === undefined || value.length === 0
+                ? placeholder
+                : value.map((v) => (
+                    <Pill
+                      key={v}
+                      text={valueToLabel.get(v) ?? ""}
+                      deletable
+                      onDelete={() => {
+                        removeOption(v);
+                      }}
+                    />
+                  ))}
+            </div>
+            <div
+              className="flex transform items-center
+              transition duration-300 ui-open:rotate-180"
+            >
+              <Icon name="chevron_down" size="sm" />
+            </div>
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options
+              className="absolute z-10 ml-0 mt-1 max-h-48 w-full overflow-auto rounded-md
+              bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none
+              sm:max-h-60 sm:text-sm"
+            >
+              {options.map((option) => (
+                <Listbox.Option
+                  className="flex cursor-default flex-row justify-between py-1.5 pl-4 pr-2 ui-active:bg-cyan-100"
+                  key={option.value}
+                  value={option.value}
+                >
+                  <div className="overflow-x-auto pr-2">{option.label}</div>
+                  <span className=" hidden items-center text-cyan-900 ui-selected:flex">
+                    <Icon name="check" size="sm" />
+                  </span>
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
+      {invalid && <FormError message={errorMessage} />}
+    </div>
+  );
+}
+
+export default SelectMultipleMenu;
diff --git a/frontend2/src/components/sidebar/__test__/sidebar.test.tsx b/frontend2/src/components/sidebar/__test__/sidebar.test.tsx
index fa7776444..0af5d49c3 100644
--- a/frontend2/src/components/sidebar/__test__/sidebar.test.tsx
+++ b/frontend2/src/components/sidebar/__test__/sidebar.test.tsx
@@ -1,5 +1,5 @@
 export {};
 // Trivial test case to make CI work :)
-test("Trivial test!", () => {
+test("Trivial test case", () => {
   expect(1).toEqual(1);
 });
diff --git a/frontend2/src/components/tables/QueueTable.tsx b/frontend2/src/components/tables/QueueTable.tsx
index 5e6ce548a..a113ab589 100644
--- a/frontend2/src/components/tables/QueueTable.tsx
+++ b/frontend2/src/components/tables/QueueTable.tsx
@@ -6,7 +6,7 @@ import Table from "../Table";
 import TableBottom from "../TableBottom";
 import MatchScore from "../compete/MatchScore";
 import MatchStatus from "../compete/MatchStatus";
-import RatingDelta from "../compete/RatingDelta";
+import RatingDelta from "../compete/MatchRatingDelta";
 
 interface QueueTableProps {
   data: Maybe<PaginatedMatchList>;
diff --git a/frontend2/src/components/tables/RankingsTable.tsx b/frontend2/src/components/tables/RankingsTable.tsx
index 234c8703b..1c61052e2 100644
--- a/frontend2/src/components/tables/RankingsTable.tsx
+++ b/frontend2/src/components/tables/RankingsTable.tsx
@@ -9,6 +9,7 @@ import TableBottom from "../TableBottom";
 import { NavLink } from "react-router-dom";
 import EligibilityIcon from "../EligibilityIcon";
 import { isPresent } from "../../utils/utilTypes";
+import { useEpisodeId } from "../../contexts/EpisodeContext";
 
 interface RankingsTableProps {
   data: Maybe<PaginatedTeamPublicList>;
@@ -32,6 +33,8 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
   eligibilityMap,
   handlePage,
 }) => {
+  const { episodeId } = useEpisodeId();
+
   return (
     <Table
       data={data?.results ?? []}
@@ -57,7 +60,10 @@ const RankingsTable: React.FC<RankingsTableProps> = ({
           header: "Team",
           key: "team",
           value: (team) => (
-            <NavLink to={`/team/${team.id}`} className="hover:underline">
+            <NavLink
+              to={`${episodeId}/team/${team.id}`}
+              className="hover:underline"
+            >
               {team.name}
             </NavLink>
           ),
diff --git a/frontend2/src/components/tables/TournamentResultsTable.tsx b/frontend2/src/components/tables/TournamentResultsTable.tsx
index d9430c3e5..3bf43822a 100644
--- a/frontend2/src/components/tables/TournamentResultsTable.tsx
+++ b/frontend2/src/components/tables/TournamentResultsTable.tsx
@@ -11,7 +11,7 @@ import Table from "../Table";
 import TableBottom from "../TableBottom";
 import MatchScore from "../compete/MatchScore";
 import MatchStatus from "../compete/MatchStatus";
-import RatingDelta from "../compete/RatingDelta";
+import RatingDelta from "../compete/MatchRatingDelta";
 import { isNil } from "lodash";
 
 interface TournamentResultsTableProps {
diff --git a/frontend2/src/components/tables/scrimmaging/InboxTable.tsx b/frontend2/src/components/tables/scrimmaging/InboxTable.tsx
index 59b474028..831912fd3 100644
--- a/frontend2/src/components/tables/scrimmaging/InboxTable.tsx
+++ b/frontend2/src/components/tables/scrimmaging/InboxTable.tsx
@@ -1,37 +1,117 @@
-import React from "react";
-import type { PaginatedScrimmageRequestList } from "../../../api/_autogen";
-import type { Maybe } from "../../../utils/utilTypes";
-import Table from "../../Table";
+import React, { Fragment } from "react";
+import Table from "components/Table";
+import {
+  useAcceptScrimmage,
+  useRejectScrimmage,
+  useScrimmageInboxList,
+} from "api/compete/useCompete";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useQueryClient } from "@tanstack/react-query";
+import TableBottom from "components/TableBottom";
+import Button from "components/elements/Button";
+import { dateTime } from "utils/dateTime";
+import TeamWithRating from "components/compete/TeamWithRating";
+import { stringifyPlayerOrder } from "utils/utilTypes";
+import Pill from "components/elements/Pill";
 
 interface InboxTableProps {
-  data: Maybe<PaginatedScrimmageRequestList>;
-  loading: boolean;
+  inboxPage: number;
+  handlePage: (page: number, key: "inboxPage") => void;
 }
 
-const InboxTable: React.FC<InboxTableProps> = ({ data, loading }) => {
+const InboxTable: React.FC<InboxTableProps> = ({ inboxPage, handlePage }) => {
+  const { episodeId } = useEpisodeId();
+  const queryClient = useQueryClient();
+  const inboxData = useScrimmageInboxList(
+    { episodeId, page: inboxPage },
+    queryClient,
+  );
+
+  const accept = useAcceptScrimmage({ episodeId }, queryClient);
+  const reject = useRejectScrimmage({ episodeId }, queryClient);
+
   return (
-    <Table
-      data={data?.results ?? []}
-      loading={loading}
-      keyFromValue={(req) => req.id.toString()}
-      columns={[
-        {
-          header: "Team",
-          key: "requestor",
-          value: (req) => req.requested_by_name,
-        },
-        {
-          header: "",
-          key: "accept",
-          value: (req) => "ACCEPT",
-        },
-        {
-          header: "",
-          key: "reject",
-          value: (req) => "REJECT",
-        },
-      ]}
-    />
+    <Fragment>
+      <h1 className="mb-2 text-2xl font-bold leading-7 text-gray-900">
+        Incoming Scrimmage Requests
+      </h1>
+      <Table
+        data={inboxData.data?.results ?? []}
+        loading={inboxData.isLoading}
+        keyFromValue={(req) => req.id.toString()}
+        bottomElement={
+          <TableBottom
+            totalCount={inboxData.data?.count ?? 0}
+            pageSize={10}
+            currentPage={inboxPage}
+            onPage={(page) => {
+              handlePage(page, "inboxPage");
+            }}
+          />
+        }
+        columns={[
+          {
+            header: "Team",
+            key: "requestor",
+            value: (req) => (
+              <TeamWithRating
+                teamName={req.requested_by_name}
+                teamId={req.requested_by}
+                includeTeamName={true}
+                rating={req.requested_by_rating}
+              />
+            ),
+          },
+          {
+            header: "Player Order",
+            key: "player_order",
+            value: (req) => stringifyPlayerOrder(req.player_order),
+          },
+          {
+            header: "Maps",
+            key: "maps",
+            value: (req) => (
+              <div className="flex min-h-max w-full flex-row flex-wrap gap-2">
+                {req.maps.map((mapItem) => (
+                  <Pill key={mapItem} text={mapItem} deletable={false} />
+                ))}
+              </div>
+            ),
+          },
+          {
+            header: "Requested At",
+            key: "requested_at",
+            value: (req) => dateTime(req.created).localFullString,
+          },
+          {
+            header: "",
+            key: "accept_reject",
+            value: (req) => {
+              return (
+                <div className="flex flex-row gap-2">
+                  <Button
+                    variant="dark"
+                    label="Accept"
+                    loading={accept.variables?.id === req.id.toString()}
+                    onClick={() => {
+                      accept.mutate({ episodeId, id: req.id.toString() });
+                    }}
+                  />
+                  <Button
+                    variant="danger-outline"
+                    label="Reject"
+                    loading={reject.variables?.id === req.id.toString()}
+                    onClick={() => {
+                      reject.mutate({ episodeId, id: req.id.toString() });
+                    }}
+                  />
+                </div>
+              );
+            },
+          },
+        ]}
+      />
+    </Fragment>
   );
 };
 
diff --git a/frontend2/src/components/tables/scrimmaging/OutboxTable.tsx b/frontend2/src/components/tables/scrimmaging/OutboxTable.tsx
index c4da3ae3f..d9e7180a6 100644
--- a/frontend2/src/components/tables/scrimmaging/OutboxTable.tsx
+++ b/frontend2/src/components/tables/scrimmaging/OutboxTable.tsx
@@ -1,32 +1,108 @@
-import React from "react";
-import type { PaginatedScrimmageRequestList } from "../../../api/_autogen";
-import type { Maybe } from "../../../utils/utilTypes";
-import Table from "../../Table";
+import React, { Fragment } from "react";
+import Table from "components/Table";
+import {
+  useCancelScrimmage,
+  useScrimmageOutboxList,
+} from "api/compete/useCompete";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import TableBottom from "components/TableBottom";
+import Button from "components/elements/Button";
+import TeamWithRating from "components/compete/TeamWithRating";
+import { stringifyPlayerOrder } from "utils/utilTypes";
+import Pill from "components/elements/Pill";
+import { dateTime } from "utils/dateTime";
 
 interface OutboxTableProps {
-  data: Maybe<PaginatedScrimmageRequestList>;
-  loading: boolean;
+  outboxPage: number;
+  handlePage: (page: number, key: "outboxPage") => void;
 }
 
-const OutboxTable: React.FC<OutboxTableProps> = ({ data, loading }) => {
+const OutboxTable: React.FC<OutboxTableProps> = ({
+  outboxPage,
+  handlePage,
+}) => {
+  const { episodeId } = useEpisodeId();
+  const queryClient = useQueryClient();
+  const outboxData = useScrimmageOutboxList(
+    { episodeId, page: outboxPage },
+    queryClient,
+  );
+
+  const cancel = useCancelScrimmage({ episodeId }, queryClient);
+
   return (
-    <Table
-      data={data?.results ?? []}
-      loading={loading}
-      keyFromValue={(req) => req.id.toString()}
-      columns={[
-        {
-          header: "Team",
-          key: "requestee",
-          value: (req) => req.requested_to_name,
-        },
-        {
-          header: "",
-          key: "cancel",
-          value: (req) => "CANCEL",
-        },
-      ]}
-    />
+    <Fragment>
+      <h1 className="mb-2 text-2xl font-bold leading-7 text-gray-900">
+        Outgoing Scrimmage Requests
+      </h1>
+      <Table
+        data={outboxData.data?.results ?? []}
+        loading={outboxData.isLoading}
+        keyFromValue={(req) => req.id.toString()}
+        bottomElement={
+          <TableBottom
+            totalCount={outboxData.data?.count ?? 0}
+            pageSize={10}
+            currentPage={outboxPage}
+            onPage={(page) => {
+              handlePage(page, "outboxPage");
+            }}
+          />
+        }
+        columns={[
+          {
+            header: "Team",
+            key: "requestee",
+            value: (req) => (
+              <TeamWithRating
+                teamName={req.requested_to_name}
+                teamId={req.requested_to}
+                includeTeamName={true}
+                rating={req.requested_to_rating}
+              />
+            ),
+          },
+          {
+            header: "Player Order",
+            key: "player_order",
+            value: (req) => stringifyPlayerOrder(req.player_order),
+          },
+          {
+            header: "Maps",
+            key: "maps",
+            value: (req) => (
+              <div className="flex min-h-max w-full flex-row flex-wrap gap-2">
+                {req.maps.map((mapItem) => (
+                  <Pill key={mapItem} text={mapItem} deletable={false} />
+                ))}
+              </div>
+            ),
+          },
+          {
+            header: "Requested At",
+            key: "requested_at",
+            value: (req) => dateTime(req.created).localFullString,
+          },
+          {
+            header: "",
+            key: "cancel",
+            value: (req) => (
+              <div className="flex w-1/2 flex-row justify-end">
+                <Button
+                  variant="danger-outline"
+                  label="Cancel"
+                  loading={cancel.variables?.id === req.id.toString()}
+                  onClick={() => {
+                    cancel.mutate({ episodeId, id: req.id.toString() });
+                  }}
+                />
+              </div>
+            ),
+          },
+        ]}
+      />
+    </Fragment>
   );
 };
 
diff --git a/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx b/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
new file mode 100644
index 000000000..2d00b35ad
--- /dev/null
+++ b/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
@@ -0,0 +1,158 @@
+import React, { useCallback, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  type GameMap,
+  Status526Enum,
+  type TeamPublic,
+  PlayerOrderEnum,
+} from "api/_autogen";
+import { useRequestScrimmage } from "api/compete/useCompete";
+import Modal from "components/Modal";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { clone } from "lodash";
+import SelectMenu from "components/elements/SelectMenu";
+import SelectMultipleMenu from "components/elements/SelectMultipleMenu";
+import Button from "components/elements/Button";
+import DescriptiveCheckbox, {
+  CheckboxState,
+} from "components/elements/DescriptiveCheckbox";
+
+interface RequestScrimModalProps {
+  teamToRequest: TeamPublic;
+  maps: GameMap[];
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+// Team statuses that allow for ranked scrims.
+const ALLOWS_RANKED = Status526Enum.R;
+const MAX_MAPS_PER_SCRIM = 10;
+const ORDER_OPTIONS = [
+  { label: "Alternating", value: PlayerOrderEnum.QuestionMark },
+  { label: "Requestor First", value: PlayerOrderEnum.Plus },
+  { label: "Requestor Last", value: PlayerOrderEnum.Minus },
+];
+
+const RequestScrimModal: React.FC<RequestScrimModalProps> = ({
+  teamToRequest,
+  maps,
+  isOpen,
+  closeModal,
+}) => {
+  const { episodeId } = useEpisodeId();
+  const queryClient = useQueryClient();
+  const request = useRequestScrimmage({ episodeId }, queryClient);
+
+  const getRandomMaps: () => string[] = useCallback(() => {
+    const possibleMaps = clone(maps);
+    // Pick a random subset of 3 maps, assuming that there are at least 3 possible maps.
+    const randomMaps: GameMap[] = [];
+    for (let i = 0; i < 3; i++) {
+      const randomIndex = Math.floor(Math.random() * possibleMaps.length);
+      const randomMap = possibleMaps[randomIndex];
+      randomMaps.push(randomMap);
+      possibleMaps.splice(randomIndex, 1);
+    }
+    return randomMaps.map((map) => map.name);
+  }, [maps]);
+
+  const [selectedOrder, setSelectedOrder] = useState<PlayerOrderEnum>(
+    PlayerOrderEnum.QuestionMark,
+  );
+
+  const [selectedMapNames, setSelectedMapNames] = useState<string[]>(
+    getRandomMaps(),
+  );
+  const [mapErrorMessage, setMapErrorMessage] = useState<string | undefined>();
+  const [ranked, setRanked] = useState<boolean>(false);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeModal={closeModal}
+      title={`Request scrimmage with ${teamToRequest.name}`}
+    >
+      {
+        <div className="mt-4 flex flex-col gap-2">
+          <SelectMenu
+            disabled={ranked}
+            label="Player Order"
+            options={ORDER_OPTIONS}
+            value={selectedOrder}
+            onChange={(newOrder) => {
+              setSelectedOrder(newOrder);
+            }}
+          />
+          <SelectMultipleMenu<string>
+            errorMessage={mapErrorMessage}
+            disabled={ranked}
+            label="Select Maps"
+            placeholder={ranked ? "Random 3 maps!" : "Select up to 10 maps..."}
+            options={
+              maps.map((map) => ({
+                value: map.name,
+                label: map.name,
+              })) ?? []
+            }
+            value={selectedMapNames}
+            onChange={(newMapNames) => {
+              if (newMapNames.length > MAX_MAPS_PER_SCRIM) {
+                setMapErrorMessage("You can only select up to 10 maps.");
+                return;
+              }
+              setMapErrorMessage(undefined);
+              setSelectedMapNames(newMapNames);
+            }}
+          />
+          <Button
+            disabled={ranked}
+            label={"Use random 3 maps"}
+            onClick={() => {
+              setSelectedMapNames(getRandomMaps());
+            }}
+          />
+          <DescriptiveCheckbox
+            status={ranked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED}
+            title="Ranked?"
+            disabled={teamToRequest.status !== ALLOWS_RANKED}
+            description="Request a ranked scrimmage. All ranked scrimmages are played with alternating player order on 3 random maps."
+            onChange={(checked) => {
+              if (checked) {
+                setSelectedOrder(PlayerOrderEnum.QuestionMark);
+                setSelectedMapNames([]);
+              } else {
+                setSelectedMapNames(getRandomMaps());
+              }
+              setRanked(checked);
+            }}
+          />
+          <Button
+            label="Request Scrimmage"
+            fullWidth
+            loading={request.isPending}
+            onClick={() => {
+              void request
+                .mutateAsync({
+                  episodeId,
+                  scrimmageRequestRequest: {
+                    requested_to: teamToRequest.id,
+                    is_ranked: ranked,
+                    map_names: selectedMapNames,
+                    player_order: selectedOrder,
+                  },
+                })
+                .then(() => {
+                  closeModal();
+                })
+                .catch((err: string) => {
+                  console.error(`Error requesting scrimmage: ${err}`);
+                });
+            }}
+          />
+        </div>
+      }
+    </Modal>
+  );
+};
+
+export default RequestScrimModal;
diff --git a/frontend2/src/components/tables/scrimmaging/ScrimHistoryTable.tsx b/frontend2/src/components/tables/scrimmaging/ScrimHistoryTable.tsx
index 91a1421f0..1a066e3ce 100644
--- a/frontend2/src/components/tables/scrimmaging/ScrimHistoryTable.tsx
+++ b/frontend2/src/components/tables/scrimmaging/ScrimHistoryTable.tsx
@@ -1,105 +1,133 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { NavLink } from "react-router-dom";
 import { dateTime } from "../../../utils/dateTime";
-import type { PaginatedMatchList } from "../../../api/_autogen";
-import type { Maybe } from "../../../utils/utilTypes";
 import Table from "../../Table";
 import TableBottom from "../../TableBottom";
 import MatchScore from "../../compete/MatchScore";
 import MatchStatus from "../../compete/MatchStatus";
-import RatingDelta from "../../compete/RatingDelta";
-import { useEpisodeInfo } from "../../../api/episode/useEpisode";
-import { useEpisodeId } from "../../../contexts/EpisodeContext";
-import { useUserTeam } from "../../../api/team/useTeam";
+import RatingDelta from "../../compete/MatchRatingDelta";
+import { useEpisodeInfo } from "api/episode/useEpisode";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useUserTeam } from "api/team/useTeam";
 import { isNil } from "lodash";
+import { useUserScrimmageList } from "api/compete/useCompete";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface ScrimHistoryTableProps {
-  data: Maybe<PaginatedMatchList>;
-  page: number;
-  loading: boolean;
-  handlePage: (page: number) => void;
+  scrimsPage: number;
+  handlePage: (page: number, key: "scrimsPage") => void;
 }
 
 const ScrimHistoryTable: React.FC<ScrimHistoryTableProps> = ({
-  data,
-  page,
-  loading,
+  scrimsPage,
   handlePage,
 }) => {
   const { episodeId } = useEpisodeId();
-  const { data: episode } = useEpisodeInfo({ id: episodeId });
-  const { data: currentTeam } = useUserTeam({ episodeId });
+  const queryClient = useQueryClient();
+  const episodeData = useEpisodeInfo({ id: episodeId });
+  const userTeamData = useUserTeam({ episodeId });
+  const scrimsData = useUserScrimmageList(
+    { episodeId, page: scrimsPage },
+    queryClient,
+  );
 
   return (
-    <Table
-      data={data?.results ?? []}
-      loading={loading}
-      keyFromValue={(match) => match.id.toString()}
-      bottomElement={
-        <TableBottom
-          totalCount={data?.count ?? 0}
-          pageSize={10}
-          currentPage={page}
-          onPage={handlePage}
-        />
-      }
-      columns={[
-        {
-          header: "Score",
-          key: "score",
-          value: (match) => {
-            return <MatchScore match={match} userTeamId={currentTeam?.id} />;
+    <Fragment>
+      <h1 className="mb-2 text-2xl font-bold leading-7 text-gray-900">
+        Scrimmage History
+      </h1>
+      <Table
+        data={scrimsData.data?.results ?? []}
+        loading={scrimsData.isLoading}
+        keyFromValue={(match) => match.id.toString()}
+        bottomElement={
+          <TableBottom
+            totalCount={scrimsData.data?.count ?? 0}
+            pageSize={10}
+            currentPage={scrimsPage}
+            onPage={(page) => {
+              handlePage(page, "scrimsPage");
+            }}
+          />
+        }
+        columns={[
+          {
+            header: "Score",
+            key: "score",
+            value: (match) => {
+              return (
+                <MatchScore match={match} userTeamId={userTeamData.data?.id} />
+              );
+            },
+          },
+          {
+            header: "Rating (Δ)",
+            key: "rating",
+            value: (match) => {
+              const userTeam = match.participants?.find(
+                (p) => p.team === userTeamData.data?.id,
+              );
+              if (userTeam === undefined) return;
+              return (
+                <RatingDelta
+                  includeTeamName={false}
+                  participant={userTeam}
+                  ranked={match.is_ranked}
+                />
+              );
+            },
+          },
+          {
+            header: "Opponent (Δ)",
+            key: "opponent",
+            value: (match) => {
+              const opponent = match.participants?.find(
+                (p) =>
+                  userTeamData.isSuccess && p.team !== userTeamData.data.id,
+              );
+              if (opponent === undefined) return;
+              return (
+                <RatingDelta participant={opponent} ranked={match.is_ranked} />
+              );
+            },
+          },
+          {
+            header: "Ranked",
+            key: "ranked",
+            value: (match) => (match.is_ranked ? "Ranked" : "Unranked"),
+          },
+          {
+            header: "Status",
+            key: "status",
+            value: (match) => <MatchStatus match={match} />,
+          },
+          {
+            header: "Replay",
+            key: "replay",
+            value: (match) =>
+              !episodeData.isSuccess || isNil(match.replay_url) ? (
+                <></>
+              ) : (
+                <NavLink
+                  className="text-cyan-600 hover:underline"
+                  to={`https://releases.battlecode.org/client/${
+                    episodeData.data.artifact_name ?? ""
+                  }/${
+                    episodeData.data.release_version_public ?? ""
+                  }/visualizer.html?${match.replay_url}`}
+                >
+                  Replay!
+                </NavLink>
+              ),
           },
-        },
-        {
-          header: "Opponent (Δ)",
-          key: "opponent",
-          value: (match) => {
-            const opponent = match.participants?.find(
-              (p) => currentTeam !== undefined && p.team !== currentTeam.id,
-            );
-            if (opponent === undefined) return;
-            return (
-              <RatingDelta participant={opponent} ranked={match.is_ranked} />
-            );
+          {
+            header: "Created",
+            key: "created",
+            value: (match) => dateTime(match.created).localFullString,
           },
-        },
-        {
-          header: "Ranked",
-          key: "ranked",
-          value: (match) => (match.is_ranked ? "Ranked" : "Unranked"),
-        },
-        {
-          header: "Status",
-          key: "status",
-          value: (match) => <MatchStatus match={match} />,
-        },
-        {
-          header: "Replay",
-          key: "replay",
-          value: (match) =>
-            isNil(episode) || isNil(match.replay_url) ? (
-              <></>
-            ) : (
-              <NavLink
-                className="text-cyan-600 hover:underline"
-                to={`https://releases.battlecode.org/client/${
-                  episode.artifact_name ?? ""
-                }/${episode.release_version_public ?? ""}/visualizer.html?${
-                  match.replay_url
-                }`}
-              >
-                Replay!
-              </NavLink>
-            ),
-        },
-        {
-          header: "Created",
-          key: "created",
-          value: (match) => dateTime(match.created).localFullString,
-        },
-      ]}
-    />
+        ]}
+      />
+    </Fragment>
   );
 };
 
diff --git a/frontend2/src/components/tables/scrimmaging/TeamsTable.tsx b/frontend2/src/components/tables/scrimmaging/TeamsTable.tsx
index 00ffaad8e..83d7c2728 100644
--- a/frontend2/src/components/tables/scrimmaging/TeamsTable.tsx
+++ b/frontend2/src/components/tables/scrimmaging/TeamsTable.tsx
@@ -1,15 +1,21 @@
-import React from "react";
+import React, { Fragment, useCallback, useState } from "react";
 import { NavLink } from "react-router-dom";
-import type { PaginatedTeamPublicList } from "../../../api/_autogen";
-import type { Maybe } from "../../../utils/utilTypes";
-import Table from "../../Table";
-import TableBottom from "../../TableBottom";
+import Table from "components/Table";
+import TableBottom from "components/TableBottom";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useSearchTeams, useUserTeam } from "api/team/useTeam";
+import Input from "components/elements/Input";
+import Button from "components/elements/Button";
+import { type TeamPublic } from "api/_autogen";
+import RequestScrimModal from "./RequestScrimModal";
+import { useEpisodeInfo, useEpisodeMaps } from "api/episode/useEpisode";
 
 interface TeamsTableProps {
-  data: Maybe<PaginatedTeamPublicList>;
-  page: number;
-  loading: boolean;
-  handlePage: (page: number) => void;
+  search: string;
+  teamsPage: number;
+  handlePage: (page: number, key: "teamsPage") => void;
+  handleSearch: (search: string) => void;
 }
 
 function trimString(str: string, maxLength: number): string {
@@ -20,86 +26,177 @@ function trimString(str: string, maxLength: number): string {
 }
 
 const TeamsTable: React.FC<TeamsTableProps> = ({
-  data,
-  page,
-  loading,
+  search,
+  teamsPage,
   handlePage,
+  handleSearch,
 }) => {
+  const { episodeId } = useEpisodeId();
+  const episodeInfo = useEpisodeInfo({ id: episodeId });
+  const queryClient = useQueryClient();
+  const userTeam = useUserTeam({ episodeId });
+  const teamsData = useSearchTeams(
+    { episodeId, search, page: teamsPage },
+    queryClient,
+  );
+  const maps = useEpisodeMaps({ episodeId });
+
+  const [searchText, setSearchText] = useState<string>(search);
+  const [teamToRequest, setTeamToRequest] = useState<TeamPublic | null>(null);
+
+  const canRequestScrimmage: (team: TeamPublic) => boolean = useCallback(
+    (team) => {
+      // TODO: Hack -> has_active_submission should be a boolean! Some sort of bug in API generation.
+      const hasActiveSubmission =
+        typeof team.has_active_submission === "boolean"
+          ? team.has_active_submission
+          : team.has_active_submission === "true";
+      return (
+        userTeam.isSuccess &&
+        episodeInfo.isSuccess &&
+        !episodeInfo.data.frozen &&
+        userTeam.data.id !== team.id &&
+        hasActiveSubmission &&
+        team.members.length > 0
+      );
+    },
+    [userTeam],
+  );
+
   return (
-    <Table
-      data={data?.results ?? []}
-      loading={loading}
-      keyFromValue={(team) => team.id.toString()}
-      bottomElement={
-        <TableBottom
-          totalCount={data?.count ?? 0}
-          pageSize={10}
-          currentPage={page}
-          onPage={handlePage}
+    <Fragment>
+      <h1 className="text-2xl font-bold leading-7 text-gray-900">
+        Find a team to scrimmage!
+      </h1>
+      <div className="justify-left mb-5 flex h-10 w-4/5 flex-row items-center">
+        <Input
+          disabled={teamsData.isLoading}
+          placeholder="Search for a team..."
+          value={searchText}
+          onChange={(ev) => {
+            setSearchText(ev.target.value);
+          }}
+          onKeyDown={(ev) => {
+            if (
+              (ev.key === "Enter" || ev.key === "NumpadEnter") &&
+              search !== searchText &&
+              !teamsData.isLoading
+            ) {
+              handleSearch(searchText);
+            }
+          }}
+        />
+        <div className="w-10" />
+        <Button
+          disabled={teamsData.isLoading}
+          label="Search!"
+          variant="dark"
+          onClick={() => {
+            if (search !== searchText && !teamsData.isLoading) {
+              handleSearch(searchText);
+            }
+          }}
+        />
+      </div>
+      <Table
+        data={teamsData.data?.results ?? []}
+        loading={teamsData.isLoading}
+        keyFromValue={(team) => team.id.toString()}
+        bottomElement={
+          <TableBottom
+            totalCount={teamsData.data?.count ?? 0}
+            pageSize={10}
+            currentPage={teamsPage}
+            onPage={(page) => {
+              handlePage(page, "teamsPage");
+            }}
+          />
+        }
+        columns={[
+          {
+            header: "Rating",
+            key: "rating",
+            value: (team) => Math.round(team.profile?.rating ?? 0),
+          },
+          {
+            header: "Team",
+            key: "team",
+            value: (team) => (
+              <NavLink to={`/team/${team.id}`} className="hover:underline">
+                {trimString(team.name, 13)}
+              </NavLink>
+            ),
+          },
+          {
+            header: "Members",
+            key: "members",
+            value: (team) =>
+              team.members.map((member, idx) => (
+                <>
+                  <NavLink
+                    key={idx}
+                    to={`/user/${member.id}`}
+                    className="hover:underline"
+                  >
+                    {trimString(member.username, 13)}
+                  </NavLink>
+                  {idx !== team.members.length - 1 ? ", " : ""}
+                </>
+              )),
+          },
+          {
+            header: "Quote",
+            key: "quote",
+            value: (team) => team.profile?.quote ?? "",
+          },
+          {
+            header: "Auto-Accept Ranked",
+            key: "auto_accept_ranked",
+            value: (team) =>
+              team.profile?.auto_accept_ranked !== undefined &&
+              team.profile.auto_accept_ranked
+                ? "Yes"
+                : "No",
+          },
+          {
+            header: "Auto-Accept Unranked",
+            key: "auto_accept_unranked",
+            value: (team) =>
+              team.profile?.auto_accept_unranked !== undefined &&
+              team.profile?.auto_accept_unranked
+                ? "Yes"
+                : "No",
+          },
+          {
+            header: "",
+            key: "request",
+            value: (team) =>
+              userTeam.isSuccess &&
+              team.id !== userTeam.data.id && (
+                <Button
+                  label="Request"
+                  variant="dark"
+                  loading={maps.isLoading && teamToRequest?.id === team.id}
+                  disabled={!canRequestScrimmage(team)}
+                  onClick={() => {
+                    setTeamToRequest(team);
+                  }}
+                />
+              ),
+          },
+        ]}
+      />
+      {teamToRequest !== null && maps.isSuccess && (
+        <RequestScrimModal
+          isOpen={teamToRequest !== null}
+          teamToRequest={teamToRequest}
+          maps={maps.data}
+          closeModal={() => {
+            setTeamToRequest(null);
+          }}
         />
-      }
-      columns={[
-        {
-          header: "Rating",
-          key: "rating",
-          value: (team) => Math.round(team.profile?.rating ?? 0),
-        },
-        {
-          header: "Team",
-          key: "team",
-          value: (team) => (
-            <NavLink to={`/team/${team.id}`} className="hover:underline">
-              {trimString(team.name, 13)}
-            </NavLink>
-          ),
-        },
-        {
-          header: "Members",
-          key: "members",
-          value: (team) =>
-            team.members.map((member, idx) => (
-              <>
-                <NavLink
-                  key={idx}
-                  to={`/user/${member.id}`}
-                  className="hover:underline"
-                >
-                  {trimString(member.username, 13)}
-                </NavLink>
-                {idx !== team.members.length - 1 ? ", " : ""}
-              </>
-            )),
-        },
-        {
-          header: "Quote",
-          key: "quote",
-          value: (team) => team.profile?.quote ?? "",
-        },
-        {
-          header: "Auto-Accept Ranked",
-          key: "auto_accept_ranked",
-          value: (team) =>
-            team.profile?.auto_accept_ranked !== undefined &&
-            team.profile.auto_accept_ranked
-              ? "Yes"
-              : "No",
-        },
-        {
-          header: "Auto-Accept Unranked",
-          key: "auto_accept_unranked",
-          value: (team) =>
-            team.profile?.auto_accept_unranked !== undefined &&
-            team.profile?.auto_accept_unranked
-              ? "Yes"
-              : "No",
-        },
-        {
-          header: "",
-          key: "request",
-          value: (team) => "REQUEST",
-        },
-      ]}
-    />
+      )}
+    </Fragment>
   );
 };
 
diff --git a/frontend2/src/components/tables/scrimmaging/TournamentMatchesTable.tsx b/frontend2/src/components/tables/scrimmaging/TournamentMatchesTable.tsx
index 38671cc8a..50f17e2bd 100644
--- a/frontend2/src/components/tables/scrimmaging/TournamentMatchesTable.tsx
+++ b/frontend2/src/components/tables/scrimmaging/TournamentMatchesTable.tsx
@@ -1,105 +1,124 @@
-import React from "react";
-import type { PaginatedMatchList } from "../../../api/_autogen";
-import type { Maybe } from "../../../utils/utilTypes";
-import Table from "../../Table";
-import TableBottom from "../../TableBottom";
-import MatchScore from "../../compete/MatchScore";
-import RatingDelta from "../../compete/RatingDelta";
-import MatchStatus from "../../compete/MatchStatus";
+import React, { Fragment } from "react";
+import Table from "components/Table";
+import TableBottom from "components/TableBottom";
+import MatchScore from "components/compete/MatchScore";
+import MatchStatus from "components/compete/MatchStatus";
 import { NavLink } from "react-router-dom";
-import { dateTime } from "../../../utils/dateTime";
-import { useEpisodeId } from "../../../contexts/EpisodeContext";
-import { useEpisodeInfo } from "../../../api/episode/useEpisode";
-import { useUserTeam } from "../../../api/team/useTeam";
+import { dateTime } from "utils/dateTime";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useEpisodeInfo } from "api/episode/useEpisode";
+import { useUserTeam } from "api/team/useTeam";
 import { isNil } from "lodash";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTournamentMatchList } from "api/compete/useCompete";
 
 interface TournamentMatchesTableProps {
-  data: Maybe<PaginatedMatchList>;
-  page: number;
-  loading: boolean;
-  handlePage: (page: number) => void;
+  tourneyPage: number;
+  handlePage: (page: number, key: "tourneyPage") => void;
 }
 
 const TournamentMatchesTable: React.FC<TournamentMatchesTableProps> = ({
-  data,
-  page,
-  loading,
+  tourneyPage,
   handlePage,
 }) => {
   const { episodeId } = useEpisodeId();
-  const { data: episode } = useEpisodeInfo({ id: episodeId });
-  const { data: currentTeam } = useUserTeam({ episodeId });
+  const queryClient = useQueryClient();
+  const episodeData = useEpisodeInfo({ id: episodeId });
+  const userTeamData = useUserTeam({ episodeId });
+  const matchesData = useTournamentMatchList(
+    {
+      episodeId,
+      teamId: userTeamData.data?.id,
+      page: tourneyPage,
+    },
+    queryClient,
+  );
 
   return (
-    <Table
-      data={data?.results ?? []}
-      loading={loading}
-      keyFromValue={(match) => match.id.toString()}
-      bottomElement={
-        <TableBottom
-          totalCount={data?.count ?? 0}
-          pageSize={10}
-          currentPage={page}
-          onPage={handlePage}
-        />
-      }
-      columns={[
-        {
-          header: "Score",
-          key: "score",
-          value: (match) => {
-            return <MatchScore match={match} userTeamId={currentTeam?.id} />;
+    <Fragment>
+      <h1 className="text-2xl font-bold leading-7 text-gray-900">
+        Recent Tournament Matches
+      </h1>
+      <Table
+        data={matchesData.data?.results ?? []}
+        loading={matchesData.isLoading}
+        keyFromValue={(match) => match.id.toString()}
+        bottomElement={
+          <TableBottom
+            totalCount={matchesData.data?.count ?? 0}
+            pageSize={10}
+            currentPage={tourneyPage}
+            onPage={(page) => {
+              handlePage(page, "tourneyPage");
+            }}
+          />
+        }
+        columns={[
+          {
+            header: "Score",
+            key: "score",
+            value: (match) => {
+              return (
+                <MatchScore match={match} userTeamId={userTeamData.data?.id} />
+              );
+            },
+          },
+          {
+            header: "Opponent",
+            key: "opponent",
+            value: (match) => {
+              const opponent = match.participants?.find(
+                (p) =>
+                  userTeamData.isSuccess && p.team !== userTeamData.data.id,
+              );
+              if (opponent === undefined) return;
+              return (
+                <NavLink
+                  className="hover:underline"
+                  to={`/${episodeId}/team/${opponent.team}`}
+                >
+                  {opponent.teamname}
+                </NavLink>
+              );
+            },
+          },
+          {
+            header: "Ranked",
+            key: "ranked",
+            value: (match) => (match.is_ranked ? "Ranked" : "Unranked"),
+          },
+          {
+            header: "Status",
+            key: "status",
+            value: (match) => <MatchStatus match={match} />,
+          },
+          {
+            header: "Replay",
+            key: "replay",
+            value: (match) =>
+              !episodeData.isSuccess || isNil(match.replay_url) ? (
+                <></>
+              ) : (
+                <NavLink
+                  className="text-cyan-600 hover:underline"
+                  to={`https://releases.battlecode.org/client/${
+                    episodeData.data.artifact_name ?? ""
+                  }/${
+                    episodeData.data.release_version_public ?? ""
+                  }/visualizer.html?${match.replay_url}`}
+                >
+                  Replay!
+                </NavLink>
+              ),
           },
-        },
-        {
-          header: "Opponent (Δ)",
-          key: "opponent",
-          value: (match) => {
-            const opponent = match.participants?.find(
-              (p) => currentTeam !== undefined && p.team !== currentTeam.id,
-            );
-            if (opponent === undefined) return;
-            return (
-              <RatingDelta participant={opponent} ranked={match.is_ranked} />
-            );
+          {
+            header: "Created",
+            key: "created",
+            value: (match) => dateTime(match.created).localFullString,
           },
-        },
-        {
-          header: "Ranked",
-          key: "ranked",
-          value: (match) => (match.is_ranked ? "Ranked" : "Unranked"),
-        },
-        {
-          header: "Status",
-          key: "status",
-          value: (match) => <MatchStatus match={match} />,
-        },
-        {
-          header: "Replay",
-          key: "replay",
-          value: (match) =>
-            isNil(episode) || isNil(match.replay_url) ? (
-              <></>
-            ) : (
-              <NavLink
-                className="text-cyan-600 hover:underline"
-                to={`https://releases.battlecode.org/client/${
-                  episode.artifact_name ?? ""
-                }/${episode.release_version_public ?? ""}/visualizer.html?${
-                  match.replay_url
-                }`}
-              >
-                Replay!
-              </NavLink>
-            ),
-        },
-        {
-          header: "Created",
-          key: "created",
-          value: (match) => dateTime(match.created).localFullString,
-        },
-      ]}
-    />
+        ]}
+      />
+    </Fragment>
   );
 };
 
diff --git a/frontend2/src/utils/utilTypes.ts b/frontend2/src/utils/utilTypes.ts
index 8d34e166b..5305b718f 100644
--- a/frontend2/src/utils/utilTypes.ts
+++ b/frontend2/src/utils/utilTypes.ts
@@ -1,3 +1,5 @@
+import { PlayerOrderEnum } from "api/_autogen";
+
 export type Maybe<T> = T | undefined;
 
 /**
@@ -8,3 +10,21 @@ export type Maybe<T> = T | undefined;
 export function isPresent<T>(val: T | undefined | null): val is T {
   return val !== undefined && val !== null;
 }
+
+/**
+ * Helper function to stringify a PlayerOrderEnum.
+ * @param order PlayerOrderEnum to stringify.
+ * @returns Description of the player order.
+ */
+export const stringifyPlayerOrder = (order: PlayerOrderEnum): string => {
+  switch (order) {
+    case PlayerOrderEnum.QuestionMark:
+      return "Alternating";
+    case PlayerOrderEnum.Plus:
+      return "Requestor First";
+    case PlayerOrderEnum.Minus:
+      return "Requestor Last";
+    default:
+      return "???";
+  }
+};
diff --git a/frontend2/src/views/MyTeam.tsx b/frontend2/src/views/MyTeam.tsx
index 31e75ed21..148248308 100644
--- a/frontend2/src/views/MyTeam.tsx
+++ b/frontend2/src/views/MyTeam.tsx
@@ -1,18 +1,18 @@
 import React, { type EventHandler, useMemo, useState } from "react";
-import { PageTitle } from "../components/elements/BattlecodeStyle";
-import SectionCard from "../components/SectionCard";
-import Input from "../components/elements/Input";
-import TextArea from "../components/elements/TextArea";
-import Button from "../components/elements/Button";
+import { PageTitle } from "components/elements/BattlecodeStyle";
+import SectionCard from "components/SectionCard";
+import Input from "components/elements/Input";
+import TextArea from "components/elements/TextArea";
+import Button from "components/elements/Button";
 import MemberList from "../components/team/MemberList";
-import Modal from "../components/Modal";
-import EligibilitySettings from "../components/team/EligibilitySettings";
-import ScrimmageSettings from "../components/team/ScrimmageSettings";
-import { useEpisodeId } from "../contexts/EpisodeContext";
-import { useLeaveTeam, useUpdateTeam, useUserTeam } from "../api/team/useTeam";
+import Modal from "components/Modal";
+import EligibilitySettings from "components/team/EligibilitySettings";
+import ScrimmageSettings from "components/team/ScrimmageSettings";
+import { useEpisodeId } from "contexts/EpisodeContext";
+import { useLeaveTeam, useUpdateTeam, useUserTeam } from "api/team/useTeam";
 import { useQueryClient } from "@tanstack/react-query";
 import JoinTeam from "./JoinTeam";
-import Loading from "../components/Loading";
+import Loading from "components/Loading";
 import { type SubmitHandler, useForm } from "react-hook-form";
 
 interface InfoFormInput {
diff --git a/frontend2/src/views/Scrimmaging.tsx b/frontend2/src/views/Scrimmaging.tsx
index 6a074be78..bd3d4b4f1 100644
--- a/frontend2/src/views/Scrimmaging.tsx
+++ b/frontend2/src/views/Scrimmaging.tsx
@@ -1,23 +1,12 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import Input from "../components/elements/Input";
-import Button from "../components/elements/Button";
-import { useEpisodeId } from "../contexts/EpisodeContext";
-import Collapse from "../components/elements/Collapse";
-import InboxTable from "../components/tables/scrimmaging/InboxTable";
-import OutboxTable from "../components/tables/scrimmaging/OutboxTable";
-import { getParamEntries, parsePageParam } from "../utils/searchParamHelpers";
-import TeamsTable from "../components/tables/scrimmaging/TeamsTable";
-import TournamentMatchesTable from "../components/tables/scrimmaging/TournamentMatchesTable";
-import ScrimHistoryTable from "../components/tables/scrimmaging/ScrimHistoryTable";
-import {
-  useScrimmageInboxList,
-  useScrimmageOutboxList,
-  useTournamentMatchList,
-  useUserScrimmageList,
-} from "../api/compete/useCompete";
-import { useSearchTeams, useUserTeam } from "../api/team/useTeam";
-import { useQueryClient } from "@tanstack/react-query";
+import InboxTable from "components/tables/scrimmaging/InboxTable";
+import OutboxTable from "components/tables/scrimmaging/OutboxTable";
+import { getParamEntries, parsePageParam } from "utils/searchParamHelpers";
+import TeamsTable from "components/tables/scrimmaging/TeamsTable";
+import ScrimHistoryTable from "components/tables/scrimmaging/ScrimHistoryTable";
+import { Tab } from "@headlessui/react";
+import TournamentMatchesTable from "components/tables/scrimmaging/TournamentMatchesTable";
 
 interface QueryParams {
   inboxPage: number;
@@ -29,8 +18,19 @@ interface QueryParams {
 }
 
 const Scrimmaging: React.FC = () => {
-  const { episodeId } = useEpisodeId();
-  const queryClient = useQueryClient();
+  function classNames(...classes: string[]): string {
+    return classes.filter(Boolean).join(" ");
+  }
+
+  const tabClassName = ({ selected }: { selected: boolean }): string => {
+    return classNames(
+      "w-full rounded-lg py-2.5 text-sm font-medium leading-5",
+      "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+      selected
+        ? "bg-white text-cyan-700 shadow"
+        : "text-cyan-100 hover:bg-white/[0.12] hover:text-white",
+    );
+  };
 
   const [searchParams, setSearchParams] = useSearchParams();
   const queryParams: QueryParams = useMemo(() => {
@@ -44,56 +44,12 @@ const Scrimmaging: React.FC = () => {
     };
   }, [searchParams]);
 
-  const teamData = useUserTeam({ episodeId });
-  const { data: inboxData, isLoading: inboxLoading } = useScrimmageInboxList(
-    {
-      episodeId,
-      page: queryParams.inboxPage,
-    },
-    queryClient,
-  );
-  const { data: outboxData, isLoading: outboxLoading } = useScrimmageOutboxList(
-    {
-      episodeId,
-      page: queryParams.outboxPage,
-    },
-    queryClient,
-  );
-  const { data: teamsData, isLoading: teamsLoading } = useSearchTeams(
-    {
-      episodeId,
-      search: queryParams.search,
-      page: queryParams.teamsPage,
-    },
-    queryClient,
-  );
-  const { data: scrimsData, isLoading: scrimsLoading } = useUserScrimmageList(
-    {
-      episodeId,
-      page: queryParams.scrimsPage,
-    },
-    queryClient,
-  );
-  const { data: tourneyData, isLoading: tourneyLoading } =
-    useTournamentMatchList(
-      {
-        episodeId,
-        teamId: teamData.data?.id,
-        page: queryParams.tourneyPage,
-      },
-      queryClient,
-    );
-
-  const [searchText, setSearchText] = useState<string>(queryParams.search);
-
-  function handleSearch(): void {
-    if (!teamsLoading && searchText !== queryParams.search) {
-      setSearchParams((prev) => ({
-        ...getParamEntries(prev),
-        teamsPage: "1",
-        search: searchText,
-      }));
-    }
+  function handleSearch(search: string): void {
+    setSearchParams((prev) => ({
+      ...getParamEntries(prev),
+      teamsPage: "1",
+      search,
+    }));
   }
 
   /**
@@ -112,84 +68,78 @@ const Scrimmaging: React.FC = () => {
 
   return (
     <div className="flex h-full w-full flex-col overflow-auto p-6">
-      <h1 className="mb-5 text-3xl font-bold leading-7 text-gray-900">
+      <h1 className="mb-2 text-3xl font-bold leading-7 text-gray-900">
         Scrimmaging
       </h1>
 
-      <Collapse title="Inbox">
-        <InboxTable data={inboxData} loading={inboxLoading} />
-      </Collapse>
-      <div className="mb-8" />
-      <Collapse title="Outbox">
-        <OutboxTable data={outboxData} loading={outboxLoading} />
-      </Collapse>
-      <div className="mb-8" />
-
-      <h1 className="text-2xl font-bold leading-7 text-gray-900">
-        Find a team to scrimmage!
-      </h1>
-      <div className="justify-left mb-5 flex h-10 w-4/5 flex-row items-center">
-        <Input
-          disabled={teamsLoading}
-          placeholder="Search for a team..."
-          value={searchText}
-          onChange={(ev) => {
-            setSearchText(ev.target.value);
-          }}
-          onKeyDown={(ev) => {
-            if (ev.key === "Enter" || ev.key === "NumpadEnter") {
-              handleSearch();
-            }
-          }}
-        />
-        <div className="w-10" />
-        <Button
-          disabled={teamsLoading}
-          label="Search!"
-          variant="dark"
-          onClick={() => {
-            handleSearch();
-          }}
-        />
-      </div>
-      <div className="mb-8">
-        <TeamsTable
-          data={teamsData}
-          loading={teamsLoading}
-          page={queryParams.teamsPage}
-          handlePage={(page) => {
-            handlePage(page, "teamsPage");
-          }}
-        />
-      </div>
-
-      <h1 className="mb-2 text-2xl font-bold leading-7 text-gray-900">
-        Scrimmage History
-      </h1>
-      <div className="mb-8">
-        <ScrimHistoryTable
-          data={scrimsData}
-          loading={scrimsLoading}
-          page={queryParams.scrimsPage}
-          handlePage={(page) => {
-            handlePage(page, "scrimsPage");
-          }}
-        />
-      </div>
-
-      <h1 className="mb-2 text-2xl font-bold leading-7 text-gray-900">
-        Recent Tournament Matches
-      </h1>
-      <div className="mb-8">
-        <TournamentMatchesTable
-          data={tourneyData}
-          loading={!teamData.isSuccess || tourneyLoading}
-          page={queryParams.tourneyPage}
-          handlePage={(page: number) => {
-            handlePage(page, "tourneyPage");
-          }}
-        />
-      </div>
+      <Tab.Group>
+        <Tab.List className="flex space-x-1 rounded-xl bg-cyan-600 p-1">
+          <Tab className={tabClassName}>Inbox</Tab>
+          <Tab className={tabClassName}>Outbox</Tab>
+          <Tab className={tabClassName}>Find Teams</Tab>
+          <Tab className={tabClassName}>Scrim History</Tab>
+          <Tab className={tabClassName}>Tournament Matches</Tab>
+        </Tab.List>
+        <Tab.Panels className="mt-2">
+          <Tab.Panel
+            className={classNames(
+              "rounded-xl bg-white p-3",
+              "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+            )}
+          >
+            <InboxTable
+              inboxPage={queryParams.inboxPage}
+              handlePage={handlePage}
+            />
+          </Tab.Panel>
+          <Tab.Panel
+            className={classNames(
+              "rounded-xl bg-white p-3",
+              "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+            )}
+          >
+            <OutboxTable
+              outboxPage={queryParams.outboxPage}
+              handlePage={handlePage}
+            />
+          </Tab.Panel>
+          <Tab.Panel
+            className={classNames(
+              "rounded-xl bg-white p-3",
+              "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+            )}
+          >
+            <TeamsTable
+              search={queryParams.search}
+              teamsPage={queryParams.teamsPage}
+              handleSearch={handleSearch}
+              handlePage={handlePage}
+            />
+          </Tab.Panel>
+          <Tab.Panel
+            className={classNames(
+              "rounded-xl bg-white p-3",
+              "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+            )}
+          >
+            <ScrimHistoryTable
+              scrimsPage={queryParams.scrimsPage}
+              handlePage={handlePage}
+            />
+          </Tab.Panel>
+          <Tab.Panel
+            className={classNames(
+              "rounded-xl bg-white p-3",
+              "ring-white/60 ring-offset-2 ring-offset-cyan-400 focus:outline-none focus:ring-2",
+            )}
+          >
+            <TournamentMatchesTable
+              tourneyPage={queryParams.tourneyPage}
+              handlePage={handlePage}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
     </div>
   );
 };
diff --git a/frontend2/tsconfig.json b/frontend2/tsconfig.json
index 9d379a3c4..545c6550c 100644
--- a/frontend2/tsconfig.json
+++ b/frontend2/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,