import React from 'react' import { Head, router } from '@inertiajs/react' import AdminLayout from '../../Layouts/AdminLayout' function formatDateTime(value) { if (!value) return '—' try { return new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', }).format(new Date(value)) } catch { return String(value) } } function StatCard({ icon, label, value, tone = 'sky' }) { const tones = { sky: 'border-sky-400/20 bg-sky-400/10 text-sky-200', rose: 'border-rose-400/20 bg-rose-400/10 text-rose-200', amber: 'border-amber-400/20 bg-amber-400/10 text-amber-200', emerald: 'border-emerald-400/20 bg-emerald-400/10 text-emerald-200', } return (
{label}
{Number(value || 0).toLocaleString()}
) } function SectionCard({ title, subtitle, actionHref, actionLabel, children }) { return (

{title}

{subtitle ?

{subtitle}

: null}
{actionHref ? ( {actionLabel || 'Open queue'} ) : null}
{children}
) } function EmptyState({ label }) { return
{label}
} function DataTable({ columns, rows, emptyLabel }) { if (!rows?.length) { return } return (
{columns.map((column) => ( ))} {rows.map((row, index) => ( {columns.map((column) => ( ))} ))}
{column.label}
{column.render ? column.render(row) : row[column.key]}
) } export default function DailyActivity({ selectedDate, summary, queues, sections }) { const onDateChange = (event) => { router.get('/moderation/activity', { date: event.target.value }, { preserveState: true, replace: true }) } return (
Moderation review

Selected day: {selectedDate}

This view pulls together the moderation-adjacent activity for the selected day so admins can triage queues and jump into the right review surface quickly.

Queues right now
Pending uploads {queues.pending_uploads}
Open reports {queues.open_reports}
Pending username requests {queues.pending_username_requests}
Moderation throughput on this day
Moderated uploads
{summary.moderated_uploads}
Moderated reports
{summary.moderated_reports}
Username events
{summary.username_events}
{row.title}
{row.type} · {row.status} · {row.processing_state}
}, { key: 'moderation_status', label: 'Moderation', render: (row) =>
{row.moderation_status}
{row.moderation_note || 'No note'}
}, { key: 'created_at', label: 'Created', render: (row) => formatDateTime(row.created_at) }, { key: 'moderated_at', label: 'Moderated', render: (row) => formatDateTime(row.moderated_at) }, ]} />
{row.reason}
{row.status} · {row.target_type} #{row.target_id}
}, { key: 'reporter', label: 'Reporter', render: (row) => row.reporter ? `@${row.reporter.username}` : '—' }, { key: 'target', label: 'Target', render: (row) => row.target?.title || row.target?.context || 'Resolved via moderation target' }, { key: 'last_moderated_at', label: 'Reviewed', render: (row) =>
{formatDateTime(row.last_moderated_at)}
{row.last_moderated_by ? `@${row.last_moderated_by.username}` : 'Unassigned'}
}, ]} />
{row.requested_username}
Current: {row.current_username || row.current_name || 'Unknown user'}
}, { key: 'status', label: 'Status' }, { key: 'created_at', label: 'Created', render: (row) => formatDateTime(row.created_at) }, { key: 'reviewed_at', label: 'Reviewed', render: (row) => formatDateTime(row.reviewed_at) }, ]} />
{row.event_type}
{row.status} · {row.ip || 'No IP'}
}, { key: 'user', label: 'User', render: (row) => row.user ? `@${row.user.username || row.user.name}` : (row.identifier || 'Guest') }, { key: 'reason', label: 'Reason', render: (row) => row.reason || '—' }, { key: 'created_at', label: 'When', render: (row) => formatDateTime(row.created_at) }, ]} />
{row.username ? `@${row.username}` : row.name}
{row.email}
}, { key: 'role', label: 'Role' }, { key: 'created_at', label: 'Joined', render: (row) => formatDateTime(row.created_at) }, ]} />
{row.title}
{row.user?.username ? `@${row.user.username}` : 'Unknown artist'}
}, { key: 'status', label: 'Status' }, { key: 'created_at', label: 'Created', render: (row) => formatDateTime(row.created_at) }, ]} />
{row.title}
{row.creator?.username ? `@${row.creator.username}` : 'Unknown creator'}
}, { key: 'status', label: 'Status' }, { key: 'created_at', label: 'Created', render: (row) => formatDateTime(row.created_at) }, ]} />
) }