refactor admin crud popups

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} />