feat: add delete functionality for leases, catch books, and permits; implement newsletter update feature

apps/web/app/[locale]/home/[account]/fischerei/permits/page.tsx

@@ -1,7 +1,9 @@
 import { createFischereiApi } from '@kit/fischerei/api';
-import { FischereiTabNavigation } from '@kit/fischerei/components';
+import {
+  FischereiTabNavigation,
+  PermitsDataTable,
+} from '@kit/fischerei/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -35,76 +37,10 @@ export default async function PermitsPage({ params }: Props) {
             Erlaubnisscheine und Gewässerkarten verwalten
           </p>
         </div>
-        <Card>
-          <CardHeader>
-            <CardTitle>Erlaubnisscheine ({permits.length})</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {permits.length === 0 ? (
-              <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
-                <h3 className="text-lg font-semibold">
-                  Keine Erlaubnisscheine vorhanden
-                </h3>
-                <p className="text-muted-foreground mt-1 max-w-sm text-sm">
-                  Erstellen Sie Ihren ersten Erlaubnisschein.
-                </p>
-              </div>
-            ) : (
-              <div className="rounded-md border">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="bg-muted/50 border-b">
-                      <th className="p-3 text-left font-medium">Bezeichnung</th>
-                      <th className="p-3 text-left font-medium">Kurzcode</th>
-                      <th className="p-3 text-left font-medium">
-                        Hauptgewässer
-                      </th>
-                      <th className="p-3 text-right font-medium">
-                        Gesamtmenge
-                      </th>
-                      <th className="p-3 text-center font-medium">
-                        Zum Verkauf
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {permits.map((permit: Record<string, unknown>) => {
-                      const waters = permit.waters as Record<
-                        string,
-                        unknown
-                      > | null;
-
-                      return (
-                        <tr
-                          key={String(permit.id)}
-                          className="hover:bg-muted/30 border-b"
-                        >
-                          <td className="p-3 font-medium">
-                            {String(permit.name)}
-                          </td>
-                          <td className="text-muted-foreground p-3">
-                            {String(permit.short_code ?? '—')}
-                          </td>
-                          <td className="p-3">
-                            {waters ? String(waters.name) : '—'}
-                          </td>
-                          <td className="p-3 text-right">
-                            {permit.total_quantity != null
-                              ? String(permit.total_quantity)
-                              : '—'}
-                          </td>
-                          <td className="p-3 text-center">
-                            {permit.is_for_sale ? '✓' : '—'}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+        <PermitsDataTable
+          data={permits as Array<Record<string, unknown>>}
+          accountId={acct.id}
+        />
       </div>
     </CmsPageShell>
   );