@actuate-media/cms-admin 0.77.0 → 0.79.0

package/src/views/ApiKeys.tsx

@@ -17,6 +17,7 @@ import { type FormEvent, useState } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { ReauthDialog } from '../components/ui/ReauthDialog.js'
 import { SettingsCard } from './settings/components.js'
 
 const DIALOG_INPUT_CLASS =
@@ -80,26 +81,11 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
   const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
   const [showCreate, setShowCreate] = useState(false)
   const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null)
 
   const keys = data ?? []
   const rootPadding = embedded ? '' : 'p-4 sm:p-6'
 
-  const handleRevoke = async (id: string, name: string) => {
-    if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
-    const password = prompt('Confirm your password to revoke this API key:')
-    if (!password) return
-    const res = await cmsApi(`/api-keys/${id}`, {
-      method: 'DELETE',
-      headers: { 'x-reauth-password': password },
-    })
-    if (res.error) {
-      toast.error(res.error)
-    } else {
-      toast.success('API key revoked')
-      refetch()
-    }
-  }
-
   if (loading) {
     return (
       <div className={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
@@ -193,10 +179,9 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                 </thead>
                 <tbody className="divide-border divide-y">
                   {keys.map((k) => {
-                    const revoked = !!k.revokedAt
                     const expired = k.expiresAt && new Date(k.expiresAt).getTime() < Date.now()
                     return (
-                      <tr key={k.id} className={revoked || expired ? 'opacity-60' : undefined}>
+                      <tr key={k.id} className={expired ? 'opacity-60' : undefined}>
                         <td className="px-4 py-3 text-sm">
                           <div className="text-foreground font-medium">{k.name}</div>
                           {k.user && (
@@ -218,11 +203,7 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           {formatDate(k.expiresAt)}
                         </td>
                         <td className="px-4 py-3">
-                          {revoked ? (
-                            <span className="bg-destructive/10 text-destructive inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
-                              Revoked
-                            </span>
-                          ) : expired ? (
+                          {expired ? (
                             <span className="bg-warning/10 text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
                               Expired
                             </span>
@@ -233,17 +214,15 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           )}
                         </td>
                         <td className="px-4 py-3 text-right">
-                          {!revoked && (
-                            <button
-                              type="button"
-                              onClick={() => handleRevoke(k.id, k.name)}
-                              className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
-                              aria-label={`Revoke ${k.name}`}
-                              title="Revoke"
-                            >
-                              <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
-                            </button>
-                          )}
+                          <button
+                            type="button"
+                            onClick={() => setPendingDelete({ id: k.id, name: k.name })}
+                            className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
+                            aria-label={`Delete ${k.name}`}
+                            title="Delete"
+                          >
+                            <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
+                          </button>
                         </td>
                       </tr>
                     )
@@ -266,6 +245,33 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
       />
 
       {createdKey && <RevealKeyDialog created={createdKey} onClose={() => setCreatedKey(null)} />}
+
+      <ReauthDialog
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        title="Delete API key"
+        description={
+          pendingDelete
+            ? `Permanently delete “${pendingDelete.name}”? Clients using this key will fail immediately. This cannot be undone.`
+            : 'Permanently delete this API key? This cannot be undone.'
+        }
+        confirmLabel="Delete key"
+        destructive
+        onSubmit={async (password) => {
+          if (!pendingDelete) return
+          const res = await cmsApi(`/api-keys/${pendingDelete.id}`, {
+            method: 'DELETE',
+            headers: { 'x-reauth-password': password },
+          })
+          if (res.error) {
+            toast.error(res.error)
+            return
+          }
+          toast.success('API key deleted')
+          setPendingDelete(null)
+          refetch()
+        }}
+      />
     </div>
   )
 }
@@ -442,24 +448,25 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
               />
             </div>
 
-            <div>
+            <div className="border-border bg-muted/30 space-y-2 rounded-md border p-3">
               <label
                 htmlFor="apikey-password"
-                className="text-foreground mb-1 block text-sm font-medium"
+                className="text-foreground block text-sm font-medium"
               >
-                Confirm password
+                Confirm it&apos;s you
               </label>
+              <p className="text-muted-foreground text-sm">
+                Creating an API key is a sensitive action. Re-enter your password to continue.
+              </p>
               <input
                 id="apikey-password"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                autoComplete="current-password"
                 className={DIALOG_INPUT_CLASS}
                 required
               />
-              <p className="text-muted-foreground mt-1 text-sm">
-                Creating an API key is a sensitive action and requires re-authentication.
-              </p>
             </div>
 
             <div className="flex items-center justify-end gap-2 pt-2">
@@ -509,7 +516,7 @@ function RevealKeyDialog({
           <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-4">
             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
             <p className="text-foreground text-xs">
-              We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
+              We only store a hash of this key. If you lose it, you&apos;ll need to delete it and
               create a new one.
             </p>
           </div>

package/src/views/FormEditor.tsx

@@ -314,7 +314,7 @@ function ExistingFormEditor({
 
         <Tabs.Content value="notifications" tabIndex={-1}>
           <div className="border-border bg-card rounded-lg border p-4">
-            <NotificationsPanel formId={formId} />
+            <NotificationsPanel formId={formId} fields={fields} />
           </div>
         </Tabs.Content>
 

package/src/views/FormEntries.tsx

@@ -2,13 +2,13 @@
 
 /**
  * All Entries — a cross-form submissions inbox. Same token-only table, search,
- * status pills (All / Unread / Starred / Archived), bulk actions, CSV export,
- * pagination, and inline detail pane as the per-form Submissions view, plus a
- * Form filter and a Form column so editors can triage every form from one
- * place.
+ * status pills (All / Unread / Starred / Archived), bulk actions, server-side
+ * CSV/Excel export, pagination, and inline detail pane as the per-form
+ * Submissions view, plus a Form filter and a Form column so editors can
+ * triage every form from one place.
  */
 import { useCallback, useEffect, useState } from 'react'
-import { Download, Inbox, Search } from 'lucide-react'
+import { Inbox, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   bulkUpdateEntries,
@@ -25,6 +25,7 @@ import {
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
+import { ExportMenu } from '../components/forms/ExportMenu.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -33,7 +34,6 @@ import {
   FormsLoading,
   FormsPagination,
   SummaryChip,
-  btnSecondary,
 } from '../components/forms/primitives.js'
 
 export interface FormEntriesProps {
@@ -64,37 +64,6 @@ function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
   }
 }
 
-function csvEscape(value: unknown): string {
-  const s = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value)
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
-}
-
-function exportCsv(entries: FormSubmission[]) {
-  const dataKeys = [...new Set(entries.flatMap((e) => Object.keys(e.data ?? {})))]
-  const header = ['Entry', 'Form', 'Submitted', 'Name', 'Email', 'Phone', 'Status', ...dataKeys]
-  const lines = [header.map(csvEscape).join(',')]
-  for (const e of entries) {
-    const row = [
-      e.entryNumber ?? '',
-      e.formName ?? '',
-      e.submittedAt,
-      e.senderName ?? '',
-      e.senderEmail ?? '',
-      e.senderPhone ?? '',
-      e.unread ? 'unread' : 'read',
-      ...dataKeys.map((k) => e.data?.[k]),
-    ]
-    lines.push(row.map(csvEscape).join(','))
-  }
-  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = 'all-entries.csv'
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 export function FormEntries({ onNavigate }: FormEntriesProps) {
   const [entries, setEntries] = useState<FormSubmission[]>([])
   const [total, setTotal] = useState(0)
@@ -240,15 +209,7 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
             {total} {total === 1 ? 'submission' : 'submissions'} across your forms
           </p>
         </div>
-        <button
-          type="button"
-          className={btnSecondary}
-          onClick={() => exportCsv(entries)}
-          disabled={entries.length === 0}
-        >
-          <Download className="h-4 w-4" aria-hidden />
-          Export CSV
-        </button>
+        <ExportMenu formId={scopedFormId} disabled={counts !== null && counts.total === 0} />
       </div>
 
       {counts && (

package/src/views/FormSubmissions.tsx

@@ -6,12 +6,12 @@
  *
  * Features: summary chips, search + status pills (All / Unread / Starred /
  * Archived), row selection with bulk actions (mark read, star, archive,
- * delete), per-row star toggle, CSV export, and an inline detail pane that
- * opens on row click (marking the entry read). Loading / empty /
- * filtered-empty / error states are all handled.
+ * delete), per-row star toggle, server-side CSV/Excel export, and an inline
+ * detail pane that opens on row click (marking the entry read). Loading /
+ * empty / filtered-empty / error states are all handled.
  */
 import { useCallback, useEffect, useState } from 'react'
-import { ArrowLeft, Download, Inbox, Search } from 'lucide-react'
+import { ArrowLeft, Inbox, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   bulkUpdateEntries,
@@ -27,6 +27,7 @@ import {
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
+import { ExportMenu } from '../components/forms/ExportMenu.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -35,7 +36,6 @@ import {
   FormsLoading,
   FormsPagination,
   SummaryChip,
-  btnSecondary,
 } from '../components/forms/primitives.js'
 
 export interface FormSubmissionsProps {
@@ -67,39 +67,8 @@ function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
   }
 }
 
-function csvEscape(value: unknown): string {
-  const s = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value)
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
-}
-
-function exportCsv(entries: FormSubmission[], formSlug: string) {
-  const dataKeys = [...new Set(entries.flatMap((e) => Object.keys(e.data ?? {})))]
-  const header = ['Entry', 'Submitted', 'Name', 'Email', 'Phone', 'Status', ...dataKeys]
-  const lines = [header.map(csvEscape).join(',')]
-  for (const e of entries) {
-    const row = [
-      e.entryNumber ?? '',
-      e.submittedAt,
-      e.senderName ?? '',
-      e.senderEmail ?? '',
-      e.senderPhone ?? '',
-      e.unread ? 'unread' : 'read',
-      ...dataKeys.map((k) => e.data?.[k]),
-    ]
-    lines.push(row.map(csvEscape).join(','))
-  }
-  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `${formSlug || 'form'}-submissions.csv`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
   const [formName, setFormName] = useState<string>('')
-  const [formSlug, setFormSlug] = useState<string>('')
   const [entries, setEntries] = useState<FormSubmission[]>([])
   const [total, setTotal] = useState(0)
   const [counts, setCounts] = useState<EntryCounts | null>(null)
@@ -119,7 +88,6 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       .then((form) => {
         if (cancelled || !form) return
         setFormName(form.name)
-        setFormSlug(form.slug)
       })
       .catch(() => {})
     return () => {
@@ -261,15 +229,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
               {total} {total === 1 ? 'submission' : 'submissions'}
             </p>
           </div>
-          <button
-            type="button"
-            className={btnSecondary}
-            onClick={() => exportCsv(entries, formSlug)}
-            disabled={entries.length === 0}
-          >
-            <Download className="h-4 w-4" aria-hidden />
-            Export CSV
-          </button>
+          <ExportMenu formId={formId} disabled={counts !== null && counts.total === 0} />
         </div>
       </div>
 

package/src/views/seo/RedirectsTab.tsx

@@ -53,12 +53,13 @@ function OverviewCards({ onRefetchKey }: { onRefetchKey: number }) {
   if (!data) return null
   const cards = [
     { label: 'Active redirects', value: data.activeRedirects },
+    { label: 'Never hit', value: data.neverHitRedirects },
     { label: 'Stale redirects', value: data.staleRedirects },
     { label: '404s tracked', value: data.notFoundCount },
     { label: 'Chains & loops', value: data.chainsAndLoops },
   ]
   return (
-    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-5">
       {cards.map((c) => (
         <div key={c.label} className="border-border bg-card rounded-lg border p-4">
           <p className="text-muted-foreground text-sm">{c.label}</p>
@@ -470,6 +471,7 @@ export function RedirectsTab() {
                                 label={r.enabled ? 'Enabled' : 'Disabled'}
                                 tone={r.enabled ? 'good' : 'neutral'}
                               />
+                              {r.neverHit && <SeoStatusBadge label="Never hit" tone="neutral" />}
                               {r.stale && <SeoStatusBadge label="Stale" tone="fair" />}
                             </span>
                           </td>

package/src/views/users/UserDetailDrawer.tsx

@@ -39,6 +39,7 @@ import { Button } from '../../components/ui/Button.js'
 import { Skeleton } from '../../components/ui/Skeleton.js'
 import { EmptyState } from '../../components/ui/EmptyState.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { ReauthDialog } from '../../components/ui/ReauthDialog.js'
 
 // ---------------------------------------------------------------------------
 // Types (mirror cms-core serialized shapes)
@@ -151,82 +152,6 @@ const STATUS_META: Record<UserDetail['status'], { dot: string; text: string; lab
   },
 }
 
-// ---------------------------------------------------------------------------
-// Reauth dialog
-// ---------------------------------------------------------------------------
-
-function ReauthDialog({
-  open,
-  onClose,
-  onSubmit,
-}: {
-  open: boolean
-  onClose: () => void
-  onSubmit: (password: string) => Promise<void>
-}) {
-  const [password, setPassword] = useState('')
-  const [busy, setBusy] = useState(false)
-
-  const submit = async () => {
-    if (!password || busy) return
-    setBusy(true)
-    try {
-      await onSubmit(password)
-      setPassword('')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <Modal
-      open={open}
-      onClose={() => {
-        setPassword('')
-        onClose()
-      }}
-      title="Confirm it's you"
-      actions={
-        <>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              setPassword('')
-              onClose()
-            }}
-          >
-            Cancel
-          </Button>
-          <Button variant="primary" loading={busy} disabled={!password || busy} onClick={submit}>
-            Confirm
-          </Button>
-        </>
-      }
-    >
-      <p className="text-muted-foreground mb-3 text-sm">
-        This is a sensitive action. Re-enter your password to continue.
-      </p>
-      <label
-        htmlFor="reauth-password"
-        className="text-card-foreground mb-1 block text-sm font-medium"
-      >
-        Your password
-      </label>
-      <input
-        id="reauth-password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') submit()
-        }}
-        autoComplete="current-password"
-        className="border-border bg-input-background text-foreground focus:ring-brand w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-      />
-    </Modal>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Transfer content modal
 // ---------------------------------------------------------------------------