328f042307
Next.js 15 App Router mit öffentlicher Übersicht und geschütztem Admin-Bereich zur Pflege von Datenschutzerklärungen nach Art. 12ff. DSGVO. - Oberfläche auf Basis von shadcn/ui, Inter lokal eingebunden - Prisma/SQLite, Auth.js mit Credentials-Provider und Rollen - Massenimport der Merkblätter des Amtes Leezen aus PDF - Docker-Image (standalone) und Gitea-Workflow zur Veröffentlichung Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
472 lines
16 KiB
TypeScript
472 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useMemo, useState } from "react"
|
||
import {
|
||
ArrowDown,
|
||
ArrowUp,
|
||
Eye,
|
||
EyeOff,
|
||
FileText,
|
||
LogOut,
|
||
MoreHorizontal,
|
||
Pencil,
|
||
Plus,
|
||
Search,
|
||
Trash2,
|
||
Users,
|
||
X,
|
||
} from "lucide-react"
|
||
import { signOut, useSession } from "next-auth/react"
|
||
import { toast } from "sonner"
|
||
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog"
|
||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Skeleton } from "@/components/ui/skeleton"
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table"
|
||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
|
||
import { Brand } from "@/components/brand"
|
||
import { PolicyDetail } from "@/components/policy-detail"
|
||
import { PolicyForm } from "@/components/policy-form"
|
||
import { ThemeToggle } from "@/components/theme-toggle"
|
||
import { UserManagement } from "@/components/user-management"
|
||
import { deletePolicy, usePrivacyPolicies } from "@/hooks/use-privacy-policies"
|
||
import { formatDateTime, initials } from "@/lib/format"
|
||
import { PrivacyPolicy } from "@/types/privacy-policy"
|
||
|
||
type SortKey = "title" | "createdAt" | "updatedAt"
|
||
|
||
export default function AdminDashboard() {
|
||
const { data: session, status } = useSession()
|
||
const { policies, isLoading, error } = usePrivacyPolicies()
|
||
|
||
const [searchTerm, setSearchTerm] = useState("")
|
||
const [sortBy, setSortBy] = useState<SortKey>("createdAt")
|
||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
|
||
const [isFormOpen, setIsFormOpen] = useState(false)
|
||
const [editingPolicy, setEditingPolicy] = useState<PrivacyPolicy | null>(null)
|
||
const [previewPolicy, setPreviewPolicy] = useState<PrivacyPolicy | null>(null)
|
||
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
||
const [policyToDelete, setPolicyToDelete] = useState<PrivacyPolicy | null>(null)
|
||
const [isDeleting, setIsDeleting] = useState(false)
|
||
const [isUserManagementOpen, setIsUserManagementOpen] = useState(false)
|
||
|
||
const visiblePolicies = useMemo(() => {
|
||
const term = searchTerm.trim().toLowerCase()
|
||
|
||
return policies
|
||
.filter(
|
||
(policy) =>
|
||
!term ||
|
||
policy.title.toLowerCase().includes(term) ||
|
||
policy.responsible.toLowerCase().includes(term)
|
||
)
|
||
.sort((a, b) => {
|
||
if (sortBy === "title") {
|
||
return sortOrder === "asc"
|
||
? a.title.localeCompare(b.title, "de")
|
||
: b.title.localeCompare(a.title, "de")
|
||
}
|
||
const aDate = new Date(a[sortBy]).getTime()
|
||
const bDate = new Date(b[sortBy]).getTime()
|
||
return sortOrder === "asc" ? aDate - bDate : bDate - aDate
|
||
})
|
||
}, [policies, searchTerm, sortBy, sortOrder])
|
||
|
||
const toggleSort = (key: SortKey) => {
|
||
if (sortBy === key) {
|
||
setSortOrder(sortOrder === "asc" ? "desc" : "asc")
|
||
} else {
|
||
setSortBy(key)
|
||
setSortOrder(key === "title" ? "asc" : "desc")
|
||
}
|
||
}
|
||
|
||
const handleAddNew = () => {
|
||
setEditingPolicy(null)
|
||
setIsFormOpen(true)
|
||
}
|
||
|
||
const handlePreview = (policy: PrivacyPolicy) => {
|
||
setPreviewPolicy(policy)
|
||
setIsPreviewOpen(true)
|
||
}
|
||
|
||
const handleEdit = (policy: PrivacyPolicy) => {
|
||
setEditingPolicy(policy)
|
||
setIsFormOpen(true)
|
||
}
|
||
|
||
const handleDelete = async () => {
|
||
if (!policyToDelete) return
|
||
|
||
setIsDeleting(true)
|
||
try {
|
||
await deletePolicy(policyToDelete.id)
|
||
toast.success("Datenschutzerklärung gelöscht")
|
||
setPolicyToDelete(null)
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "Fehler beim Löschen")
|
||
} finally {
|
||
setIsDeleting(false)
|
||
}
|
||
}
|
||
|
||
const publicCount = policies.filter((policy) => policy.isPublic).length
|
||
|
||
const SortableHead = ({
|
||
column,
|
||
children,
|
||
className,
|
||
}: {
|
||
column: SortKey
|
||
children: React.ReactNode
|
||
className?: string
|
||
}) => (
|
||
<TableHead className={className}>
|
||
<button
|
||
type="button"
|
||
onClick={() => toggleSort(column)}
|
||
className="inline-flex cursor-pointer items-center gap-1.5 rounded-sm transition-colors hover:text-foreground"
|
||
>
|
||
{children}
|
||
{sortBy === column &&
|
||
(sortOrder === "asc" ? (
|
||
<ArrowUp className="size-3.5" />
|
||
) : (
|
||
<ArrowDown className="size-3.5" />
|
||
))}
|
||
</button>
|
||
</TableHead>
|
||
)
|
||
|
||
if (status === "loading") {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center">
|
||
<Skeleton className="h-5 w-40" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (status === "unauthenticated") {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
||
Nicht angemeldet – Weiterleitung…
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<header className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-4 px-6">
|
||
<div className="flex items-center gap-3">
|
||
<Brand />
|
||
<Badge variant="secondary">Admin</Badge>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1">
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => window.open("/", "_blank")}
|
||
>
|
||
<Eye />
|
||
<span className="sr-only">Öffentliche Ansicht</span>
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>Öffentliche Ansicht</TooltipContent>
|
||
</Tooltip>
|
||
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setIsUserManagementOpen(true)}
|
||
>
|
||
<Users />
|
||
<span className="sr-only">Benutzerverwaltung</span>
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>Benutzer</TooltipContent>
|
||
</Tooltip>
|
||
|
||
<ThemeToggle />
|
||
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" size="icon" className="ml-1">
|
||
<Avatar>
|
||
<AvatarFallback>
|
||
{initials(session?.user?.name || session?.user?.email || "?")}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="min-w-56">
|
||
<DropdownMenuLabel className="font-normal">
|
||
<span className="block truncate font-medium">
|
||
{session?.user?.name || "Angemeldet"}
|
||
</span>
|
||
<span className="block truncate text-xs text-muted-foreground">
|
||
{session?.user?.email}
|
||
</span>
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onSelect={() => setIsUserManagementOpen(true)}>
|
||
<Users />
|
||
Benutzer verwalten
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
onSelect={() => signOut({ callbackUrl: "/auth/signin" })}
|
||
>
|
||
<LogOut />
|
||
Abmelden
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="mx-auto max-w-7xl px-6 py-8">
|
||
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<div className="space-y-1.5">
|
||
<h1 className="text-2xl font-semibold tracking-tight">
|
||
Datenschutzerklärungen
|
||
</h1>
|
||
<p className="text-sm text-muted-foreground">
|
||
{policies.length} gesamt · {publicCount} öffentlich ·{" "}
|
||
{policies.length - publicCount} privat
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<div className="relative flex-1 sm:w-64 sm:flex-none">
|
||
<Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||
<Input
|
||
placeholder="Suchen…"
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="px-9"
|
||
/>
|
||
{searchTerm && (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon-sm"
|
||
onClick={() => setSearchTerm("")}
|
||
className="absolute top-1/2 right-0.5 -translate-y-1/2 text-muted-foreground"
|
||
>
|
||
<X />
|
||
<span className="sr-only">Suche zurücksetzen</span>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
<Button onClick={handleAddNew}>
|
||
<Plus />
|
||
Neu
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{error ? (
|
||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
|
||
Fehler beim Laden der Daten: {error.message}
|
||
</div>
|
||
) : isLoading ? (
|
||
<div className="space-y-3 rounded-lg border p-4">
|
||
{Array.from({ length: 5 }).map((_, index) => (
|
||
<Skeleton key={index} className="h-10 w-full" />
|
||
))}
|
||
</div>
|
||
) : visiblePolicies.length === 0 ? (
|
||
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed px-6 py-16 text-center">
|
||
<div className="flex size-12 items-center justify-center rounded-full bg-muted">
|
||
<FileText className="size-6 text-muted-foreground" />
|
||
</div>
|
||
<p className="font-medium">
|
||
{searchTerm ? "Keine Treffer" : "Noch keine Datenschutzerklärungen"}
|
||
</p>
|
||
<p className="max-w-sm text-sm text-muted-foreground">
|
||
{searchTerm
|
||
? "Passen Sie den Suchbegriff an."
|
||
: "Legen Sie die erste DSGVO-Erklärung an."}
|
||
</p>
|
||
{!searchTerm && (
|
||
<Button onClick={handleAddNew}>
|
||
<Plus />
|
||
Erste Erklärung anlegen
|
||
</Button>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="overflow-hidden rounded-lg border bg-card">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="hover:bg-transparent">
|
||
<SortableHead column="title">Titel</SortableHead>
|
||
<TableHead className="hidden md:table-cell">
|
||
Verantwortlicher
|
||
</TableHead>
|
||
<TableHead className="w-32">Status</TableHead>
|
||
<SortableHead column="createdAt" className="hidden w-40 lg:table-cell">
|
||
Erstellt
|
||
</SortableHead>
|
||
<SortableHead column="updatedAt" className="w-40">
|
||
Geändert
|
||
</SortableHead>
|
||
<TableHead className="w-12" />
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{visiblePolicies.map((policy) => (
|
||
<TableRow key={policy.id}>
|
||
<TableCell className="max-w-0">
|
||
<button
|
||
type="button"
|
||
onClick={() => handlePreview(policy)}
|
||
className="block w-full cursor-pointer truncate text-left font-medium hover:text-brand"
|
||
>
|
||
{policy.title}
|
||
</button>
|
||
</TableCell>
|
||
<TableCell className="hidden max-w-0 md:table-cell">
|
||
<span className="block truncate text-muted-foreground">
|
||
{policy.responsible.replace(/[*_#`]/g, "").split("\n")[0]}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell>
|
||
{policy.isPublic ? (
|
||
<Badge variant="success">
|
||
<Eye />
|
||
Öffentlich
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="outline">
|
||
<EyeOff />
|
||
Privat
|
||
</Badge>
|
||
)}
|
||
</TableCell>
|
||
<TableCell className="hidden whitespace-nowrap text-muted-foreground lg:table-cell">
|
||
{formatDateTime(policy.createdAt)}
|
||
</TableCell>
|
||
<TableCell className="whitespace-nowrap text-muted-foreground">
|
||
{formatDateTime(policy.updatedAt)}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="ghost" size="icon-sm">
|
||
<MoreHorizontal />
|
||
<span className="sr-only">Aktionen</span>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem onSelect={() => handlePreview(policy)}>
|
||
<Eye />
|
||
Vorschau
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem onSelect={() => handleEdit(policy)}>
|
||
<Pencil />
|
||
Bearbeiten
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
variant="destructive"
|
||
onSelect={() => setPolicyToDelete(policy)}
|
||
>
|
||
<Trash2 />
|
||
Löschen
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
)}
|
||
</main>
|
||
|
||
<PolicyForm
|
||
open={isFormOpen}
|
||
onOpenChange={setIsFormOpen}
|
||
policy={editingPolicy}
|
||
/>
|
||
|
||
<PolicyDetail
|
||
policy={previewPolicy}
|
||
open={isPreviewOpen}
|
||
onOpenChange={setIsPreviewOpen}
|
||
/>
|
||
|
||
<UserManagement
|
||
isOpen={isUserManagementOpen}
|
||
onClose={() => setIsUserManagementOpen(false)}
|
||
/>
|
||
|
||
<AlertDialog
|
||
open={policyToDelete !== null}
|
||
onOpenChange={(open) => !open && setPolicyToDelete(null)}
|
||
>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>Datenschutzerklärung löschen?</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
„{policyToDelete?.title}“ wird unwiderruflich entfernt. Diese Aktion
|
||
kann nicht rückgängig gemacht werden.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel disabled={isDeleting}>Abbrechen</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={(e) => {
|
||
e.preventDefault()
|
||
handleDelete()
|
||
}}
|
||
disabled={isDeleting}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
{isDeleting ? "Löschen…" : "Löschen"}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
)
|
||
}
|