{seo.title || `${collection.title || 'Collection'} History

import React from 'react' import { Head, usePage } from '@inertiajs/react' function getCsrfToken() { return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '' } function formatDateTime(value) { if (!value) return 'Unknown time' const date = new Date(value) if (Number.isNaN(date.getTime())) return 'Unknown time' return date.toLocaleString() } function FieldChanges({ label, value }) { if (!value || typeof value !== 'object' || Array.isArray(value)) return null const entries = Object.entries(value).slice(0, 8) if (!entries.length) return null return (

{label}

{entries.map(([key, fieldValue]) => (

{key} {Array.isArray(fieldValue) ? `${fieldValue.length} items` : String(fieldValue)}

))}

) } function buildPageUrl(pageNumber) { if (typeof window === 'undefined') return '#' const url = new URL(window.location.href) url.searchParams.set('page', String(pageNumber)) return url.toString() } export default function CollectionHistory() { const { props } = usePage() const collection = props.collection || {} const history = props.history || {} const entries = Array.isArray(history.data) ? history.data : [] const meta = history.meta || {} const seo = props.seo || {} const [busyId, setBusyId] = React.useState(null) const [notice, setNotice] = React.useState('') async function handleRestore(entry) { if (!props.restorePattern || !entry?.can_restore) return const confirmed = window.confirm(`Restore this collection state from history entry #${entry.id}?`) if (!confirmed) return setBusyId(entry.id) setNotice('') try { const response = await fetch(props.restorePattern.replace('__HISTORY__', String(entry.id)), { method: 'POST', headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken(), }, }) const payload = await response.json().catch(() => ({})) if (!response.ok) { throw new Error(payload?.message || 'Unable to restore this history entry right now.') } window.location.reload() } catch (error) { setNotice(error?.message || 'Unable to restore this history entry right now.') } finally { setBusyId(null) } } return ( <> {seo.title || `${collection.title || 'Collection'} History — Skinbase Nova`} {seo.canonical ? : null}

{props.dashboardUrl ? Dashboard : null} {props.analyticsUrl ? Analytics : null} {collection.manage_url ? Manage : null}

Audit

{collection.title || 'Collection history'}

A chronological log of lifecycle transitions, editorial changes, artwork operations, and moderation-adjacent actions for this collection.

{notice ?
{notice}
: null} {entries.length ? entries.map((entry) => (

{String(entry.action_type || 'updated').replace(/_/g, ' ')} {entry.actor?.username ? @{entry.actor.username} : System} {entry.can_restore ? Restorable : null}

{entry.summary || 'Collection updated'}
{entry.can_restore && Array.isArray(entry.restore_fields) && entry.restore_fields.length ?
Restores: {entry.restore_fields.join(', ')}
: null}

{formatDateTime(entry.created_at)}
{props.canRestoreHistory && entry.can_restore ? ( ) : null}

)) : (
No audit entries have been recorded for this collection yet.
)}
{Number(meta.last_page || 1) > 1 ? (

Page {meta.current_page || 1} of {meta.last_page || 1}

{(meta.current_page || 1) > 1 ? Previous : null} {(meta.current_page || 1) < (meta.last_page || 1) ? Next : null}

) : null}

) }