234 lines
12 KiB
JavaScript
234 lines
12 KiB
JavaScript
import React from 'react'
|
|
import { Head, router } from '@inertiajs/react'
|
|
import AdminLayout from '../../Layouts/AdminLayout'
|
|
|
|
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 StatCard({ label, value, tone = 'sky' }) {
|
|
const tones = {
|
|
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] ${tones[tone] || tones.sky}`}>{label}</div>
|
|
<div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{Number(value || 0).toLocaleString()}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function badgeTone(status) {
|
|
if (status === 'approved') return 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100'
|
|
if (status === 'rejected') return 'border-rose-300/20 bg-rose-400/12 text-rose-100'
|
|
return 'border-amber-300/20 bg-amber-400/12 text-amber-100'
|
|
}
|
|
|
|
async function requestJson(url, body) {
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: JSON.stringify(body || {}),
|
|
})
|
|
|
|
const payload = await response.json().catch(() => ({}))
|
|
|
|
if (!response.ok) {
|
|
throw new Error(payload?.message || 'Request failed.')
|
|
}
|
|
|
|
return payload
|
|
}
|
|
|
|
export default function UsernameQueue({ title, requests, stats, filters, options, endpoints }) {
|
|
const [state, setState] = React.useState(filters || { q: '', status: 'pending' })
|
|
const [notes, setNotes] = React.useState({})
|
|
const [busy, setBusy] = React.useState('')
|
|
const [notice, setNotice] = React.useState('')
|
|
const [error, setError] = React.useState('')
|
|
|
|
React.useEffect(() => {
|
|
setState(filters || { q: '', status: 'pending' })
|
|
}, [filters])
|
|
|
|
function update(key, value) {
|
|
setState((current) => ({ ...current, [key]: value }))
|
|
}
|
|
|
|
function applyFilters(event) {
|
|
event.preventDefault()
|
|
router.get(endpoints.index, state, { preserveState: true, replace: true, preserveScroll: true })
|
|
}
|
|
|
|
async function moderate(item, action) {
|
|
const actionKey = `${action}-${item.id}`
|
|
setBusy(actionKey)
|
|
setError('')
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(action === 'approve' ? item.approve_url : item.reject_url, {
|
|
note: String(notes[item.id] || ''),
|
|
})
|
|
|
|
setNotice(payload.message || `Request ${action}d.`)
|
|
router.reload({ only: ['requests', 'stats'], preserveScroll: true })
|
|
} catch (requestError) {
|
|
setError(requestError.message || 'Request failed.')
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
const items = requests?.data || []
|
|
|
|
return (
|
|
<AdminLayout title={title || 'Username Queue'} subtitle="Review username changes in the same moderation surface as the rest of Skinbase.">
|
|
<Head title="Moderation · Username Queue" />
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(244,114,182,0.12),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-rose-200/80">Moderation surface</p>
|
|
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Username Queue</h1>
|
|
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Review pending username requests before they are applied to the account or history trail.</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3 text-xs uppercase tracking-[0.16em] text-slate-300">
|
|
<span className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2">Page {requests?.current_page || 1} / {requests?.last_page || 1}</span>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2">{Number(requests?.total || 0).toLocaleString()} requests</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<StatCard label="Total" value={stats?.total} />
|
|
<StatCard label="Pending" value={stats?.pending} tone="amber" />
|
|
<StatCard label="Approved" value={stats?.approved} tone="emerald" />
|
|
<StatCard label="Rejected" value={stats?.rejected} tone="rose" />
|
|
</div>
|
|
|
|
<form onSubmit={applyFilters} className="mt-6 grid gap-3 lg:grid-cols-[2fr_1fr_auto]">
|
|
<input
|
|
value={state.q || ''}
|
|
onChange={(event) => update('q', event.target.value)}
|
|
placeholder="Search requested or current username"
|
|
className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none"
|
|
/>
|
|
<select
|
|
value={state.status || 'pending'}
|
|
onChange={(event) => update('status', event.target.value)}
|
|
className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none"
|
|
>
|
|
{(options?.statuses || []).map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
<button type="submit" className="rounded-2xl border border-white/10 bg-white/[0.06] px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.1]">Apply</button>
|
|
</form>
|
|
</section>
|
|
|
|
{notice ? <div className="mt-6 rounded-2xl border border-emerald-300/20 bg-emerald-400/10 px-4 py-3 text-sm text-emerald-50">{notice}</div> : null}
|
|
{error ? <div className="mt-6 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{error}</div> : null}
|
|
|
|
<div className="mt-8 space-y-4">
|
|
{items.length === 0 ? (
|
|
<div className="rounded-[28px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-300">No username requests matched the current filters.</div>
|
|
) : items.map((item) => (
|
|
<article key={item.id} className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
|
<div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
|
|
<div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${badgeTone(item.status)}`}>
|
|
{String(item.status || 'pending').replaceAll('_', ' ')}
|
|
</span>
|
|
{item.context ? (
|
|
<span className="inline-flex rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">
|
|
{item.context.replaceAll('_', ' ')}
|
|
</span>
|
|
) : null}
|
|
{item.similar_to ? (
|
|
<span className="inline-flex rounded-full border border-amber-300/20 bg-amber-400/12 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">
|
|
Similar to {item.similar_to}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{item.requested_username}</h2>
|
|
<p className="mt-2 text-sm text-slate-300">
|
|
{item.current_username ? `Current: @${item.current_username}` : 'No current username'}
|
|
{item.current_name ? ` • ${item.current_name}` : ''}
|
|
</p>
|
|
<p className="mt-2 text-xs uppercase tracking-[0.16em] text-slate-400">
|
|
Requested {formatDateTime(item.created_at)}
|
|
{item.reviewed_at ? ` • reviewed ${formatDateTime(item.reviewed_at)}` : ''}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full max-w-xl space-y-3">
|
|
<textarea
|
|
value={notes[item.id] || ''}
|
|
onChange={(event) => setNotes((current) => ({ ...current, [item.id]: event.target.value }))}
|
|
placeholder="Optional moderation note"
|
|
rows={3}
|
|
className="w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none"
|
|
/>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => moderate(item, 'approve')}
|
|
disabled={busy === `approve-${item.id}`}
|
|
className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-400/12 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-emerald-100 transition hover:bg-emerald-400/18 disabled:opacity-60"
|
|
>
|
|
{busy === `approve-${item.id}` ? 'Saving…' : 'Approve'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => moderate(item, 'reject')}
|
|
disabled={busy === `reject-${item.id}`}
|
|
className="inline-flex items-center gap-2 rounded-full border border-rose-300/20 bg-rose-400/12 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100 transition hover:bg-rose-400/18 disabled:opacity-60"
|
|
>
|
|
{busy === `reject-${item.id}` ? 'Saving…' : 'Reject'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{requests?.prev_page_url || requests?.next_page_url ? (
|
|
<div className="mt-8 flex items-center justify-between gap-3 rounded-[24px] border border-white/10 bg-black/20 px-5 py-4">
|
|
<div className="text-xs uppercase tracking-[0.16em] text-slate-400">
|
|
Showing page {requests?.current_page || 1} of {requests?.last_page || 1}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{requests?.prev_page_url ? (
|
|
<button type="button" onClick={() => router.get(requests.prev_page_url, {}, { preserveScroll: true })} className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
|
|
Previous
|
|
</button>
|
|
) : null}
|
|
{requests?.next_page_url ? (
|
|
<button type="button" onClick={() => router.get(requests.next_page_url, {}, { preserveScroll: true })} className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
|
|
Next
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</AdminLayout>
|
|
)
|
|
}
|