From e47268111a9fdcb944ce6d83f28f833c5a01bb84 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Wed, 21 May 2025 17:22:20 +0200
Subject: [PATCH] refactor admin crud popups

---
 src/app/admin/admins/Admins.svelte            | 103 ++++---
 src/app/admin/admins/Badges.svelte            |  50 ----
 src/app/admin/admins/CreateOrEditPopup.svelte | 115 --------
 src/app/admin/admins/SidebarActions.svelte    |  54 ++--
 .../admin/admins/{actions.ts => admins.ts}    |  13 +-
 src/app/admin/admins/state.ts                 |   4 -
 src/app/admin/admins/types.ts                 |   4 -
 src/app/admin/feedback/BottomBar.svelte       |   4 +-
 src/app/admin/feedback/Feedback.svelte        |  47 ++--
 .../feedback/{actions.ts => feedback.ts}      |  12 +-
 src/app/admin/feedback/state.ts               |   4 -
 src/app/admin/feedback/types.ts               |   4 -
 src/app/admin/reports/BottomBar.svelte        |   4 +-
 src/app/admin/reports/CreatePopup.svelte      |  97 -------
 src/app/admin/reports/Reports.svelte          |  46 +---
 src/app/admin/reports/SidebarActions.svelte   |  50 +++-
 .../admin/reports/{actions.ts => reports.ts}  |  23 +-
 src/app/admin/reports/state.ts                |   4 -
 src/app/admin/reports/types.ts                |  14 -
 src/app/admin/teams/CreateOrEditPopup.svelte  | 117 --------
 src/app/admin/teams/SidebarActions.svelte     |  62 +++--
 src/app/admin/teams/Teams.svelte              | 125 +++++----
 src/app/admin/teams/state.ts                  |   4 -
 src/app/admin/teams/{actions.ts => teams.ts}  |  15 +-
 src/app/admin/teams/types.ts                  |   6 -
 src/app/admin/users/CreateOrEditPopup.svelte  |  95 -------
 src/app/admin/users/SidebarActions.svelte     |  44 ++-
 src/app/admin/users/Users.svelte              | 100 ++++---
 src/app/admin/users/state.ts                  |   6 -
 src/app/admin/users/types.ts                  |   9 -
 src/app/admin/users/{actions.ts => users.ts}  |  13 +-
 .../usersBlocked/CreateOrEditPopup.svelte     | 101 -------
 .../admin/usersBlocked/SidebarActions.svelte  |  35 ++-
 .../admin/usersBlocked/UsersBlocked.svelte    |  78 +++---
 src/app/admin/usersBlocked/state.ts           |   6 -
 src/app/admin/usersBlocked/types.ts           |   9 -
 .../{actions.ts => usersBlocked.ts}           |  17 +-
 src/components/admin/popup/CrudPopup.svelte   | 255 ++++++++++++++++++
 src/components/admin/search/Search.svelte     |   6 +-
 src/components/admin/table/DataTable.svelte   |  73 +++++
 src/components/admin/table/SortableTr.svelte  |  15 +-
 src/components/input/BitBadge.svelte          |  50 ++++
 src/db/schema/blockedUser.ts                  |   4 +-
 src/db/schema/feedback.ts                     |   5 +-
 src/util/objects.ts                           |   9 +
 src/util/permissions.ts                       |  19 +-
 46 files changed, 889 insertions(+), 1041 deletions(-)
 delete mode 100644 src/app/admin/admins/Badges.svelte
 delete mode 100644 src/app/admin/admins/CreateOrEditPopup.svelte
 rename src/app/admin/admins/{actions.ts => admins.ts} (73%)
 delete mode 100644 src/app/admin/admins/state.ts
 delete mode 100644 src/app/admin/admins/types.ts
 rename src/app/admin/feedback/{actions.ts => feedback.ts} (50%)
 delete mode 100644 src/app/admin/feedback/state.ts
 delete mode 100644 src/app/admin/feedback/types.ts
 delete mode 100644 src/app/admin/reports/CreatePopup.svelte
 rename src/app/admin/reports/{actions.ts => reports.ts} (72%)
 delete mode 100644 src/app/admin/reports/state.ts
 delete mode 100644 src/app/admin/reports/types.ts
 delete mode 100644 src/app/admin/teams/CreateOrEditPopup.svelte
 delete mode 100644 src/app/admin/teams/state.ts
 rename src/app/admin/teams/{actions.ts => teams.ts} (67%)
 delete mode 100644 src/app/admin/teams/types.ts
 delete mode 100644 src/app/admin/users/CreateOrEditPopup.svelte
 delete mode 100644 src/app/admin/users/state.ts
 delete mode 100644 src/app/admin/users/types.ts
 rename src/app/admin/users/{actions.ts => users.ts} (79%)
 delete mode 100644 src/app/admin/usersBlocked/CreateOrEditPopup.svelte
 delete mode 100644 src/app/admin/usersBlocked/state.ts
 delete mode 100644 src/app/admin/usersBlocked/types.ts
 rename src/app/admin/usersBlocked/{actions.ts => usersBlocked.ts} (62%)
 create mode 100644 src/components/admin/popup/CrudPopup.svelte
 create mode 100644 src/components/admin/table/DataTable.svelte
 create mode 100644 src/components/input/BitBadge.svelte
 create mode 100644 src/util/objects.ts

diff --git a/src/app/admin/admins/Admins.svelte b/src/app/admin/admins/Admins.svelte
index 9db95ec..181ebc6 100644
--- a/src/app/admin/admins/Admins.svelte
+++ b/src/app/admin/admins/Admins.svelte
@@ -1,63 +1,52 @@
 <script lang="ts">
-  import Badges from './Badges.svelte';
+  import BitBadge from '@components/input/BitBadge.svelte';
   import { Permissions } from '@util/permissions.ts';
-  import type { Admin } from './types.ts';
-  import CreateOrEditPopup from './CreateOrEditPopup.svelte';
-  import { admins } from './state.ts';
-  import Icon from '@iconify/svelte';
-  import { editAdmin } from './actions.ts';
+  import { admins, editAdmin } from '@app/admin/admins/admins.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
 
-  // consts
-  const availablePermissionBadges = {
-    [Permissions.Admin.value]: 'Admin',
-    [Permissions.Users.value]: 'Users',
-    [Permissions.Reports.value]: 'Reports',
-    [Permissions.Feedback.value]: 'Feedback',
-    [Permissions.Settings.value]: 'Settings',
-    [Permissions.Tools.value]: 'Tools'
-  };
-
-  // states
-  let editAdminPopupAdmin = $state<Admin | null>(null);
+  // state
+  let editPopupAdmin = $state(null);
+  let editPopupOpen = $derived(!!editPopupAdmin);
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <tr>
-        <th style="width: 5%">#</th>
-        <th style="width: 30%">Benutzername</th>
-        <th style="width: 60%">Berechtigungen</th>
-        <th style="width: 5%"></th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $admins as admin, i (admin)}
-        <tr class="hover:bg-base-200">
-          <td>{i + 1}</td>
-          <td>{admin.username}</td>
-          <td>
-            <Badges available={availablePermissionBadges} set={new Permissions(admin.permissions).toNumberArray()} />
-          </td>
-          <td>
-            <button class="cursor-pointer" onclick={() => (editAdminPopupAdmin = admin)}>
-              <Icon icon="heroicons:pencil-square" />
-            </button>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+{#snippet permissionsBadge(permissions: number)}
+  <BitBadge available={Permissions.asOptions()} value={permissions} readonly />
+{/snippet}
 
-{#key editAdminPopupAdmin}
-  <CreateOrEditPopup
-    popupTitle="Admin bearbeiten"
-    submitButtonTitle="Admin bearbeiten"
-    confirmPopupTitle="Admin bearbeiten"
-    confirmPopupMessage="Bist du sicher, dass du den Admin bearbeiten möchtest?"
-    admin={editAdminPopupAdmin}
-    open={editAdminPopupAdmin != null}
-    onSubmit={editAdmin}
-  />
-{/key}
+<DataTable
+  data={admins}
+  count={true}
+  keys={[
+    { key: 'username', label: 'Username', width: 30 },
+    { key: 'permissions', label: 'Berechtigungen', width: 60, transform: permissionsBadge }
+  ]}
+  onEdit={(admin) => (editPopupAdmin = admin)}
+/>
+
+<CrudPopup
+  texts={{
+    title: 'Admin bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={editPopupAdmin}
+  keys={[
+    [
+      { key: 'username', type: 'text', label: 'Username', options: { required: true } },
+      { key: 'password', type: 'password', label: 'Passwort', default: null, options: { convert: (v) => v || null } }
+    ],
+    [
+      {
+        key: 'permissions',
+        type: 'bit-badge',
+        label: 'Berechtigungen',
+        default: 0,
+        options: { available: Permissions.asOptions() }
+      }
+    ]
+  ]}
+  onSubmit={editAdmin}
+  bind:open={editPopupOpen}
+/>
diff --git a/src/app/admin/admins/Badges.svelte b/src/app/admin/admins/Badges.svelte
deleted file mode 100644
index e6c268a..0000000
--- a/src/app/admin/admins/Badges.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-  interface Props {
-    available: { [k: number]: string };
-    set: number[];
-    onUpdate?: (set: number[]) => void;
-  }
-
-  // inputs
-  let { available, set, onUpdate }: Props = $props();
-  let reactiveSet = $state(set);
-
-  // callbacks
-  function onOptionSelect(e: Event) {
-    const value = Number((e.target as HTMLSelectElement).value);
-    reactiveSet.push(value);
-
-    onUpdate?.(reactiveSet);
-
-    (e.target as HTMLSelectElement).value = '-';
-  }
-
-  function onBadgeRemove(badge: number) {
-    const index = reactiveSet.indexOf(badge);
-    if (index !== -1) {
-      reactiveSet.splice(index, 1);
-      onUpdate?.(reactiveSet);
-    }
-  }
-</script>
-
-<div class="flex flex-col gap-4">
-  {#if onUpdate}
-    <select class="select select-xs w-min" onchange={onOptionSelect}>
-      <option selected hidden>-</option>
-      {#each Object.entries(available) as [value, badge] (value)}
-        <option {value} hidden={reactiveSet.indexOf(Number(value)) !== -1}>{badge}</option>
-      {/each}
-    </select>
-  {/if}
-  <div class="flex flow flex-wrap gap-2">
-    {#each reactiveSet as badge (badge)}
-      <div class="badge badge-outline gap-1">
-        {#if onUpdate}
-          <button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(badge)}>✕</button>
-        {/if}
-        <span>{available[badge]}</span>
-      </div>
-    {/each}
-  </div>
-</div>
diff --git a/src/app/admin/admins/CreateOrEditPopup.svelte b/src/app/admin/admins/CreateOrEditPopup.svelte
deleted file mode 100644
index 93ae2fa..0000000
--- a/src/app/admin/admins/CreateOrEditPopup.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
-  import Input from '@components/input/Input.svelte';
-  import Badges from './Badges.svelte';
-  import type { Admin } from './types.ts';
-  import { Permissions } from '@util/permissions.ts';
-  import Password from '@components/input/Password.svelte';
-
-  // html bindings
-  let modal: HTMLDialogElement;
-  let modalForm: HTMLFormElement;
-
-  // types
-  interface Props {
-    popupTitle: string;
-    submitButtonTitle: string;
-    confirmPopupTitle: string;
-    confirmPopupMessage: string;
-
-    admin: Admin | null;
-
-    open: boolean;
-
-    onSubmit: (admin: Admin & { password: string }) => void;
-    onClose?: () => void;
-  }
-
-  // consts
-  const availablePermissionBadges = {
-    [Permissions.Admin.value]: 'Admin',
-    [Permissions.Users.value]: 'Users',
-    [Permissions.Reports.value]: 'Reports',
-    [Permissions.Feedback.value]: 'Feedback',
-    [Permissions.Settings.value]: 'Settings',
-    [Permissions.Tools.value]: 'Tools'
-  };
-
-  // inputs
-  let { popupTitle, submitButtonTitle, confirmPopupTitle, confirmPopupMessage, admin, open, onSubmit, onClose }: Props =
-    $props();
-
-  // states
-  let username = $state<string | null>(admin?.username ?? null);
-  let password = $state<string | null>(null);
-  let permissions = $state<number | null>(admin?.permissions ?? 0);
-
-  let submitEnabled = $derived(!!username && (admin || password));
-
-  // lifecycle
-  $effect(() => {
-    if (open) modal.show();
-  });
-
-  // callbacks
-  function onBadgesUpdate(newPermissions: number[]) {
-    permissions = new Permissions(newPermissions).value;
-  }
-
-  function onSaveButtonClick() {
-    $confirmPopupState = {
-      title: confirmPopupTitle,
-      message: confirmPopupMessage,
-      onConfirm: () => {
-        onSubmit({
-          id: admin?.id ?? -1,
-          username: username!,
-          password: password!,
-          permissions: permissions!
-        });
-      }
-    };
-  }
-
-  function onCancelButtonClick(e: Event) {
-    e.preventDefault();
-    modalForm.submit();
-  }
-</script>
-
-<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
-  <form method="dialog" class="modal-box w-min" bind:this={modalForm}>
-    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
-    <div class="space-y-5">
-      <h3 class="text-xl font-geist font-bold">{popupTitle}</h3>
-      <div class="w-full gap-x-4 gap-y-2">
-        <div class="w-[20rem]">
-          <Input type="text" bind:value={username} label="Username" required />
-          <Password bind:value={password} label="Password" required={!admin} />
-        </div>
-        <fieldset class="fieldset">
-          <legend class="fieldset-legend">Berechtigungen</legend>
-          {#key admin}
-            <Badges
-              available={availablePermissionBadges}
-              set={new Permissions(permissions).toNumberArray()}
-              onUpdate={onBadgesUpdate}
-            />
-          {/key}
-        </fieldset>
-      </div>
-      <div>
-        <button
-          class="btn btn-success"
-          class:disabled={!submitEnabled}
-          disabled={!submitEnabled}
-          onclick={onSaveButtonClick}>{submitButtonTitle}</button
-        >
-        <button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
-      </div>
-    </div>
-  </form>
-  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-    <button class="!cursor-default">close</button>
-  </form>
-</dialog>
diff --git a/src/app/admin/admins/SidebarActions.svelte b/src/app/admin/admins/SidebarActions.svelte
index 2701736..09fbfcd 100644
--- a/src/app/admin/admins/SidebarActions.svelte
+++ b/src/app/admin/admins/SidebarActions.svelte
@@ -1,34 +1,48 @@
 <script lang="ts">
-  import { addAdmin, fetchAdmins } from './actions.ts';
   import Icon from '@iconify/svelte';
-  import { onMount } from 'svelte';
-  import CreateOrEditPopup from '@app/admin/admins/CreateOrEditPopup.svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { addAdmin, fetchAdmins } from '@app/admin/admins/admins.ts';
+  import { Permissions } from '@util/permissions.ts';
+
+  // state
+  let createPopupOpen = $state(false);
 
   // lifecycle
-  onMount(() => {
+  $effect(() => {
     fetchAdmins();
   });
-
-  // states
-  let newTeamPopupOpen = $state(false);
 </script>
 
 <div>
-  <button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
     <Icon icon="heroicons:plus-16-solid" />
     <span>Neuer Admin</span>
   </button>
 </div>
 
-{#key newTeamPopupOpen}
-  <CreateOrEditPopup
-    popupTitle="Admin erstellen"
-    submitButtonTitle="Admin erstellen"
-    confirmPopupTitle="Admin erstellen"
-    confirmPopupMessage="Bist du sicher, dass du den Admin erstellen möchtest?"
-    admin={null}
-    open={newTeamPopupOpen}
-    onSubmit={addAdmin}
-    onClose={() => (newTeamPopupOpen = false)}
-  />
-{/key}
+<CrudPopup
+  texts={{
+    title: 'Admin erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Admin erstellen?',
+    confirmPopupMessage: 'Soll der Admin erstellt werden?'
+  }}
+  target={null}
+  keys={[
+    [
+      { key: 'username', type: 'text', label: 'Username', options: { required: true } },
+      { key: 'password', type: 'password', label: 'Passwort', options: { required: true } }
+    ],
+    [
+      {
+        key: 'permissions',
+        type: 'bit-badge',
+        label: 'Berechtigungen',
+        default: 0,
+        options: { available: Permissions.asOptions() }
+      }
+    ]
+  ]}
+  onSubmit={addAdmin}
+  bind:open={createPopupOpen}
+/>
diff --git a/src/app/admin/admins/actions.ts b/src/app/admin/admins/admins.ts
similarity index 73%
rename from src/app/admin/admins/actions.ts
rename to src/app/admin/admins/admins.ts
index 58b945e..d32a427 100644
--- a/src/app/admin/admins/actions.ts
+++ b/src/app/admin/admins/admins.ts
@@ -1,8 +1,15 @@
-import type { Admin } from './types.ts';
-import { actions } from 'astro:actions';
-import { admins } from './state.ts';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
 
+// types
+export type Admins = Exclude<ActionReturnType<typeof actions.admin.admins>['data'], undefined>['admins'];
+export type Admin = Admins[0];
+
+// state
+export const admins = writable<Admin[]>([]);
+
+// actions
 export async function fetchAdmins() {
   const { data, error } = await actions.admin.admins();
   if (error) {
diff --git a/src/app/admin/admins/state.ts b/src/app/admin/admins/state.ts
deleted file mode 100644
index 2a28ea8..0000000
--- a/src/app/admin/admins/state.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { Admin } from './types.ts';
-import { writable } from 'svelte/store';
-
-export const admins = writable<Admin[]>([]);
diff --git a/src/app/admin/admins/types.ts b/src/app/admin/admins/types.ts
deleted file mode 100644
index b27e4e3..0000000
--- a/src/app/admin/admins/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { ActionReturnType, actions } from 'astro:actions';
-
-export type Admins = Exclude<ActionReturnType<typeof actions.admin.admins>['data'], undefined>['admins'];
-export type Admin = Admins[0];
diff --git a/src/app/admin/feedback/BottomBar.svelte b/src/app/admin/feedback/BottomBar.svelte
index f7f2586..e1521d2 100644
--- a/src/app/admin/feedback/BottomBar.svelte
+++ b/src/app/admin/feedback/BottomBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Feedback } from './types.ts';
   import Input from '@components/input/Input.svelte';
   import Textarea from '@components/input/Textarea.svelte';
+  import type { Feedback } from '@app/admin/feedback/feedback.ts';
 
   // types
   interface Props {
@@ -20,7 +20,7 @@
   <div class="w-96">
     <Input value={feedback?.event} label="Event" readonly />
     <Input value={feedback?.title} label="Titel" readonly />
-    <Input value={feedback?.user?.username} label="Nutzer" readonly />
+    <Input value={feedback?.username} label="Nutzer" readonly />
   </div>
   <div class="divider divider-horizontal"></div>
   <div class="w-full">
diff --git a/src/app/admin/feedback/Feedback.svelte b/src/app/admin/feedback/Feedback.svelte
index 4e9a477..9393b73 100644
--- a/src/app/admin/feedback/Feedback.svelte
+++ b/src/app/admin/feedback/Feedback.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import BottomBar from './BottomBar.svelte';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import { feedbacks } from './state.ts';
-  import { fetchFeedbacks } from './actions.ts';
+  import { feedbacks, fetchFeedbacks, type Feedback } from '@app/admin/feedback/feedback.ts';
   import { onMount } from 'svelte';
-  import type { Feedback } from './types.ts';
+  import DataTable from '@components/admin/table/DataTable.svelte';
 
+  // consts
   // consts
   const dateFormat = new Intl.DateTimeFormat('de-DE', {
     year: 'numeric',
@@ -25,29 +23,20 @@
   });
 </script>
 
-<div class="min-h-[70vh] max-h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={feedbacks}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 10%">Event</SortableTh>
-        <SortableTh style="width: 20%" key="user.username">Nutzer</SortableTh>
-        <SortableTh style="width: 20%" key="lastChanged">Datum</SortableTh>
-        <SortableTh style="width: 45%">Inhalt</SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $feedbacks as feedback, i (feedback.id)}
-        <tr class="hover:bg-base-200" onclick={() => (activeFeedback = feedback)}>
-          <td>{i + 1}</td>
-          <td>{feedback.event}</td>
-          <td>{feedback.user?.username}</td>
-          <td>{dateFormat.format(new Date(feedback.lastChanged))}</td>
-          <td>{feedback.content}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+{#snippet date(value: string)}
+  {dateFormat.format(new Date(value))}
+{/snippet}
+
+<DataTable
+  data={feedbacks}
+  count={true}
+  keys={[
+    { key: 'event', label: 'Event', width: 10, sortable: true },
+    { key: 'username', label: 'Nutzer', width: 10, sortable: true },
+    { key: 'lastChanged', label: 'Datum', width: 10, sortable: true, transform: date },
+    { key: 'content', label: 'Inhalt', width: 10 }
+  ]}
+  onClick={(feedback) => (activeFeedback = feedback)}
+/>
 
 <BottomBar feedback={activeFeedback} />
diff --git a/src/app/admin/feedback/actions.ts b/src/app/admin/feedback/feedback.ts
similarity index 50%
rename from src/app/admin/feedback/actions.ts
rename to src/app/admin/feedback/feedback.ts
index 306a96c..dc25886 100644
--- a/src/app/admin/feedback/actions.ts
+++ b/src/app/admin/feedback/feedback.ts
@@ -1,7 +1,15 @@
-import { actions } from 'astro:actions';
-import { feedbacks } from './state.ts';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
 
+// types
+export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
+export type Feedback = Feedbacks[0];
+
+// state
+export const feedbacks = writable<Feedbacks>([]);
+
+// actions
 export async function fetchFeedbacks(reporter?: string | null, reported?: string | null) {
   const { data, error } = await actions.feedback.feedbacks({ reporter: reporter, reported: reported });
   if (error) {
diff --git a/src/app/admin/feedback/state.ts b/src/app/admin/feedback/state.ts
deleted file mode 100644
index 583752e..0000000
--- a/src/app/admin/feedback/state.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Feedbacks } from './types.ts';
-
-export const feedbacks = writable<Feedbacks>([]);
diff --git a/src/app/admin/feedback/types.ts b/src/app/admin/feedback/types.ts
deleted file mode 100644
index ce327f9..0000000
--- a/src/app/admin/feedback/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { ActionReturnType, actions } from 'astro:actions';
-
-export type Feedbacks = Exclude<ActionReturnType<typeof actions.feedback.feedbacks>['data'], undefined>['feedbacks'];
-export type Feedback = Feedbacks[0];
diff --git a/src/app/admin/reports/BottomBar.svelte b/src/app/admin/reports/BottomBar.svelte
index 06fcd4f..5d2cfee 100644
--- a/src/app/admin/reports/BottomBar.svelte
+++ b/src/app/admin/reports/BottomBar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Report, ReportStatus, StrikeReasons } from './types.ts';
+  import type { Report, ReportStatus, StrikeReasons } from './reports.ts';
   import Input from '@components/input/Input.svelte';
   import Textarea from '@components/input/Textarea.svelte';
   import Select from '@components/input/Select.svelte';
   import TeamSearch from '@components/admin/search/TeamSearch.svelte';
-  import { editReportStatus, getReportStatus } from '@app/admin/reports/actions.ts';
+  import { editReportStatus, getReportStatus } from '@app/admin/reports/reports.ts';
   import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
 
   // types
diff --git a/src/app/admin/reports/CreatePopup.svelte b/src/app/admin/reports/CreatePopup.svelte
deleted file mode 100644
index 406a35a..0000000
--- a/src/app/admin/reports/CreatePopup.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-  import Input from '@components/input/Input.svelte';
-  import TeamSearch from '@components/admin/search/TeamSearch.svelte';
-  import Textarea from '@components/input/Textarea.svelte';
-  import Checkbox from '@components/input/Checkbox.svelte';
-  import type { Report } from './types.ts';
-  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
-
-  // html bindings
-  let modal: HTMLDialogElement;
-  let modalForm: HTMLFormElement;
-
-  // types
-  interface Props {
-    open: boolean;
-
-    onSubmit: (report: Report) => void;
-    onClose?: () => void;
-  }
-
-  // input
-  let { open, onSubmit, onClose }: Props = $props();
-
-  // form
-  let reason = $state<string | null>(null);
-  let body = $state<string | null>(null);
-  let editable = $state<boolean>(true);
-  let reporter = $state<Report['reporter'] | null>(null);
-  let reported = $state<Report['reported'] | null>(null);
-
-  let submitEnabled = $derived(!!(reason && reporter));
-
-  // lifecycle
-  $effect(() => {
-    if (open) modal.show();
-  });
-
-  // callbacks
-  async function onSaveButtonClick(e: Event) {
-    e.preventDefault();
-    $confirmPopupState = {
-      title: 'Report erstellen',
-      message: 'Bist du sicher, dass du den Report erstellen möchtest?',
-      onConfirm: () => {
-        modalForm.submit();
-        onSubmit({
-          id: -1,
-          reason: reason!,
-          body: body!,
-          reporter: reporter!,
-          reported: reported!,
-          createdAt: editable ? null : new Date().toISOString(),
-          status: null
-        });
-      }
-    };
-  }
-
-  function onCancelButtonClick(e: Event) {
-    e.preventDefault();
-    modalForm.submit();
-  }
-</script>
-
-<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
-  <form method="dialog" class="modal-box" bind:this={modalForm}>
-    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
-    <div class="space-y-5">
-      <h3 class="text-xt font-geist font-bold">Neuer Report</h3>
-      <div>
-        <div class="grid grid-cols-2 gap-4">
-          <TeamSearch label="Report Team" required mustMatch onSubmit={(team) => (reporter = team)} />
-          <TeamSearch label="Reportetes Team" mustMatch onSubmit={(team) => (reported = team)} />
-        </div>
-        <div class="grid grid-cols-1">
-          <Input label="Grund" bind:value={reason} required dynamicWidth />
-          <Textarea label="Inhalt" bind:value={body} rows={5} dynamicWidth />
-        </div>
-        <div class="grid grid-cols-1 mt-2">
-          <Checkbox label="Report kann bearbeitet werden" bind:checked={editable} />
-        </div>
-      </div>
-      <div>
-        <button
-          class="btn btn-success"
-          class:disabled={!submitEnabled}
-          disabled={!submitEnabled}
-          onclick={onSaveButtonClick}>Erstellen</button
-        >
-        <button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
-      </div>
-    </div>
-  </form>
-  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-    <button class="!cursor-default">close</button>
-  </form>
-</dialog>
diff --git a/src/app/admin/reports/Reports.svelte b/src/app/admin/reports/Reports.svelte
index 6905ea8..9d76997 100644
--- a/src/app/admin/reports/Reports.svelte
+++ b/src/app/admin/reports/Reports.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import { reports } from './state.ts';
-  import type { Report, StrikeReasons } from './types.ts';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
   import BottomBar from '@app/admin/reports/BottomBar.svelte';
   import { onMount } from 'svelte';
-  import { getStrikeReasons } from '@app/admin/reports/actions.ts';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';
 
   // states
   let strikeReasons = $state<StrikeReasons>([]);
@@ -17,33 +14,18 @@
   });
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={reports}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh>Grund</SortableTh>
-        <SortableTh>Report Team</SortableTh>
-        <SortableTh>Reportetes Team</SortableTh>
-        <SortableTh>Datum</SortableTh>
-        <SortableTh>Bearbeitungsstatus</SortableTh>
-        <SortableTh style="width: 5%"></SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $reports as report, i (report.id)}
-        <tr class="hover:bg-base-200" onclick={() => (activeReport = report)}>
-          <td>{i + 1}</td>
-          <td>{report.reason}</td>
-          <td>{report.reporter.name}</td>
-          <td>{report.reported?.name}</td>
-          <td>{report.createdAt}</td>
-          <td>{report.status?.status}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<DataTable
+  data={reports}
+  count={true}
+  keys={[
+    { key: 'reason', label: 'Grund' },
+    { key: 'reporter.name', label: 'Report Team' },
+    { key: 'reported.name', label: 'Reportetes Team' },
+    { key: 'createdAt', label: 'Datum' },
+    { key: 'report.status?.status', label: 'Bearbeitungsstatus' }
+  ]}
+  onClick={(report) => (activeReport = report)}
+/>
 
 {#key activeReport}
   <BottomBar {strikeReasons} report={activeReport} />
diff --git a/src/app/admin/reports/SidebarActions.svelte b/src/app/admin/reports/SidebarActions.svelte
index 59a3300..8412d1b 100644
--- a/src/app/admin/reports/SidebarActions.svelte
+++ b/src/app/admin/reports/SidebarActions.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import Input from '@components/input/Input.svelte';
-  import { addReport, fetchReports } from '@app/admin/reports/actions.ts';
-  import CreatePopup from '@app/admin/reports/CreatePopup.svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { addReport, fetchReports } from '@app/admin/reports/reports.ts';
 
   // states
   let reporterUsernameFilter = $state<string | null>(null);
   let reportedUsernameFilter = $state<string | null>(null);
 
-  let newReportPopupOpen = $state(false);
+  let createPopupOpen = $state(false);
 
   // lifecycle
   $effect(() => {
@@ -23,12 +23,48 @@
     <Input bind:value={reportedUsernameFilter} label="Reporteter Spieler" />
   </fieldset>
   <div class="divider my-1"></div>
-  <button class="btn btn-soft w-full" onclick={() => (newReportPopupOpen = true)}>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
     <Icon icon="heroicons:plus-16-solid" />
     <span>Neuer Report</span>
   </button>
 </div>
 
-{#key newReportPopupOpen}
-  <CreatePopup open={newReportPopupOpen} onSubmit={addReport} onClose={() => (newReportPopupOpen = false)} />
-{/key}
+<CrudPopup
+  texts={{
+    title: 'Report erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Report erstellen?',
+    confirmPopupMessage: 'Soll der Report erstellt werden?'
+  }}
+  target={null}
+  keys={[
+    [
+      {
+        key: 'reporter',
+        type: 'team-search',
+        label: 'Report Team',
+        default: { id: null, name: null },
+        options: { required: true, mustMatch: true, validate: (team) => team?.id != null }
+      },
+      {
+        key: 'reported',
+        type: 'team-search',
+        label: 'Reportetes Team',
+        default: { id: null, name: null },
+        options: { mustMatch: true, validate: (team) => team?.id != null }
+      }
+    ],
+    [{ key: 'reason', type: 'text', label: 'Grund', options: { required: true, dynamicWidth: true } }],
+    [{ key: 'body', type: 'textarea', label: 'Inhalt', default: null, options: { rows: 5, dynamicWidth: true } }],
+    [
+      {
+        key: 'createdAt',
+        type: 'checkbox',
+        label: 'Report kann bearbeitet werden',
+        options: { convert: (v) => (v ? new Date().toISOString() : null) }
+      }
+    ]
+  ]}
+  onSubmit={addReport}
+  bind:open={createPopupOpen}
+/>
diff --git a/src/app/admin/reports/actions.ts b/src/app/admin/reports/reports.ts
similarity index 72%
rename from src/app/admin/reports/actions.ts
rename to src/app/admin/reports/reports.ts
index 737f90c..f8d3974 100644
--- a/src/app/admin/reports/actions.ts
+++ b/src/app/admin/reports/reports.ts
@@ -1,8 +1,25 @@
-import { actions } from 'astro:actions';
-import { reports } from './state.ts';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
-import type { Report, ReportStatus } from './types.ts';
 
+// types
+export type Reports = Exclude<ActionReturnType<typeof actions.report.reports>['data'], undefined>['reports'];
+export type Report = Reports[0];
+
+export type ReportStatus = Exclude<
+  Exclude<ActionReturnType<typeof actions.report.reportStatus>['data'], undefined>['reportStatus'],
+  null
+>;
+
+export type StrikeReasons = Exclude<
+  ActionReturnType<typeof actions.report.strikeReasons>['data'],
+  undefined
+>['strikeReasons'];
+
+// state
+export const reports = writable<Reports>([]);
+
+// actions
 export async function fetchReports(reporterUsername: string | null, reportedUsername: string | null) {
   const { data, error } = await actions.report.reports({ reporter: reporterUsername, reported: reportedUsername });
   if (error) {
diff --git a/src/app/admin/reports/state.ts b/src/app/admin/reports/state.ts
deleted file mode 100644
index 35fc4ed..0000000
--- a/src/app/admin/reports/state.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Reports } from './types.ts';
-
-export const reports = writable<Reports>([]);
diff --git a/src/app/admin/reports/types.ts b/src/app/admin/reports/types.ts
deleted file mode 100644
index ffe7cf7..0000000
--- a/src/app/admin/reports/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ActionReturnType, actions } from 'astro:actions';
-
-export type Reports = Exclude<ActionReturnType<typeof actions.report.reports>['data'], undefined>['reports'];
-export type Report = Reports[0];
-
-export type ReportStatus = Exclude<
-  Exclude<ActionReturnType<typeof actions.report.reportStatus>['data'], undefined>['reportStatus'],
-  null
->;
-
-export type StrikeReasons = Exclude<
-  ActionReturnType<typeof actions.report.strikeReasons>['data'],
-  undefined
->['strikeReasons'];
diff --git a/src/app/admin/teams/CreateOrEditPopup.svelte b/src/app/admin/teams/CreateOrEditPopup.svelte
deleted file mode 100644
index c0f6198..0000000
--- a/src/app/admin/teams/CreateOrEditPopup.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-  import UserSearch from '@components/admin/search/UserSearch.svelte';
-  import Input from '@components/input/Input.svelte';
-  import type { Team } from '@app/admin/teams/types.ts';
-  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
-
-  // html bindings
-  let modal: HTMLDialogElement;
-  let modalForm: HTMLFormElement;
-
-  // types
-  interface Props {
-    popupTitle: string;
-    submitButtonTitle: string;
-    confirmPopupTitle: string;
-    confirmPopupMessage: string;
-
-    team: Team | null;
-
-    open: boolean;
-
-    onSubmit: (team: Team) => void;
-    onClose?: () => void;
-  }
-
-  // inputs
-  let { popupTitle, submitButtonTitle, confirmPopupTitle, confirmPopupMessage, team, open, onSubmit, onClose }: Props =
-    $props();
-
-  // states
-  let name = $state<string | null>(team?.name ?? null);
-  let color = $state<string | null>(team?.color ?? '#000000');
-  let lastJoined = $state<string | null>(team?.lastJoined ?? null);
-  let memberOne = $state<Team['memberOne']>(team?.memberOne ?? ({ username: null } as unknown as Team['memberOne']));
-  let memberTwo = $state<Team['memberOne']>(team?.memberTwo ?? ({ username: null } as unknown as Team['memberOne']));
-
-  let submitEnabled = $derived(!!(name && color && memberOne.username && memberTwo.username));
-
-  // lifecycle
-  $effect(() => {
-    if (open) modal.show();
-  });
-
-  // callbacks
-  async function onSaveButtonClick(e: Event) {
-    e.preventDefault();
-    $confirmPopupState = {
-      title: confirmPopupTitle,
-      message: confirmPopupMessage,
-      onConfirm: () => {
-        modalForm.submit();
-        onSubmit({
-          id: team?.id ?? -1,
-          name: name!,
-          color: color!,
-          lastJoined: lastJoined!,
-          memberOne: memberOne!,
-          memberTwo: memberTwo!
-        });
-      }
-    };
-  }
-
-  function onCancelButtonClick(e: Event) {
-    e.preventDefault();
-    modalForm.submit();
-  }
-</script>
-
-<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
-  <form method="dialog" class="modal-box overflow-visible" bind:this={modalForm}>
-    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
-    <div class="space-y-5">
-      <h3 class="text-xl font-geist font-bold">{popupTitle}</h3>
-      <div class="w-full flex flex-col">
-        <div class="grid grid-cols-2 gap-4">
-          <Input type="color" label="Farbe" bind:value={color} required />
-          <Input type="text" label="Name" bind:value={name} required />
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <UserSearch
-            label="Spieler 1"
-            onSubmit={(user) => {
-              if (user) memberOne = user;
-            }}
-            bind:value={memberOne.username}
-            required
-            mustMatch
-          />
-          <UserSearch
-            label="Spieler 2"
-            onSubmit={(user) => {
-              if (user) memberTwo = user;
-            }}
-            bind:value={memberTwo.username}
-            required
-          />
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <Input type="datetime-local" label="Zuletzt gejoined" bind:value={lastJoined}></Input>
-        </div>
-      </div>
-      <div>
-        <button
-          class="btn btn-success"
-          class:disabled={!submitEnabled}
-          disabled={!submitEnabled}
-          onclick={onSaveButtonClick}>{submitButtonTitle}</button
-        >
-        <button class="btn btn-error" type="button" onclick={onCancelButtonClick}>Abbrechen</button>
-      </div>
-    </div>
-  </form>
-  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-    <button class="!cursor-default">close</button>
-  </form>
-</dialog>
diff --git a/src/app/admin/teams/SidebarActions.svelte b/src/app/admin/teams/SidebarActions.svelte
index bb1ef55..a318b81 100644
--- a/src/app/admin/teams/SidebarActions.svelte
+++ b/src/app/admin/teams/SidebarActions.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import Input from '@components/input/Input.svelte';
   import Icon from '@iconify/svelte';
-  import { addTeam, fetchTeams } from './actions.ts';
-  import CreateOrEditPopup from '@app/admin/teams/CreateOrEditPopup.svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { addTeam, fetchTeams } from '@app/admin/teams/teams.ts';
 
   // states
   let teamNameFilter = $state<string | null>(null);
   let memberUsernameFilter = $state<string | null>(null);
 
-  let newTeamPopupOpen = $state(false);
+  let createPopupOpen = $state(false);
 
   // lifecycle
   $effect(() => {
@@ -23,21 +23,51 @@
     <Input bind:value={memberUsernameFilter} label="Spieler Username" />
   </fieldset>
   <div class="divider my-1"></div>
-  <button class="btn btn-soft w-full" onclick={() => (newTeamPopupOpen = true)}>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
     <Icon icon="heroicons:plus-16-solid" />
     <span>Neues Team</span>
   </button>
 </div>
 
-{#key newTeamPopupOpen}
-  <CreateOrEditPopup
-    popupTitle="Neues Team"
-    submitButtonTitle="Team erstellen"
-    confirmPopupTitle="Team erstellen"
-    confirmPopupMessage="Bist du sicher, dass du das Team erstellen möchtest?"
-    team={null}
-    open={newTeamPopupOpen}
-    onSubmit={addTeam}
-    onClose={() => (newTeamPopupOpen = false)}
-  />
-{/key}
+<CrudPopup
+  texts={{
+    title: 'Team erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Team erstellen?',
+    confirmPopupMessage: 'Sollen das neue Team erstellt werden?'
+  }}
+  target={null}
+  keys={[
+    [
+      { key: 'name', type: 'text', label: 'Name', options: { required: true } },
+      { key: 'color', type: 'color', label: 'Farbe', options: { required: true } }
+    ],
+    [
+      {
+        key: 'memberOne',
+        type: 'user-search',
+        label: 'Spieler 1',
+        default: { id: null, username: '' },
+        options: { required: true, validate: (user) => !!user.username }
+      },
+      {
+        key: 'memberTwo',
+        type: 'user-search',
+        label: 'Spieler 2',
+        default: { id: null, username: '' },
+        options: { required: true, validate: (user) => !!user.username }
+      }
+    ],
+    [
+      {
+        key: 'lastJoined',
+        type: 'datetime-local',
+        label: 'Zuletzt gejoined',
+        default: null,
+        options: { convert: (date) => (date ? date : null) }
+      }
+    ]
+  ]}
+  onSubmit={addTeam}
+  bind:open={createPopupOpen}
+/>
diff --git a/src/app/admin/teams/Teams.svelte b/src/app/admin/teams/Teams.svelte
index 1c2f5fd..f3a7857 100644
--- a/src/app/admin/teams/Teams.svelte
+++ b/src/app/admin/teams/Teams.svelte
@@ -1,65 +1,72 @@
 <script lang="ts">
-  import { teams } from './state.ts';
-  import type { Team } from './types.ts';
-  import { editTeam } from './actions.ts';
-  import Icon from '@iconify/svelte';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import CreateOrEditPopup from '@app/admin/teams/CreateOrEditPopup.svelte';
+  import { addTeam, teams } from '@app/admin/teams/teams.ts';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
 
   // state
-  let editTeamPopupTeam = $state<Team | null>(null);
+  let editPopupTeam = $state(null);
+  let editPopupOpen = $derived(!!editPopupTeam);
+
+  // lifecycle
+  $effect(() => {
+    if (!editPopupOpen) editPopupTeam = null;
+  });
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={teams}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 5%">Farbe</SortableTh>
-        <SortableTh style="width: 25%" key="name">Name</SortableTh>
-        <SortableTh style="width: 30%" key="memberOne.username">Spieler 1</SortableTh>
-        <SortableTh style="width: 30%" key="memberTwo.username">Spieler 2</SortableTh>
-        <SortableTh style="width: 5%"></SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $teams as team, i (team.id)}
-        <tr class="hover:bg-base-200">
-          <td>{i + 1}</td>
-          <td>
-            <div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
-          </td>
-          <td>{team.name}</td>
-          {#if team.memberOne.id != null}
-            <td>{team.memberOne.username}</td>
-          {:else}
-            <td class="text-base-content/30">{team.memberOne.username}</td>
-          {/if}
-          {#if team.memberTwo.id != null}
-            <td>{team.memberTwo.username}</td>
-          {:else}
-            <td class="text-base-content/30">{team.memberTwo.username}</td>
-          {/if}
-          <td>
-            <button class="cursor-pointer" onclick={() => (editTeamPopupTeam = team)}>
-              <Icon icon="heroicons:pencil-square" />
-            </button>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+{#snippet color(value: string)}
+  <div class="rounded-sm w-3 h-3" style="background-color: {value}"></div>
+{/snippet}
 
-{#key editTeamPopupTeam}
-  <CreateOrEditPopup
-    popupTitle="Team bearbeiten"
-    submitButtonTitle="Team bearbeiten"
-    confirmPopupTitle="Team bearbeiten"
-    confirmPopupMessage="Bist du sicher, dass du das Team bearbeiten möchtest?"
-    team={editTeamPopupTeam}
-    open={editTeamPopupTeam != null}
-    onSubmit={editTeam}
-  />
-{/key}
+<DataTable
+  data={teams}
+  count={true}
+  keys={[
+    { key: 'color', label: 'Farbe', width: 5, transform: color },
+    { key: 'name', label: 'Name', width: 25 },
+    { key: 'memberOne.username', label: 'Spieler 1', width: 30 },
+    { key: 'memberTwo.username', label: 'Spieler 2', width: 30 }
+  ]}
+  onEdit={(team) => (editPopupTeam = team)}
+/>
+
+<CrudPopup
+  texts={{
+    title: 'Team bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern?',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={editPopupTeam}
+  keys={[
+    [
+      { key: 'name', type: 'text', label: 'Name', options: { required: true } },
+      { key: 'color', type: 'color', label: 'Farbe', options: { required: true } }
+    ],
+    [
+      {
+        key: 'memberOne',
+        type: 'user-search',
+        label: 'Spieler 1',
+        options: { required: true, validate: (user) => !!user.username }
+      },
+      {
+        key: 'memberTwo',
+        type: 'user-search',
+        label: 'Spieler 2',
+        default: { id: null, username: null },
+        options: { required: true, validate: (user) => !!user.username }
+      }
+    ],
+    [
+      {
+        key: 'lastJoined',
+        type: 'datetime-local',
+        label: 'Zuletzt gejoined',
+        default: { id: null, username: null },
+        options: { convert: (date) => (date ? date : null) }
+      }
+    ]
+  ]}
+  onSubmit={addTeam}
+  bind:open={editPopupOpen}
+/>
diff --git a/src/app/admin/teams/state.ts b/src/app/admin/teams/state.ts
deleted file mode 100644
index c192e43..0000000
--- a/src/app/admin/teams/state.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { Teams } from './types.ts';
-import { writable } from 'svelte/store';
-
-export const teams = writable<Teams>([]);
diff --git a/src/app/admin/teams/actions.ts b/src/app/admin/teams/teams.ts
similarity index 67%
rename from src/app/admin/teams/actions.ts
rename to src/app/admin/teams/teams.ts
index dfcbe00..d445b28 100644
--- a/src/app/admin/teams/actions.ts
+++ b/src/app/admin/teams/teams.ts
@@ -1,8 +1,17 @@
-import { actions } from 'astro:actions';
-import { teams } from './state.ts';
-import type { Team } from './types.ts';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
 
+// types
+export type Teams = Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
+export type Team = Teams[0];
+
+export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
+
+// state
+export const teams = writable<Teams>([]);
+
+// actions
 export async function fetchTeams(name: string | null, username: string | null) {
   const { data, error } = await actions.team.teams({ name: name, username: username });
   if (error) {
diff --git a/src/app/admin/teams/types.ts b/src/app/admin/teams/types.ts
deleted file mode 100644
index 4294135..0000000
--- a/src/app/admin/teams/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ActionReturnType, actions } from 'astro:actions';
-
-export type Teams = Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
-export type Team = Teams[0];
-
-export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
diff --git a/src/app/admin/users/CreateOrEditPopup.svelte b/src/app/admin/users/CreateOrEditPopup.svelte
deleted file mode 100644
index 8f26bbe..0000000
--- a/src/app/admin/users/CreateOrEditPopup.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
-  import Input from '@components/input/Input.svelte';
-  import { onDestroy } from 'svelte';
-  import type { User } from './types.ts';
-  import { userCreateOrEditPopupState } from './state.ts';
-
-  // html bindings
-  let modal: HTMLDialogElement;
-  let modalForm: HTMLFormElement;
-
-  // input
-  let action = $state<'create' | 'edit' | null>(null);
-  let user = $state({} as User);
-  let onUpdate = $state((_: User) => {});
-
-  // lifecycle
-  const cancel = userCreateOrEditPopupState.subscribe((value) => {
-    if (value && 'create' in value) {
-      action = 'create';
-      user = {
-        id: -1,
-        username: '',
-        firstname: '',
-        lastname: '',
-        birthday: new Date().toISOString().slice(0, 10),
-        telephone: '',
-        uuid: ''
-      };
-      onUpdate = value?.create.onUpdate;
-      modal.show();
-    } else if (value && 'edit' in value) {
-      action = 'edit';
-      user = value.edit.user;
-      onUpdate = value.edit.onUpdate;
-      modal.show();
-    }
-  });
-
-  onDestroy(cancel);
-
-  // texts
-  const texts = {
-    create: {
-      title: 'Nutzer erstellen',
-      buttonTitle: 'Erstellen',
-      confirmPopupTitle: 'Nutzer erstellen?',
-      confirmPopupMessage: 'Sollen der neue Nutzer erstellt werden?'
-    },
-    edit: {
-      title: 'Nutzer bearbeiten',
-      buttonTitle: 'Speichern',
-      confirmPopupTitle: 'Änderunge speichern?',
-      confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
-    },
-    null: {}
-  };
-
-  // callbacks
-  function onSaveButtonClick(e: Event) {
-    e.preventDefault();
-    $confirmPopupState = {
-      title: texts[action!].confirmPopupTitle,
-      message: texts[action!].confirmPopupMessage,
-      onConfirm: () => {
-        modalForm.submit();
-        onUpdate(user);
-      }
-    };
-  }
-</script>
-
-<dialog class="modal" bind:this={modal}>
-  <form method="dialog" class="modal-box" bind:this={modalForm}>
-    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-    <div class="space-y-5">
-      <h3 class="text-xl font-geist font-bold">{texts[action!].title}</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
-        <Input type="text" bind:value={user.firstname} label="Vorname" />
-        <Input type="text" bind:value={user.lastname} label="Nachname" />
-        <Input type="date" bind:value={user.birthday} label="Geburtstag" />
-        <Input type="tel" bind:value={user.telephone} label="Telefonnummer" />
-        <Input type="text" bind:value={user.username} label="Spielername" />
-        <Input type="text" bind:value={user.uuid} label="UUID" />
-      </div>
-      <div>
-        <button class="btn btn-success" onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button>
-        <button class="btn btn-error">Abbrechen</button>
-      </div>
-    </div>
-  </form>
-  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-    <button class="!cursor-default">close</button>
-  </form>
-</dialog>
diff --git a/src/app/admin/users/SidebarActions.svelte b/src/app/admin/users/SidebarActions.svelte
index 503a1fc..18fd468 100644
--- a/src/app/admin/users/SidebarActions.svelte
+++ b/src/app/admin/users/SidebarActions.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
-  import { userCreateOrEditPopupState } from './state.ts';
-  import { addUser, fetchUsers } from './actions.ts';
   import Input from '@components/input/Input.svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { addUser, fetchUsers } from '@app/admin/users/users.ts';
 
+  // states
   let usernameFilter = $state<string | null>(null);
 
+  let createPopupOpen = $state(false);
+
   // lifecycle
   $effect(() => {
     fetchUsers({ username: usernameFilter });
   });
-
-  // callbacks
-  async function onNewUserButtonClick() {
-    $userCreateOrEditPopupState = {
-      create: {
-        onUpdate: addUser
-      }
-    };
-  }
 </script>
 
 <div>
@@ -27,8 +21,34 @@
     <Input bind:value={usernameFilter} label="Username" />
   </fieldset>
   <div class="divider my-1"></div>
-  <button class="btn btn-soft w-full" onclick={() => onNewUserButtonClick()}>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
     <Icon icon="heroicons:plus-16-solid" />
     <span>Neuer Nutzer</span>
   </button>
 </div>
+
+<CrudPopup
+  texts={{
+    title: 'Nutzer erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Nutzer erstellen?',
+    confirmPopupMessage: 'Sollen der neue Nutzer erstellt werden?'
+  }}
+  target={null}
+  keys={[
+    [
+      { key: 'firstname', type: 'text', label: 'Vorname', options: { required: true } },
+      { key: 'lastname', type: 'text', label: 'Nachname', options: { required: true } }
+    ],
+    [
+      { key: 'birthday', type: 'date', label: 'Geburtstag', options: { required: true } },
+      { key: 'telephone', type: 'tel', label: 'Telefonnummer', default: null }
+    ],
+    [
+      { key: 'username', type: 'text', label: 'Spielername', options: { required: true } },
+      { key: 'uuid', type: 'text', label: 'UUID', default: null }
+    ]
+  ]}
+  onSubmit={addUser}
+  bind:open={createPopupOpen}
+/>
diff --git a/src/app/admin/users/Users.svelte b/src/app/admin/users/Users.svelte
index 2a9f022..1d88601 100644
--- a/src/app/admin/users/Users.svelte
+++ b/src/app/admin/users/Users.svelte
@@ -1,56 +1,54 @@
 <script lang="ts">
-  import Icon from '@iconify/svelte';
-  import CreateOrEditPopup from './CreateOrEditPopup.svelte';
-  import type { User } from './types.ts';
-  import { userCreateOrEditPopupState, users } from './state.ts';
-  import { editUser } from './actions.ts';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import { editUser, users } from '@app/admin/users/users.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
 
-  // callbacks
-  async function onUserEditButtonClick(user: User) {
-    $userCreateOrEditPopupState = {
-      edit: {
-        user: user,
-        onUpdate: editUser
-      }
-    };
-  }
+  // state
+  let editPopupUser = $state(null);
+  let editPopupOpen = $derived(!!editPopupUser);
+
+  // lifecycle
+  $effect(() => {
+    if (!editPopupOpen) editPopupUser = null;
+  });
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={users}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 15%" key="firstname">Vorname</SortableTh>
-        <SortableTh style="width: 15%" key="lastname">Nachname</SortableTh>
-        <SortableTh style="width: 5%" key="birthday">Geburtstag</SortableTh>
-        <SortableTh style="width: 12%" key="phone">Telefon</SortableTh>
-        <SortableTh style="width: 20%" key="username">Username</SortableTh>
-        <SortableTh style="width: 23%">UUID</SortableTh>
-        <SortableTh style="width: 5%"></SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $users as user, i (user.id)}
-        <tr class="hover:bg-base-200">
-          <td>{i + 1}</td>
-          <td>{user.firstname}</td>
-          <td>{user.lastname}</td>
-          <td>{user.birthday}</td>
-          <td>{user.telephone}</td>
-          <td>{user.username}</td>
-          <td>{user.uuid}</td>
-          <td>
-            <button class="cursor-pointer" onclick={() => onUserEditButtonClick(user)}>
-              <Icon icon="heroicons:pencil-square" />
-            </button>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<DataTable
+  data={users}
+  count={true}
+  keys={[
+    { key: 'firstname', label: 'Vorname', width: 15, sortable: true },
+    { key: 'lastname', label: 'Nachname', width: 15, sortable: true },
+    { key: 'birthday', label: 'Geburtstag', width: 5, sortable: true },
+    { key: 'telephone', label: 'Telefon', width: 12, sortable: true },
+    { key: 'username', label: 'Username', width: 20, sortable: true },
+    { key: 'uuid', label: 'UUID', width: 23 }
+  ]}
+  onEdit={(user) => (editPopupUser = user)}
+/>
 
-<CreateOrEditPopup />
+<CrudPopup
+  texts={{
+    title: 'Nutzer bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern?',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={editPopupUser}
+  keys={[
+    [
+      { key: 'firstname', type: 'text', label: 'Vorname', options: { required: true } },
+      { key: 'lastname', type: 'text', label: 'Nachname', options: { required: true } }
+    ],
+    [
+      { key: 'birthday', type: 'date', label: 'Geburtstag', options: { required: true } },
+      { key: 'telephone', type: 'tel', label: 'Telefonnummer' }
+    ],
+    [
+      { key: 'username', type: 'text', label: 'Spielername', options: { required: true } },
+      { key: 'uuid', type: 'text', label: 'UUID' }
+    ]
+  ]}
+  onSubmit={editUser}
+  bind:open={editPopupOpen}
+/>
diff --git a/src/app/admin/users/state.ts b/src/app/admin/users/state.ts
deleted file mode 100644
index a87772a..0000000
--- a/src/app/admin/users/state.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UserCreateOrEditPopupState, Users } from './types.ts';
-import { writable } from 'svelte/store';
-
-export const users = writable<Users>([]);
-
-export const userCreateOrEditPopupState = writable<UserCreateOrEditPopupState>(null);
diff --git a/src/app/admin/users/types.ts b/src/app/admin/users/types.ts
deleted file mode 100644
index 46b26da..0000000
--- a/src/app/admin/users/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type ActionReturnType, actions } from 'astro:actions';
-
-export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
-export type User = Users[0];
-
-export type UserCreateOrEditPopupState =
-  | { create: { onUpdate: (user: User) => void } }
-  | { edit: { user: User; onUpdate: (user: User) => void } }
-  | null;
diff --git a/src/app/admin/users/actions.ts b/src/app/admin/users/users.ts
similarity index 79%
rename from src/app/admin/users/actions.ts
rename to src/app/admin/users/users.ts
index 8862a53..60352c4 100644
--- a/src/app/admin/users/actions.ts
+++ b/src/app/admin/users/users.ts
@@ -1,8 +1,15 @@
-import { actions } from 'astro:actions';
-import { users } from './state.ts';
-import type { User } from './types.ts';
+import { writable } from 'svelte/store';
+import { type ActionReturnType, actions } from 'astro:actions';
 import { actionErrorPopup } from '@util/action.ts';
 
+// types
+export type Users = Exclude<ActionReturnType<typeof actions.user.users>['data'], undefined>['users'];
+export type User = Users[0];
+
+// state
+export const users = writable<Users>([]);
+
+// actions
 export async function fetchUsers(options?: { username?: string | null }) {
   const { data, error } = await actions.user.users({ username: options?.username });
   if (error) {
diff --git a/src/app/admin/usersBlocked/CreateOrEditPopup.svelte b/src/app/admin/usersBlocked/CreateOrEditPopup.svelte
deleted file mode 100644
index e1432f6..0000000
--- a/src/app/admin/usersBlocked/CreateOrEditPopup.svelte
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-  import Input from '@components/input/Input.svelte';
-  import Textarea from '@components/input/Textarea.svelte';
-  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
-  import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
-  import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
-  import { onDestroy } from 'svelte';
-
-  // html bindings
-  let modal: HTMLDialogElement;
-  let modalForm: HTMLFormElement;
-
-  // states
-  let action = $state<'create' | 'edit' | null>(null);
-  let blockedUser = $state({} as BlockedUser);
-  let onUpdate = $state((_: BlockedUser) => {});
-
-  let submitEnabled = $derived(!!blockedUser.uuid);
-
-  // lifecycle
-  const cancel = blockedUserCreateOrEditPopupState.subscribe((value) => {
-    if (value && 'create' in value) {
-      action = 'create';
-      blockedUser = {
-        id: -1,
-        uuid: '',
-        comment: null
-      };
-      onUpdate = value?.create.onUpdate;
-      modal.show();
-    } else if (value && 'edit' in value) {
-      action = 'edit';
-      blockedUser = value.edit.blockedUser;
-      onUpdate = value.edit.onUpdate;
-      modal.show();
-    }
-  });
-
-  onDestroy(cancel);
-
-  // texts
-  const texts = {
-    create: {
-      title: 'Blockierten Nutzer erstellen',
-      buttonTitle: 'Erstellen',
-      confirmPopupTitle: 'Nutzer blockieren?',
-      confirmPopupMessage:
-        'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
-    },
-    edit: {
-      title: 'Blockierten Nutzer bearbeiten',
-      buttonTitle: 'Speichern',
-      confirmPopupTitle: 'Änderungen speichern?',
-      confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
-    },
-    null: {}
-  };
-
-  // callbacks
-  async function onSaveButtonClick(e: Event) {
-    e.preventDefault();
-    $confirmPopupState = {
-      title: texts[action!].confirmPopupTitle,
-      message: texts[action!].confirmPopupMessage,
-      onConfirm: () => {
-        modalForm.submit();
-        onUpdate(blockedUser);
-      }
-    };
-  }
-
-  function onCancelButtonClick(e: Event) {
-    e.preventDefault();
-    modalForm.submit();
-  }
-</script>
-
-<dialog class="modal" bind:this={modal}>
-  <form method="dialog" class="modal-box" bind:this={modalForm}>
-    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
-    <div class="space-y-5">
-      <h3 class="text-xt font-geist font-bold">{texts[action!].title}</h3>
-      <div>
-        <Input bind:value={blockedUser.uuid} label="UUID" required dynamicWidth />
-        <Textarea label="Kommentar" bind:value={blockedUser.comment} rows={3} dynamicWidth />
-      </div>
-      <div>
-        <button
-          class="btn btn-success"
-          class:disabled={!submitEnabled}
-          disabled={!submitEnabled}
-          onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button
-        >
-        <button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
-      </div>
-    </div>
-  </form>
-  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
-    <button class="!cursor-default">close</button>
-  </form>
-</dialog>
diff --git a/src/app/admin/usersBlocked/SidebarActions.svelte b/src/app/admin/usersBlocked/SidebarActions.svelte
index 652517f..ccebe61 100644
--- a/src/app/admin/usersBlocked/SidebarActions.svelte
+++ b/src/app/admin/usersBlocked/SidebarActions.svelte
@@ -1,26 +1,37 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
-  import { addBlockedUser, fetchBlockedUsers } from '@app/admin/usersBlocked/actions.ts';
-  import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { fetchBlockedUsers, addBlockedUser } from '@app/admin/usersBlocked/usersBlocked.ts';
+
+  // states
+  let createPopupOpen = $state(false);
 
   // lifecycle
   $effect(() => {
     fetchBlockedUsers();
   });
-
-  // callbacks
-  async function onNewUserButtonClick() {
-    $blockedUserCreateOrEditPopupState = {
-      create: {
-        onUpdate: addBlockedUser
-      }
-    };
-  }
 </script>
 
 <div>
-  <button class="btn btn-soft w-full" onclick={() => onNewUserButtonClick()}>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
     <Icon icon="heroicons:plus-16-solid" />
     <span>Neuer blockierter Nutzer</span>
   </button>
 </div>
+
+<CrudPopup
+  texts={{
+    title: 'Blockierten Nutzer erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Nutzer blockieren',
+    confirmPopupMessage:
+      'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
+  }}
+  target={null}
+  keys={[
+    [{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
+    [{ key: 'comment', type: 'textarea', label: 'Kommentar', default: null, options: { dynamicWidth: true } }]
+  ]}
+  onSubmit={addBlockedUser}
+  bind:open={createPopupOpen}
+/>
diff --git a/src/app/admin/usersBlocked/UsersBlocked.svelte b/src/app/admin/usersBlocked/UsersBlocked.svelte
index 0c9d9fb..5547de0 100644
--- a/src/app/admin/usersBlocked/UsersBlocked.svelte
+++ b/src/app/admin/usersBlocked/UsersBlocked.svelte
@@ -1,48 +1,40 @@
 <script lang="ts">
-  import Icon from '@iconify/svelte';
-  import CreateOrEditPopup from './CreateOrEditPopup.svelte';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
-  import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
-  import { blockedUserCreateOrEditPopupState, blockedUsers } from '@app/admin/usersBlocked/state.ts';
-  import { editBlockedUser } from '@app/admin/usersBlocked/actions.ts';
+  import { blockedUsers, editBlockedUser } from '@app/admin/usersBlocked/usersBlocked.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
 
-  // callbacks
-  async function onBlockedUserEditButtonClick(blockedUser: BlockedUser) {
-    $blockedUserCreateOrEditPopupState = {
-      edit: {
-        blockedUser: blockedUser,
-        onUpdate: editBlockedUser
-      }
-    };
-  }
+  // state
+  let blockedUserEditPopupBlockedUser = $state(null);
+  let blockedUserEditPopupOpen = $derived(!!blockedUserEditPopupBlockedUser);
+
+  // lifecycle
+  $effect(() => {
+    if (!blockedUserEditPopupOpen) blockedUserEditPopupBlockedUser = null;
+  });
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={blockedUsers}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 20%" key="uuid">UUID</SortableTh>
-        <SortableTh style="width: 70%">Kommentar</SortableTh>
-        <SortableTh style="width: 5%"></SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $blockedUsers as blockedUser, i (blockedUser)}
-        <tr class="hover:bg-base-200">
-          <td>{i + 1}</td>
-          <td>{blockedUser.uuid}</td>
-          <td>{blockedUser.comment}</td>
-          <td>
-            <button class="cursor-pointer" onclick={() => onBlockedUserEditButtonClick(blockedUser)}>
-              <Icon icon="heroicons:pencil-square" />
-            </button>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<DataTable
+  data={blockedUsers}
+  count={true}
+  keys={[
+    { key: 'uuid', label: 'UUID', width: 20, sortable: true },
+    { key: 'comment', label: 'Kommentar', width: 70 }
+  ]}
+  onEdit={(blockedUser) => (blockedUserEditPopupBlockedUser = blockedUser)}
+/>
 
-<CreateOrEditPopup />
+<CrudPopup
+  texts={{
+    title: 'Blockierten Nutzer bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={blockedUserEditPopupBlockedUser}
+  keys={[
+    [{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
+    [{ key: 'comment', type: 'textarea', label: 'Kommentar', options: { dynamicWidth: true } }]
+  ]}
+  onSubmit={editBlockedUser}
+  bind:open={blockedUserEditPopupOpen}
+/>
diff --git a/src/app/admin/usersBlocked/state.ts b/src/app/admin/usersBlocked/state.ts
deleted file mode 100644
index 55ff86d..0000000
--- a/src/app/admin/usersBlocked/state.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { writable } from 'svelte/store';
-import type { BlockedUserCreateOrEditPopupState, BlockedUsers } from '@app/admin/usersBlocked/types.ts';
-
-export const blockedUsers = writable<BlockedUsers>([]);
-
-export const blockedUserCreateOrEditPopupState = writable<BlockedUserCreateOrEditPopupState>(null);
diff --git a/src/app/admin/usersBlocked/types.ts b/src/app/admin/usersBlocked/types.ts
deleted file mode 100644
index 36016bc..0000000
--- a/src/app/admin/usersBlocked/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type ActionReturnType, actions } from 'astro:actions';
-
-export type BlockedUsers = Exclude<ActionReturnType<typeof actions.user.blocked>['data'], undefined>['blocked'];
-export type BlockedUser = BlockedUsers[0];
-
-export type BlockedUserCreateOrEditPopupState =
-  | { create: { onUpdate: (blockedUser: BlockedUser) => void } }
-  | { edit: { blockedUser: BlockedUser; onUpdate: (blockedUser: BlockedUser) => void } }
-  | null;
diff --git a/src/app/admin/usersBlocked/actions.ts b/src/app/admin/usersBlocked/usersBlocked.ts
similarity index 62%
rename from src/app/admin/usersBlocked/actions.ts
rename to src/app/admin/usersBlocked/usersBlocked.ts
index 9c89e19..23083bd 100644
--- a/src/app/admin/usersBlocked/actions.ts
+++ b/src/app/admin/usersBlocked/usersBlocked.ts
@@ -1,8 +1,15 @@
-import { actions } from 'astro:actions';
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
 import { actionErrorPopup } from '@util/action.ts';
-import { blockedUsers } from '@app/admin/usersBlocked/state.ts';
-import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
 
+// types
+export type BlockedUsers = Exclude<ActionReturnType<typeof actions.user.blocked>['data'], undefined>['blocked'];
+export type BlockedUser = BlockedUsers[0];
+
+// state
+export const blockedUsers = writable<BlockedUsers>([]);
+
+// actions
 export async function fetchBlockedUsers() {
   const { data, error } = await actions.user.blocked();
   if (error) {
@@ -27,14 +34,14 @@ export async function addBlockedUser(blockedUser: BlockedUser) {
 }
 
 export async function editBlockedUser(blockedUser: BlockedUser) {
-  const { data, error } = await actions.user.editBlocked(blockedUser);
+  const { error } = await actions.user.editBlocked(blockedUser);
   if (error) {
     actionErrorPopup(error);
     return;
   }
 
   blockedUsers.update((old) => {
-    const index = old.findIndex((a) => a.id == user.id);
+    const index = old.findIndex((a) => a.id == blockedUser.id);
     old[index] = blockedUser;
     return old;
   });
diff --git a/src/components/admin/popup/CrudPopup.svelte b/src/components/admin/popup/CrudPopup.svelte
new file mode 100644
index 0000000..dcf8144
--- /dev/null
+++ b/src/components/admin/popup/CrudPopup.svelte
@@ -0,0 +1,255 @@
+<script lang="ts">
+  import Input from '@components/input/Input.svelte';
+  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+  import Textarea from '@components/input/Textarea.svelte';
+  import Password from '@components/input/Password.svelte';
+  import BitBadge from '@components/input/BitBadge.svelte';
+  import UserSearch from '@components/admin/search/UserSearch.svelte';
+  import Checkbox from '@components/input/Checkbox.svelte';
+  import TeamSearch from '@components/admin/search/TeamSearch.svelte';
+
+  // html bindings
+  let modal: HTMLDialogElement;
+  let modalForm: HTMLFormElement;
+
+  // types
+  interface Props<T> {
+    texts: {
+      title: string;
+      submitButtonTitle: string;
+      confirmPopupTitle: string;
+      confirmPopupMessage: string;
+    };
+
+    target: T | null;
+    keys: Key<any>[][];
+
+    onSubmit: (target: T) => void;
+    onClose?: () => void;
+
+    open: boolean;
+  }
+  type Key<T extends KeyInputType> = {
+    key: string;
+    type: T | null;
+    label: string;
+    default?: any;
+    options?: KeyInputTypeOptions<T>;
+  };
+  type KeyInputType =
+    | 'bit-badge'
+    | 'checkbox'
+    | 'color'
+    | 'date'
+    | 'datetime-local'
+    | 'password'
+    | 'tel'
+    | 'team-search'
+    | 'text'
+    | 'textarea'
+    | 'user-search';
+  type KeyInputTypeOptions<T extends KeyInputType> = {
+    ['bit-badge']: {
+      available: Record<number, string>;
+    };
+    ['checkbox']: {};
+    ['color']: {};
+    ['date']: {};
+    ['datetime-local']: {};
+    ['password']: {};
+    ['tel']: {};
+    ['team-search']: {};
+    ['text']: {};
+    ['textarea']: {
+      rows?: boolean;
+    };
+    ['user-search']: {
+      mustMatch?: boolean;
+    };
+  }[T] & {
+    convert?: (value: any) => any;
+    validate?: (value: any) => boolean;
+    required?: boolean;
+    dynamicWidth?: boolean;
+  };
+
+  // input
+  let { texts, target, keys, onSubmit, onClose, open = $bindable() }: Props<any> = $props();
+
+  onInit();
+
+  // state
+  let submitEnabled = $state(false);
+
+  $effect(() => {
+    if (!open) return;
+
+    onInit();
+    modal.show();
+  });
+
+  $effect.pre(() => {
+    if (target == null) onInit();
+    updateSubmitEnabled();
+  });
+
+  // function
+  function onInit() {
+    if (target == null) target = {};
+
+    for (const key of keys) {
+      for (const k of key) {
+        if (k.default !== undefined && target[k.key] === undefined)
+          target[k.key] = k.options?.convert ? k.options.convert(k.default) : k.default;
+      }
+    }
+  }
+
+  function updateSubmitEnabled() {
+    submitEnabled = false;
+    for (const key of keys) {
+      for (const k of key) {
+        if (k.options?.required) {
+          if (k.options?.validate) {
+            if (!k.options.validate(target[k.key])) return;
+          } else {
+            if (!target[k.key]) return;
+          }
+        }
+      }
+    }
+    submitEnabled = true;
+  }
+
+  // callbacks
+  function onBindChange(key: string, value: any, options?: KeyInputTypeOptions<any>) {
+    target[key] = options?.convert ? options.convert(value) : value;
+
+    updateSubmitEnabled();
+  }
+
+  async function onSaveButtonClick(e: Event) {
+    e.preventDefault();
+    $confirmPopupState = {
+      title: texts.confirmPopupTitle,
+      message: texts.confirmPopupMessage,
+      onConfirm: () => {
+        modalForm.submit();
+        onSubmit(target);
+      }
+    };
+  }
+
+  function onCancelButtonClick(e: Event) {
+    e.preventDefault();
+    modalForm.submit();
+  }
+
+  function onModalClose() {
+    setTimeout(() => {
+      open = false;
+      target = null;
+      modalForm.reset();
+      onClose?.();
+    }, 300);
+  }
+</script>
+
+<dialog class="modal" bind:this={modal} onclose={onModalClose}>
+  <form method="dialog" class="modal-box overflow-visible" bind:this={modalForm}>
+    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
+    <div class="space-y-5">
+      <h3 class="text-xl font-geist font-bold">{texts.title}</h3>
+      <div class="w-full flex flex-col">
+        {#each keys as key (key)}
+          <div
+            class="grid grid-flow-col gap-4"
+            class:grid-cols-1={key.length === 1}
+            class:grid-cols-2={key.length === 2}
+          >
+            {#each key as k (k)}
+              {#if k.type === 'color' || k.type === 'date' || k.type === 'datetime-local' || k.type === 'tel' || k.type === 'text'}
+                <Input
+                  type={k.type}
+                  bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                  dynamicWidth={k.options?.dynamicWidth}
+                />
+              {:else if k.type === 'textarea'}
+                <Textarea
+                  bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                  rows={k.options?.rows}
+                  dynamicWidth={k.options?.dynamicWidth}
+                />
+              {:else if k.type === 'checkbox'}
+                <Checkbox
+                  bind:checked={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                />
+              {:else if k.type === 'user-search'}
+                <UserSearch
+                  bind:value={
+                    () =>
+                      target[k.key] ? (target[k.key]['username'] ?? null) : k.default ? k.default['username'] : null,
+                    (v) =>
+                      k.options.mustMatch
+                        ? onBindChange(k.key, { id: null, username: null }, k.options)
+                        : onBindChange(k.key, { id: null, username: v }, k.options)
+                  }
+                  onSubmit={(user) => onBindChange(k.key, user, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                  mustMatch={k.options?.mustMatch}
+                />
+              {:else if k.type === 'team-search'}
+                <TeamSearch
+                  bind:value={
+                    () => (target[k.key] ? (target[k.key]['name'] ?? null) : k.default ? k.default['name'] : null),
+                    (v) =>
+                      k.options.mustMatch
+                        ? onBindChange(k.key, { id: null, name: null, color: null }, k.options)
+                        : onBindChange(k.key, { id: null, name: v, color: null }, k.options)
+                  }
+                  onSubmit={(team) => onBindChange(k.key, team, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                  mustMatch={k.options?.mustMatch}
+                />
+              {:else if k.type === 'password'}
+                <Password
+                  bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
+                  label={k.label}
+                  required={k.options?.required}
+                />
+              {:else if k.type === 'bit-badge'}
+                <BitBadge
+                  available={k.options?.available}
+                  bind:value={
+                    () => (target[k.key] ? (target[k.key]['name'] ?? target[k.key]) : k.default),
+                    (v) => onBindChange(k.key, v, k.options)
+                  }
+                />
+              {/if}
+            {/each}
+          </div>
+        {/each}
+      </div>
+      <div>
+        <button
+          class="btn btn-success"
+          class:disabled={!submitEnabled}
+          disabled={!submitEnabled}
+          onclick={onSaveButtonClick}>{texts.submitButtonTitle}</button
+        >
+        <button class="btn btn-error" type="button" onclick={onCancelButtonClick}>Abbrechen</button>
+      </div>
+    </div>
+  </form>
+  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+    <button class="!cursor-default">close</button>
+  </form>
+</dialog>
diff --git a/src/components/admin/search/Search.svelte b/src/components/admin/search/Search.svelte
index 808f73e..26ceebc 100644
--- a/src/components/admin/search/Search.svelte
+++ b/src/components/admin/search/Search.svelte
@@ -20,7 +20,7 @@
   let { id, value = $bindable(), label, readonly, required, mustMatch, requestSuggestions, onSubmit }: Props = $props();
 
   // states
-  let inputValue = $state(value);
+  let inputValue = $derived(value);
   let suggestions = $state<string[]>([]);
   let matched = $state(false);
 
@@ -38,7 +38,7 @@
     if (suggestion != null) {
       inputValue = value = suggestion;
       matched = true;
-      onSubmit?.(value);
+      onSubmit?.(suggestion);
     } else if (!mustMatch) {
       value = inputValue;
       matched = false;
@@ -52,7 +52,7 @@
   function onSuggestionClick(suggestion: string) {
     inputValue = value = suggestion;
     suggestions = [];
-    onSubmit?.(value);
+    onSubmit?.(suggestion);
   }
 </script>
 
diff --git a/src/components/admin/table/DataTable.svelte b/src/components/admin/table/DataTable.svelte
new file mode 100644
index 0000000..dfcc6f8
--- /dev/null
+++ b/src/components/admin/table/DataTable.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+  import SortableTr from '@components/admin/table/SortableTr.svelte';
+  import SortableTh from '@components/admin/table/SortableTh.svelte';
+  import Icon from '@iconify/svelte';
+  import type { Snippet } from 'svelte';
+  import { getObjectEntryByKey } from '@util/objects.ts';
+
+  // types
+  interface Props<T> {
+    data: Writable<T[]>;
+
+    count?: boolean;
+    keys: {
+      key: string;
+      label: string;
+      width?: number;
+      sortable?: boolean;
+      transform?: Snippet<[T]>;
+    }[];
+
+    onClick?: (t: T) => void;
+    onEdit?: (t: T) => void;
+  }
+
+  // input
+  let { data, count, keys, onClick, onEdit }: Props<any> = $props();
+</script>
+
+<div class="h-screen overflow-x-auto">
+  <table class="table table-pin-rows">
+    <thead>
+      <SortableTr {data}>
+        {#if count}
+          <SortableTh style="width: 5%">#</SortableTh>
+        {/if}
+        {#each keys as key (key.key)}
+          <SortableTh style={key.width ? `width: ${key.width}%` : undefined} key={key.sortable ? key.key : undefined}
+            >{key.label}</SortableTh
+          >
+        {/each}
+        {#if onEdit}
+          <SortableTh style="width: 5%"></SortableTh>
+        {/if}
+      </SortableTr>
+    </thead>
+    <tbody>
+      {#each $data as d, i (d)}
+        <tr class="hover:bg-base-200" onclick={() => onClick?.(d)}>
+          {#if count}
+            <td>{i + 1}</td>
+          {/if}
+          {#each keys as key (key.key)}
+            <td>
+              {#if key.transform}
+                {@render key.transform(getObjectEntryByKey(key.key, d))}
+              {:else}
+                {getObjectEntryByKey(key.key, d)}
+              {/if}
+            </td>
+          {/each}
+          {#if onEdit}
+            <td>
+              <button class="cursor-pointer" onclick={() => onEdit(d)}>
+                <Icon icon="heroicons:pencil-square" />
+              </button>
+            </td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/src/components/admin/table/SortableTr.svelte b/src/components/admin/table/SortableTr.svelte
index 159ee99..bb2991f 100644
--- a/src/components/admin/table/SortableTr.svelte
+++ b/src/components/admin/table/SortableTr.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { setContext, type Snippet } from 'svelte';
   import { type Writable, writable } from 'svelte/store';
+  import { getObjectEntryByKey } from '@util/objects.ts';
 
   // types
   interface Props {
@@ -21,8 +22,8 @@
   function onSort(key: string, order: 'asc' | 'desc') {
     data.update((old) => {
       old.sort((a, b) => {
-        let entryA = getDataEntryByKey(key, a);
-        let entryB = getDataEntryByKey(key, b);
+        let entryA = getObjectEntryByKey(key, a);
+        let entryB = getObjectEntryByKey(key, b);
 
         if (entryA === undefined || entryB === undefined) return 0;
 
@@ -40,16 +41,6 @@
       return old;
     });
   }
-
-  function getDataEntryByKey(key: string, data: { [key: string]: any }): any | undefined {
-    let entry = data;
-    for (const part of key.split('.')) {
-      if ((entry = entry[part]) === undefined) {
-        return undefined;
-      }
-    }
-    return entry;
-  }
 </script>
 
 <tr {...restProps}>
diff --git a/src/components/input/BitBadge.svelte b/src/components/input/BitBadge.svelte
new file mode 100644
index 0000000..0c7abb6
--- /dev/null
+++ b/src/components/input/BitBadge.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface Props {
+    available: Record<number, string>;
+    value: number;
+
+    readonly?: boolean;
+  }
+
+  // inputs
+  let { available, value = $bindable(), readonly }: Props = $props();
+
+  // idk why, but this is needed to trigger loop reactivity
+  let reactiveValue = $derived(value);
+
+  // callbacks
+  function onOptionSelect(e: Event) {
+    const selected = Number((e.target as HTMLSelectElement).value);
+
+    reactiveValue |= selected;
+
+    (e.target as HTMLSelectElement).value = '-';
+  }
+
+  function onBadgeRemove(flag: number) {
+    reactiveValue &= ~flag;
+  }
+</script>
+
+<div class="flex flex-col gap-4">
+  {#if !readonly}
+    <select class="select select-xs w-min" onchange={onOptionSelect}>
+      <option selected hidden>-</option>
+      {#each Object.entries(available) as [flag, badge] (flag)}
+        <option value={flag} hidden={(reactiveValue & Number(flag)) !== 0}>{badge}</option>
+      {/each}
+    </select>
+  {/if}
+  <div class="flex flow flex-wrap gap-2">
+    {#each Object.entries(available) as [flag, badge] (flag)}
+      {#if (reactiveValue & Number(flag)) !== 0}
+        <div class="badge badge-outline gap-1">
+          {#if !readonly}
+            <button class="cursor-pointer" type="button" onclick={() => onBadgeRemove(Number(flag))}>✕</button>
+          {/if}
+          <span>{badge}</span>
+        </div>
+      {/if}
+    {/each}
+  </div>
+</div>
diff --git a/src/db/schema/blockedUser.ts b/src/db/schema/blockedUser.ts
index 528b94e..19e51b7 100644
--- a/src/db/schema/blockedUser.ts
+++ b/src/db/schema/blockedUser.ts
@@ -12,13 +12,13 @@ export const blockedUser = mysqlTable('blocked_user', {
 
 export type AddBlockedUserReq = {
   uuid: string;
-  comment: string | null;
+  comment?: string | null;
 };
 
 export type EditBlockedUserReq = {
   id: number;
   uuid: string;
-  comment: string | null;
+  comment?: string | null;
 };
 
 export type GetBlockedUserByUuidReq = {
diff --git a/src/db/schema/feedback.ts b/src/db/schema/feedback.ts
index 231e707..3d9175d 100644
--- a/src/db/schema/feedback.ts
+++ b/src/db/schema/feedback.ts
@@ -68,10 +68,7 @@ export async function getFeedbacks(db: Database, values: GetFeedbacksReq) {
       content: feedback.content,
       urlHash: feedback.urlHash,
       lastChanged: feedback.lastChanged,
-      user: {
-        id: user.id,
-        username: user.username
-      }
+      username: user.username
     })
     .from(feedback)
     .leftJoin(user, eq(feedback.userId, user.id));
diff --git a/src/util/objects.ts b/src/util/objects.ts
new file mode 100644
index 0000000..9eb8a42
--- /dev/null
+++ b/src/util/objects.ts
@@ -0,0 +1,9 @@
+export function getObjectEntryByKey(key: string, data: { [key: string]: any }): any | undefined {
+  let entry = data;
+  for (const part of key.split('.')) {
+    if ((entry = entry[part]) === undefined) {
+      return undefined;
+    }
+  }
+  return entry;
+}
diff --git a/src/util/permissions.ts b/src/util/permissions.ts
index 223bf7e..1dc0cc9 100644
--- a/src/util/permissions.ts
+++ b/src/util/permissions.ts
@@ -32,16 +32,15 @@ export class Permissions {
     return this.value;
   }
 
-  toNumberArray() {
-    const array = [];
-    if (this.admin) array.push(Permissions.Admin.value);
-    if (this.users) array.push(Permissions.Users.value);
-    if (this.reports) array.push(Permissions.Reports.value);
-    if (this.feedback) array.push(Permissions.Feedback.value);
-    if (this.settings) array.push(Permissions.Settings.value);
-    if (this.tools) array.push(Permissions.Tools.value);
-
-    return array;
+  static asOptions() {
+    return {
+      [Permissions.Admin.value]: 'Admin',
+      [Permissions.Users.value]: 'Users',
+      [Permissions.Reports.value]: 'Reports',
+      [Permissions.Feedback.value]: 'Feedback',
+      [Permissions.Settings.value]: 'Settings',
+      [Permissions.Tools.value]: 'Tools'
+    };
   }
 
   get admin() {