710 lines
34 KiB
JavaScript
710 lines
34 KiB
JavaScript
import React from 'react'
|
|
import { Head, usePage } from '@inertiajs/react'
|
|
import Checkbox from '../../components/ui/Checkbox'
|
|
import NovaSelect from '../../components/ui/NovaSelect'
|
|
|
|
function getCsrfToken() {
|
|
if (typeof document === 'undefined') return ''
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
|
|
async function requestJson(url, { method = 'POST', body } = {}) {
|
|
const response = await fetch(url, {
|
|
method,
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': getCsrfToken(),
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
})
|
|
|
|
const payload = await response.json().catch(() => ({}))
|
|
if (!response.ok) {
|
|
throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
|
|
}
|
|
|
|
return payload
|
|
}
|
|
|
|
function isoToLocalInput(value) {
|
|
if (!value) return ''
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return ''
|
|
|
|
const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
|
|
return local.toISOString().slice(0, 16)
|
|
}
|
|
|
|
function localInputToIso(value) {
|
|
if (!value) return null
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return null
|
|
|
|
return date.toISOString()
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) return '—'
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return '—'
|
|
|
|
return new Intl.DateTimeFormat('en', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
}).format(date)
|
|
}
|
|
|
|
function Badge({ label, tone = 'slate' }) {
|
|
const toneClasses = {
|
|
slate: 'border-white/10 bg-white/10 text-slate-100',
|
|
sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
|
|
emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
|
|
amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
|
|
rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
|
|
}
|
|
|
|
return (
|
|
<span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.slate}`}>
|
|
{label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function Field({ label, help, children }) {
|
|
return (
|
|
<label className="block space-y-2">
|
|
<span className="text-sm font-semibold text-white">{label}</span>
|
|
{children}
|
|
{help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function StatCard({ label, value, tone = 'sky' }) {
|
|
const toneClasses = {
|
|
sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
|
|
amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
|
|
emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
|
|
rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
|
|
<div className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.sky}`}>{label}</div>
|
|
<div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{value}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function emptyForm() {
|
|
return {
|
|
artwork_id: '',
|
|
priority: 100,
|
|
featured_at: isoToLocalInput(new Date().toISOString()),
|
|
expires_at: '',
|
|
is_active: true,
|
|
}
|
|
}
|
|
|
|
function mapEntryToCandidate(entry) {
|
|
if (!entry) return null
|
|
|
|
return {
|
|
...entry.artwork,
|
|
medals: entry.medals,
|
|
eligibility: entry.eligibility,
|
|
existing_feature_count: entry.duplicate_count,
|
|
already_featured: entry.duplicate_count > 0,
|
|
}
|
|
}
|
|
|
|
function compareEntries(left, right, sortKey, direction) {
|
|
const dir = direction === 'asc' ? 1 : -1
|
|
const value = (entry) => {
|
|
switch (sortKey) {
|
|
case 'featured_at':
|
|
return new Date(entry.featured_at || 0).getTime() || 0
|
|
case 'expires_at':
|
|
return new Date(entry.expires_at || 0).getTime() || 0
|
|
case 'score_30d':
|
|
return Number(entry.medals?.score_30d || 0)
|
|
default:
|
|
return Number(entry.priority || 0)
|
|
}
|
|
}
|
|
|
|
const leftValue = value(left)
|
|
const rightValue = value(right)
|
|
if (leftValue !== rightValue) {
|
|
return (leftValue > rightValue ? 1 : -1) * dir
|
|
}
|
|
|
|
const leftFeatured = new Date(left.featured_at || 0).getTime() || 0
|
|
const rightFeatured = new Date(right.featured_at || 0).getTime() || 0
|
|
if (leftFeatured !== rightFeatured) {
|
|
return (leftFeatured > rightFeatured ? 1 : -1) * dir
|
|
}
|
|
|
|
return Number(right.id || 0) - Number(left.id || 0)
|
|
}
|
|
|
|
export default function FeaturedArtworksAdmin() {
|
|
const { props } = usePage()
|
|
const endpoints = props.endpoints || {}
|
|
const capabilities = props.capabilities || {}
|
|
const seo = props.seo || {}
|
|
const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
|
|
const [winner, setWinner] = React.useState(props.winner || null)
|
|
const [stats, setStats] = React.useState(props.stats || {})
|
|
const [notice, setNotice] = React.useState('')
|
|
const [busy, setBusy] = React.useState('')
|
|
const [filter, setFilter] = React.useState('all')
|
|
const [sortKey, setSortKey] = React.useState('priority')
|
|
const [sortDirection, setSortDirection] = React.useState('desc')
|
|
const [listQuery, setListQuery] = React.useState('')
|
|
const [searchQuery, setSearchQuery] = React.useState('')
|
|
const [searchResults, setSearchResults] = React.useState([])
|
|
const [selectedArtwork, setSelectedArtwork] = React.useState(null)
|
|
const [editingId, setEditingId] = React.useState(null)
|
|
const [form, setForm] = React.useState(emptyForm())
|
|
|
|
React.useEffect(() => {
|
|
setEntries(Array.isArray(props.entries) ? props.entries : [])
|
|
setWinner(props.winner || null)
|
|
setStats(props.stats || {})
|
|
}, [props.entries, props.stats, props.winner])
|
|
|
|
function syncPayload(payload) {
|
|
setEntries(Array.isArray(payload.entries) ? payload.entries : [])
|
|
setWinner(payload.winner || null)
|
|
setStats(payload.stats || {})
|
|
if (payload.message) {
|
|
setNotice(payload.message)
|
|
}
|
|
}
|
|
|
|
function resetEditor() {
|
|
setEditingId(null)
|
|
setSelectedArtwork(null)
|
|
setSearchResults([])
|
|
setSearchQuery('')
|
|
setForm(emptyForm())
|
|
}
|
|
|
|
async function handleArtworkSearch(event) {
|
|
event.preventDefault()
|
|
if (!searchQuery.trim()) {
|
|
setSearchResults([])
|
|
return
|
|
}
|
|
|
|
setBusy('search')
|
|
setNotice('')
|
|
|
|
try {
|
|
const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
|
|
const payload = await requestJson(url, { method: 'GET' })
|
|
setSearchResults(Array.isArray(payload.results) ? payload.results : [])
|
|
if ((payload.results || []).length === 0) {
|
|
setNotice('No artworks matched that search.')
|
|
}
|
|
} catch (error) {
|
|
setNotice(error.message || 'Artwork search failed.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
function chooseArtwork(artwork) {
|
|
setSelectedArtwork(artwork)
|
|
setForm((current) => ({
|
|
...current,
|
|
artwork_id: artwork.id,
|
|
}))
|
|
}
|
|
|
|
function editEntry(entry) {
|
|
setEditingId(entry.id)
|
|
setSelectedArtwork(mapEntryToCandidate(entry))
|
|
setSearchResults([])
|
|
setSearchQuery('')
|
|
setForm({
|
|
artwork_id: entry.artwork_id,
|
|
priority: entry.priority,
|
|
featured_at: isoToLocalInput(entry.featured_at),
|
|
expires_at: isoToLocalInput(entry.expires_at),
|
|
is_active: Boolean(entry.is_active),
|
|
})
|
|
|
|
if (typeof window !== 'undefined') {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault()
|
|
if (!editingId && !form.artwork_id) {
|
|
setNotice('Select an artwork first.')
|
|
return
|
|
}
|
|
|
|
setBusy('submit')
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(
|
|
editingId
|
|
? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
|
|
: endpoints.store,
|
|
{
|
|
method: editingId ? 'PATCH' : 'POST',
|
|
body: {
|
|
artwork_id: Number(form.artwork_id),
|
|
priority: Number(form.priority || 0),
|
|
featured_at: localInputToIso(form.featured_at),
|
|
expires_at: localInputToIso(form.expires_at),
|
|
is_active: Boolean(form.is_active),
|
|
},
|
|
},
|
|
)
|
|
|
|
syncPayload(payload)
|
|
resetEditor()
|
|
} catch (error) {
|
|
setNotice(error.message || 'Failed to save this featured entry.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleToggle(entry) {
|
|
setBusy(`toggle-${entry.id}`)
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'PATCH',
|
|
})
|
|
syncPayload(payload)
|
|
} catch (error) {
|
|
setNotice(error.message || 'Failed to change active state.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleDelete(entry) {
|
|
if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
|
|
return
|
|
}
|
|
|
|
setBusy(`delete-${entry.id}`)
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'DELETE',
|
|
})
|
|
syncPayload(payload)
|
|
|
|
if (editingId === entry.id) {
|
|
resetEditor()
|
|
}
|
|
} catch (error) {
|
|
setNotice(error.message || 'Failed to delete this featured entry.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleForceHero(entry) {
|
|
setBusy(`force-${entry.id}`)
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'PATCH',
|
|
})
|
|
syncPayload(payload)
|
|
} catch (error) {
|
|
setNotice(error.message || 'Failed to change force hero state.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
const filteredEntries = React.useMemo(() => {
|
|
const query = listQuery.trim().toLowerCase()
|
|
|
|
return entries
|
|
.filter((entry) => {
|
|
if (filter === 'active') return Boolean(entry.is_active)
|
|
if (filter === 'inactive') return !entry.is_active
|
|
if (filter === 'expired') return Boolean(entry.is_expired)
|
|
if (filter === 'winner') return Boolean(entry.is_winner)
|
|
if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
|
|
if (filter === 'ineligible') return !entry.eligibility?.is_eligible
|
|
return true
|
|
})
|
|
.filter((entry) => {
|
|
if (!query) return true
|
|
|
|
const haystack = [
|
|
entry.artwork?.title,
|
|
entry.artwork?.owner?.display_name,
|
|
entry.artwork?.owner?.username,
|
|
entry.artwork?.id,
|
|
].join(' ').toLowerCase()
|
|
|
|
return haystack.includes(query)
|
|
})
|
|
.sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
|
|
}, [entries, filter, listQuery, sortDirection, sortKey])
|
|
|
|
const duplicateSelection = !editingId && selectedArtwork?.already_featured
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{seo.title || 'Featured Artworks'}</title>
|
|
{seo.description ? <meta name="description" content={seo.description} /> : null}
|
|
{seo.robots ? <meta name="robots" content={seo.robots} /> : null}
|
|
</Head>
|
|
|
|
<div className="min-h-screen bg-[#07111c] text-white">
|
|
<div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
|
|
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
|
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
|
|
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Homepage hero control, with the real winner logic exposed.</h1>
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">Editors can create, update, activate, expire, and remove featured entries here. The winner summary below mirrors the public homepage selection order: priority, recent medal score, featured date, then published date.</p>
|
|
</div>
|
|
<div className="grid w-full max-w-xl grid-cols-2 gap-4 md:grid-cols-3">
|
|
<StatCard label="Entries" value={stats.total || 0} tone="sky" />
|
|
<StatCard label="Eligible" value={stats.eligible || 0} tone="emerald" />
|
|
<StatCard label="Expired" value={stats.expired || 0} tone="amber" />
|
|
<StatCard label="Active" value={stats.active || 0} tone="sky" />
|
|
<StatCard label="Inactive" value={stats.inactive || 0} tone="rose" />
|
|
<StatCard label="Not Eligible" value={stats.ineligible || 0} tone="rose" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{notice ? (
|
|
<div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-4 py-3 text-sm text-sky-50">
|
|
{notice}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
|
|
<p className="mt-2 max-w-2xl text-sm leading-7 text-slate-300">
|
|
{winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
|
|
</p>
|
|
{winner?.is_force_hero ? (
|
|
<div className="mt-4 max-w-2xl rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
|
|
Forced by editor. This artwork bypasses the normal hero winner order until Force Hero is disabled on its featured row.
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No Winner" tone="rose" />}
|
|
{winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : null}
|
|
</div>
|
|
</div>
|
|
|
|
{winner ? (
|
|
<div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
|
|
<a href={winner.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[24px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
|
|
<img
|
|
src={winner.artwork?.thumbnail?.url}
|
|
alt={winner.artwork?.title || 'Winner preview'}
|
|
className="h-full min-h-[180px] w-full object-cover"
|
|
/>
|
|
</a>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Artist</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{winner.artwork?.owner?.display_name || 'Unknown'}</div>
|
|
<div className="mt-1 text-sm text-slate-400">{winner.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner.artwork?.owner?.username || ''}`}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Medal Score (30d)</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{winner.medals?.score_30d || 0}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Priority</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{winner.priority}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Featured Since</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.featured_at)}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4 sm:col-span-2">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Published At</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.artwork?.published_at)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{editingId ? 'Edit Entry' : 'Create Entry'}</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Featured entry #${editingId}` : 'Add an artwork to the featured pool'}</h2>
|
|
</div>
|
|
{editingId ? (
|
|
<button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
|
|
Cancel edit
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{!editingId ? (
|
|
<form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group. Pick a result to lock it into the form.">
|
|
<div className="flex gap-3">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(event) => setSearchQuery(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
placeholder="Try an artwork ID, title, or creator"
|
|
/>
|
|
<button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === 'search' ? 'Searching…' : 'Search'}
|
|
</button>
|
|
</div>
|
|
</Field>
|
|
|
|
{searchResults.length > 0 ? (
|
|
<div className="grid gap-3">
|
|
{searchResults.map((artwork) => (
|
|
<button
|
|
type="button"
|
|
key={artwork.id}
|
|
onClick={() => chooseArtwork(artwork)}
|
|
className={`grid gap-4 rounded-2xl border p-3 text-left transition sm:grid-cols-[88px_1fr] ${selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]'}`}
|
|
>
|
|
<img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-semibold text-white">{artwork.title}</span>
|
|
<span className="text-xs text-slate-400">#{artwork.id}</span>
|
|
{artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
|
|
</div>
|
|
<div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
|
|
(artwork.eligibility?.reasons || []).map((reason) => ({
|
|
label: reason,
|
|
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
|
}))
|
|
).slice(0, 4).map((badge) => (
|
|
<Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
) : null}
|
|
|
|
{selectedArtwork ? (
|
|
<div className="mt-6 grid gap-4 rounded-[24px] border border-white/10 bg-black/20 p-4 sm:grid-cols-[108px_1fr]">
|
|
<img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
|
|
<div className="space-y-3">
|
|
<div>
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
|
|
<div className="mt-1 text-sm text-slate-400">#{selectedArtwork.id} • {selectedArtwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
|
|
(selectedArtwork.eligibility?.reasons || []).map((reason) => ({
|
|
label: reason,
|
|
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
|
}))
|
|
).map((badge) => (
|
|
<Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{duplicateSelection ? (
|
|
<div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
|
|
This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
|
|
</div>
|
|
) : null}
|
|
|
|
<form onSubmit={handleSubmit} className="mt-6 grid gap-4 sm:grid-cols-2">
|
|
<Field label="Priority" help="Higher priority always wins before medal score is considered.">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
value={form.priority}
|
|
onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
|
|
<label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
|
|
<Checkbox
|
|
checked={Boolean(form.is_active)}
|
|
onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
|
|
/>
|
|
<span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
|
|
</label>
|
|
</Field>
|
|
|
|
<Field label="Featured Since">
|
|
<input
|
|
type="datetime-local"
|
|
value={form.featured_at}
|
|
onChange={(event) => setForm((current) => ({ ...current, featured_at: event.target.value }))}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Expires">
|
|
<input
|
|
type="datetime-local"
|
|
value={form.expires_at}
|
|
onChange={(event) => setForm((current) => ({ ...current, expires_at: event.target.value }))}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
</Field>
|
|
|
|
<div className="sm:col-span-2 flex flex-wrap gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
|
|
className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
|
|
</button>
|
|
{editingId ? (
|
|
<button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Reset
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with eligibility and winner state visible.</h2>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-3 lg:w-[720px]">
|
|
<input
|
|
type="text"
|
|
value={listQuery}
|
|
onChange={(event) => setListQuery(event.target.value)}
|
|
placeholder="Filter by title, artist, or artwork ID"
|
|
className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
<NovaSelect value={filter} onChange={(val) => setFilter(val)} searchable={false} options={[{ value: 'all', label: 'All rows' }, { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, { value: 'expired', label: 'Expired' }, { value: 'winner', label: 'Winner' }, { value: 'eligible', label: 'Eligible' }, { value: 'ineligible', label: 'Not eligible' }]} />
|
|
<div className="grid grid-cols-[1fr_auto] gap-3">
|
|
<NovaSelect value={sortKey} onChange={(val) => setSortKey(val)} searchable={false} options={[{ value: 'priority', label: 'Priority' }, { value: 'featured_at', label: 'Featured Since' }, { value: 'expires_at', label: 'Expires' }, { value: 'score_30d', label: 'Medal Score (30d)' }]} />
|
|
<button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
{sortDirection === 'desc' ? 'Desc' : 'Asc'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 overflow-hidden rounded-[24px] border border-white/10">
|
|
<div className="hidden grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] gap-4 border-b border-white/10 bg-black/20 px-5 py-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 lg:grid">
|
|
<div>Artwork</div>
|
|
<div>Artist / Owner</div>
|
|
<div>Priority</div>
|
|
<div>Featured Since</div>
|
|
<div>Expires</div>
|
|
<div>Score (30d)</div>
|
|
<div>Status</div>
|
|
<div>Actions</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-white/10">
|
|
{filteredEntries.length === 0 ? (
|
|
<div className="px-5 py-10 text-center text-sm text-slate-400">No featured entries match the current filter.</div>
|
|
) : filteredEntries.map((entry) => (
|
|
<div key={entry.id} className="grid gap-5 bg-white/[0.02] px-5 py-5 lg:grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] lg:items-center">
|
|
<div className="grid gap-4 sm:grid-cols-[92px_1fr]">
|
|
<a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="overflow-hidden rounded-2xl border border-white/10 bg-[#08111d]">
|
|
<img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-24 w-full object-cover" />
|
|
</a>
|
|
<div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-semibold text-white">{entry.artwork?.title || 'Missing artwork'}</span>
|
|
<span className="text-xs text-slate-400">#{entry.artwork?.id || entry.artwork_id}</span>
|
|
</div>
|
|
<div className="mt-2 text-xs leading-6 text-slate-400">Visibility: {entry.artwork?.visibility || '—'} • Published: {entry.artwork?.published_at ? 'Yes' : 'No'}</div>
|
|
{entry.is_winner && entry.winner_reason ? <div className="mt-2 text-xs leading-6 text-amber-100">{entry.winner_reason}</div> : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-sm font-semibold text-white">{entry.artwork?.owner?.display_name || 'Unknown'}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{entry.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${entry.artwork?.owner?.username || ''}`}</div>
|
|
</div>
|
|
|
|
<div className="text-sm font-semibold text-white">{entry.priority}</div>
|
|
<div className="text-sm text-slate-200">{formatDateTime(entry.featured_at)}</div>
|
|
<div className="text-sm text-slate-200">{formatDateTime(entry.expires_at)}</div>
|
|
<div className="text-sm font-semibold text-white">{entry.medals?.score_30d || 0}</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{(entry.status_badges || []).map((badge, index) => (
|
|
<Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 lg:justify-end">
|
|
<button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Edit
|
|
</button>
|
|
{capabilities.forceHeroEnabled ? (
|
|
<button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={`rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60 ${entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5'}`}>
|
|
{busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
|
|
</button>
|
|
) : null}
|
|
<button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
|
|
</button>
|
|
<button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |