New Dashboard

src/components/moderator/App.svelte

@@ -0,0 +1,56 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import type {RouteDefinition} from "svelte-spa-router";
+    import Router from "svelte-spa-router";
+    import NavLinks from "@components/moderator/layout/NavLinks.svelte";
+    import {Switch} from "@components/ui/switch";
+    import {Label} from "@components/ui/label";
+    import {navigate} from "astro:transitions/client";
+    import Players from "@components/moderator/pages/players/Players.svelte";
+    import Events from "@components/moderator/pages/events/Events.svelte";
+    import Dashboard from "@components/moderator/pages/dashboard/Dashboard.svelte";
+    import Event from "@components/moderator/pages/event/Event.svelte";
+
+    const routes: RouteDefinition = {
+        "/": Dashboard,
+        "/events": Events,
+        "/players": Players,
+        "/event/:id": Event
+    };
+</script>
+
+<div class="flex flex-col bg-background min-w-full min-h-screen">
+    <div class="border-b">
+        <div class="flex h-16 items-center px-4">
+            <a href="/" class="text-sm font-bold transition-colors text-primary">
+                SteamWar
+            </a>
+            <NavLinks />
+            <div class="ml-auto flex items-center space-x-4">
+                <Switch id="new-ui-switch" checked={true} on:click={() => navigate("/admin")} />
+                <Label for="new-ui-switch">New UI!</Label>
+            </div>
+        </div>
+    </div>
+    <main class="flex flex-col">
+        <Router {routes} />
+    </main>
+</div>

src/components/moderator/components/EventCard.svelte

@@ -0,0 +1,42 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import type {ShortEvent} from "@type/event.ts";
+    import {Card, CardContent, CardHeader, CardTitle} from "@components/ui/card";
+
+    let { event }: { event: ShortEvent } = $props();
+
+    let sameDate = $derived(new Intl.DateTimeFormat().format(event.start) === new Intl.DateTimeFormat().format(event.end));
+</script>
+
+<Card>
+    <CardHeader>
+        <CardTitle>{event.name}</CardTitle>
+    </CardHeader>
+    <CardContent>
+        {#if !sameDate}
+            <p>Startet: {new Intl.DateTimeFormat().format(event.start)}</p>
+            <p>Endet: {new Intl.DateTimeFormat().format(event.end)}</p>
+        {:else}
+            <p>Am: {new Intl.DateTimeFormat().format(event.start)}</p>
+            <p>&nbsp;</p>
+        {/if}
+    </CardContent>
+</Card>

src/components/moderator/layout/NavLinks.svelte

@@ -0,0 +1,40 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {location} from "svelte-spa-router";
+</script>
+
+<nav class="flex items-center space-x-4 lg:space-x-6 mx-6">
+    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/"}>
+        Dashboard
+    </a>
+    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/events"}>
+        Events
+    </a>
+    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/players"}>
+        Players
+    </a>
+    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/pages"}>
+        Pages
+    </a>
+    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted={$location !== "/schematics"}>
+        Schematics
+    </a>
+</nav>

src/components/moderator/pages/dashboard/Dashboard.svelte

@@ -0,0 +1,22 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<div class="p-4">
+    <h1 class="font-bold text-xl">SteamWar Dashboard</h1>
+</div>

src/components/moderator/pages/event/Event.svelte

@@ -0,0 +1,38 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {eventRepo} from "@repo/event.ts";
+    import EventView from "@components/moderator/pages/event/EventView.svelte";
+
+    interface Props {
+        params: { id: number };
+    }
+
+    let { params }: Props = $props();
+
+    let id = params.id;
+    let event = $eventRepo.getEvent(id.toString());
+</script>
+
+{#await event}
+    <p>Loading...</p>
+{:then data}
+    <EventView event={data} />
+{/await}

src/components/moderator/pages/event/EventEdit.svelte

@@ -0,0 +1,128 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {Input} from "@components/ui/input";
+    import {Label} from "@components/ui/label";
+    import {Popover, PopoverContent, PopoverTrigger} from "@components/ui/popover";
+    import type {SWEvent} from "@type/event.ts"
+    import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
+    import {fromAbsolute} from "@internationalized/date";
+    import {Button} from "@components/ui/button";
+    import {ChevronsUpDown} from "lucide-svelte";
+    import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@components/ui/command";
+    import {schemTypes} from "@stores/stores.ts";
+    import Check from "lucide-svelte/icons/check";
+    import {cn} from "@components/utils.ts";
+    import {Switch} from "@components/ui/switch";
+    import {eventRepo} from "@repo/event.ts";
+
+    const { event }: { event: SWEvent } = $props();
+
+    let rootEvent: SWEvent = $state(event)
+
+    let eventName = $state(rootEvent.name);
+    let eventDeadline = $state(fromAbsolute(rootEvent.deadline, "Europe/Berlin"));
+    let eventStart = $state(fromAbsolute(rootEvent.start, "Europe/Berlin"));
+    let eventEnd = $state(fromAbsolute(rootEvent.end, "Europe/Berlin"));
+    let eventTeamSize = $state(rootEvent.maxTeamMembers);
+    let eventSchematicType = $state(rootEvent.schemType);
+    let eventPublicsOnly = $state(rootEvent.publicSchemsOnly);
+
+    let dirty = $derived(eventName !== rootEvent.name ||
+        eventDeadline.toDate().getTime() !== rootEvent.deadline ||
+        eventStart.toDate().getTime() !== rootEvent.start ||
+        eventEnd.toDate().getTime() !== rootEvent.end ||
+        eventTeamSize !== rootEvent.maxTeamMembers ||
+        eventSchematicType !== rootEvent.schemType ||
+        eventPublicsOnly !== rootEvent.publicSchemsOnly);
+
+    async function updateEvent() {
+        rootEvent = await $eventRepo.updateEvent(event.id.toString(), {
+            name: eventName,
+            deadline: eventDeadline.toDate().getTime(),
+            start: eventStart.toDate().getTime(),
+            end: eventEnd.toDate().getTime(),
+            maxTeamMembers: eventTeamSize,
+            schemType: eventSchematicType,
+            publicSchemsOnly: eventPublicsOnly,
+        })
+    }
+</script>
+
+<div class="flex flex-col gap-2">
+    <Label for="event-name">Name</Label>
+    <Input id="event-name" bind:value={eventName} />
+    <Label>Deadline</Label>
+    <DateTimePicker bind:value={eventDeadline} />
+    <Label>Start</Label>
+    <DateTimePicker bind:value={eventStart} />
+    <Label>End</Label>
+    <DateTimePicker bind:value={eventEnd} />
+    <Label for="event-size">Teamsize</Label>
+    <Input id="event-size" bind:value={eventTeamSize} type="number" />
+    <Label>Schematic Type</Label>
+    <Popover>
+        <PopoverTrigger>
+            {#snippet child({ props })}
+                <Button
+                        variant="outline"
+                        class="justify-between"
+                        {...props}
+                        role="combobox"
+                >
+                    {$schemTypes.find(value => value.db === eventSchematicType)?.name || eventSchematicType || "Select a schematic type..."}
+                    <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+            <Command>
+                <CommandInput placeholder="Search schematic types..." />
+                <CommandList>
+                    <CommandEmpty>No schematic type found.</CommandEmpty>
+                    <CommandGroup>
+                        {#each $schemTypes as type}
+                            <CommandItem
+                                    value={type.db}
+                                    onSelect={() => {
+                eventSchematicType = type.db;
+              }}
+                            >
+                                <Check
+                                        class={cn(
+                  "mr-2 size-4",
+                  eventSchematicType !== type.db && "text-transparent"
+                )}
+                                />
+                                {type.name}
+                            </CommandItem>
+                        {/each}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+    <Label for="event-publics">Publics Schematics Only</Label>
+    <Switch id="event-publics" bind:checked={eventPublicsOnly} />
+    <div class="flex flex-row justify-end border-t pt-2 gap-4">
+        <Button variant="destructive">Delete</Button>
+        <Button disabled={!dirty} onclick={updateEvent}>Update</Button>
+    </div>
+</div>

src/components/moderator/pages/event/EventFightList.svelte

@@ -0,0 +1,107 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import type {ExtendedEvent} from "@type/event";
+    import {createSvelteTable, FlexRender} from "@components/ui/data-table";
+    import {
+        type ColumnFiltersState,
+        getCoreRowModel, getFilteredRowModel,
+        getPaginationRowModel, getSortedRowModel,
+        type SortingState,
+    } from "@tanstack/table-core";
+    import { columns } from "./columns"
+    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
+
+    let { data }: { data: ExtendedEvent } = $props();
+
+    let sorting = $state<SortingState>([]);
+    let columnFilters = $state<ColumnFiltersState>([]);
+
+    const table = createSvelteTable({
+        get data() {
+            return data.fights;
+        },
+        state: {
+            get sorting() {
+                return sorting;
+            },
+            get columnFilters() {
+                return columnFilters;
+            },
+        },
+        onSortingChange: (updater) => {
+            if (typeof updater === "function") {
+                sorting = updater(sorting);
+            } else {
+                sorting = updater;
+            }
+        },
+        onColumnFiltersChange: (updater) => {
+            if (typeof updater === "function") {
+                columnFilters = updater(columnFilters);
+            } else {
+                columnFilters = updater;
+            }
+        },
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+</script>
+
+<Table>
+    <TableHeader>
+        {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+            <TableRow>
+                {#each headerGroup.headers as header (header.id)}
+                    <TableHead>
+                        {#if !header.isPlaceholder}
+                            <FlexRender
+                                    content={header.column.columnDef.header}
+                                    context={header.getContext()}
+                            />
+                        {/if}
+                    </TableHead>
+                {/each}
+            </TableRow>
+        {/each}
+    </TableHeader>
+    <TableBody>
+        {#each table.getRowModel().rows as row (row.id)}
+            <TableRow data-state={row.getIsSelected() && "selected"}>
+                {#each row.getVisibleCells() as cell (cell.id)}
+                    <TableCell>
+                        <FlexRender
+                                content={cell.column.columnDef.cell}
+                                context={cell.getContext()}
+                        />
+                    </TableCell>
+                {/each}
+            </TableRow>
+        {:else}
+            <TableRow>
+                <TableCell colspan={columns.length} class="h-24 text-center">
+                    No results.
+                </TableCell>
+            </TableRow>
+        {/each}
+    </TableBody>
+</Table>

src/components/moderator/pages/event/EventView.svelte

@@ -0,0 +1,100 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import type {ExtendedEvent} from "@type/event.ts";
+    import EventEdit from "@components/moderator/pages/event/EventEdit.svelte";
+    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table/index.js";
+    import {Button} from "@components/ui/button";
+    import {Popover, PopoverTrigger} from "@components/ui/popover";
+    import {PopoverContent} from "@components/ui/popover/index.js";
+    import {CommandEmpty, CommandGroup, CommandInput, CommandList, CommandItem, Command} from "@components/ui/command";
+    import {players} from "@stores/stores.ts";
+    import {eventRepo} from "@repo/event.ts";
+    import EventFightList from "@components/moderator/pages/event/EventFightList.svelte";
+
+    const {
+        event
+    }: { event: ExtendedEvent } = $props();
+
+    let referees = $state(event.event.referees)
+
+    async function addReferee(value: string) {
+        referees = (await $eventRepo.updateEvent(event.event.id.toString(), {
+            addReferee: [value]
+        })).referees;
+    }
+
+    async function removeReferee(value: string) {
+        referees = (await $eventRepo.updateEvent(event.event.id.toString(), {
+            removeReferee: [value]
+        })).referees;
+    }
+</script>
+
+<div class="flex flex-col m-4 p-4 rounded-md border gap-4">
+    <div class="flex flex-col md:flex-row">
+        <div class="w-1/2">
+            <h1 class="text-2xl font-bold mb-4">{event.event.name}</h1>
+            <EventEdit event={event.event} />
+        </div>
+        <div class="ml-4 pl-4 border-l w-1/2">
+            <h2>Referees</h2>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Actions</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {#each referees as referee (referee.uuid)}
+                        <TableRow>
+                            <TableCell>{referee.name}</TableCell>
+                            <TableCell>
+                                <Button onclick={() => removeReferee(referee.uuid)}>Remove</Button>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+            <Popover>
+                <PopoverTrigger>
+                    <Button>
+                        Add
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent class="p-0">
+                    <Command>
+                        <CommandInput placeholder="Search players..." />
+                        <CommandList>
+                            <CommandEmpty>No Players found :(</CommandEmpty>
+                            <CommandGroup heading="Players">
+                                {#each $players.filter(v => v.perms.length > 0).filter(v => !referees.some(k => k.uuid === v.uuid)) as player (player.uuid)}
+                                    <CommandItem value={player.uuid} onSelect={() => addReferee(player.uuid)}>{player.name}</CommandItem>
+                                {/each}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    </div>
+    <EventFightList data={event} />
+</div>

src/components/moderator/pages/event/columns.ts

@@ -0,0 +1,32 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {ColumnDef} from "@tanstack/table-core";
+import type {EventFight} from "@type/event.ts";
+
+export const columns: ColumnDef<EventFight> = [
+    {
+        accessorFn: (r) => r.blueTeam.name,
+        header: "Team Blue",
+    },
+    {
+        accessorFn: (r) => r.redTeam.name,
+        header: "Team Red",
+    },
+];

src/components/moderator/pages/events/Events.svelte

@@ -0,0 +1,51 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import { eventRepo } from "@repo/event.ts";
+    import EventCard from "@components/moderator/components/EventCard.svelte";
+
+    let eventsFuture = $state($eventRepo.listEvents());
+    let millis = Date.now();
+</script>
+
+<div class="p-4">
+    {#await eventsFuture}
+        <p>Loading...</p>
+    {:then events}
+        <h1 class="mt-5 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">Upcoming</h1>
+        <div class="grid gap-4 p-4 border-b" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+            {#each events.filter((e) => e.start > millis) as event (event.id)}
+                <a href="#/event/{event.id}">
+                    <EventCard {event} />
+                </a>
+            {/each}
+        </div>
+        <h1 class="mt-5 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">Past</h1>
+        <div class="grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+            {#each events.filter((e) => e.start < millis).reverse() as event (event.id)}
+                <a href="#/event/{event.id}">
+                    <EventCard {event} />
+                </a>
+            {/each}
+        </div>
+    {:catch e}
+
+    {/await}
+</div>

src/components/moderator/pages/players/PermissionsDropdown.svelte

@@ -0,0 +1,56 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {permissions, players} from "@stores/stores.ts";
+    import {Select, SelectContent, SelectItem} from "@components/ui/select";
+    import {SelectTrigger} from "@components/ui/select/index.js";
+    import {permsRepo} from "@repo/perms.ts";
+
+    const {
+        perms, uuid
+    }: { perms: string[], uuid: string } = $props();
+
+    let value = $state(perms);
+    let prevValue = $state(perms);
+
+    function onChange(change: string[]) {
+        $permissions.perms.forEach(perm => {
+            if (prevValue.includes(perm) && !change.includes(perm)) {
+                $permsRepo.removePerm(uuid, perm)
+            } else if (!prevValue.includes(perm) && change.includes(perm)) {
+                $permsRepo.addPerm(uuid, perm)
+            }
+        });
+
+        prevValue = change;
+        value = change;
+    }
+</script>
+
+<Select type="multiple" bind:value onValueChange={onChange}>
+    <SelectTrigger>
+        {value.length} Permissions
+    </SelectTrigger>
+    <SelectContent>
+        {#each $permissions.perms as permission (permission)}
+            <SelectItem value={permission}>{permission}</SelectItem>
+        {/each}
+    </SelectContent>
+</Select>

src/components/moderator/pages/players/Players.svelte

@@ -0,0 +1,32 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script>
+    import Table from "@components/moderator/pages/players/Table.svelte";
+
+    import {dataRepo} from "@repo/data";
+
+    let playersFuture = $state($dataRepo.getPlayers())
+</script>
+
+{#await playersFuture}
+    <p>Loading...</p>
+{:then players}
+    <Table data={players} />
+{/await}

src/components/moderator/pages/players/PrefixDropdown.svelte

@@ -0,0 +1,47 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {Select, SelectContent, SelectItem, SelectTrigger} from "@components/ui/select";
+    import {permissions} from "@stores/stores.ts";
+    import {permsRepo} from "@repo/perms.ts";
+
+    const {
+        prefix, uuid
+    }: { prefix: string, uuid: string } = $props();
+
+    let value = $state(prefix);
+
+    function onChange(change: string) {
+        $permsRepo.setPrefix(uuid, change);
+
+        value = $permissions.prefixes[change].chatPrefix;
+    }
+</script>
+
+<Select type="single" bind:value onValueChange={onChange}>
+    <SelectTrigger>
+        {value === "" ? "None" : value}
+    </SelectTrigger>
+    <SelectContent>
+        {#each Object.entries($permissions.prefixes) as prefix (prefix[1].name)}
+            <SelectItem value={prefix[0]}>{prefix[1].chatPrefix === "" ? "None" : prefix[1].chatPrefix}</SelectItem>
+        {/each}
+    </SelectContent>
+</Select>

src/components/moderator/pages/players/Table.svelte

@@ -0,0 +1,174 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2025 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {
+        type ColumnFiltersState,
+        getCoreRowModel, getFilteredRowModel,
+        getPaginationRowModel, getSortedRowModel,
+        type PaginationState,
+        type SortingState,
+    } from "@tanstack/table-core";
+    import {
+        createSvelteTable,
+        FlexRender,
+    } from "@components/ui/data-table/index";
+    import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
+    import {Button} from "@components/ui/button";
+    import {Input} from "@components/ui/input";
+    import {Select} from "@components/ui/select";
+    import {SelectContent, SelectItem, SelectTrigger} from "@components/ui/select/index.js";
+    import type {Player} from "@type/data";
+    import { columns } from "./columns";
+
+    let { data }: { data: Player[] } = $props();
+
+    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 25 });
+    let sorting = $state<SortingState>([]);
+    let columnFilters = $state<ColumnFiltersState>([]);
+
+    const table = createSvelteTable({
+        get data() {
+            return data;
+        },
+        state: {
+            get pagination() {
+                return pagination;
+            },
+            get sorting() {
+                return sorting;
+            },
+            get columnFilters() {
+                return columnFilters;
+            },
+        },
+        onPaginationChange: (updater) => {
+            if (typeof updater === "function") {
+                pagination = updater(pagination);
+            } else {
+                pagination = updater;
+            }
+        },
+        onSortingChange: (updater) => {
+            if (typeof updater === "function") {
+                sorting = updater(sorting);
+            } else {
+                sorting = updater;
+            }
+        },
+        onColumnFiltersChange: (updater) => {
+            if (typeof updater === "function") {
+                columnFilters = updater(columnFilters);
+            } else {
+                columnFilters = updater;
+            }
+        },
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+    });
+</script>
+
+<div class="rounded-md border m-4">
+    <div class="flex items-center p-4 border-b">
+        <Input
+                placeholder="Filter Players..."
+                value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+                onchange={(e) => {
+        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
+      }}
+                oninput={(e) => {
+        table.getColumn("name")?.setFilterValue(e.currentTarget.value);
+      }}
+                class="max-w-sm"
+        />
+        <div class="flex items-center px-4">
+            <Select type="single" value={pagination.pageSize.toString()} onValueChange={(e) => pagination = { pageSize: +e, pageIndex: 0 }}>
+                <SelectTrigger>{pagination.pageSize}</SelectTrigger>
+                <SelectContent>
+                    <SelectItem value="5">5</SelectItem>
+                    <SelectItem value="10">10</SelectItem>
+                    <SelectItem value="25">25</SelectItem>
+                    <SelectItem value="50">50</SelectItem>
+                    <SelectItem value="100">100</SelectItem>
+                    <SelectItem value="200">200</SelectItem>
+                </SelectContent>
+            </Select>
+        </div>
+    </div>
+    <Table>
+        <TableHeader>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                <TableRow>
+                    {#each headerGroup.headers as header (header.id)}
+                        <TableHead>
+                            {#if !header.isPlaceholder}
+                                <FlexRender
+                                        content={header.column.columnDef.header}
+                                        context={header.getContext()}
+                                />
+                            {/if}
+                        </TableHead>
+                    {/each}
+                </TableRow>
+            {/each}
+        </TableHeader>
+        <TableBody>
+            {#each table.getRowModel().rows as row (row.id)}
+                <TableRow data-state={row.getIsSelected() && "selected"}>
+                    {#each row.getVisibleCells() as cell (cell.id)}
+                        <TableCell>
+                            <FlexRender
+                                    content={cell.column.columnDef.cell}
+                                    context={cell.getContext()}
+                            />
+                        </TableCell>
+                    {/each}
+                </TableRow>
+            {:else}
+                <TableRow>
+                    <TableCell colspan={columns.length} class="h-24 text-center">
+                        No results.
+                    </TableCell>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+    <div class="flex items-center justify-end space-x-2 p-4 border-t">
+        <Button
+                variant="outline"
+                size="sm"
+                onclick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+        >
+            Previous
+        </Button>
+        <span>{pagination.pageIndex + 1}/{table.getPageCount()}</span>
+        <Button
+                variant="outline"
+                size="sm"
+                onclick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+        >
+            Next
+        </Button>
+    </div>
+</div>

src/components/moderator/pages/players/columns.ts

@@ -0,0 +1,60 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2025 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {ColumnDef} from "@tanstack/table-core";
+import type {Player} from "@type/data.ts";
+import { renderComponent } from "@components/ui/data-table";
+import PermissionsDropdown from "@components/moderator/pages/players/PermissionsDropdown.svelte";
+import PrefixDropdown from "@components/moderator/pages/players/PrefixDropdown.svelte";
+
+export const columns: ColumnDef<Player[]> = [
+    {
+        accessorKey: "uuid",
+        header: "UUID",
+    },
+    {
+        accessorKey: "name",
+        header: "Name",
+    },
+    {
+        accessorKey: "prefix",
+        header: "Prefix",
+        cell: ({ row }) => {
+            return renderComponent(
+                PrefixDropdown, {
+                    prefix: row.getValue("prefix"),
+                    uuid: row.getValue("uuid"),
+                },
+            );
+        },
+    },
+    {
+        accessorKey: "perms",
+        header: "Permissions",
+        cell: ({ row }) => {
+            return renderComponent(
+                PermissionsDropdown,
+                {
+                    perms: row.getValue("perms"),
+                    uuid: row.getValue("uuid"),
+                },
+            );
+        },
+    },
+];