feat: add invitations management and import wizard; enhance audit logging and member detail fetching

apps/web/app/[locale]/admin/audit/page.tsx

@@ -1,19 +1,214 @@
-export default async function AdminAuditPage() {
-  return (
-    <div className="flex flex-col gap-6">
-      <div>
-        <h1 className="text-2xl font-bold">Protokoll</h1>
-        <p className="text-muted-foreground">
-          Mandantenübergreifendes Änderungsprotokoll
-        </p>
-      </div>
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { createModuleBuilderApi } from '@kit/module-builder/api';
+import { formatDateTime } from '@kit/shared/dates';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+import { Badge } from '@kit/ui/badge';
+import { Button } from '@kit/ui/button';
+import { PageBody, PageHeader } from '@kit/ui/page';
 
-      <div className="rounded-lg border p-6">
-        <p className="text-muted-foreground text-sm">
-          Alle Datenänderungen (Erstellen, Ändern, Löschen, Sperren) über alle
-          Mandanten hinweg. Filtert nach Zeitraum, Benutzer, Tabelle und Aktion.
-        </p>
+interface SearchParams {
+  action?: string;
+  table?: string;
+  page?: string;
+}
+
+interface AdminAuditPageProps {
+  searchParams: Promise<SearchParams>;
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  insert: 'Erstellen',
+  update: 'Ändern',
+  delete: 'Löschen',
+  lock: 'Sperren',
+};
+
+const ACTION_COLORS: Record<
+  string,
+  'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+  insert: 'default',
+  update: 'secondary',
+  delete: 'destructive',
+  lock: 'outline',
+};
+
+async function AuditPage(props: AdminAuditPageProps) {
+  const searchParams = await props.searchParams;
+  const client = getSupabaseServerAdminClient();
+  const api = createModuleBuilderApi(client);
+
+  const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
+
+  const result = await api.audit.query({
+    action: searchParams.action || undefined,
+    tableName: searchParams.table || undefined,
+    page,
+    pageSize: 50,
+  });
+
+  const totalPages = Math.ceil(result.total / result.pageSize);
+
+  return (
+    <PageBody>
+      <PageHeader
+        title="Protokoll"
+        description="Mandantenübergreifendes Änderungsprotokoll"
+      />
+
+      <div className="space-y-4">
+        {/* Filters */}
+        <AuditFilters
+          currentAction={searchParams.action}
+          currentTable={searchParams.table}
+        />
+
+        {/* Results table */}
+        <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">Zeitpunkt</th>
+                <th className="p-3 text-left font-medium">Aktion</th>
+                <th className="p-3 text-left font-medium">Tabelle</th>
+                <th className="p-3 text-left font-medium">Datensatz-ID</th>
+                <th className="p-3 text-left font-medium">Benutzer-ID</th>
+              </tr>
+            </thead>
+            <tbody>
+              {result.data.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={5}
+                    className="text-muted-foreground p-8 text-center"
+                  >
+                    Keine Einträge gefunden.
+                  </td>
+                </tr>
+              ) : (
+                result.data.map((entry) => (
+                  <tr key={entry.id} className="border-b">
+                    <td className="p-3 text-xs">
+                      {formatDateTime(entry.created_at)}
+                    </td>
+                    <td className="p-3">
+                      <Badge
+                        variant={
+                          ACTION_COLORS[entry.action as string] ?? 'secondary'
+                        }
+                      >
+                        {ACTION_LABELS[entry.action as string] ??
+                          String(entry.action)}
+                      </Badge>
+                    </td>
+                    <td className="p-3 font-mono text-xs">
+                      {String(entry.table_name)}
+                    </td>
+                    <td className="p-3 font-mono text-xs">
+                      {String(entry.record_id).slice(0, 8)}...
+                    </td>
+                    <td className="p-3 font-mono text-xs">
+                      {String(entry.user_id).slice(0, 8)}...
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between">
+            <p className="text-muted-foreground text-sm">
+              Seite {page} von {totalPages} ({result.total} Einträge)
+            </p>
+            <div className="flex gap-2">
+              {page > 1 && (
+                <PaginationLink
+                  page={page - 1}
+                  action={searchParams.action}
+                  table={searchParams.table}
+                  label="Zurück"
+                />
+              )}
+              {page < totalPages && (
+                <PaginationLink
+                  page={page + 1}
+                  action={searchParams.action}
+                  table={searchParams.table}
+                  label="Weiter"
+                />
+              )}
+            </div>
+          </div>
+        )}
       </div>
+    </PageBody>
+  );
+}
+
+function AuditFilters({
+  currentAction,
+  currentTable,
+}: {
+  currentAction?: string;
+  currentTable?: string;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <form className="flex items-center gap-3">
+        <select
+          name="action"
+          defaultValue={currentAction ?? ''}
+          className="border-input bg-background flex h-9 rounded-md border px-3 py-1 text-sm shadow-sm"
+        >
+          <option value="">Alle Aktionen</option>
+          <option value="insert">Erstellen</option>
+          <option value="update">Ändern</option>
+          <option value="delete">Löschen</option>
+          <option value="lock">Sperren</option>
+        </select>
+
+        <input
+          name="table"
+          type="text"
+          placeholder="Tabelle filtern..."
+          defaultValue={currentTable ?? ''}
+          className="border-input bg-background flex h-9 w-48 rounded-md border px-3 py-1 text-sm shadow-sm"
+        />
+
+        <Button type="submit" variant="outline" size="sm">
+          Filtern
+        </Button>
+      </form>
     </div>
   );
 }
+
+function PaginationLink({
+  page,
+  action,
+  table,
+  label,
+}: {
+  page: number;
+  action?: string;
+  table?: string;
+  label: string;
+}) {
+  const params = new URLSearchParams();
+  params.set('page', String(page));
+  if (action) params.set('action', action);
+  if (table) params.set('table', table);
+
+  return (
+    <a href={`?${params.toString()}`}>
+      <Button variant="outline" size="sm">
+        {label}
+      </Button>
+    </a>
+  );
+}
+
+export default AdminGuard(AuditPage);