feat: trash (soft delete) with admin tool management

- tools: add deletedAt/deletedBy, soft delete via DELETE /tools/:id when actor has trash entitlement, else immediate hard delete - trash endpoints: GET /tools/trash, POST /tools/trash (admin bulk), POST /tools/trash/restore, DELETE /tools/trash, POST /tools/trash/empty - trash feature for premium/enterprise; exclude trashed from all public surfaces (browse, categories, features, tags, similar, ratings, costs, analytics, redundancy) - TRASH_RETENTION_DAYS env (0 = keep forever) with hourly purge job - frontend: /trash page (premium+, restore for all, permanent delete + empty for admin), admin Tools tab with multi-select bulk trash, sidebar Trash link, tool-detail delete hint
2026-08-02 02:02:16 +02:00
parent 32df998399
commit 2f20b1e5c2
25 changed files with 1404 additions and 28 deletions
@@ -12,6 +12,7 @@ import ToolEdit from "@/pages/tool-edit";
 import Analytics from "@/pages/analytics";
 import Admin from "@/pages/admin";
 import Redundancy from "@/pages/redundancy";
+import Trash from "@/pages/trash";
 import Login from "@/pages/login";
 import NotFound from "@/pages/not-found";

@@ -36,6 +37,7 @@ function Router() {
      <Route path="/analytics" component={Analytics} />
      <Route path="/admin" component={Admin} />
      <Route path="/admin/redundancy" component={Redundancy} />
+      <Route path="/trash" component={Trash} />
      <Route component={NotFound} />
    </Switch>
  );
@@ -0,0 +1,233 @@
+import { useEffect, useState } from "react";
+import { Link } from "wouter";
+import {
+  useListTools,
+  useTrashTools,
+  getListToolsQueryKey,
+  getListTrashedToolsQueryKey,
+  getListCategoriesQueryKey,
+  getListAllFeaturesQueryKey,
+  getListAllTagsQueryKey,
+  getGetTopToolsQueryKey,
+  getGetAnalyticsSummaryQueryKey,
+  type ToolWithStats,
+} from "@workspace/api-client-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/hooks/use-auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/hooks/use-toast";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { Search, Trash2, ExternalLink, Pencil, Star } from "lucide-react";
+import { format } from "date-fns";
+
+export function AdminToolsTab() {
+  const { isAdmin, isLoading: authLoading } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [confirmTrash, setConfirmTrash] = useState(false);
+
+  useEffect(() => {
+    const t = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  const { data: tools, isLoading: loading } = useListTools(
+    search ? { search } : undefined,
+    { query: { queryKey: getListToolsQueryKey(search ? { search } : undefined), enabled: isAdmin } },
+  );
+
+  const trash = useTrashTools();
+
+  const allTools = tools ?? [];
+
+  function invalidate() {
+    queryClient.invalidateQueries({ queryKey: getListToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListTrashedToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListCategoriesQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListAllFeaturesQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListAllTagsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetTopToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetAnalyticsSummaryQueryKey() });
+  }
+
+  function toggle(id: number) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll() {
+    if (selected.size === allTools.length) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(allTools.map((t) => t.id)));
+    }
+  }
+
+  function handleTrash(ids: number[]) {
+    trash.mutate(
+      { data: { ids } },
+      {
+        onSuccess: (res) => {
+          toast({ title: "Tools moved to trash", description: `${res.trashed ?? ids.length} tool(s) moved to trash.` });
+          setSelected(new Set());
+          setConfirmTrash(false);
+          invalidate();
+        },
+        onError: (err) => {
+          toast({ title: "Failed to move to trash", description: err.data?.error ?? err.message, variant: "destructive" });
+        },
+      },
+    );
+  }
+
+  if (!authLoading && !isAdmin) {
+    return <p className="text-sm text-muted-foreground py-8 text-center">Admin access required.</p>;
+  }
+
+  const selectedIds = [...selected];
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between gap-4 flex-wrap">
+        <div className="space-y-1.5">
+          <CardTitle>All Tools</CardTitle>
+          <CardDescription>
+            {selectedIds.length > 0 ? `${selectedIds.length} selected` : `${allTools.length} tool(s)`}
+          </CardDescription>
+        </div>
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="relative">
+            <Search className="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="pl-8 w-56"
+              placeholder="Search tools…"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+            />
+          </div>
+          <Button
+            size="sm"
+            variant="destructive"
+            disabled={selectedIds.length === 0 || trash.isPending}
+            onClick={() => setConfirmTrash(true)}
+          >
+            <Trash2 className="w-4 h-4 mr-2" /> Move to trash ({selectedIds.length})
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-12 w-full" />)}
+          </div>
+        ) : allTools.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-8 text-center">{search ? "No tools match your search." : "No tools yet."}</p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">
+                  <Checkbox
+                    checked={selected.size === allTools.length && allTools.length > 0}
+                    onCheckedChange={toggleAll}
+                    aria-label="Select all"
+                  />
+                </TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead>Rating</TableHead>
+                <TableHead>Created by</TableHead>
+                <TableHead>Created at</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {allTools.map((t: ToolWithStats) => (
+                <TableRow key={t.id} className={selected.has(t.id) ? "bg-muted/40" : undefined}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selected.has(t.id)}
+                      onCheckedChange={() => toggle(t.id)}
+                      aria-label={`Select ${t.name}`}
+                    />
+                  </TableCell>
+                  <TableCell className="font-medium">{t.name}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{t.category}</Badge>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {t.ratingCount > 0 ? (
+                      <span className="inline-flex items-center gap-1">
+                        <Star className="w-3 h-3 fill-amber-500 text-amber-500" />
+                        {t.avgCombined != null ? t.avgCombined.toFixed(1) : "—"} ({t.ratingCount})
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">{t.createdBy ?? "—"}</TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {format(new Date(t.createdAt), "dd.MM.yyyy")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-1">
+                      <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
+                        <Link href={`/tools/${t.id}`}><ExternalLink className="w-3.5 h-3.5" /></Link>
+                      </Button>
+                      <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
+                        <Link href={`/tools/${t.id}/edit`}><Pencil className="w-3.5 h-3.5" /></Link>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                        onClick={() => handleTrash([t.id])}
+                        disabled={trash.isPending}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+
+      <AlertDialog open={confirmTrash} onOpenChange={setConfirmTrash}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Move {selectedIds.length} tool(s) to trash?</AlertDialogTitle>
+            <AlertDialogDescription>
+              The selected tools will be hidden from all public views and moved to the trash, where they can be restored or permanently deleted.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => handleTrash(selectedIds)}
+            >
+              Move to trash
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  );
+}
@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle } from "lucide-react";
+import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle, Trash2 } from "lucide-react";
 import { useAuth } from "@/hooks/use-auth";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -7,13 +7,14 @@ import { ThemeToggle } from "@/components/theme-toggle";

 export function Layout({ children }: { children: React.ReactNode }) {
  const [location] = useLocation();
-  const { user, isLoading, isAuthenticated, isAdmin, isLocalMode, tier, login, logout } = useAuth();
+  const { user, isLoading, isAuthenticated, isAdmin, isLocalMode, tier, hasFeature, login, logout } = useAuth();

  const links = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
    { href: "/tools", label: "Browse Tools", icon: Wrench },
    { href: "/tools/new", label: "Add Tool", icon: PlusCircle },
    { href: "/analytics", label: "Analytics", icon: BarChart3 },
+    ...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
    ...(isAdmin ? [{ href: "/admin", label: "Admin", icon: ShieldCheck }] : []),
    ...(isAdmin ? [{ href: "/admin/redundancy", label: "Redundancy", icon: AlertTriangle }] : []),
  ];
@@ -22,8 +22,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Skeleton } from "@/components/ui/skeleton";
 import { useToast } from "@/hooks/use-toast";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock, AlertTriangle } from "lucide-react";
+import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock, AlertTriangle, Wrench } from "lucide-react";
 import { format } from "date-fns";
+import { AdminToolsTab } from "@/components/admin-tools-tab";

 export default function Admin() {
  const [, setLocation] = useLocation();
@@ -147,6 +148,9 @@ export default function Admin() {
            <TabsTrigger value="users" className="gap-2">
              <Users className="w-4 h-4" /> Users
            </TabsTrigger>
+            <TabsTrigger value="tools" className="gap-2">
+              <Wrench className="w-4 h-4" /> Tools
+            </TabsTrigger>
            <TabsTrigger value="audit" className="gap-2">
              <ScrollText className="w-4 h-4" /> Audit Log
            </TabsTrigger>
@@ -220,6 +224,10 @@ export default function Admin() {
            </Card>
          </TabsContent>

+          <TabsContent value="tools">
+            <AdminToolsTab />
+          </TabsContent>
+
          <TabsContent value="audit">
            <Card>
              <CardHeader>
@@ -76,6 +76,7 @@ export default function ToolDetail() {

  const { user, isAdmin, hasFeature } = useAuth();
  const canManageCosts = hasFeature("costs");
+  const hasTrash = hasFeature("trash");
  const deleteTool = useDeleteTool();

  const [similarData, setSimilarData] = useState<{ manual: any[]; auto: any[] } | null>(null);
@@ -860,7 +861,11 @@ export default function ToolDetail() {
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this tool?</AlertDialogTitle>
          <AlertDialogDescription>
-            This will permanently remove <span className="font-medium">{tool?.name}</span> and all its ratings. This cannot be undone.
+            {hasTrash ? (
+              <>This will move <span className="font-medium">{tool?.name}</span> to the trash. It can be restored later.</>
+            ) : (
+              <>This will permanently remove <span className="font-medium">{tool?.name}</span> and all its ratings. This cannot be undone.</>
+            )}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
@@ -0,0 +1,324 @@
+import { useEffect, useState } from "react";
+import {
+  useListTrashedTools,
+  useRestoreTools,
+  useDeleteTrashedTools,
+  useEmptyTrash,
+  getListTrashedToolsQueryKey,
+  getListToolsQueryKey,
+  getListCategoriesQueryKey,
+  getListAllFeaturesQueryKey,
+  getListAllTagsQueryKey,
+  getGetTopToolsQueryKey,
+  getGetAnalyticsSummaryQueryKey,
+  type Tool,
+} from "@workspace/api-client-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/hooks/use-auth";
+import { Layout } from "@/components/layout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useToast } from "@/hooks/use-toast";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { Trash2, RotateCcw, Search, ShieldAlert, Trash as TrashIcon, RefreshCcw } from "lucide-react";
+import { format } from "date-fns";
+
+export default function Trash() {
+  const { user, isAdmin, hasFeature, isLoading: authLoading } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmEmpty, setConfirmEmpty] = useState(false);
+
+  useEffect(() => {
+    const t = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(t);
+  }, [searchInput]);
+
+  const hasTrash = hasFeature("trash");
+
+  const { data: tools, isLoading: loading } = useListTrashedTools(
+    search ? { search } : undefined,
+    { query: { queryKey: getListTrashedToolsQueryKey(search ? { search } : undefined), enabled: hasTrash } },
+  );
+
+  const restore = useRestoreTools();
+  const deletePermanent = useDeleteTrashedTools();
+  const empty = useEmptyTrash();
+
+  const trashed = tools ?? [];
+
+  function invalidate() {
+    queryClient.invalidateQueries({ queryKey: getListTrashedToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListCategoriesQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListAllFeaturesQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getListAllTagsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetTopToolsQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetAnalyticsSummaryQueryKey() });
+  }
+
+  function toggle(id: number) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll() {
+    if (selected.size === trashed.length) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(trashed.map((t) => t.id)));
+    }
+  }
+
+  function handleRestore(ids: number[]) {
+    restore.mutate(
+      { data: { ids } },
+      {
+        onSuccess: (res) => {
+          toast({ title: "Tools restored", description: `${res.restored ?? ids.length} tool(s) restored.` });
+          setSelected(new Set());
+          invalidate();
+        },
+        onError: (err) => {
+          toast({ title: "Failed to restore", description: err.data?.error ?? err.message, variant: "destructive" });
+        },
+      },
+    );
+  }
+
+  function handleDeletePermanent(ids: number[]) {
+    deletePermanent.mutate(
+      { data: { ids } },
+      {
+        onSuccess: () => {
+          toast({ title: "Tools deleted", description: `${ids.length} tool(s) permanently removed.` });
+          setSelected(new Set());
+          setConfirmDelete(false);
+          invalidate();
+        },
+        onError: (err) => {
+          toast({ title: "Failed to delete", description: err.data?.error ?? err.message, variant: "destructive" });
+        },
+      },
+    );
+  }
+
+  function handleEmpty() {
+    empty.mutate(
+      undefined,
+      {
+        onSuccess: (res) => {
+          toast({ title: "Trash emptied", description: `${res.deleted ?? 0} tool(s) permanently removed.` });
+          setSelected(new Set());
+          setConfirmEmpty(false);
+          invalidate();
+        },
+        onError: (err) => {
+          toast({ title: "Failed to empty trash", description: err.data?.error ?? err.message, variant: "destructive" });
+        },
+      },
+    );
+  }
+
+  if (!authLoading && !hasTrash) {
+    return (
+      <Layout>
+        <div className="flex flex-col items-center justify-center py-20 gap-4">
+          <ShieldAlert className="w-12 h-12 text-muted-foreground" />
+          <h2 className="text-2xl font-bold">Trash requires a higher tier</h2>
+          <p className="text-muted-foreground">The trash is available to Premium and Enterprise users.</p>
+          <Button variant="outline" asChild>
+            <a href="/tools">Back to tools</a>
+          </Button>
+        </div>
+      </Layout>
+    );
+  }
+
+  const selectedIds = [...selected];
+
+  return (
+    <Layout>
+      <div className="space-y-6 pb-10">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight mb-2">Trash</h1>
+          <p className="text-muted-foreground">Deleted tools are kept here until they are restored or permanently removed.</p>
+        </div>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between gap-4 flex-wrap">
+            <div className="space-y-1.5">
+              <CardTitle>Trashed Tools</CardTitle>
+              <CardDescription>
+                {selectedIds.length > 0 ? `${selectedIds.length} selected` : `${trashed.length} tool(s) in trash`}
+              </CardDescription>
+            </div>
+            <div className="flex items-center gap-2 flex-wrap">
+              <div className="relative">
+                <Search className="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  className="pl-8 w-56"
+                  placeholder="Search trash…"
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                />
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={selectedIds.length === 0 || restore.isPending}
+                onClick={() => handleRestore(selectedIds)}
+              >
+                <RotateCcw className="w-4 h-4 mr-2" /> Restore ({selectedIds.length})
+              </Button>
+              {isAdmin && (
+                <>
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    disabled={selectedIds.length === 0 || deletePermanent.isPending}
+                    onClick={() => setConfirmDelete(true)}
+                  >
+                    <TrashIcon className="w-4 h-4 mr-2" /> Delete permanently ({selectedIds.length})
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    disabled={trashed.length === 0 || empty.isPending}
+                    onClick={() => setConfirmEmpty(true)}
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" /> Empty trash
+                  </Button>
+                </>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <div className="space-y-3">
+                {[1, 2, 3].map((i) => <Skeleton key={i} className="h-12 w-full" />)}
+              </div>
+            ) : trashed.length === 0 ? (
+              <div className="text-sm text-muted-foreground py-8 text-center flex flex-col items-center gap-2">
+                <RefreshCcw className="w-6 h-6 text-muted-foreground/50" />
+                {search ? "No tools match your search." : "The trash is empty."}
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={selected.size === trashed.length && trashed.length > 0}
+                        onCheckedChange={toggleAll}
+                        aria-label="Select all"
+                      />
+                    </TableHead>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Category</TableHead>
+                    <TableHead>Deleted at</TableHead>
+                    <TableHead>Deleted by</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {trashed.map((t: Tool) => (
+                    <TableRow key={t.id} className={selected.has(t.id) ? "bg-muted/40" : undefined}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selected.has(t.id)}
+                          onCheckedChange={() => toggle(t.id)}
+                          aria-label={`Select ${t.name}`}
+                        />
+                      </TableCell>
+                      <TableCell className="font-medium">{t.name}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{t.category}</Badge>
+                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">
+                        {t.deletedAt ? format(new Date(t.deletedAt), "dd.MM.yyyy HH:mm") : "—"}
+                      </TableCell>
+                      <TableCell className="text-sm text-muted-foreground">{t.deletedBy ?? "—"}</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-1">
+                          <Button variant="ghost" size="sm" onClick={() => handleRestore([t.id])} disabled={restore.isPending}>
+                            <RotateCcw className="w-3.5 h-3.5" /> Restore
+                          </Button>
+                          {isAdmin && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-destructive hover:text-destructive"
+                              onClick={() => handleDeletePermanent([t.id])}
+                              disabled={deletePermanent.isPending}
+                            >
+                              <TrashIcon className="w-3.5 h-3.5" /> Delete
+                            </Button>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {selectedIds.length} tool(s) permanently?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently removes the selected tools along with all their ratings, costs and relations. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => handleDeletePermanent(selectedIds)}
+            >
+              Delete permanently
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog open={confirmEmpty} onOpenChange={setConfirmEmpty}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Empty the trash?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently removes all {trashed.length} tool(s) in the trash along with their ratings, costs and relations. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={handleEmpty}
+            >
+              Empty trash
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Layout>
+  );
+}