admin progress

src/app/routeTree.gen.ts

@@ -23,6 +23,7 @@ import { Route as AuthedTournamentsTournamentIdRouteImport } from './routes/_aut
 import { Route as AuthedTeamsTeamIdRouteImport } from './routes/_authed/teams.$teamId'
 import { Route as AuthedProfilePlayerIdRouteImport } from './routes/_authed/profile.$playerId'
 import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/preview'
+import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
 import { Route as AuthedAdminTournamentsIdRouteImport } from './routes/_authed/admin/tournaments/$id'
 import { ServerRoute as ApiTestServerRouteImport } from './routes/api/test'
 import { ServerRoute as ApiTournamentsUploadLogoServerRouteImport } from './routes/api/tournaments/upload-logo'
@@ -92,6 +93,12 @@ const AuthedAdminPreviewRoute = AuthedAdminPreviewRouteImport.update({
   path: '/preview',
   getParentRoute: () => AuthedAdminRoute,
 } as any)
+const AuthedAdminTournamentsIndexRoute =
+  AuthedAdminTournamentsIndexRouteImport.update({
+    id: '/tournaments/',
+    path: '/tournaments/',
+    getParentRoute: () => AuthedAdminRoute,
+  } as any)
 const AuthedAdminTournamentsIdRoute =
   AuthedAdminTournamentsIdRouteImport.update({
     id: '/tournaments/$id',
@@ -139,6 +146,7 @@ export interface FileRoutesByFullPath {
   '/admin/': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
@@ -152,6 +160,7 @@ export interface FileRoutesByTo {
   '/admin': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -168,6 +177,7 @@ export interface FileRoutesById {
   '/_authed/admin/': typeof AuthedAdminIndexRoute
   '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute
   '/_authed/admin/tournaments/$id': typeof AuthedAdminTournamentsIdRoute
+  '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -184,6 +194,7 @@ export interface FileRouteTypes {
     | '/admin/'
     | '/tournaments'
     | '/admin/tournaments/$id'
+    | '/admin/tournaments'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/login'
@@ -197,6 +208,7 @@ export interface FileRouteTypes {
     | '/admin'
     | '/tournaments'
     | '/admin/tournaments/$id'
+    | '/admin/tournaments'
   id:
     | '__root__'
     | '/_authed'
@@ -212,6 +224,7 @@ export interface FileRouteTypes {
     | '/_authed/admin/'
     | '/_authed/tournaments/'
     | '/_authed/admin/tournaments/$id'
+    | '/_authed/admin/tournaments/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -359,6 +372,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminPreviewRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/admin/tournaments/': {
+      id: '/_authed/admin/tournaments/'
+      path: '/tournaments'
+      fullPath: '/admin/tournaments'
+      preLoaderRoute: typeof AuthedAdminTournamentsIndexRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
     '/_authed/admin/tournaments/$id': {
       id: '/_authed/admin/tournaments/$id'
       path: '/tournaments/$id'
@@ -412,12 +432,14 @@ interface AuthedAdminRouteChildren {
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
   AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute
   AuthedAdminTournamentsIdRoute: typeof AuthedAdminTournamentsIdRoute
+  AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute
 }
 
 const AuthedAdminRouteChildren: AuthedAdminRouteChildren = {
   AuthedAdminPreviewRoute: AuthedAdminPreviewRoute,
   AuthedAdminIndexRoute: AuthedAdminIndexRoute,
   AuthedAdminTournamentsIdRoute: AuthedAdminTournamentsIdRoute,
+  AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute,
 }
 
 const AuthedAdminRouteWithChildren = AuthedAdminRoute._addFileChildren(

src/app/routes/_authed/admin/tournaments/index.tsx

@@ -0,0 +1,27 @@
+import Page from "@/components/page";
+import ManageTournaments from "@/features/admin/components/manage-tournaments";
+import { tournamentQueries } from "@/features/tournaments/queries";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authed/admin/tournaments/")({
+  beforeLoad: async ({ context }) => {
+    const { queryClient } = context;
+    await queryClient.ensureQueryData(tournamentQueries.list());
+  },
+  loader: () => ({
+    header: {
+      withBackButton: true,
+      title: "Manage Tournaments",
+    },
+    refresh: {
+      toRefresh: tournamentQueries.list().queryKey,
+    },
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <Page noPadding>
+    <ManageTournaments />
+  </Page>
+}

src/components/list-button.tsx

@@ -0,0 +1,30 @@
+import { Divider, Group, Text, UnstyledButton } from "@mantine/core";
+import { CaretRightIcon, Icon } from "@phosphor-icons/react";
+
+interface ListButtonProps {
+  label: string;
+  Icon: Icon;
+  handleClick: () => void;
+}
+
+const ListButton = ({ label, handleClick, Icon }: ListButtonProps) => {
+  return (
+    <>
+      <UnstyledButton
+        w='100%'
+        p='md'
+        component={'button'}
+        onClick={handleClick}
+      >
+        <Group>
+          <Icon weight='bold' size={20} />
+          <Text fw={500} size='md'>{label}</Text>
+          <CaretRightIcon style={{ marginLeft: 'auto' }} size={20} />
+        </Group>
+      </UnstyledButton>
+      <Divider />
+    </>
+  )
+}
+
+export default ListButton;

src/components/sheet/slide-panel/slide-panel-field.tsx

@@ -68,7 +68,7 @@ const SlidePanelField = ({
         style={{
           width: '100%',
           border: error ? '1px solid var(--mantine-color-error)' : '1px solid var(--mantine-color-dimmed)',
-          borderRadius: 'var(--mantine-radius-lg)',
+          borderRadius: 'var(--mantine-radius-md)',
           backgroundColor: 'var(--mantine-color-body)',
           textAlign: 'left',
         }}

src/features/admin/components/admin-page.tsx

@@ -1,7 +1,8 @@
 import { Title, List, Divider } from "@mantine/core";
 import ListLink from "@/components/list-link";
 import Page from "@/components/page";
-import { TrophyIcon } from "@phosphor-icons/react";
+import { TrophyIcon, UsersFourIcon, UsersThreeIcon } from "@phosphor-icons/react";
+import ListButton from "@/components/list-button";
 
 const AdminPage = () => {
   return (

src/features/admin/components/manage-tournaments.tsx

@@ -0,0 +1,24 @@
+import { List } from "@mantine/core";
+import Page from "@/components/page";
+import { TrophyIcon, UsersThreeIcon } from "@phosphor-icons/react";
+import ListButton from "@/components/list-button";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { tournamentQueries } from "@/features/tournaments/queries";
+
+const ManageTournaments = () => {
+  const { data: tournaments } = useSuspenseQuery(tournamentQueries.list());
+  return (
+    <List>
+      <ListButton
+        label="Edit Enrolled Teams"
+        Icon={UsersThreeIcon}
+        handleClick={console.log}
+      />
+      {tournaments.map(t => (
+        <ListButton label={t.name} Icon={TrophyIcon} handleClick={console.log} />
+      ))}
+    </List>
+  );
+};
+
+export default ManageTournaments;