@prenta/admin 1.17.14 → 1.17.17

package/src/views/Trash.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Loader2, RotateCcw, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { EmptyState } from '../components/ui/EmptyState.js'
 
 export interface TrashProps {
@@ -84,6 +85,8 @@ export function Trash({ onNavigate, config }: TrashProps) {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [restoringId, setRestoringId] = useState<string | null>(null)
+  const [purgeTarget, setPurgeTarget] = useState<TrashRow | null>(null)
+  const [purgingId, setPurgingId] = useState<string | null>(null)
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -91,7 +94,7 @@ export function Trash({ onNavigate, config }: TrashProps) {
     const results = await Promise.all(
       collections.map(async (slug) => {
         const res = await cmsApi<ListEnvelope>(
-          `/collections/${encodeURIComponent(slug)}?includeDeleted=true&pageSize=50&sort=updatedAt&order=desc`,
+          `/collections/${encodeURIComponent(slug)}?includeDeleted=true&pageSize=50&sort=updatedAt&order=desc&pick=title,slug`,
         )
         if (res.error) return [] as TrashRow[]
         return (res.data?.docs ?? []).map((doc) => asRow(slug, doc))
@@ -135,12 +138,30 @@ export function Trash({ onNavigate, config }: TrashProps) {
     onNavigate(editorPath(row.collection, row.id))
   }
 
+  async function handlePurge(row: TrashRow) {
+    setPurgingId(row.id)
+    const res = await cmsApi(
+      `/collections/${encodeURIComponent(row.collection)}/${encodeURIComponent(row.id)}/purge`,
+      { method: 'POST' },
+    )
+    setPurgingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(`Permanently deleted "${row.title}"`)
+    setRows((current) =>
+      current.filter((item) => item.id !== row.id || item.collection !== row.collection),
+    )
+  }
+
   return (
     <div className="p-4 pr-8">
       <div className="mb-4">
         <h1 className="text-foreground mb-1">Trash</h1>
         <p className="text-muted-foreground text-sm">
-          Soft-deleted pages and posts stay here for 30 days, then are permanently removed.
+          Soft-deleted pages and posts stay here for 30 days. Restore one, or delete it permanently
+          now.
         </p>
       </div>
 
@@ -181,20 +202,36 @@ export function Trash({ onNavigate, config }: TrashProps) {
                     {formatWhen(row.deletedAt ?? row.updatedAt)}
                   </td>
                   <td className="px-4 py-2.5 text-right">
-                    <button
-                      type="button"
-                      className="text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
-                      onClick={() => void handleRestore(row)}
-                      disabled={restoringId === row.id}
-                      aria-label={`Restore ${row.title}`}
-                    >
-                      {restoringId === row.id ? (
-                        <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
-                      ) : (
-                        <RotateCcw className="h-4 w-4" aria-hidden />
-                      )}
-                      Restore
-                    </button>
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        type="button"
+                        className="text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                        onClick={() => void handleRestore(row)}
+                        disabled={restoringId === row.id || purgingId === row.id}
+                        aria-label={`Restore ${row.title}`}
+                      >
+                        {restoringId === row.id ? (
+                          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                        ) : (
+                          <RotateCcw className="h-4 w-4" aria-hidden />
+                        )}
+                        Restore
+                      </button>
+                      <button
+                        type="button"
+                        className="text-destructive hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                        onClick={() => setPurgeTarget(row)}
+                        disabled={restoringId === row.id || purgingId === row.id}
+                        aria-label={`Delete ${row.title} permanently`}
+                      >
+                        {purgingId === row.id ? (
+                          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                        ) : (
+                          <Trash2 className="h-4 w-4" aria-hidden />
+                        )}
+                        Delete
+                      </button>
+                    </div>
                   </td>
                 </tr>
               ))}
@@ -202,6 +239,21 @@ export function Trash({ onNavigate, config }: TrashProps) {
           </table>
         </div>
       )}
+      <ConfirmDialog
+        open={purgeTarget !== null}
+        onClose={() => setPurgeTarget(null)}
+        onConfirm={() => {
+          if (purgeTarget) void handlePurge(purgeTarget)
+        }}
+        title="Delete permanently?"
+        description={
+          purgeTarget
+            ? `"${purgeTarget.title}" will be removed from the trash and cannot be restored.`
+            : 'This document will be removed from the trash and cannot be restored.'
+        }
+        confirmLabel="Delete permanently"
+        destructive
+      />
     </div>
   )
 }

package/src/views/lazy-views.tsx

@@ -0,0 +1,79 @@
+import { lazy } from 'react'
+import { Skeleton } from '../components/ui/Skeleton.js'
+
+/**
+ * Route-level splits. Each view is a dynamic import so the admin shell
+ * (login, layout, dashboard) does not download the editors up front.
+ * Named exports are adapted to the default export `React.lazy` expects.
+ */
+
+export const CollectionList = lazy(() =>
+  import('./CollectionList.js').then((m) => ({ default: m.CollectionList })),
+)
+export const DocumentEdit = lazy(() =>
+  import('./DocumentEdit.js').then((m) => ({ default: m.DocumentEdit })),
+)
+export const MediaBrowser = lazy(() =>
+  import('./MediaBrowser.js').then((m) => ({ default: m.MediaBrowser })),
+)
+export const Settings = lazy(() => import('./Settings.js').then((m) => ({ default: m.Settings })))
+export const Profile = lazy(() => import('./Profile.js').then((m) => ({ default: m.Profile })))
+export const Forms = lazy(() => import('./Forms.js').then((m) => ({ default: m.Forms })))
+export const FormEditor = lazy(() =>
+  import('./FormEditor.js').then((m) => ({ default: m.FormEditor })),
+)
+export const FormSubmissions = lazy(() =>
+  import('./FormSubmissions.js').then((m) => ({ default: m.FormSubmissions })),
+)
+export const FormEntries = lazy(() =>
+  import('./FormEntries.js').then((m) => ({ default: m.FormEntries })),
+)
+export const FormDeliveries = lazy(() =>
+  import('./FormDeliveries.js').then((m) => ({ default: m.FormDeliveries })),
+)
+export const SEO = lazy(() => import('./SEO.js').then((m) => ({ default: m.SEO })))
+export const ScriptTags = lazy(() =>
+  import('./ScriptTags.js').then((m) => ({ default: m.ScriptTags })),
+)
+export const PageSectionEditor = lazy(() =>
+  import('./page-editor/PageSectionEditor.js').then((m) => ({ default: m.PageSectionEditor })),
+)
+export const Trash = lazy(() => import('./Trash.js').then((m) => ({ default: m.Trash })))
+export const PagesListView = lazy(() =>
+  import('./Pages/PagesListView.js').then((m) => ({ default: m.PagesListView })),
+)
+export const PageTagManager = lazy(() =>
+  import('./Pages/PageTagManager.js').then((m) => ({ default: m.PageTagManager })),
+)
+export const PostsListView = lazy(() =>
+  import('./Posts/PostsListView.js').then((m) => ({ default: m.PostsListView })),
+)
+export const PostTypesView = lazy(() =>
+  import('./Posts/PostTypesView.js').then((m) => ({ default: m.PostTypesView })),
+)
+export const PostTypeEditor = lazy(() =>
+  import('./Posts/PostTypeEditor.js').then((m) => ({ default: m.PostTypeEditor })),
+)
+export const NewPostPicker = lazy(() =>
+  import('./Posts/NewPostPicker.js').then((m) => ({ default: m.NewPostPicker })),
+)
+export const NewPostTypeInstructions = lazy(() =>
+  import('./Posts/NewPostTypeInstructions.js').then((m) => ({
+    default: m.NewPostTypeInstructions,
+  })),
+)
+export const PostSectionEditor = lazy(() =>
+  import('./post-editor/PostSectionEditor.js').then((m) => ({ default: m.PostSectionEditor })),
+)
+export const PostTemplateEditor = lazy(() =>
+  import('./post-editor/PostTemplateEditor.js').then((m) => ({ default: m.PostTemplateEditor })),
+)
+
+export function ViewFallback() {
+  return (
+    <div className="p-6" aria-busy="true" aria-live="polite">
+      <p className="text-muted-foreground text-sm">Loading</p>
+      <Skeleton className="mt-4" />
+    </div>
+  )
+}

package/src/views/seo/seo-routes.ts

@@ -0,0 +1,58 @@
+/**
+ * SEO deep-link table. Kept out of `SEO.tsx` so the admin shell can route
+ * these paths without loading the SEO view.
+ */
+
+const SEO_TAB_IDS = [
+  'overview',
+  'content',
+  'links',
+  'technical',
+  'ai-visibility',
+  'redirects',
+  'audit',
+  'proposals',
+] as const
+
+export type SeoTabId = (typeof SEO_TAB_IDS)[number]
+
+/**
+ * SEO deep paths the admin router resolves onto the tabbed SEO view — including
+ * every path plugin-seo advertises in the sidebar. `matchRoute` is exact, so any
+ * of these NOT listed here falls through to the generic 404.
+ */
+export const SEO_DEEP_PATHS = [
+  '/seo/link-health',
+  '/seo/sitemap',
+  '/seo/redirects',
+  '/seo/content',
+  '/seo/canonicals',
+  '/seo/technical',
+  '/seo/links',
+  '/seo/audit',
+  '/seo/proposals',
+  '/seo/ai-visibility',
+  '/seo',
+] as const
+
+const SEO_TAB_BY_PATH: Record<(typeof SEO_DEEP_PATHS)[number], SeoTabId> = {
+  '/seo/link-health': 'links',
+  '/seo/sitemap': 'technical',
+  '/seo/redirects': 'redirects',
+  '/seo/content': 'content',
+  '/seo/canonicals': 'content',
+  '/seo/technical': 'technical',
+  '/seo/links': 'technical',
+  '/seo/audit': 'audit',
+  '/seo/proposals': 'proposals',
+  '/seo/ai-visibility': 'ai-visibility',
+  '/seo': 'overview',
+}
+
+/** Map an SEO deep path to the tab it should open, or null if it isn't one. */
+export function seoTabForPath(pathname: string): SeoTabId | null {
+  if (Object.prototype.hasOwnProperty.call(SEO_TAB_BY_PATH, pathname)) {
+    return SEO_TAB_BY_PATH[pathname as keyof typeof SEO_TAB_BY_PATH]
+  }
+  return null
+}

package/src/views/settings/AuditLogExportCard.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { useState } from 'react'
+import { Download } from 'lucide-react'
+import { toast } from 'sonner'
+import { Button } from '../../components/ui/Button.js'
+import { getApiBase } from '../../lib/api.js'
+import { SecurityCard } from './securityPrimitives.js'
+
+export type AuditExportFormat = 'csv' | 'json'
+
+export function auditExportPath(options: {
+  format: AuditExportFormat
+  from: string
+  to: string
+}): string {
+  const params = new URLSearchParams({ format: options.format })
+  if (options.from) params.set('from', options.from)
+  if (options.to) params.set('to', options.to)
+  return `/security/audit-log/export?${params.toString()}`
+}
+
+async function downloadAuditExport(path: string): Promise<{ error?: string; truncated?: boolean }> {
+  let res: Response
+  try {
+    res = await fetch(`${getApiBase()}${path}`, { credentials: 'include' })
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Network error' }
+  }
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string }
+    return { error: body.error || `Export failed (${res.status})` }
+  }
+  const blob = await res.blob()
+  const disposition = res.headers.get('content-disposition') ?? ''
+  const filename = /filename="([^"]+)"/.exec(disposition)?.[1] ?? 'audit-log.csv'
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+  return { truncated: res.headers.get('x-audit-export-truncated') === 'true' }
+}
+
+/** Admin download of the audit log as CSV or JSON, optionally limited to a date range. */
+export function AuditLogExportCard() {
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [pending, setPending] = useState<AuditExportFormat | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function exportAs(format: AuditExportFormat) {
+    setPending(format)
+    setError(null)
+    const result = await downloadAuditExport(auditExportPath({ format, from, to }))
+    setPending(null)
+    if (result.error) {
+      setError(result.error)
+      return
+    }
+    if (result.truncated) {
+      toast.success('Export downloaded. It was capped at the newest 10,000 events.')
+      return
+    }
+    toast.success('Audit log exported')
+  }
+
+  return (
+    <SecurityCard
+      title="Audit log export"
+      description="Download recorded security and content events. A date range limits the file. The newest 10,000 matching events are included."
+    >
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault()
+          void exportAs('csv')
+        }}
+      >
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
+            <span className="text-foreground font-medium">From</span>
+            <input
+              type="date"
+              value={from}
+              onChange={(event) => setFrom(event.target.value)}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-11 rounded-md border px-3 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+          </label>
+          <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
+            <span className="text-foreground font-medium">To</span>
+            <input
+              type="date"
+              value={to}
+              onChange={(event) => setTo(event.target.value)}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-11 rounded-md border px-3 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+          </label>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="submit"
+            className="min-h-11"
+            loading={pending === 'csv'}
+            disabled={pending !== null}
+            leftIcon={<Download size={16} aria-hidden />}
+          >
+            Export CSV
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            className="min-h-11"
+            loading={pending === 'json'}
+            disabled={pending !== null}
+            leftIcon={<Download size={16} aria-hidden />}
+            onClick={() => void exportAs('json')}
+          >
+            Export JSON
+          </Button>
+        </div>
+        {error && (
+          <p className="text-destructive text-sm" role="alert">
+            {error}
+          </p>
+        )}
+      </form>
+    </SecurityCard>
+  )
+}

package/src/views/settings/SecurityTab.tsx

@@ -10,6 +10,7 @@ import {
 } from './components.js'
 import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
+import { AuditLogExportCard } from './AuditLogExportCard.js'
 import { SecretsAuditCard } from './SecretsAuditCard.js'
 import { SecurityStatusCard } from './SecurityStatusCard.js'
 import { CaptchaStatusCard } from './CaptchaStatusCard.js'
@@ -144,7 +145,8 @@ export function SecurityTab({
         />
       </div>
 
-      <div id="security-audit">
+      <div id="security-audit" className="space-y-4">
+        {canEdit && <AuditLogExportCard />}
         <SecretsAuditCard
           secrets={data.secrets}
           auditEnabled={data.auditEnabled}