From c5007c0510637309344cfd7db693f37e217b374f Mon Sep 17 00:00:00 2001
From: Emiel Van Severen <github@vanseveren.dev>
Date: Sat, 2 Nov 2024 22:17:36 +0100
Subject: [PATCH 1/2] Feat: gameservers table view

---
 .../src/components/Navbar/GameServerNav.tsx   |   4 +-
 packages/web-main/src/components/Player.tsx   |  24 +-
 .../components/cards/GameServerCard/index.tsx | 136 +--------
 packages/web-main/src/queries/gameserver.tsx  |   6 +-
 .../web-main/src/routes/_auth/_global.tsx     |   4 +-
 .../-gameservers/GameServersCardView.tsx      |  77 +++++
 .../-gameservers/GameServersTableView.tsx     | 123 ++++++++
 .../src/routes/_auth/_global/dashboard.tsx    |   2 -
 .../src/routes/_auth/_global/gameservers.tsx  | 283 +++++++++++++-----
 .../player.$playerId/-PlayerRolesTable.tsx    |   2 +-
 .../src/routes/_auth/_global/users.tsx        |  12 +-
 .../-components/shop/ShopView.tsx             |   3 +-
 12 files changed, 439 insertions(+), 237 deletions(-)
 create mode 100644 packages/web-main/src/routes/_auth/_global/-gameservers/GameServersCardView.tsx
 create mode 100644 packages/web-main/src/routes/_auth/_global/-gameservers/GameServersTableView.tsx

diff --git a/packages/web-main/src/components/Navbar/GameServerNav.tsx b/packages/web-main/src/components/Navbar/GameServerNav.tsx
index 3f4991a618..53609830cb 100644
--- a/packages/web-main/src/components/Navbar/GameServerNav.tsx
+++ b/packages/web-main/src/components/Navbar/GameServerNav.tsx
@@ -75,10 +75,10 @@ export const GameServerNav: FC = () => {
 
   return (
     <Nav data-testid="server-nav">
-      {gameServerId && gameServerId !== '' && gameservers && gameservers.length > 0 ? (
+      {gameServerId && gameServerId !== '' && gameservers && gameservers.data.length > 0 ? (
         <>
           <h3>Game Server</h3>
-          {gameservers.length > 1 && <GlobalGameServerSelect currentSelectedGameServerId={gameServerId} />}
+          {gameservers.data.length > 1 && <GlobalGameServerSelect currentSelectedGameServerId={gameServerId} />}
           {gameServerLinks.map((link) => renderLink(link))}
         </>
       ) : (
diff --git a/packages/web-main/src/components/Player.tsx b/packages/web-main/src/components/Player.tsx
index 3925cb9b08..659c382403 100644
--- a/packages/web-main/src/components/Player.tsx
+++ b/packages/web-main/src/components/Player.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Chip, getInitials } from '@takaro/lib-components';
+import { Avatar, Chip, getInitials, Tooltip } from '@takaro/lib-components';
 import { playerQueryOptions } from 'queries/player';
 import { FC } from 'react';
 import { Link } from '@tanstack/react-router';
@@ -46,13 +46,19 @@ export const Player: FC<PlayerProps> = ({ playerId, name, avatarUrl, showAvatar,
   );
 
   return (
-    <Link
-      to={'/player/$playerId'}
-      params={{ playerId }}
-      style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: 'fit-content' }}
-    >
-      {showAvatar && avatar}
-      <span>{name}</span>
-    </Link>
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Link
+          className="underline"
+          to={'/player/$playerId'}
+          params={{ playerId }}
+          style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: 'fit-content' }}
+        >
+          {showAvatar && avatar}
+          <span>{name}</span>
+        </Link>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Open player profile</Tooltip.Content>
+    </Tooltip>
   );
 };
diff --git a/packages/web-main/src/components/cards/GameServerCard/index.tsx b/packages/web-main/src/components/cards/GameServerCard/index.tsx
index 204a61d4f5..3cd9693e60 100644
--- a/packages/web-main/src/components/cards/GameServerCard/index.tsx
+++ b/packages/web-main/src/components/cards/GameServerCard/index.tsx
@@ -1,35 +1,14 @@
-import { FC, MouseEvent, useEffect, useState } from 'react';
-import {
-  Button,
-  Chip,
-  Dialog,
-  Dropdown,
-  IconButton,
-  Tooltip,
-  Card,
-  Skeleton,
-  useTheme,
-  ValueConfirmationField,
-} from '@takaro/lib-components';
-import { EventOutputDTO, GameServerOutputDTO, PERMISSIONS } from '@takaro/apiclient';
+import { FC, useEffect } from 'react';
+import { Chip, Tooltip, Card, Skeleton } from '@takaro/lib-components';
+import { EventOutputDTO, GameServerOutputDTO } from '@takaro/apiclient';
 import { useNavigate } from '@tanstack/react-router';
-import {
-  AiOutlineMenu as MenuIcon,
-  AiOutlineDelete as DeleteIcon,
-  AiOutlineEdit as EditIcon,
-  AiOutlineLineChart as DashboardIcon,
-  AiOutlineCopy as CopyIcon,
-  AiOutlineFunction as ModulesIcon,
-  AiOutlineSetting as SettingsIcon,
-} from 'react-icons/ai';
 
 import { Header, TitleContainer, DetailsContainer } from './style';
-import { useGameServerRemove } from 'queries/gameserver';
-import { PermissionsGuard } from 'components/PermissionsGuard';
 import { InnerBody } from '../style';
 import { useSocket } from 'hooks/useSocket';
 import { playersOnGameServersQueryOptions } from 'queries/pog';
 import { useQuery } from '@tanstack/react-query';
+import { GameServerActions } from 'routes/_auth/_global/gameservers';
 
 const StatusChip: FC<{ reachable: boolean; enabled: boolean }> = ({ reachable, enabled }) => {
   if (!enabled) return <Chip label="disabled" color="warning" variant="outline" />;
@@ -38,11 +17,7 @@ const StatusChip: FC<{ reachable: boolean; enabled: boolean }> = ({ reachable, e
 };
 
 export const GameServerCard: FC<GameServerOutputDTO> = ({ id, name, type, reachable, enabled }) => {
-  const [openDeleteDialog, setOpenDeleteDialog] = useState<boolean>(false);
-  const [valid, setValid] = useState<boolean>(false);
   const navigate = useNavigate();
-  const theme = useTheme();
-  const { mutate, isPending: isDeleting } = useGameServerRemove();
   const { socket } = useSocket();
   const {
     data: onlinePogs,
@@ -68,28 +43,6 @@ export const GameServerCard: FC<GameServerOutputDTO> = ({ id, name, type, reacha
     };
   }, []);
 
-  const handleOnEditClick = (e: MouseEvent): void => {
-    e.stopPropagation();
-    navigate({ to: '/gameservers/update/$gameServerId', params: { gameServerId: id } });
-  };
-  const handleOnDeleteClick = (e: MouseEvent) => {
-    e.stopPropagation();
-    if (e.shiftKey) {
-      handleOnDelete();
-    } else {
-      setOpenDeleteDialog(true);
-    }
-  };
-
-  const handleOnDelete = () => {
-    mutate({ gameServerId: id });
-  };
-
-  const handleOnCopyClick = (e: MouseEvent) => {
-    e.stopPropagation();
-    navigator.clipboard.writeText(id);
-  };
-
   return (
     <>
       <Card
@@ -106,61 +59,7 @@ export const GameServerCard: FC<GameServerOutputDTO> = ({ id, name, type, reacha
           <InnerBody>
             <Header>
               <StatusChip reachable={reachable} enabled={enabled} />
-              <PermissionsGuard requiredPermissions={[[PERMISSIONS.ManageGameservers]]}>
-                <Dropdown>
-                  <Dropdown.Trigger asChild>
-                    <IconButton icon={<MenuIcon />} ariaLabel="Settings" />
-                  </Dropdown.Trigger>
-                  <Dropdown.Menu>
-                    <Dropdown.Menu.Group label="Actions">
-                      <Dropdown.Menu.Item icon={<CopyIcon />} onClick={handleOnCopyClick} label="Copy gameserverID" />
-                      <Dropdown.Menu.Item icon={<EditIcon />} onClick={handleOnEditClick} label="Edit gameserver" />
-                      <Dropdown.Menu.Item
-                        icon={<DeleteIcon fill={theme.colors.error} />}
-                        onClick={handleOnDeleteClick}
-                        label="Delete gameserver"
-                      />
-                    </Dropdown.Menu.Group>
-                    <Dropdown.Menu.Group label="Navigation">
-                      <Dropdown.Menu.Item
-                        icon={<DashboardIcon />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate({
-                            to: '/gameserver/$gameServerId/dashboard/overview',
-                            params: { gameServerId: id },
-                          });
-                        }}
-                        label="go to dashboard"
-                      />
-                      <Dropdown.Menu.Item
-                        icon={<ModulesIcon />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate({ to: '/gameserver/$gameServerId/modules', params: { gameServerId: id } });
-                        }}
-                        label="go to modules"
-                      />
-                      <Dropdown.Menu.Item
-                        icon={<ModulesIcon />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate({ to: '/gameserver/$gameServerId/shop', params: { gameServerId: id } });
-                        }}
-                        label="go to shop"
-                      />
-                      <Dropdown.Menu.Item
-                        icon={<SettingsIcon />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate({ to: '/gameserver/$gameServerId/settings', params: { gameServerId: id } });
-                        }}
-                        label="go to settings"
-                      />
-                    </Dropdown.Menu.Group>
-                  </Dropdown.Menu>
-                </Dropdown>
-              </PermissionsGuard>
+              <GameServerActions gameServerName={name} gameServerId={id} />
             </Header>
             <DetailsContainer>
               <TitleContainer>
@@ -183,31 +82,6 @@ export const GameServerCard: FC<GameServerOutputDTO> = ({ id, name, type, reacha
           </InnerBody>
         </Card.Body>
       </Card>
-      <Dialog open={openDeleteDialog} onOpenChange={setOpenDeleteDialog}>
-        <Dialog.Content>
-          <Dialog.Heading>delete: gameserver</Dialog.Heading>
-          <Dialog.Body size="medium">
-            <p>
-              Are you sure you want to delete the gameserver? To confirm, type <strong>{name}</strong> in the field
-              below.
-            </p>
-            <ValueConfirmationField
-              value={name}
-              onValidChange={(v) => setValid(v)}
-              label="Game server name"
-              id="deleteGameServerConfirmation"
-            />
-            <Button
-              isLoading={isDeleting}
-              onClick={() => handleOnDelete()}
-              disabled={!valid}
-              fullWidth
-              text="Delete gameserver"
-              color="error"
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog>
     </>
   );
 };
diff --git a/packages/web-main/src/queries/gameserver.tsx b/packages/web-main/src/queries/gameserver.tsx
index 868f1988fe..4bd2a0bca7 100644
--- a/packages/web-main/src/queries/gameserver.tsx
+++ b/packages/web-main/src/queries/gameserver.tsx
@@ -48,9 +48,9 @@ const defaultGameServerErrorMessages: Partial<ErrorMessageMapping> = {
 };
 
 export const gameServersQueryOptions = (queryParams: GameServerSearchInputDTO = {}) => {
-  return queryOptions<GameServerOutputDTO[], AxiosError<GameServerOutputArrayDTOAPI>>({
-    queryKey: [...gameServerKeys.list(), ...queryParamsToArray(queryParams)],
-    queryFn: async () => (await getApiClient().gameserver.gameServerControllerSearch(queryParams)).data.data,
+  return queryOptions<GameServerOutputArrayDTOAPI, AxiosError<GameServerOutputArrayDTOAPI>>({
+    queryKey: [...gameServerKeys.list(), 'table', ...queryParamsToArray(queryParams)],
+    queryFn: async () => (await getApiClient().gameserver.gameServerControllerSearch(queryParams)).data,
   });
 };
 
diff --git a/packages/web-main/src/routes/_auth/_global.tsx b/packages/web-main/src/routes/_auth/_global.tsx
index 82c35ba02b..eab7804bcb 100644
--- a/packages/web-main/src/routes/_auth/_global.tsx
+++ b/packages/web-main/src/routes/_auth/_global.tsx
@@ -13,8 +13,8 @@ export const Route = createFileRoute('/_auth/_global')({
     const canManageGameServers = hasPermission(session, ['MANAGE_GAMESERVERS']);
     if (location.pathname == '/' && !canManageGameServers) {
       const gameservers = await context.queryClient.ensureQueryData(gameServersQueryOptions());
-      if (gameservers.length > 0) {
-        throw redirect({ to: '/gameserver/$gameServerId/shop', params: { gameServerId: gameservers[0].id } });
+      if (gameservers.data.length > 0) {
+        throw redirect({ to: '/gameserver/$gameServerId/shop', params: { gameServerId: gameservers.data[0].id } });
       }
     }
   },
diff --git a/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersCardView.tsx b/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersCardView.tsx
new file mode 100644
index 0000000000..9dcca87ddd
--- /dev/null
+++ b/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersCardView.tsx
@@ -0,0 +1,77 @@
+import { useNavigate, Outlet } from '@tanstack/react-router';
+import { gameServersInfiniteQueryOptions } from 'queries/gameserver';
+import { PermissionsGuard } from 'components/PermissionsGuard';
+import { AddCard, CardList, GameServerCard } from 'components/cards';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { Button, Empty, EmptyPage, InfiniteScroll, Skeleton } from '@takaro/lib-components';
+import { Fragment } from 'react';
+import { PERMISSIONS } from '@takaro/apiclient';
+
+export const GameServersCardView = () => {
+  const navigate = useNavigate();
+
+  const {
+    data: gameServers,
+    isFetching,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    ...gameServersInfiniteQueryOptions(),
+  });
+
+  if (isLoading) {
+    return (
+      <CardList>
+        <Skeleton variant="rectangular" height="100%" width="100%" />
+        <Skeleton variant="rectangular" height="100%" width="100%" />
+        <Skeleton variant="rectangular" height="100%" width="100%" />
+        <Skeleton variant="rectangular" height="100%" width="100%" />
+      </CardList>
+    );
+  }
+
+  if (!gameServers || gameServers.pages.length === 0) {
+    return (
+      <EmptyPage>
+        <Empty
+          header="Bro, what are you waiting on?"
+          description="Create a game server to really get started with Takaro."
+          actions={[
+            <Button
+              key="gameservers-create"
+              text="Create a game server"
+              onClick={() => navigate({ to: '/gameservers/create' })}
+            />,
+          ]}
+        />
+        <Outlet />
+      </EmptyPage>
+    );
+  }
+
+  return (
+    <Fragment>
+      <CardList>
+        {gameServers.pages
+          .flatMap((page) => page.data)
+          .map((gameServer) => (
+            <GameServerCard key={gameServer.id} {...gameServer} />
+          ))}
+        <PermissionsGuard requiredPermissions={[PERMISSIONS.ManageGameservers]}>
+          <AddCard title="Gameserver" onClick={() => navigate({ to: '/gameservers/create' })} />
+        </PermissionsGuard>
+        <PermissionsGuard requiredPermissions={[PERMISSIONS.ManageGameservers]}>
+          <AddCard title="Import from CSMM" onClick={() => navigate({ to: '/gameservers/create/import' })} />
+        </PermissionsGuard>
+      </CardList>
+      <InfiniteScroll
+        isFetching={isFetching}
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+      />
+    </Fragment>
+  );
+};
diff --git a/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersTableView.tsx b/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersTableView.tsx
new file mode 100644
index 0000000000..cabc675f7c
--- /dev/null
+++ b/packages/web-main/src/routes/_auth/_global/-gameservers/GameServersTableView.tsx
@@ -0,0 +1,123 @@
+import { GameServerOutputDTO, GameServerSearchInputDTOSortDirectionEnum } from '@takaro/apiclient';
+import { Chip, Table, useTableActions } from '@takaro/lib-components';
+import { useQuery } from '@tanstack/react-query';
+import { gameServersQueryOptions } from 'queries/gameserver';
+import { createColumnHelper } from '@tanstack/react-table';
+import { useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { GameServerActions } from '../gameservers';
+
+export const GameServersTableView = () => {
+  const [quickSearchInput, setQuickSearchInput] = useState<string>('');
+  const { pagination, columnFilters, sorting, columnSearch } = useTableActions<GameServerOutputDTO>({
+    pageSize: 25,
+  });
+
+  const { data, isLoading } = useQuery({
+    ...gameServersQueryOptions({
+      limit: pagination.paginationState.pageSize,
+      sortBy: sorting.sortingState[0]?.id,
+      sortDirection: sorting.sortingState[0]?.desc
+        ? GameServerSearchInputDTOSortDirectionEnum.Desc
+        : GameServerSearchInputDTOSortDirectionEnum.Asc,
+      filters: {
+        id: columnFilters.columnFiltersState.find((filter) => filter.id === 'id')?.value,
+        name: columnFilters.columnFiltersState.find((filter) => filter.id === 'name')?.value,
+      },
+      search: {
+        name: [
+          ...(columnFilters.columnFiltersState.find((filter) => filter.id === 'name')?.value ?? []),
+          quickSearchInput,
+        ],
+      },
+    }),
+  });
+
+  const columnHelper = createColumnHelper<GameServerOutputDTO>();
+  const columnDefs = [
+    columnHelper.accessor('id', {
+      id: 'id',
+      header: 'Game Server Id',
+      cell: (info) => info.getValue(),
+      meta: {
+        hideColumn: true,
+      },
+    }),
+    columnHelper.accessor('name', {
+      id: 'name',
+      header: 'Name',
+      cell: (info) => (
+        <Link
+          className="underline"
+          to="/gameserver/$gameServerId/dashboard/overview"
+          params={{ gameServerId: info.row.original.id }}
+        >
+          {info.getValue()}
+        </Link>
+      ),
+    }),
+    columnHelper.accessor('type', {
+      id: 'type',
+      header: 'Game Server Type',
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor('enabled', {
+      id: 'enabled',
+      header: 'Status',
+      cell: (info) =>
+        info.getValue() ? (
+          <Chip variant="outline" color="success" label="Enabled" />
+        ) : (
+          <Chip variant="outline" color="error" label="Disabled" />
+        ),
+    }),
+    columnHelper.accessor('reachable', {
+      id: 'reachable',
+      header: 'Reachable',
+      cell: (info) =>
+        info.getValue() ? (
+          <Chip variant="outline" color="success" label="Online" />
+        ) : (
+          <Chip variant="outline" color="success" label="Offline" />
+        ),
+    }),
+    columnHelper.display({
+      id: 'actions',
+      header: 'Actions',
+      cell: (info) => {
+        return <GameServerActions gameServerId={info.row.original.id} gameServerName={info.row.original.name} />;
+      },
+      enableColumnFilter: false,
+      enableHiding: false,
+      enablePinning: false,
+      enableGrouping: false,
+      enableResizing: false,
+      maxSize: 40,
+    }),
+  ];
+
+  const p =
+    !isLoading && data
+      ? {
+          paginationState: pagination.paginationState,
+          setPaginationState: pagination.setPaginationState,
+          pageOptions: pagination.getPageOptions(data),
+        }
+      : undefined;
+
+  return (
+    <Table
+      title="Game servers"
+      id="gameservers"
+      columns={columnDefs}
+      searchInputPlaceholder="Search gameserver by name..."
+      onSearchInputChanged={setQuickSearchInput}
+      isLoading={isLoading}
+      pagination={p}
+      columnSearch={columnSearch}
+      columnFiltering={columnFilters}
+      sorting={sorting}
+      data={data?.data as GameServerOutputDTO[]}
+    />
+  );
+};
diff --git a/packages/web-main/src/routes/_auth/_global/dashboard.tsx b/packages/web-main/src/routes/_auth/_global/dashboard.tsx
index c3403cc22b..af6db7a17a 100644
--- a/packages/web-main/src/routes/_auth/_global/dashboard.tsx
+++ b/packages/web-main/src/routes/_auth/_global/dashboard.tsx
@@ -49,8 +49,6 @@ function Component() {
     initialData: loaderData.countriesStats,
   });
 
-  console.log('countriesStatsData', countriesStatsData);
-
   const { control } = useForm({
     defaultValues: {
       period: 'last24Hours',
diff --git a/packages/web-main/src/routes/_auth/_global/gameservers.tsx b/packages/web-main/src/routes/_auth/_global/gameservers.tsx
index 4e726b568c..7598a74e0a 100644
--- a/packages/web-main/src/routes/_auth/_global/gameservers.tsx
+++ b/packages/web-main/src/routes/_auth/_global/gameservers.tsx
@@ -1,99 +1,216 @@
-import { createFileRoute, useNavigate, Outlet, redirect } from '@tanstack/react-router';
-import { gameServersInfiniteQueryOptions } from 'queries/gameserver';
-import { useDocumentTitle } from 'hooks/useDocumentTitle';
-import { hasPermission } from 'hooks/useHasPermission';
-import { PermissionsGuard } from 'components/PermissionsGuard';
-import { AddCard, CardList, GameServerCard } from 'components/cards';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router';
+import { useHasPermission } from 'hooks/useHasPermission';
 import { ErrorBoundary } from '@sentry/react';
-import { Button, Empty, EmptyPage, InfiniteScroll, Skeleton } from '@takaro/lib-components';
-import { Fragment } from 'react';
 import { PERMISSIONS } from '@takaro/apiclient';
-import { userMeQueryOptions } from 'queries/user';
+import {
+  Button,
+  Dialog,
+  Dropdown,
+  IconButton,
+  useLocalStorage,
+  useTheme,
+  ValueConfirmationField,
+} from '@takaro/lib-components';
+import { GameServersCardView } from './-gameservers/GameServersCardView';
+import { useDocumentTitle } from 'hooks/useDocumentTitle';
+import { GameServersTableView } from './-gameservers/GameServersTableView';
+import { useGameServerRemove } from 'queries/gameserver';
 
-export const Route = createFileRoute('/_auth/_global/gameservers')({
-  beforeLoad: async ({ context }) => {
-    const session = await context.queryClient.ensureQueryData(userMeQueryOptions());
-    if (!hasPermission(session, [PERMISSIONS.ManageGameservers])) {
-      throw redirect({ to: '/forbidden' });
-    }
-  },
-  loader: async ({ context }) => {
-    const opts = gameServersInfiniteQueryOptions();
-    return context.queryClient.getQueryData(opts.queryKey) ?? (await context.queryClient.fetchInfiniteQuery(opts));
-  },
+import {
+  AiOutlinePlus as CreateGameServerIcon,
+  AiOutlineImport as ImportGameServerIcon,
+  AiOutlineMenu as MenuIcon,
+  AiOutlineDelete as DeleteIcon,
+  AiOutlineEdit as EditIcon,
+  AiOutlineLineChart as DashboardIcon,
+  AiOutlineCopy as CopyIcon,
+  AiOutlineFunction as ModulesIcon,
+  AiOutlineSetting as SettingsIcon,
+} from 'react-icons/ai';
+import { FC, MouseEvent, useState } from 'react';
+import { PermissionsGuard } from 'components/PermissionsGuard';
+import { TableListToggleButton } from 'components/TableListToggleButton';
 
+type ViewType = 'list' | 'table';
+
+export const Route = createFileRoute('/_auth/_global/gameservers')({
   errorComponent: () => <ErrorBoundary />,
   component: Component,
-  pendingComponent: () => {
-    return (
-      <CardList>
-        <Skeleton variant="rectangular" height="100%" width="100%" />
-        <Skeleton variant="rectangular" height="100%" width="100%" />
-        <Skeleton variant="rectangular" height="100%" width="100%" />
-        <Skeleton variant="rectangular" height="100%" width="100%" />
-      </CardList>
-    );
-  },
 });
 
 function Component() {
   useDocumentTitle('Game Servers');
-  const loaderData = Route.useLoaderData();
-  const navigate = useNavigate();
+  const { setValue: setView, storedValue: view } = useLocalStorage<ViewType>('gameservers-view-select', 'list');
+  const navigate = Route.useNavigate();
+  const theme = useTheme();
+  const hasManageGameServersPermission = useHasPermission(['MANAGE_GAMESERVERS']);
 
-  const {
-    data: gameServers,
-    isFetching,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = useInfiniteQuery({
-    ...gameServersInfiniteQueryOptions(),
-    initialData: loaderData,
-  });
-
-  if (!gameServers || gameServers.pages.length === 0) {
-    return (
-      <EmptyPage>
-        <Empty
-          header="Bro, what are you waiting on?"
-          description="Create a game server to really get started with Takaro."
-          actions={[
-            <Button
-              key="gameservers-create"
-              text="Create a game server"
-              onClick={() => navigate({ to: '/gameservers/create' })}
-            />,
-          ]}
-        />
-        <Outlet />
-      </EmptyPage>
-    );
-  }
+  const onClickCreateGameServer = (e: MouseEvent) => {
+    e.preventDefault();
+    navigate({ to: '/gameservers/create' });
+  };
+  const onClickImportGameServer = (e: MouseEvent) => {
+    e.preventDefault();
+    navigate({ to: '/gameservers/create/import' });
+  };
 
   return (
-    <Fragment>
-      <CardList>
-        {gameServers.pages
-          .flatMap((page) => page.data)
-          .map((gameServer) => (
-            <GameServerCard key={gameServer.id} {...gameServer} />
-          ))}
-        <PermissionsGuard requiredPermissions={[PERMISSIONS.ManageGameservers]}>
-          <AddCard title="Gameserver" onClick={() => navigate({ to: '/gameservers/create' })} />
-        </PermissionsGuard>
-        <PermissionsGuard requiredPermissions={[PERMISSIONS.ManageGameservers]}>
-          <AddCard title="Import from CSMM" onClick={() => navigate({ to: '/gameservers/create/import' })} />
-        </PermissionsGuard>
-      </CardList>
-      <InfiniteScroll
-        isFetching={isFetching}
-        hasNextPage={hasNextPage}
-        fetchNextPage={fetchNextPage}
-        isFetchingNextPage={isFetchingNextPage}
-      />
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          marginBottom: '20px',
+          gap: theme.spacing[1],
+        }}
+      >
+        {hasManageGameServersPermission && (
+          <Dropdown>
+            <Dropdown.Trigger asChild>
+              <Button icon={<MenuIcon />} text="Game Server Actions" />
+            </Dropdown.Trigger>
+            <Dropdown.Menu>
+              <Dropdown.Menu.Group divider>
+                <Dropdown.Menu.Item
+                  icon={<CreateGameServerIcon />}
+                  label="Create new game server"
+                  onClick={onClickCreateGameServer}
+                />
+                <Dropdown.Menu.Item
+                  icon={<ImportGameServerIcon />}
+                  label="Import game server from CSMM"
+                  onClick={onClickImportGameServer}
+                />
+              </Dropdown.Menu.Group>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+        <TableListToggleButton onChange={setView} value={view} />
+      </div>
+      {view === 'table' && <GameServersTableView />}
+      {view === 'list' && <GameServersCardView />}
       <Outlet />
-    </Fragment>
+    </div>
   );
 }
+
+interface GameServerActionsProps {
+  gameServerId: string;
+  gameServerName: string;
+}
+export const GameServerActions: FC<GameServerActionsProps> = ({ gameServerId, gameServerName }) => {
+  const theme = useTheme();
+  const { mutate, isPending: isDeleting } = useGameServerRemove();
+  const [openDeleteDialog, setOpenDeleteDialog] = useState<boolean>(false);
+  const [valid, setValid] = useState<boolean>(false);
+
+  const navigate = useNavigate();
+
+  const handleOnEditClick = (e: MouseEvent): void => {
+    e.stopPropagation();
+    navigate({ to: '/gameservers/update/$gameServerId', params: { gameServerId } });
+  };
+  const handleOnDeleteClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (e.shiftKey) {
+      handleOnDelete();
+    } else {
+      setOpenDeleteDialog(true);
+    }
+  };
+
+  const handleOnDelete = () => {
+    mutate({ gameServerId });
+  };
+
+  const handleOnCopyClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(gameServerId);
+  };
+
+  return (
+    <>
+      <PermissionsGuard requiredPermissions={[[PERMISSIONS.ManageGameservers]]}>
+        <Dropdown>
+          <Dropdown.Trigger asChild>
+            <IconButton icon={<MenuIcon />} ariaLabel="Settings" />
+          </Dropdown.Trigger>
+          <Dropdown.Menu>
+            <Dropdown.Menu.Group label="Actions">
+              <Dropdown.Menu.Item icon={<CopyIcon />} onClick={handleOnCopyClick} label="Copy gameserverID" />
+              <Dropdown.Menu.Item icon={<EditIcon />} onClick={handleOnEditClick} label="Edit gameserver" />
+              <Dropdown.Menu.Item
+                icon={<DeleteIcon fill={theme.colors.error} />}
+                onClick={handleOnDeleteClick}
+                label="Delete gameserver"
+              />
+            </Dropdown.Menu.Group>
+            <Dropdown.Menu.Group label="Navigation">
+              <Dropdown.Menu.Item
+                icon={<DashboardIcon />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate({
+                    to: '/gameserver/$gameServerId/dashboard/overview',
+                    params: { gameServerId },
+                  });
+                }}
+                label="go to dashboard"
+              />
+              <Dropdown.Menu.Item
+                icon={<ModulesIcon />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate({ to: '/gameserver/$gameServerId/modules', params: { gameServerId } });
+                }}
+                label="go to modules"
+              />
+              <Dropdown.Menu.Item
+                icon={<ModulesIcon />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate({ to: '/gameserver/$gameServerId/shop', params: { gameServerId } });
+                }}
+                label="go to shop"
+              />
+              <Dropdown.Menu.Item
+                icon={<SettingsIcon />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigate({ to: '/gameserver/$gameServerId/settings', params: { gameServerId } });
+                }}
+                label="go to settings"
+              />
+            </Dropdown.Menu.Group>
+          </Dropdown.Menu>
+        </Dropdown>
+      </PermissionsGuard>
+      <Dialog open={openDeleteDialog} onOpenChange={setOpenDeleteDialog}>
+        <Dialog.Content>
+          <Dialog.Heading>delete: gameserver</Dialog.Heading>
+          <Dialog.Body size="medium">
+            <p>
+              Are you sure you want to delete the gameserver? To confirm, type <strong>{gameServerName}</strong> in the
+              field below.
+            </p>
+            <ValueConfirmationField
+              value={gameServerName}
+              onValidChange={(v) => setValid(v)}
+              label="Game server name"
+              id="deleteGameServerConfirmation"
+            />
+            <Button
+              isLoading={isDeleting}
+              onClick={() => handleOnDelete()}
+              disabled={!valid}
+              fullWidth
+              text="Delete gameserver"
+              color="error"
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+};
diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx
index f7b43b74d3..2463b05ab4 100644
--- a/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx
+++ b/packages/web-main/src/routes/_auth/_global/player.$playerId/-PlayerRolesTable.tsx
@@ -74,7 +74,7 @@ export const PlayerRolesTable: FC<IPlayerRolesTableProps> = ({ roles, playerId,
       header: 'Gameserver',
       id: 'gameServerId',
       cell: (info) => {
-        const gameServer = gameServers.find((server) => server.id === info.getValue());
+        const gameServer = gameServers.data.find((server) => server.id === info.getValue());
         return gameServer?.name;
       },
       enableColumnFilter: true,
diff --git a/packages/web-main/src/routes/_auth/_global/users.tsx b/packages/web-main/src/routes/_auth/_global/users.tsx
index 9e00cdc1e2..787b38261d 100644
--- a/packages/web-main/src/routes/_auth/_global/users.tsx
+++ b/packages/web-main/src/routes/_auth/_global/users.tsx
@@ -12,6 +12,7 @@ import {
   DateFormatter,
   CopyId,
   useTheme,
+  Tooltip,
 } from '@takaro/lib-components';
 
 import { Player } from 'components/Player';
@@ -88,9 +89,14 @@ function Component() {
       cell: (info) => {
         const user = info.row.original;
         return (
-          <Link to="/user/$userId" params={{ userId: user.id }}>
-            {info.getValue()}
-          </Link>
+          <Tooltip placement="right">
+            <Tooltip.Trigger asChild>
+              <Link className="underline" to="/user/$userId" params={{ userId: user.id }}>
+                {info.getValue()}
+              </Link>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Open user profile</Tooltip.Content>
+          </Tooltip>
         );
       },
     }),
diff --git a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/shop/ShopView.tsx b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/shop/ShopView.tsx
index 06a69fcfc2..4e08cbbf41 100644
--- a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/shop/ShopView.tsx
+++ b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/shop/ShopView.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { GameServerOutputDTOTypeEnum } from '@takaro/apiclient';
 import { Alert, Button, Chip, Dropdown, styled, useLocalStorage } from '@takaro/lib-components';
 import {
+  AiOutlineMenu as MenuIcon,
   AiOutlinePlus as CreateNewShopListingIcon,
   AiOutlineSplitCells as ImportShopListingFromGameServerIcon,
   AiOutlineUpload as ImportShopListingsFromFileIcon,
@@ -110,7 +111,7 @@ export const ShopView: FC<ShopViewProps> = ({ gameServerId, currency, currencyNa
         <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', gap: '10px' }}>
           <Dropdown>
             <Dropdown.Trigger asChild>
-              <Button icon={<CreateNewShopListingIcon />} text="New shoplisting" />
+              <Button icon={<MenuIcon />} text="Shop actions" />
             </Dropdown.Trigger>
             <Dropdown.Menu>
               <DropdownMenu.Group divider>

From e55ac88f610484d1b6d8c0beee69caacb7316cfa Mon Sep 17 00:00:00 2001
From: Emiel Van Severen <github@vanseveren.dev>
Date: Thu, 7 Nov 2024 23:50:31 +0100
Subject: [PATCH 2/2] fix: recreate package-lock

---
 package-lock.json | 136 +++++++---------------------------------------
 1 file changed, 21 insertions(+), 115 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a46a6c7d5b..ba634c35a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1255,8 +1255,7 @@
     },
     "node_modules/@babel/code-frame": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
-      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
         "js-tokens": "^4.0.0",
@@ -1268,16 +1267,14 @@
     },
     "node_modules/@babel/compat-data": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
-      "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
-      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
+      "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -1309,8 +1306,6 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
-      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.26.2",
@@ -1346,8 +1341,7 @@
     },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
-      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.25.9",
         "@babel/helper-validator-option": "^7.25.9",
@@ -1420,8 +1414,7 @@
     },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -1432,8 +1425,7 @@
     },
     "node_modules/@babel/helper-module-transforms": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -1458,8 +1450,7 @@
     },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
-      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1518,24 +1509,21 @@
     },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1554,8 +1542,7 @@
     },
     "node_modules/@babel/helpers": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
-      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
         "@babel/types": "^7.26.0"
@@ -1566,8 +1553,6 @@
     },
     "node_modules/@babel/parser": {
       "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -1834,8 +1819,7 @@
     },
     "node_modules/@babel/plugin-syntax-jsx": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
-      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1934,8 +1918,7 @@
     },
     "node_modules/@babel/plugin-syntax-typescript": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
-      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -3096,8 +3079,7 @@
     },
     "node_modules/@babel/template": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/parser": "^7.25.9",
@@ -3109,8 +3091,7 @@
     },
     "node_modules/@babel/traverse": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
-      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/generator": "^7.25.9",
@@ -3126,8 +3107,7 @@
     },
     "node_modules/@babel/types": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -3143,8 +3123,6 @@
     },
     "node_modules/@bull-board/api": {
       "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@bull-board/api/-/api-6.2.3.tgz",
-      "integrity": "sha512-WwXb6A4St4G7brf9l0ye/dtDHqerC4iAX2d7MTkIGihPVXfCGqmjKhbsWrBLAAdL0kep6SfDlWuN0YTvgYL0xA==",
       "license": "MIT",
       "dependencies": {
         "redis-info": "^3.0.8"
@@ -3155,8 +3133,6 @@
     },
     "node_modules/@bull-board/express": {
       "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@bull-board/express/-/express-6.2.3.tgz",
-      "integrity": "sha512-Z2UgT3nUTfo9cx6LAsnVwc8a3ZzGXm64Q12lZ0h7vUfhtIicygx8KvigLDW9Xp3d+zh29gi9A3r/+pGschjJxw==",
       "license": "MIT",
       "dependencies": {
         "@bull-board/api": "6.2.3",
@@ -3167,8 +3143,6 @@
     },
     "node_modules/@bull-board/ui": {
       "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@bull-board/ui/-/ui-6.2.3.tgz",
-      "integrity": "sha512-xRFcB+8IvaEt4JmJmhxtrmVY0lf5NcHPvTphpeFv9ib39nFU/EfuslT5CWhMsbDb27agTaq5FjUXEw72cD72yA==",
       "license": "MIT",
       "dependencies": {
         "@bull-board/api": "6.2.3"
@@ -14680,8 +14654,6 @@
     },
     "node_modules/@eslint/js": {
       "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.12.0.tgz",
-      "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==",
       "devOptional": true,
       "license": "MIT",
       "engines": {
@@ -14841,8 +14813,6 @@
     },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
-      "integrity": "sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -14851,8 +14821,6 @@
     },
     "node_modules/@humanfs/node": {
       "version": "0.16.5",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.5.tgz",
-      "integrity": "sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -14877,8 +14845,6 @@
     },
     "node_modules/@humanwhocodes/retry": {
       "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -21305,8 +21271,6 @@
     },
     "node_modules/@storybook/types/node_modules/@types/express": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -21921,8 +21885,7 @@
     },
     "node_modules/@tanstack/virtual-file-routes": {
       "version": "1.64.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.64.0.tgz",
-      "integrity": "sha512-soW+gE9QTmMaqXM17r7y1p8NiQVIIECjdTaYla8BKL5Flj030m3KuxEQoiG1XgjtA0O7ayznFz2YvPcXIy3qDg==",
+      "license": "MIT",
       "optional": true,
       "peer": true,
       "engines": {
@@ -22369,8 +22332,6 @@
     },
     "node_modules/@types/express": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.0.tgz",
-      "integrity": "sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==",
       "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
@@ -22391,8 +22352,6 @@
     },
     "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz",
-      "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -22896,8 +22855,6 @@
     },
     "node_modules/@types/supertest": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@types/supertest/-/supertest-6.0.2.tgz",
-      "integrity": "sha512-137ypx2lk/wTQbW6An6safu9hXmajAifU/s7szAHLN/FeIm5w7yR0Wkl9fdJMRSHwOn4HLAI0DaB2TOORuhPDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -23187,14 +23144,12 @@
     },
     "node_modules/@use-gesture/core": {
       "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
-      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/@use-gesture/react": {
       "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
-      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@use-gesture/core": "10.3.1"
@@ -23488,8 +23443,7 @@
     },
     "node_modules/@visx/zoom": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@visx/zoom/-/zoom-3.3.0.tgz",
-      "integrity": "sha512-ijSitmJWbhupAe1F0LTsusg/WWEvYBcxV9iOHmTbGHhgpdKuhmZCXYg2zGAF4oT3lTuhofUA678jQt5+U9FlWA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@types/react": "*",
@@ -26627,8 +26581,6 @@
     },
     "node_modules/cron-parser": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
-      "integrity": "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==",
       "license": "MIT",
       "dependencies": {
         "luxon": "^3.2.1"
@@ -28663,8 +28615,6 @@
     },
     "node_modules/eslint": {
       "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz",
-      "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -28933,8 +28883,6 @@
     },
     "node_modules/eslint-scope": {
       "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.1.0.tgz",
-      "integrity": "sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==",
       "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -29010,8 +28958,6 @@
     },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
-      "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -29054,8 +29000,6 @@
     },
     "node_modules/espree": {
       "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
-      "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
       "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -29083,8 +29027,6 @@
     },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
-      "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -30384,19 +30326,6 @@
       "version": "1.0.0",
       "license": "ISC"
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "license": "MIT",
@@ -35282,8 +35211,6 @@
     },
     "node_modules/maxmind": {
       "version": "4.3.22",
-      "resolved": "https://registry.npmjs.org/maxmind/-/maxmind-4.3.22.tgz",
-      "integrity": "sha512-dfLO11mE77ELTEIXNezfW0eslodsFLsZ1lQkLauP+5Zsg1m7kCGtljqRyVOd9E5Ne2RJgvY6UU09qvnVocOZvA==",
       "license": "MIT",
       "dependencies": {
         "mmdb-lib": "2.1.1",
@@ -38687,20 +38614,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/playwright/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/polished": {
       "version": "4.3.1",
       "license": "MIT",
@@ -39450,8 +39363,6 @@
     },
     "node_modules/re-resizable": {
       "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.0.tgz",
-      "integrity": "sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
@@ -43867,8 +43778,7 @@
     },
     "node_modules/tsx": {
       "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz",
-      "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==",
+      "license": "MIT",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -45390,8 +45300,6 @@
     },
     "node_modules/webpack-dev-server/node_modules/@types/express": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
       "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
@@ -47011,8 +46919,6 @@
     },
     "packages/lib-components/node_modules/@types/express": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {