feat: soft deletes, lastActiveAt tracking, and admin trail search

apps/admin/app/dashboard/catalog/page.tsx

@@ -112,14 +112,17 @@ export default function CatalogPage() {
   const q = searchParams?.get('q') ?? undefined;
 
   const {
-    data: items = [],
+    data: result,
     isLoading,
     isError,
   } = useQuery({
     queryKey: queryKeys.admin.catalog(q),
     queryFn: () => getCatalogItems({ q }),
   });
 
+  const items = result?.data ?? [];
+  const total = result?.total ?? 0;
+
   return (
     <div>
       <div className="mb-6">
@@ -174,7 +177,8 @@ export default function CatalogPage() {
               </Table>
             </div>
             <p className="text-xs text-muted-foreground">
-              {items.length.toLocaleString()} item{items.length !== 1 ? 's' : ''}
+              {items.length.toLocaleString()} of {total.toLocaleString()} item
+              {total !== 1 ? 's' : ''}
               {q ? ` matching "${q}"` : ''}
             </p>
           </>

apps/admin/app/dashboard/packs/page.tsx

@@ -16,7 +16,9 @@ import { SearchInput } from 'admin-app/components/search-input';
 import { type AdminPack, deletePack, getPacks } from 'admin-app/lib/api';
 import { formatDate } from 'admin-app/lib/date';
 import { queryKeys } from 'admin-app/lib/queryKeys';
+import { cn } from 'admin-app/lib/utils';
 import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 
 function TableSkeleton() {
   return (
@@ -41,22 +43,28 @@ function TableSkeleton() {
 
 function PackRow({ pack }: { pack: AdminPack }) {
   const queryClient = useQueryClient();
+  const isDeleted = pack.deleted;
 
   const { mutateAsync: handleDelete } = useMutation({
     mutationFn: () => deletePack(pack.id),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.admin.packs() });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'packs'] });
     },
   });
 
   return (
-    <TableRow className="hover:bg-muted/20">
+    <TableRow className={cn('hover:bg-muted/20', isDeleted && 'opacity-50')}>
       <TableCell>
         <div>
           <p className="text-sm font-medium">{pack.name}</p>
           {pack.description && (
             <p className="text-xs text-muted-foreground line-clamp-1">{pack.description}</p>
           )}
+          {isDeleted && (
+            <p className="text-xs text-destructive">
+              Deleted {pack.deletedAt ? formatDate(new Date(pack.deletedAt)) : ''}
+            </p>
+          )}
         </div>
       </TableCell>
       <TableCell>
@@ -69,7 +77,10 @@ function PackRow({ pack }: { pack: AdminPack }) {
       </TableCell>
       <TableCell>
         <span
-          className={`text-xs font-medium ${pack.isPublic ? 'text-green-500' : 'text-muted-foreground'}`}
+          className={cn(
+            'text-xs font-medium',
+            pack.isPublic ? 'text-green-500' : 'text-muted-foreground',
+          )}
         >
           {pack.isPublic ? 'Public' : 'Private'}
         </span>
@@ -80,13 +91,15 @@ function PackRow({ pack }: { pack: AdminPack }) {
         </span>
       </TableCell>
       <TableCell>
-        <DeleteButton
-          label={pack.name}
-          description="The pack will be soft-deleted and hidden from all users."
-          onConfirm={async () => {
-            await handleDelete();
-          }}
-        />
+        {!isDeleted && (
+          <DeleteButton
+            label={pack.name}
+            description="The pack will be soft-deleted and hidden from all users."
+            onConfirm={async () => {
+              await handleDelete();
+            }}
+          />
+        )}
       </TableCell>
     </TableRow>
   );
@@ -95,16 +108,20 @@ function PackRow({ pack }: { pack: AdminPack }) {
 export default function PacksPage() {
   const searchParams = useSearchParams();
   const q = searchParams?.get('q') ?? undefined;
+  const [includeDeleted, setIncludeDeleted] = useState(false);
 
   const {
-    data: packs = [],
+    data: result,
     isLoading,
     isError,
   } = useQuery({
-    queryKey: queryKeys.admin.packs(q),
-    queryFn: () => getPacks({ q }),
+    queryKey: [...queryKeys.admin.packs(q), { includeDeleted }],
+    queryFn: () => getPacks({ q, includeDeleted }),
   });
 
+  const packs = result?.data ?? [];
+  const total = result?.total ?? 0;
+
   return (
     <div>
       <div className="mb-6">
@@ -114,7 +131,18 @@ export default function PacksPage() {
         </p>
       </div>
       <div className="space-y-4">
-        <SearchInput placeholder="Search by name, owner, or category…" />
+        <div className="flex items-center gap-4">
+          <SearchInput placeholder="Search by name, owner, or category…" />
+          <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none">
+            <input
+              type="checkbox"
+              checked={includeDeleted}
+              onChange={(e) => setIncludeDeleted(e.target.checked)}
+              className="rounded"
+            />
+            Show deleted
+          </label>
+        </div>
         {isError ? (
           <p className="text-sm text-destructive py-4">
             Failed to load packs. Check that the API is reachable.
@@ -159,7 +187,8 @@ export default function PacksPage() {
               </Table>
             </div>
             <p className="text-xs text-muted-foreground">
-              {packs.length.toLocaleString()} pack{packs.length !== 1 ? 's' : ''}
+              {packs.length.toLocaleString()} of {total.toLocaleString()} pack
+              {total !== 1 ? 's' : ''}
               {q ? ` matching "${q}"` : ''}
             </p>
           </>

apps/admin/app/dashboard/page.tsx

@@ -52,21 +52,25 @@ export default function DashboardPage() {
     queryFn: getStats,
   });
 
-  const { data: users = [], isLoading: usersLoading } = useQuery({
+  const { data: usersResult, isLoading: usersLoading } = useQuery({
     queryKey: queryKeys.admin.users(5),
     queryFn: () => getUsers({ limit: 5 }),
   });
 
-  const { data: packs = [], isLoading: packsLoading } = useQuery({
+  const { data: packsResult, isLoading: packsLoading } = useQuery({
     queryKey: queryKeys.admin.packs(5),
     queryFn: () => getPacks({ limit: 5 }),
   });
 
-  const { data: catalog = [], isLoading: catalogLoading } = useQuery({
+  const { data: catalogResult, isLoading: catalogLoading } = useQuery({
     queryKey: queryKeys.admin.catalog(5),
     queryFn: () => getCatalogItems({ limit: 5 }),
   });
 
+  const users = usersResult?.data ?? [];
+  const packs = packsResult?.data ?? [];
+  const catalog = catalogResult?.data ?? [];
+
   const isLoading = statsLoading || usersLoading || packsLoading || catalogLoading;
   const isError = !isLoading && !stats;