rewrite website

src/app/admin/reports/Reports.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import BottomBar from '@app/admin/reports/BottomBar.svelte';
+  import { onMount } from 'svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';
+
+  // consts
+  const dateFormat = new Intl.DateTimeFormat('de-DE', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+
+  // states
+  let strikeReasons = $state<StrikeReasons>([]);
+  let activeReport = $state<Report | null>(null);
+
+  // lifecycle
+  onMount(() => {
+    getStrikeReasons().then((data) => (strikeReasons = data ?? []));
+  });
+</script>
+
+{#snippet date(value: string)}
+  {value ? dateFormat.format(new Date(value)) : ''}
+{/snippet}
+
+{#snippet status(value: null | 'open' | 'closed')}
+  {#if value === 'open'}
+    <p>In Bearbeitung</p>
+  {:else if value === 'closed'}
+    <p>Bearbeitet</p>
+  {:else if value === null}
+    <p>Unbearbeitet</p>
+  {/if}
+{/snippet}
+
+<DataTable
+  data={reports}
+  count={true}
+  keys={[
+    { key: 'reason', label: 'Grund' },
+    { key: 'reporter.username', label: 'Report Ersteller' },
+    { key: 'reported.username', label: 'Reporteter Spieler' },
+    { key: 'createdAt', label: 'Datum', transform: date },
+    { key: 'status.status', label: 'Bearbeitungsstatus', transform: status }
+  ]}
+  onClick={(report) => (activeReport = report)}
+/>
+
+{#key activeReport}
+  <BottomBar {strikeReasons} report={activeReport} />
+{/key}