optimizations
This commit is contained in:
963
resources/js/Pages/Collection/CollectionStaffProgramming.jsx
Normal file
963
resources/js/Pages/Collection/CollectionStaffProgramming.jsx
Normal file
@@ -0,0 +1,963 @@
|
||||
import React from 'react'
|
||||
import { Head, usePage } from '@inertiajs/react'
|
||||
import CollectionCard from '../../components/profile/collections/CollectionCard'
|
||||
import ShareToast from '../../components/ui/ShareToast'
|
||||
|
||||
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 || '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 titleize(value) {
|
||||
return String(value || '')
|
||||
.split('_')
|
||||
.filter(Boolean)
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
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',
|
||||
}
|
||||
|
||||
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 sortAssignments(items) {
|
||||
return [...items].sort((left, right) => {
|
||||
const keyCompare = String(left.program_key || '').localeCompare(String(right.program_key || ''))
|
||||
if (keyCompare !== 0) return keyCompare
|
||||
return (Number(right.priority) || 0) - (Number(left.priority) || 0)
|
||||
})
|
||||
}
|
||||
|
||||
function buildHooksForm(collection) {
|
||||
return {
|
||||
experiment_key: collection?.experiment_key || '',
|
||||
experiment_treatment: collection?.experiment_treatment || '',
|
||||
placement_variant: collection?.placement_variant || '',
|
||||
ranking_mode_variant: collection?.ranking_mode_variant || '',
|
||||
collection_pool_version: collection?.collection_pool_version || '',
|
||||
test_label: collection?.test_label || '',
|
||||
promotion_tier: collection?.promotion_tier || '',
|
||||
partner_key: collection?.partner_key || '',
|
||||
trust_tier: collection?.trust_tier || '',
|
||||
sponsorship_state: collection?.sponsorship_state || '',
|
||||
ownership_domain: collection?.ownership_domain || '',
|
||||
commercial_review_state: collection?.commercial_review_state || '',
|
||||
legal_review_state: collection?.legal_review_state || '',
|
||||
placement_eligibility: Boolean(collection?.placement_eligibility),
|
||||
}
|
||||
}
|
||||
|
||||
function buildDiagnostics(collection) {
|
||||
if (!collection) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
collection_id: Number(collection.id),
|
||||
workflow_state: collection.workflow_state || null,
|
||||
health_state: collection.health_state || null,
|
||||
placement_eligibility: Boolean(collection.placement_eligibility),
|
||||
experiment_key: collection.experiment_key || null,
|
||||
experiment_treatment: collection.experiment_treatment || null,
|
||||
placement_variant: collection.placement_variant || null,
|
||||
ranking_mode_variant: collection.ranking_mode_variant || null,
|
||||
collection_pool_version: collection.collection_pool_version || null,
|
||||
test_label: collection.test_label || null,
|
||||
partner_key: collection.partner_key || null,
|
||||
trust_tier: collection.trust_tier || null,
|
||||
promotion_tier: collection.promotion_tier || null,
|
||||
sponsorship_state: collection.sponsorship_state || null,
|
||||
ownership_domain: collection.ownership_domain || null,
|
||||
commercial_review_state: collection.commercial_review_state || null,
|
||||
legal_review_state: collection.legal_review_state || null,
|
||||
ranking_bucket: collection.ranking_bucket || null,
|
||||
recommendation_tier: collection.recommendation_tier || null,
|
||||
last_health_check_at: collection.last_health_check_at || null,
|
||||
last_recommendation_refresh_at: collection.last_recommendation_refresh_at || null,
|
||||
}
|
||||
}
|
||||
|
||||
function buildProgramUrl(pattern, programKey) {
|
||||
if (!pattern || !programKey) return null
|
||||
return pattern.replace('__PROGRAM__', String(programKey))
|
||||
}
|
||||
|
||||
export default function CollectionStaffProgramming() {
|
||||
const { props } = usePage()
|
||||
const initialCollectionOptions = Array.isArray(props.collectionOptions) ? props.collectionOptions : []
|
||||
const initialAssignments = Array.isArray(props.assignments) ? props.assignments : []
|
||||
const baseProgramKeys = Array.isArray(props.programKeyOptions) ? props.programKeyOptions : []
|
||||
const initialMergeQueue = props.mergeQueue || { summary: {}, pending: [], recent: [] }
|
||||
const observabilitySummary = props.observabilitySummary || { counts: {}, watchlist: [], generated_at: null }
|
||||
const endpoints = props.endpoints || {}
|
||||
const historyPattern = props.historyPattern || ''
|
||||
const seo = props.seo || {}
|
||||
const viewer = props.viewer || {}
|
||||
const [assignments, setAssignments] = React.useState(sortAssignments(initialAssignments))
|
||||
const [collectionOverrides, setCollectionOverrides] = React.useState({})
|
||||
const collectionOptions = React.useMemo(() => initialCollectionOptions.map((collection) => collectionOverrides[collection.id] || collection), [collectionOverrides, initialCollectionOptions])
|
||||
const [mergeQueue, setMergeQueue] = React.useState(initialMergeQueue)
|
||||
const [previewCollections, setPreviewCollections] = React.useState([])
|
||||
const [diagnostics, setDiagnostics] = React.useState({
|
||||
eligibility: null,
|
||||
duplicates: null,
|
||||
recommendations: null,
|
||||
})
|
||||
const [notice, setNotice] = React.useState('')
|
||||
const [toast, setToast] = React.useState({ id: 0, visible: false, message: '', variant: 'success' })
|
||||
const [busy, setBusy] = React.useState('')
|
||||
const [queueBusy, setQueueBusy] = React.useState({})
|
||||
const [selectedCollectionId, setSelectedCollectionId] = React.useState(initialCollectionOptions[0]?.id || '')
|
||||
const [previewForm, setPreviewForm] = React.useState({
|
||||
program_key: baseProgramKeys[0] || '',
|
||||
limit: 8,
|
||||
})
|
||||
const [assignmentForm, setAssignmentForm] = React.useState({
|
||||
id: null,
|
||||
collection_id: collectionOptions[0]?.id || '',
|
||||
program_key: baseProgramKeys[0] || '',
|
||||
campaign_key: '',
|
||||
placement_scope: '',
|
||||
starts_at: '',
|
||||
ends_at: '',
|
||||
priority: 0,
|
||||
notes: '',
|
||||
})
|
||||
const selectedCollection = React.useMemo(() => collectionOptions.find((collection) => String(collection.id) === String(selectedCollectionId)) || null, [collectionOptions, selectedCollectionId])
|
||||
const [hooksForm, setHooksForm] = React.useState(buildHooksForm(initialCollectionOptions[0] || null))
|
||||
const [hooksDiagnostics, setHooksDiagnostics] = React.useState(buildDiagnostics(initialCollectionOptions[0] || null))
|
||||
|
||||
const programKeyOptions = React.useMemo(() => {
|
||||
return Array.from(new Set([
|
||||
...baseProgramKeys,
|
||||
...assignments.map((assignment) => assignment.program_key).filter(Boolean),
|
||||
...collectionOptions.map((collection) => collection.program_key).filter(Boolean),
|
||||
assignmentForm.program_key || null,
|
||||
previewForm.program_key || null,
|
||||
].filter(Boolean))).sort((left, right) => String(left).localeCompare(String(right)))
|
||||
}, [assignmentForm.program_key, assignments, baseProgramKeys, collectionOptions, previewForm.program_key])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!assignmentForm.collection_id && collectionOptions[0]?.id) {
|
||||
setAssignmentForm((current) => ({ ...current, collection_id: collectionOptions[0].id }))
|
||||
}
|
||||
|
||||
if (!selectedCollectionId && collectionOptions[0]?.id) {
|
||||
setSelectedCollectionId(collectionOptions[0].id)
|
||||
}
|
||||
}, [assignmentForm.collection_id, collectionOptions, selectedCollectionId])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!assignmentForm.program_key && programKeyOptions[0]) {
|
||||
setAssignmentForm((current) => ({ ...current, program_key: programKeyOptions[0] }))
|
||||
}
|
||||
|
||||
if (!previewForm.program_key && programKeyOptions[0]) {
|
||||
setPreviewForm((current) => ({ ...current, program_key: programKeyOptions[0] }))
|
||||
}
|
||||
}, [assignmentForm.program_key, previewForm.program_key, programKeyOptions])
|
||||
|
||||
React.useEffect(() => {
|
||||
setMergeQueue(initialMergeQueue)
|
||||
}, [initialMergeQueue])
|
||||
|
||||
React.useEffect(() => {
|
||||
setHooksForm(buildHooksForm(selectedCollection))
|
||||
setHooksDiagnostics(buildDiagnostics(selectedCollection))
|
||||
}, [selectedCollection])
|
||||
|
||||
function showToast(message, variant = 'success') {
|
||||
setToast({
|
||||
id: Date.now() + Math.random(),
|
||||
visible: true,
|
||||
message,
|
||||
variant,
|
||||
})
|
||||
}
|
||||
|
||||
function resetAssignmentForm() {
|
||||
setAssignmentForm({
|
||||
id: null,
|
||||
collection_id: collectionOptions[0]?.id || '',
|
||||
program_key: programKeyOptions[0] || '',
|
||||
campaign_key: '',
|
||||
placement_scope: '',
|
||||
starts_at: '',
|
||||
ends_at: '',
|
||||
priority: 0,
|
||||
notes: '',
|
||||
})
|
||||
}
|
||||
|
||||
function hydrateAssignment(assignment) {
|
||||
setAssignmentForm({
|
||||
id: assignment.id,
|
||||
collection_id: assignment.collection?.id || '',
|
||||
program_key: assignment.program_key || '',
|
||||
campaign_key: assignment.campaign_key || '',
|
||||
placement_scope: assignment.placement_scope || '',
|
||||
starts_at: isoToLocalInput(assignment.starts_at),
|
||||
ends_at: isoToLocalInput(assignment.ends_at),
|
||||
priority: assignment.priority || 0,
|
||||
notes: assignment.notes || '',
|
||||
})
|
||||
}
|
||||
|
||||
async function handleAssignmentSubmit(event) {
|
||||
event.preventDefault()
|
||||
setBusy('assignment')
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const url = assignmentForm.id
|
||||
? endpoints.updatePattern?.replace('__PROGRAM__', String(assignmentForm.id))
|
||||
: endpoints.store
|
||||
|
||||
const payload = await requestJson(url, {
|
||||
method: assignmentForm.id ? 'PATCH' : 'POST',
|
||||
body: {
|
||||
collection_id: Number(assignmentForm.collection_id),
|
||||
program_key: assignmentForm.program_key,
|
||||
campaign_key: assignmentForm.campaign_key || null,
|
||||
placement_scope: assignmentForm.placement_scope || null,
|
||||
starts_at: assignmentForm.starts_at ? new Date(assignmentForm.starts_at).toISOString() : null,
|
||||
ends_at: assignmentForm.ends_at ? new Date(assignmentForm.ends_at).toISOString() : null,
|
||||
priority: Number(assignmentForm.priority || 0),
|
||||
notes: assignmentForm.notes || null,
|
||||
},
|
||||
})
|
||||
|
||||
setAssignments((current) => sortAssignments([...current.filter((item) => item.id !== payload.assignment.id), payload.assignment]))
|
||||
setNotice(assignmentForm.id ? 'Programming assignment updated.' : 'Programming assignment created.')
|
||||
resetAssignmentForm()
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to save programming assignment.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePreview(event) {
|
||||
event.preventDefault()
|
||||
setBusy('preview')
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(endpoints.preview, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
program_key: previewForm.program_key,
|
||||
limit: Number(previewForm.limit || 8),
|
||||
},
|
||||
})
|
||||
|
||||
setPreviewCollections(Array.isArray(payload.collections) ? payload.collections : [])
|
||||
setNotice('Preview refreshed.')
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to preview this program key.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function runDiagnostic(kind) {
|
||||
const endpointMap = {
|
||||
eligibility: endpoints.refreshEligibility,
|
||||
duplicates: endpoints.duplicateScan,
|
||||
recommendations: endpoints.refreshRecommendations,
|
||||
}
|
||||
|
||||
const url = endpointMap[kind]
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
|
||||
setBusy(kind)
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(url, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
collection_id: selectedCollectionId ? Number(selectedCollectionId) : null,
|
||||
},
|
||||
})
|
||||
|
||||
setDiagnostics((current) => ({ ...current, [kind]: payload.result || null }))
|
||||
setNotice(payload?.result?.message || `${titleize(kind)} queued.`)
|
||||
} catch (error) {
|
||||
setNotice(error.message || `Failed to run ${kind}.`)
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleQueueAction(kind, item) {
|
||||
const sourceId = item?.source?.id
|
||||
const targetId = item?.target?.id
|
||||
|
||||
if (!sourceId || !targetId) {
|
||||
return
|
||||
}
|
||||
|
||||
const endpointMap = {
|
||||
canonicalize: endpoints.canonicalizeCandidate,
|
||||
merge: endpoints.mergeCandidate,
|
||||
reject: endpoints.rejectCandidate,
|
||||
}
|
||||
|
||||
const confirmationMap = {
|
||||
canonicalize: `Designate "${item.target?.title || 'this collection'}" as the canonical target for "${item.source?.title || 'this collection'}"?`,
|
||||
merge: `Merge "${item.source?.title || 'this collection'}" into "${item.target?.title || 'this collection'}" from the staff queue?`,
|
||||
reject: `Mark "${item.target?.title || 'this collection'}" as not a duplicate of "${item.source?.title || 'this collection'}"?`,
|
||||
}
|
||||
|
||||
const url = endpointMap[kind]
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!window.confirm(confirmationMap[kind] || 'Continue?')) {
|
||||
return
|
||||
}
|
||||
|
||||
setQueueBusy((current) => ({ ...current, [item.id]: kind }))
|
||||
|
||||
try {
|
||||
const payload = await requestJson(url, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
source_collection_id: Number(sourceId),
|
||||
target_collection_id: Number(targetId),
|
||||
},
|
||||
})
|
||||
|
||||
if (payload?.mergeQueue) {
|
||||
setMergeQueue(payload.mergeQueue)
|
||||
}
|
||||
|
||||
showToast(payload?.message || `${titleize(kind)} action completed.`, 'success')
|
||||
} catch (error) {
|
||||
showToast(error.message || `Failed to ${kind} this queue item.`, 'error')
|
||||
} finally {
|
||||
setQueueBusy((current) => {
|
||||
const next = { ...current }
|
||||
delete next[item.id]
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function handleHooksSubmit(event) {
|
||||
event.preventDefault()
|
||||
|
||||
if (!selectedCollectionId || !endpoints.metadataUpdate) {
|
||||
return
|
||||
}
|
||||
|
||||
setBusy('hooks')
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(endpoints.metadataUpdate, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
collection_id: Number(selectedCollectionId),
|
||||
experiment_key: hooksForm.experiment_key || null,
|
||||
experiment_treatment: hooksForm.experiment_treatment || null,
|
||||
placement_variant: hooksForm.placement_variant || null,
|
||||
ranking_mode_variant: hooksForm.ranking_mode_variant || null,
|
||||
collection_pool_version: hooksForm.collection_pool_version || null,
|
||||
test_label: hooksForm.test_label || null,
|
||||
promotion_tier: hooksForm.promotion_tier || null,
|
||||
partner_key: viewer.isAdmin ? (hooksForm.partner_key || null) : undefined,
|
||||
trust_tier: viewer.isAdmin ? (hooksForm.trust_tier || null) : undefined,
|
||||
sponsorship_state: viewer.isAdmin ? (hooksForm.sponsorship_state || null) : undefined,
|
||||
ownership_domain: viewer.isAdmin ? (hooksForm.ownership_domain || null) : undefined,
|
||||
commercial_review_state: viewer.isAdmin ? (hooksForm.commercial_review_state || null) : undefined,
|
||||
legal_review_state: viewer.isAdmin ? (hooksForm.legal_review_state || null) : undefined,
|
||||
placement_eligibility: Boolean(hooksForm.placement_eligibility),
|
||||
},
|
||||
})
|
||||
|
||||
if (payload?.collection?.id) {
|
||||
setCollectionOverrides((current) => ({
|
||||
...current,
|
||||
[payload.collection.id]: payload.collection,
|
||||
}))
|
||||
}
|
||||
|
||||
setHooksDiagnostics(payload?.diagnostics || buildDiagnostics(payload?.collection || selectedCollection))
|
||||
setHooksForm(buildHooksForm(payload?.collection || selectedCollection))
|
||||
setNotice(payload?.message || 'Experiment and program governance hooks updated.')
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to update experiment and program governance hooks.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
const totalPrograms = Array.from(new Set(assignments.map((assignment) => assignment.program_key).filter(Boolean))).length
|
||||
const eligibleAssignments = assignments.filter((assignment) => assignment.collection?.placement_eligibility === true).length
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{seo.title || 'Collection Programming — Skinbase Nova'}</title>
|
||||
<meta name="description" content={seo.description || 'Staff programming tools for collections.'} />
|
||||
{seo.canonical ? <link rel="canonical" href={seo.canonical} /> : null}
|
||||
<meta name="robots" content={seo.robots || 'noindex,follow'} />
|
||||
</Head>
|
||||
|
||||
<ShareToast
|
||||
key={toast.id}
|
||||
message={toast.message}
|
||||
visible={toast.visible}
|
||||
variant={toast.variant}
|
||||
duration={toast.variant === 'error' ? 3200 : 2200}
|
||||
onHide={() => setToast((current) => ({ ...current, visible: false }))}
|
||||
/>
|
||||
|
||||
<div className="relative min-h-screen overflow-hidden pb-16">
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[34rem] opacity-95" style={{ background: 'radial-gradient(circle at 18% 15%, rgba(56,189,248,0.18), transparent 28%), radial-gradient(circle at 85% 14%, rgba(132,204,22,0.16), transparent 26%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #08111f 100%)' }} />
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 opacity-[0.05]" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }} />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-4 pt-8 md:px-6">
|
||||
<section className="rounded-[34px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm md:p-8">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-lime-200/80">Staff Programming</p>
|
||||
<h1 className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">Collections programming studio</h1>
|
||||
<p className="mt-4 max-w-3xl text-sm leading-relaxed text-slate-300 md:text-[15px]">
|
||||
Manage program assignments, preview live pools, and run targeted diagnostics before collections hit discovery surfaces.
|
||||
</p>
|
||||
{notice ? <p className="mt-4 text-sm text-sky-100">{notice}</p> : null}
|
||||
</div>
|
||||
{endpoints.surfaces ? <a href={endpoints.surfaces} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-thumbtack fa-fw text-[11px]" />Open placement studio</a> : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-8 grid gap-5 md:grid-cols-3">
|
||||
<StatCard label="Assignments" value={assignments.length} tone="sky" />
|
||||
<StatCard label="Program Keys" value={totalPrograms} tone="amber" />
|
||||
<StatCard label="Eligible" value={eligibleAssignments} tone="emerald" />
|
||||
</section>
|
||||
|
||||
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-rose-200/80">Merge Queue</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Pending duplicates and recent decisions</h2>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
||||
Review what still needs merge attention and what staff already resolved. Each row links back into the collection studio for full compare-and-confirm actions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<StatCard label="Pending" value={mergeQueue?.summary?.pending || 0} tone="amber" />
|
||||
<StatCard label="Approved" value={mergeQueue?.summary?.approved || 0} tone="sky" />
|
||||
<StatCard label="Rejected" value={mergeQueue?.summary?.rejected || 0} tone="emerald" />
|
||||
<StatCard label="Merged" value={mergeQueue?.summary?.completed || 0} tone="sky" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-6 xl:grid-cols-2">
|
||||
<div className="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-rose-200/80">Needs Review</p>
|
||||
<h3 className="mt-2 text-xl font-semibold text-white">Suggested duplicate pairs</h3>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{mergeQueue?.pending?.length || 0}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
{(mergeQueue?.pending || []).length ? mergeQueue.pending.map((item) => {
|
||||
const activeQueueAction = queueBusy[item.id] || ''
|
||||
const cardBusy = Boolean(activeQueueAction)
|
||||
|
||||
return (
|
||||
<div key={`merge-pending-${item.id}`} className={`rounded-[24px] border border-white/10 bg-white/[0.04] p-4 transition ${cardBusy ? 'ring-1 ring-sky-300/25' : ''}`}>
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(item.comparison?.match_reasons || []).map((reason) => (
|
||||
<span key={reason} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-300">{titleize(reason)}</span>
|
||||
))}
|
||||
</div>
|
||||
{cardBusy ? <span className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-sky-100"><i className="fa-solid fa-circle-notch fa-spin fa-fw text-[10px]" />Processing {titleize(activeQueueAction)}</span> : null}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div>
|
||||
<p className="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Source</p>
|
||||
{item.source ? <CollectionCard collection={item.source} isOwner /> : null}
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Candidate</p>
|
||||
{item.target ? <CollectionCard collection={item.target} isOwner /> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-2 md:grid-cols-3 text-xs text-slate-400">
|
||||
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Shared artworks: <span className="font-semibold text-white">{item.comparison?.shared_artworks_count ?? 0}</span></div>
|
||||
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Source count: <span className="font-semibold text-white">{item.comparison?.source_artworks_count ?? 0}</span></div>
|
||||
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Target count: <span className="font-semibold text-white">{item.comparison?.target_artworks_count ?? 0}</span></div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{item.source?.manage_url ? <a href={item.source.manage_url} className="inline-flex items-center gap-2 rounded-full border border-rose-300/20 bg-rose-400/10 px-4 py-2 text-xs font-semibold text-rose-100 transition hover:bg-rose-400/15"><i className="fa-solid fa-code-compare fa-fw text-[10px]" />Review source</a> : null}
|
||||
{item.target?.manage_url ? <a href={item.target.manage_url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-arrow-up-right-from-square fa-fw text-[10px]" />Open target</a> : null}
|
||||
{item.source?.id && historyPattern ? <a href={historyPattern.replace('__COLLECTION__', String(item.source.id))} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-timeline fa-fw text-[10px]" />History</a> : null}
|
||||
<button type="button" onClick={() => handleQueueAction('canonicalize', item)} disabled={cardBusy} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-xs font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:opacity-60"><i className={`fa-solid ${activeQueueAction === 'canonicalize' ? 'fa-circle-notch fa-spin' : 'fa-badge-check'} fa-fw text-[10px]`} />{activeQueueAction === 'canonicalize' ? 'Canonicalizing...' : 'Canonicalize'}</button>
|
||||
<button type="button" onClick={() => handleQueueAction('merge', item)} disabled={cardBusy} className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-400/10 px-4 py-2 text-xs font-semibold text-emerald-100 transition hover:bg-emerald-400/15 disabled:opacity-60"><i className={`fa-solid ${activeQueueAction === 'merge' ? 'fa-circle-notch fa-spin' : 'fa-code-merge'} fa-fw text-[10px]`} />{activeQueueAction === 'merge' ? 'Merging...' : 'Merge now'}</button>
|
||||
<button type="button" onClick={() => handleQueueAction('reject', item)} disabled={cardBusy} className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition hover:bg-amber-400/15 disabled:opacity-60"><i className={`fa-solid ${activeQueueAction === 'reject' ? 'fa-circle-notch fa-spin' : 'fa-ban'} fa-fw text-[10px]`} />{activeQueueAction === 'reject' ? 'Rejecting...' : 'Reject'}</button>
|
||||
</div>
|
||||
</div>
|
||||
)}) : <div className="rounded-[24px] border border-dashed border-white/12 bg-white/[0.03] px-5 py-10 text-sm text-slate-300">No pending merge candidates right now.</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Recent Decisions</p>
|
||||
<h3 className="mt-2 text-xl font-semibold text-white">Canonical, reject, and merge history</h3>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{mergeQueue?.recent?.length || 0}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
{(mergeQueue?.recent || []).length ? mergeQueue.recent.map((item) => (
|
||||
<div key={`merge-recent-${item.id}`} className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<span className="inline-flex rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{titleize(item.action_type)}</span>
|
||||
{item.summary ? <p className="mt-2 text-sm text-slate-300">{item.summary}</p> : null}
|
||||
<p className="mt-2 text-xs text-slate-500">{item.updated_at ? new Date(item.updated_at).toLocaleString() : 'Unknown time'}{item.actor?.username ? ` • @${item.actor.username}` : ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3 lg:grid-cols-2 text-sm text-slate-300">
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Source</div>
|
||||
<div className="mt-1 font-semibold text-white">{item.source?.title || 'Collection'}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Target</div>
|
||||
<div className="mt-1 font-semibold text-white">{item.target?.title || 'Collection'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{item.source?.manage_url ? <a href={item.source.manage_url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-pen-to-square fa-fw text-[10px]" />Open source</a> : null}
|
||||
{item.target?.manage_url ? <a href={item.target.manage_url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-arrow-up-right-from-square fa-fw text-[10px]" />Open target</a> : null}
|
||||
</div>
|
||||
</div>
|
||||
)) : <div className="rounded-[24px] border border-dashed border-white/12 bg-white/[0.03] px-5 py-10 text-sm text-slate-300">No recent merge decisions yet.</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
|
||||
<form onSubmit={handleAssignmentSubmit} className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Assignment</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Program key and scope</h2>
|
||||
</div>
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
<Field label="Collection">
|
||||
<select value={assignmentForm.collection_id} onChange={(event) => setAssignmentForm((current) => ({ ...current, collection_id: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none">
|
||||
{collectionOptions.map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Program Key" help="Use stable internal names like discover-spring or homepage-hero.">
|
||||
<input list="program-key-options" value={assignmentForm.program_key} onChange={(event) => setAssignmentForm((current) => ({ ...current, program_key: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Placement Scope" help="Optional placement scope such as homepage.hero or discover.rail.">
|
||||
<input value={assignmentForm.placement_scope} onChange={(event) => setAssignmentForm((current) => ({ ...current, placement_scope: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Campaign Key">
|
||||
<input value={assignmentForm.campaign_key} onChange={(event) => setAssignmentForm((current) => ({ ...current, campaign_key: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Priority">
|
||||
<input type="number" min="-100" max="100" value={assignmentForm.priority} onChange={(event) => setAssignmentForm((current) => ({ ...current, priority: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" />
|
||||
</Field>
|
||||
<Field label="Starts At"><input type="datetime-local" value={assignmentForm.starts_at} onChange={(event) => setAssignmentForm((current) => ({ ...current, starts_at: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" /></Field>
|
||||
<Field label="Ends At"><input type="datetime-local" value={assignmentForm.ends_at} onChange={(event) => setAssignmentForm((current) => ({ ...current, ends_at: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" /></Field>
|
||||
</div>
|
||||
<Field label="Notes" help="Operational note for launch timing, overrides, or review context."><textarea value={assignmentForm.notes} onChange={(event) => setAssignmentForm((current) => ({ ...current, notes: event.target.value }))} className="mt-4 min-h-[120px] w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={1000} /></Field>
|
||||
<div className="mt-5 flex flex-wrap gap-3">
|
||||
<button type="submit" disabled={busy === 'assignment'} className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'assignment' ? 'fa-circle-notch fa-spin' : 'fa-sliders'} fa-fw`} />{assignmentForm.id ? 'Update Assignment' : 'Save Assignment'}</button>
|
||||
{assignmentForm.id ? <button type="button" onClick={resetAssignmentForm} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-rotate-left fa-fw" />Cancel Edit</button> : null}
|
||||
</div>
|
||||
<datalist id="program-key-options">
|
||||
{programKeyOptions.map((option) => <option key={option} value={option} />)}
|
||||
</datalist>
|
||||
</form>
|
||||
|
||||
<div className="space-y-6">
|
||||
<form onSubmit={handlePreview} className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200/80">Preview</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Inspect a live program pool</h2>
|
||||
</div>
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_140px_auto]">
|
||||
<Field label="Program Key"><input list="program-key-options" value={previewForm.program_key} onChange={(event) => setPreviewForm((current) => ({ ...current, program_key: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} /></Field>
|
||||
<Field label="Limit"><input type="number" min="1" max="24" value={previewForm.limit} onChange={(event) => setPreviewForm((current) => ({ ...current, limit: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" /></Field>
|
||||
<div className="flex items-end"><button type="submit" disabled={busy === 'preview'} className="inline-flex h-[50px] w-full items-center justify-center gap-2 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-5 text-sm font-semibold text-amber-100 transition hover:bg-amber-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'preview' ? 'fa-circle-notch fa-spin' : 'fa-binoculars'} fa-fw`} />Preview</button></div>
|
||||
</div>
|
||||
|
||||
{previewCollections.length ? (
|
||||
<div className="mt-6 grid gap-4 xl:grid-cols-2">
|
||||
{previewCollections.map((collection) => (
|
||||
<div key={collection.id} className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4">
|
||||
<CollectionCard collection={collection} isOwner />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-6 rounded-[24px] border border-dashed border-white/12 bg-white/[0.03] px-5 py-8 text-sm text-slate-300">Run a preview to inspect which collections currently qualify for a given program key.</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-lime-200/80">Diagnostics</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Eligibility, duplicate risk, and ranking refresh</h2>
|
||||
</div>
|
||||
<div className="mt-6 grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
|
||||
<div className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-300">
|
||||
<p className="font-semibold text-white">Operations summary</p>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">
|
||||
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-400">Stale health</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{Number(observabilitySummary?.counts?.stale_health || 0)}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">
|
||||
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-400">Stale recommendations</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{Number(observabilitySummary?.counts?.stale_recommendations || 0)}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">
|
||||
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-400">Placement blocked</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{Number(observabilitySummary?.counts?.placement_blocked || 0)}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">
|
||||
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-400">Duplicate risk</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{Number(observabilitySummary?.counts?.duplicate_risk || 0)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{observabilitySummary?.generated_at ? <p className="mt-4 text-xs text-slate-400">Generated {new Date(observabilitySummary.generated_at).toLocaleString()}</p> : null}
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-300">
|
||||
<p className="font-semibold text-white">Watchlist</p>
|
||||
{Array.isArray(observabilitySummary?.watchlist) && observabilitySummary.watchlist.length ? (
|
||||
<div className="mt-4 grid gap-4 xl:grid-cols-2">
|
||||
{observabilitySummary.watchlist.map((collection) => (
|
||||
<div key={`watch-${collection.id}`} className="rounded-[20px] border border-white/10 bg-white/[0.04] p-3">
|
||||
<CollectionCard collection={collection} isOwner />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : <p className="mt-3">No watchlist items are currently flagged.</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
|
||||
<Field label="Target Collection" help="Leave a selection in place to inspect one collection. Change it any time before running a diagnostic.">
|
||||
<select value={selectedCollectionId} onChange={(event) => setSelectedCollectionId(event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none">
|
||||
{collectionOptions.map((option) => <option key={option.id} value={option.id}>{option.title}</option>)}
|
||||
</select>
|
||||
</Field>
|
||||
<div className="flex items-end gap-3">
|
||||
<button type="button" onClick={() => runDiagnostic('eligibility')} disabled={busy !== ''} className="inline-flex items-center gap-2 rounded-2xl border border-lime-300/20 bg-lime-400/10 px-4 py-3 text-sm font-semibold text-lime-100 transition hover:bg-lime-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'eligibility' ? 'fa-circle-notch fa-spin' : 'fa-shield-check'} fa-fw`} />Eligibility</button>
|
||||
<button type="button" onClick={() => runDiagnostic('duplicates')} disabled={busy !== ''} className="inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'duplicates' ? 'fa-circle-notch fa-spin' : 'fa-clone'} fa-fw`} />Duplicates</button>
|
||||
<button type="button" onClick={() => runDiagnostic('recommendations')} disabled={busy !== ''} className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'recommendations' ? 'fa-circle-notch fa-spin' : 'fa-arrows-rotate'} fa-fw`} />Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-4 lg:grid-cols-3">
|
||||
<div className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-300">
|
||||
<p className="font-semibold text-white">Eligibility</p>
|
||||
{diagnostics.eligibility ? (
|
||||
<div className="mt-3 space-y-2">
|
||||
<p>{diagnostics.eligibility.status === 'queued' ? `${diagnostics.eligibility.count} collection(s) queued.` : `${diagnostics.eligibility.count} collection(s) evaluated.`}</p>
|
||||
{diagnostics.eligibility.message ? <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">{diagnostics.eligibility.message}</div> : null}
|
||||
{(diagnostics.eligibility.items || []).map((item) => <div key={item.collection_id} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">{item.health_state || 'unknown'} · {item.readiness_state || 'unknown'} · {item.placement_eligibility ? 'eligible' : 'blocked'}</div>)}
|
||||
</div>
|
||||
) : <p className="mt-3">Run an eligibility refresh to verify readiness and public placement safety.</p>}
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-300">
|
||||
<p className="font-semibold text-white">Duplicate candidates</p>
|
||||
{diagnostics.duplicates ? (
|
||||
<div className="mt-3 space-y-2">
|
||||
<p>{diagnostics.duplicates.status === 'queued' ? `${diagnostics.duplicates.count} collection(s) queued.` : `${diagnostics.duplicates.count} collection(s) with candidates.`}</p>
|
||||
{diagnostics.duplicates.message ? <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">{diagnostics.duplicates.message}</div> : null}
|
||||
{(diagnostics.duplicates.items || []).map((item) => (
|
||||
<div key={item.collection_id} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">
|
||||
{item.candidates?.length ? item.candidates.map((candidate) => candidate.title).join(', ') : 'No candidates'}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : <p className="mt-3">Run duplicate scan to surface overlap before programming a collection widely.</p>}
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-300">
|
||||
<p className="font-semibold text-white">Recommendation refresh</p>
|
||||
{diagnostics.recommendations ? (
|
||||
<div className="mt-3 space-y-2">
|
||||
<p>{diagnostics.recommendations.status === 'queued' ? `${diagnostics.recommendations.count} collection(s) queued.` : `${diagnostics.recommendations.count} collection(s) refreshed.`}</p>
|
||||
{diagnostics.recommendations.message ? <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">{diagnostics.recommendations.message}</div> : null}
|
||||
{(diagnostics.recommendations.items || []).map((item) => <div key={item.collection_id} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2">{titleize(item.recommendation_tier || 'unknown')} · {titleize(item.ranking_bucket || 'unknown')} · {titleize(item.search_boost_tier || 'unknown')}</div>)}
|
||||
</div>
|
||||
) : <p className="mt-3">Run a recommendation refresh to update ranking and search tiers for this collection.</p>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form onSubmit={handleHooksSubmit} className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-fuchsia-200/80">Hooks</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Experiment and program governance</h2>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-300">Control experiment keys, promotion tiers, and staff-only program governance hooks for the selected collection without leaving the programming studio.</p>
|
||||
</div>
|
||||
{selectedCollection?.program_key && endpoints.publicProgramPattern ? (
|
||||
<a href={buildProgramUrl(endpoints.publicProgramPattern, selectedCollection.program_key)} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.07]">
|
||||
<i className="fa-solid fa-arrow-up-right-from-square fa-fw text-[11px]" />Open public program landing
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Field label="Experiment Key" help="Internal test or treatment key for cross-surface collection experiments.">
|
||||
<input value={hooksForm.experiment_key} onChange={(event) => setHooksForm((current) => ({ ...current, experiment_key: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Treatment" help="Variant or treatment label tied to the experiment key.">
|
||||
<input value={hooksForm.experiment_treatment} onChange={(event) => setHooksForm((current) => ({ ...current, experiment_treatment: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Placement Variant" help="Surface-specific placement variant such as homepage_a or search_dense.">
|
||||
<input value={hooksForm.placement_variant} onChange={(event) => setHooksForm((current) => ({ ...current, placement_variant: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Ranking Variant" help="Override or annotate ranking mode experiments without changing the live pool logic.">
|
||||
<input value={hooksForm.ranking_mode_variant} onChange={(event) => setHooksForm((current) => ({ ...current, ranking_mode_variant: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Pool Version" help="Snapshot or rollout version for the collection pool definition.">
|
||||
<input value={hooksForm.collection_pool_version} onChange={(event) => setHooksForm((current) => ({ ...current, collection_pool_version: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Test Label" help="Human-readable campaign or experiment label for operations and diagnostics.">
|
||||
<input value={hooksForm.test_label} onChange={(event) => setHooksForm((current) => ({ ...current, test_label: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={120} />
|
||||
</Field>
|
||||
<Field label="Promotion Tier" help="Optional internal tier for elevated or restrained programming treatment.">
|
||||
<input value={hooksForm.promotion_tier} onChange={(event) => setHooksForm((current) => ({ ...current, promotion_tier: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={40} />
|
||||
</Field>
|
||||
{viewer.isAdmin ? (
|
||||
<>
|
||||
<Field label="Partner Key" help="Admin-only internal key for trusted partner or program ownership.">
|
||||
<input value={hooksForm.partner_key} onChange={(event) => setHooksForm((current) => ({ ...current, partner_key: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Trust Tier" help="Admin-only trust marker used for internal partner/program review logic.">
|
||||
<input value={hooksForm.trust_tier} onChange={(event) => setHooksForm((current) => ({ ...current, trust_tier: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={40} />
|
||||
</Field>
|
||||
<Field label="Sponsorship State" help="Admin-only state for sponsored, pending, or cleared program treatment.">
|
||||
<input value={hooksForm.sponsorship_state} onChange={(event) => setHooksForm((current) => ({ ...current, sponsorship_state: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={40} />
|
||||
</Field>
|
||||
<Field label="Ownership Domain" help="Admin-only internal ownership domain such as editorial, partner, creator_program, or events.">
|
||||
<input value={hooksForm.ownership_domain} onChange={(event) => setHooksForm((current) => ({ ...current, ownership_domain: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={80} />
|
||||
</Field>
|
||||
<Field label="Commercial Review" help="Admin-only commercial review status for future partner and sponsor programs.">
|
||||
<input value={hooksForm.commercial_review_state} onChange={(event) => setHooksForm((current) => ({ ...current, commercial_review_state: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={40} />
|
||||
</Field>
|
||||
<Field label="Legal Review" help="Admin-only legal review status when collections need compliance approval before wider promotion.">
|
||||
<input value={hooksForm.legal_review_state} onChange={(event) => setHooksForm((current) => ({ ...current, legal_review_state: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none" maxLength={40} />
|
||||
</Field>
|
||||
</>
|
||||
) : <div className="rounded-[24px] border border-dashed border-white/12 bg-white/[0.03] px-4 py-4 text-sm text-slate-300 md:col-span-2 xl:col-span-3">Partner, sponsorship, ownership, and review metadata remain admin-only. Moderators can still manage experiment and promotion hooks here.</div>}
|
||||
</div>
|
||||
|
||||
<label className="mt-4 flex items-center gap-3 rounded-[20px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-200">
|
||||
<input type="checkbox" checked={hooksForm.placement_eligibility} onChange={(event) => setHooksForm((current) => ({ ...current, placement_eligibility: event.target.checked }))} className="h-4 w-4 rounded border-white/20 bg-white/[0.04] text-sky-400 focus:ring-sky-300/40" />
|
||||
Placement eligible override
|
||||
</label>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Experiment</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.experiment_key || selectedCollection?.experiment_key || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Treatment</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.experiment_treatment || selectedCollection?.experiment_treatment || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Placement Variant</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.placement_variant || selectedCollection?.placement_variant || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Workflow</div>
|
||||
<div className="mt-1 font-semibold text-white">{titleize(hooksDiagnostics?.workflow_state || selectedCollection?.workflow_state || 'unknown')}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Health</div>
|
||||
<div className="mt-1 font-semibold text-white">{titleize(hooksDiagnostics?.health_state || selectedCollection?.health_state || 'unknown')}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Recommendation Tier</div>
|
||||
<div className="mt-1 font-semibold text-white">{titleize(hooksDiagnostics?.recommendation_tier || selectedCollection?.recommendation_tier || 'unknown')}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Ranking Bucket</div>
|
||||
<div className="mt-1 font-semibold text-white">{titleize(hooksDiagnostics?.ranking_bucket || selectedCollection?.ranking_bucket || 'unknown')}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Ranking Variant</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.ranking_mode_variant || selectedCollection?.ranking_mode_variant || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Pool Version</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.collection_pool_version || selectedCollection?.collection_pool_version || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Test Label</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.test_label || selectedCollection?.test_label || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Promotion Tier</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.promotion_tier || selectedCollection?.promotion_tier || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Partner Key</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.partner_key || selectedCollection?.partner_key || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Trust Tier</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.trust_tier || selectedCollection?.trust_tier || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Sponsorship State</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.sponsorship_state || selectedCollection?.sponsorship_state || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Ownership Domain</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.ownership_domain || selectedCollection?.ownership_domain || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Commercial Review</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.commercial_review_state || selectedCollection?.commercial_review_state || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Legal Review</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.legal_review_state || selectedCollection?.legal_review_state || 'Not set'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Last Health Check</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.last_health_check_at ? new Date(hooksDiagnostics.last_health_check_at).toLocaleString() : 'Not yet'}</div>
|
||||
</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-slate-950/40 px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Last Recommendation Refresh</div>
|
||||
<div className="mt-1 font-semibold text-white">{hooksDiagnostics?.last_recommendation_refresh_at ? new Date(hooksDiagnostics.last_recommendation_refresh_at).toLocaleString() : 'Not yet'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-wrap gap-3">
|
||||
<button type="submit" disabled={busy === 'hooks' || !selectedCollectionId} className="inline-flex items-center gap-2 rounded-2xl border border-fuchsia-300/20 bg-fuchsia-400/10 px-5 py-3 text-sm font-semibold text-fuchsia-100 transition hover:bg-fuchsia-400/15 disabled:opacity-60"><i className={`fa-solid ${busy === 'hooks' ? 'fa-circle-notch fa-spin' : 'fa-flask-vial'} fa-fw`} />Save Hooks</button>
|
||||
{selectedCollection?.manage_url ? <a href={selectedCollection.manage_url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-arrow-up-right-from-square fa-fw" />Open collection</a> : null}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Assignments</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">Current programming inventory</h2>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{assignments.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-5">
|
||||
{assignments.length ? assignments.map((assignment) => (
|
||||
<div key={assignment.id} className="rounded-[28px] border border-white/10 bg-slate-950/40 p-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="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">{assignment.program_key}</span>
|
||||
{assignment.placement_scope ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">{assignment.placement_scope}</span> : null}
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">priority {assignment.priority}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button type="button" onClick={() => hydrateAssignment(assignment)} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-pen fa-fw text-[10px]" />Edit</button>
|
||||
{endpoints.managePattern ? <a href={endpoints.managePattern.replace('__COLLECTION__', String(assignment.collection?.id || ''))} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold text-white transition hover:bg-white/[0.07]"><i className="fa-solid fa-arrow-up-right-from-square fa-fw text-[10px]" />Manage</a> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-5 xl:grid-cols-[minmax(0,1fr)_280px]">
|
||||
<div>
|
||||
{assignment.collection ? <CollectionCard collection={assignment.collection} isOwner /> : null}
|
||||
</div>
|
||||
<div className="space-y-3 text-sm text-slate-300">
|
||||
<div className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-3">Campaign: {assignment.campaign_key || 'None'}</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-3">Starts: {assignment.starts_at ? new Date(assignment.starts_at).toLocaleString() : 'Immediate'}</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-3">Ends: {assignment.ends_at ? new Date(assignment.ends_at).toLocaleString() : 'Open-ended'}</div>
|
||||
<div className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-3">Placement: {assignment.collection?.placement_eligibility ? 'Eligible' : 'Blocked'}</div>
|
||||
{assignment.notes ? <div className="rounded-[22px] border border-white/10 bg-white/[0.04] px-4 py-3">{assignment.notes}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)) : <div className="rounded-[26px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-sm text-slate-300">No programming assignments yet. Create the first one above.</div>}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user