initial commit

src/app/admin/reports/Reports.svelte

@@ -0,0 +1,50 @@
+<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';
+
+  // states
+  let strikeReasons = $state<StrikeReasons>([]);
+  let activeReport = $state<Report | null>(null);
+
+  // lifecycle
+  onMount(() => {
+    getStrikeReasons().then((data) => (strikeReasons = data ?? []));
+  });
+</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>
+
+{#key activeReport}
+  <BottomBar {strikeReasons} report={activeReport} />
+{/key}