110 lines
8.1 KiB
JavaScript
110 lines
8.1 KiB
JavaScript
import React from 'react'
|
||
import { Head, Link, router, usePage } from '@inertiajs/react'
|
||
import EnhanceStatusBadge from '../../../components/enhance/EnhanceStatusBadge'
|
||
import EnhanceStubWarning from '../../../components/enhance/EnhanceStubWarning'
|
||
import { formatEnhanceDate } from '../../../utils/enhanceFormatting'
|
||
|
||
function formatDate(value) {
|
||
return formatEnhanceDate(value)
|
||
}
|
||
|
||
export default function ModerationEnhanceIndex() {
|
||
const { props } = usePage()
|
||
const [filters, setFilters] = React.useState(props.filters || {})
|
||
const jobs = props.jobs?.data || []
|
||
const flash = props.flash || {}
|
||
|
||
React.useEffect(() => {
|
||
setFilters(props.filters || {})
|
||
}, [props.filters])
|
||
|
||
function applyFilters(event) {
|
||
event.preventDefault()
|
||
router.get(props.indexUrl, filters, { preserveScroll: true, preserveState: true, replace: true })
|
||
}
|
||
|
||
return (
|
||
<div className="w-full px-6 pb-16 pt-8">
|
||
<Head title="Enhance Jobs" />
|
||
|
||
<section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_36%),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>
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">Moderation surface</p>
|
||
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Enhance Jobs</h1>
|
||
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Review queued, processing, failed, and completed image upscale jobs without changing original artwork assets.</p>
|
||
</div>
|
||
|
||
<form onSubmit={applyFilters} className="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-7">
|
||
<select value={filters.status || 'all'} onChange={(event) => setFilters((current) => ({ ...current, 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">
|
||
{(props.options?.statuses || []).map((option) => <option key={option} value={option}>{option === 'all' ? 'All statuses' : option}</option>)}
|
||
</select>
|
||
<select value={filters.engine || 'all'} onChange={(event) => setFilters((current) => ({ ...current, engine: event.target.value }))} className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none">
|
||
{(props.options?.engines || []).map((option) => <option key={option} value={option}>{option === 'all' ? 'All engines' : option}</option>)}
|
||
</select>
|
||
<select value={filters.mode || 'all'} onChange={(event) => setFilters((current) => ({ ...current, mode: event.target.value }))} className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none">
|
||
{(props.options?.modes || []).map((option) => <option key={option} value={option}>{option === 'all' ? 'All modes' : option}</option>)}
|
||
</select>
|
||
<select value={filters.scale || 'all'} onChange={(event) => setFilters((current) => ({ ...current, scale: event.target.value }))} className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none">
|
||
{(props.options?.scales || []).map((option) => <option key={String(option)} value={option}>{option === 'all' ? 'All scales' : `${option}x`}</option>)}
|
||
</select>
|
||
<input value={filters.user || ''} onChange={(event) => setFilters((current) => ({ ...current, user: event.target.value }))} placeholder="User name or username" className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none" />
|
||
<input type="date" value={filters.date_from || ''} onChange={(event) => setFilters((current) => ({ ...current, date_from: event.target.value }))} className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none" />
|
||
<input type="date" value={filters.date_to || ''} onChange={(event) => setFilters((current) => ({ ...current, date_to: event.target.value }))} className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none" />
|
||
<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] xl:col-span-7">Apply filters</button>
|
||
</form>
|
||
</section>
|
||
|
||
<EnhanceStubWarning config={props.enhanceConfig} moderation className="mt-6" />
|
||
|
||
{flash.success ? <div className="mt-6 rounded-2xl border border-emerald-300/20 bg-emerald-400/10 px-4 py-3 text-sm text-emerald-50">{flash.success}</div> : null}
|
||
{flash.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">{flash.error}</div> : null}
|
||
|
||
<div className="mt-8 overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||
<th className="px-5 py-3.5">Preview</th>
|
||
<th className="px-5 py-3.5">Job</th>
|
||
<th className="px-5 py-3.5">User</th>
|
||
<th className="px-5 py-3.5">Artwork</th>
|
||
<th className="px-5 py-3.5">Status</th>
|
||
<th className="px-5 py-3.5">Mode</th>
|
||
<th className="px-5 py-3.5">Scale</th>
|
||
<th className="px-5 py-3.5">Dimensions</th>
|
||
<th className="px-5 py-3.5">Created</th>
|
||
<th className="px-5 py-3.5 text-right">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-white/[0.04]">
|
||
{jobs.length === 0 ? <tr><td colSpan={10} className="px-5 py-12 text-center text-slate-400">No enhance jobs match the current filters.</td></tr> : null}
|
||
{jobs.map((job) => (
|
||
<tr key={job.id} className="transition hover:bg-white/[0.025]">
|
||
<td className="px-5 py-4">
|
||
<div className="h-16 w-16 overflow-hidden rounded-xl border border-white/10 bg-black/20">
|
||
{job.preview_url || job.source_url ? <img src={job.preview_url || job.source_url} alt={`Enhance job ${job.id}`} className="h-full w-full object-cover" /> : null}
|
||
</div>
|
||
</td>
|
||
<td className="px-5 py-4 text-white">
|
||
<div className="font-semibold">#{job.id}</div>
|
||
<div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">{job.engine}</div>
|
||
</td>
|
||
<td className="px-5 py-4 text-slate-300">{job.user?.name || '—'}{job.user?.username ? <div className="text-xs text-slate-500">@{job.user.username}</div> : null}</td>
|
||
<td className="px-5 py-4 text-slate-300">{job.artwork?.title ? <a href={job.artwork.url} className="text-sky-300 hover:text-sky-200">{job.artwork.title}</a> : '—'}</td>
|
||
<td className="px-5 py-4"><EnhanceStatusBadge status={job.status} /></td>
|
||
<td className="px-5 py-4 text-slate-300">{job.mode}</td>
|
||
<td className="px-5 py-4 text-slate-300">{job.scale}x</td>
|
||
<td className="px-5 py-4 text-slate-300">{job.input_width} × {job.input_height}{job.output_width && job.output_height ? <div className="text-xs text-slate-500">→ {job.output_width} × {job.output_height}</div> : null}</td>
|
||
<td className="px-5 py-4 text-slate-400">{formatDate(job.created_at)}</td>
|
||
<td className="px-5 py-4 text-right">
|
||
<Link href={job.show_url} 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]">Open</Link>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |