import React from 'react' import { Head, Link, usePage } from '@inertiajs/react' import EnhanceStatusBadge from '../../components/enhance/EnhanceStatusBadge' import EnhanceStubWarning from '../../components/enhance/EnhanceStubWarning' import { formatEnhanceDate, formatEnhanceInteger } from '../../utils/enhanceFormatting' function formatDate(value) { return formatEnhanceDate(value) } function JobCard({ job }) { return (
{job.preview_url || job.source_url ? Enhance preview :
}
{job.scale}x {job.mode} {job.engine}

{job.artwork?.title ? `Artwork enhance: ${job.artwork.title}` : `Enhance job #${job.id}`}

Created {formatDate(job.created_at)} {job.processing_seconds ? `• ${job.processing_seconds}s processing` : ''}

{job.input_width} × {job.input_height}{job.output_width && job.output_height ? ` → ${job.output_width} × ${job.output_height}` : ''}
{job.error_message ?
{job.error_message}
: null}
Open job {job.artwork?.url ? Open artwork : null}
) } export default function EnhanceIndex() { const { props } = usePage() const jobs = props.jobs?.data || [] const latestCompleted = props.latestCompleted || [] const flash = props.flash || {} const enhanceConfig = props.enhanceConfig || {} return (

Skinbase Enhance

Image Upscaler

Improve older wallpapers, digital art, and photos with a clean upscaled version. Your original file is never replaced automatically.

Start enhance
Daily limit
{formatEnhanceInteger(props.dailyLimit || 0)}
Total jobs
{formatEnhanceInteger(props.jobs?.total || jobs.length)}
Completed outputs
{formatEnhanceInteger(latestCompleted.length)}
{flash.success ?
{flash.success}
: null} {flash.error ?
{flash.error}
: null} {latestCompleted.length > 0 ? (

Latest completed

Recent enhanced outputs

{latestCompleted.map((job) => (
{job.output_url ? {`Enhance : null}
Job #{job.id}
{job.scale}x • {job.mode}
))}
) : null}

History

Your enhance jobs

{jobs.length === 0 ? (
No enhance jobs yet. Upload an image to start your first upscale.
) : (
{jobs.map((job) => )}
)}
) }