chore: commit current workspace changes

resources/js/Layouts/AdminLayout.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Link, usePage } from '@inertiajs/react'
 
-const adminNavGroups = [
+const buildAdminNavGroups = (isAdmin) => [
   {
     label: 'Overview',
     items: [
@@ -31,6 +31,7 @@ const adminNavGroups = [
   {
     label: 'System',
     items: [
+      ...(isAdmin ? [{ label: 'Auth Audit', href: '/moderation/auth-audit', icon: 'fa-solid fa-user-shield' }] : []),
       { label: 'Settings', href: '/moderation/settings', icon: 'fa-solid fa-gear' },
     ],
   },
@@ -51,7 +52,9 @@ function NavLink({ item, active }) {
   )
 }
 
-function Sidebar({ pathname }) {
+function Sidebar({ pathname, isAdmin }) {
+  const adminNavGroups = buildAdminNavGroups(isAdmin)
+
   const isActive = (item) => {
     if (item.exact) return pathname === item.href
     return pathname.startsWith(item.href.split('?')[0])
@@ -103,9 +106,10 @@ function Sidebar({ pathname }) {
 }
 
 export default function AdminLayout({ children, title, subtitle }) {
-  const { url } = usePage()
+  const { url, props } = usePage()
   const [mobileOpen, setMobileOpen] = useState(false)
   const pathname = url.split('?')[0]
+  const currentUserIsAdmin = Boolean(props.auth?.user?.is_admin)
 
   return (
     <div className="flex min-h-screen bg-[radial-gradient(ellipse_at_top,_rgba(239,68,68,0.08),_transparent_40%),linear-gradient(180deg,#060a12_0%,#020409_100%)]">
@@ -113,7 +117,7 @@ export default function AdminLayout({ children, title, subtitle }) {
       {/* Desktop sidebar */}
       <div className="hidden lg:flex lg:w-64 lg:flex-shrink-0">
         <div className="fixed inset-y-0 left-0 w-64">
-          <Sidebar pathname={pathname} />
+          <Sidebar pathname={pathname} isAdmin={currentUserIsAdmin} />
         </div>
       </div>
 
@@ -137,13 +141,13 @@ export default function AdminLayout({ children, title, subtitle }) {
         <div className="fixed inset-0 z-30 lg:hidden">
           <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />
           <div className="absolute left-0 top-0 h-full w-72 pt-14">
-            <Sidebar pathname={pathname} />
+            <Sidebar pathname={pathname} isAdmin={currentUserIsAdmin} />
           </div>
         </div>
       )}
 
       {/* Main content */}
-      <div className="flex flex-1 flex-col lg:pl-64">
+      <div className="flex flex-1 flex-col lg:pl-8">
         <main className="flex-1 px-6 py-8 pt-20 lg:pt-8">
           {(title || subtitle) && (
             <div className="mb-8">

resources/js/Pages/Admin/AuthAudit.jsx

@@ -0,0 +1,232 @@
+import React from 'react'
+import { Head, router } from '@inertiajs/react'
+import AdminLayout from '../../Layouts/AdminLayout'
+
+const EVENT_LABELS = {
+  login: 'Login',
+  register: 'Register',
+  forgot_password: 'Forgot password',
+  reset_password: 'Reset password',
+}
+
+const STATUS_BADGES = {
+  success: 'border-emerald-400/20 bg-emerald-400/10 text-emerald-200',
+  failed: 'border-rose-400/20 bg-rose-400/10 text-rose-200',
+}
+
+function formatTimestamp(value) {
+  if (!value) {
+    return 'Unknown'
+  }
+
+  return new Intl.DateTimeFormat('en-GB', {
+    dateStyle: 'medium',
+    timeStyle: 'medium',
+  }).format(new Date(value))
+}
+
+function formatLabel(value) {
+  if (!value) {
+    return 'Not recorded'
+  }
+
+  return value
+    .replaceAll('_', ' ')
+    .replace(/\b\w/g, (match) => match.toUpperCase())
+}
+
+function SummaryCard({ label, value, tone = 'slate' }) {
+  const tones = {
+    slate: 'border-white/[0.07] bg-white/[0.02] text-white',
+    rose: 'border-rose-400/15 bg-rose-500/10 text-rose-100',
+    sky: 'border-sky-400/15 bg-sky-500/10 text-sky-100',
+  }
+
+  return (
+    <div className={`rounded-2xl border p-5 ${tones[tone] ?? tones.slate}`}>
+      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</p>
+      <p className="mt-3 text-3xl font-semibold tracking-tight">{value}</p>
+    </div>
+  )
+}
+
+export default function AuthAudit({ logs, filters, eventOptions, statusOptions }) {
+  const items = logs?.data ?? []
+  const failedCount = items.filter((entry) => entry.status === 'failed').length
+  const uniqueIpCount = new Set(items.map((entry) => entry.ip).filter(Boolean)).size
+
+  const handleSearch = (event) => {
+    event.preventDefault()
+    const search = event.target.elements.search.value
+
+    router.get('/moderation/auth-audit', {
+      search,
+      event: filters.event,
+      status: filters.status,
+    }, {
+      preserveState: true,
+      preserveScroll: true,
+    })
+  }
+
+  const handleFilterChange = (key, value) => {
+    router.get('/moderation/auth-audit', {
+      search: filters.search,
+      event: key === 'event' ? value : filters.event,
+      status: key === 'status' ? value : filters.status,
+    }, {
+      preserveState: true,
+      preserveScroll: true,
+    })
+  }
+
+  return (
+    <AdminLayout title="Auth Audit" subtitle="Review login, registration, forgot-password, and reset-password activity with IPs, timestamps, status, and failure reasons.">
+      <Head title="Admin · Auth Audit" />
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <SummaryCard label="Visible records" value={items.length.toLocaleString()} tone="slate" />
+        <SummaryCard label="Failures on page" value={failedCount.toLocaleString()} tone="rose" />
+        <SummaryCard label="Unique IPs on page" value={uniqueIpCount.toLocaleString()} tone="sky" />
+      </div>
+
+      <div className="mt-6 rounded-[28px] border border-white/[0.07] bg-white/[0.02] p-5">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+          <form onSubmit={handleSearch} className="flex flex-1 flex-col gap-3 md:flex-row">
+            <label className="flex-1">
+              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Search</span>
+              <input
+                name="search"
+                defaultValue={filters.search}
+                placeholder="Email, username, IP, or failure reason"
+                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+              />
+            </label>
+            <button type="submit" className="rounded-2xl bg-rose-500/80 px-5 py-3 text-sm font-semibold text-white transition hover:bg-rose-500">
+              Search
+            </button>
+          </form>
+
+          <div className="grid gap-3 md:grid-cols-2 xl:min-w-[26rem]">
+            <label>
+              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Event</span>
+              <select
+                value={filters.event}
+                onChange={(event) => handleFilterChange('event', event.target.value)}
+                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+              >
+                {eventOptions.map((option) => (
+                  <option key={option.value} value={option.value} className="bg-slate-950 text-white">
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label>
+              <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Status</span>
+              <select
+                value={filters.status}
+                onChange={(event) => handleFilterChange('status', event.target.value)}
+                className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+              >
+                {statusOptions.map((option) => (
+                  <option key={option.value} value={option.value} className="bg-slate-950 text-white">
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 overflow-hidden rounded-[28px] border border-white/[0.07] bg-white/[0.02]">
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[980px] text-sm">
+            <thead>
+              <tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+                <th className="px-5 py-4">When</th>
+                <th className="px-5 py-4">Event</th>
+                <th className="px-5 py-4">Status</th>
+                <th className="px-5 py-4">Identifier</th>
+                <th className="px-5 py-4">User</th>
+                <th className="px-5 py-4">IP</th>
+                <th className="px-5 py-4">Reason</th>
+                <th className="px-5 py-4">Details</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-white/[0.05]">
+              {items.length === 0 ? (
+                <tr>
+                  <td colSpan={8} className="px-5 py-12 text-center text-slate-500">No auth audit records matched the current filters.</td>
+                </tr>
+              ) : items.map((entry) => (
+                <tr key={entry.id} className="align-top transition hover:bg-white/[0.025]">
+                  <td className="px-5 py-4 text-slate-300">{formatTimestamp(entry.created_at)}</td>
+                  <td className="px-5 py-4 text-white">{EVENT_LABELS[entry.event_type] ?? formatLabel(entry.event_type)}</td>
+                  <td className="px-5 py-4">
+                    <span className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${STATUS_BADGES[entry.status] ?? 'border-white/10 bg-white/[0.04] text-white/70'}`}>
+                      {entry.status}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 text-slate-300">{entry.identifier || 'Not recorded'}</td>
+                  <td className="px-5 py-4">
+                    {entry.user ? (
+                      <div>
+                        <p className="font-medium text-white">{entry.user.name}</p>
+                        <p className="text-xs text-slate-500">{entry.user.username ? `@${entry.user.username}` : entry.user.email}</p>
+                      </div>
+                    ) : <span className="text-slate-500">Unknown user</span>}
+                  </td>
+                  <td className="px-5 py-4 text-slate-300">{entry.ip || 'Unknown'}</td>
+                  <td className="px-5 py-4 text-slate-300">{formatLabel(entry.reason)}</td>
+                  <td className="px-5 py-4">
+                    <details className="group w-72 max-w-full">
+                      <summary className="cursor-pointer list-none text-sm font-medium text-sky-200 transition hover:text-sky-100">
+                        View payload
+                      </summary>
+                      <div className="mt-3 space-y-3 rounded-2xl border border-white/10 bg-black/20 p-4 text-xs text-slate-300">
+                        <div>
+                          <p className="font-semibold uppercase tracking-[0.16em] text-slate-500">User agent</p>
+                          <p className="mt-1 break-words leading-5 text-slate-300">{entry.user_agent || 'Not recorded'}</p>
+                        </div>
+                        <div>
+                          <p className="font-semibold uppercase tracking-[0.16em] text-slate-500">Metadata</p>
+                          <pre className="mt-1 overflow-x-auto whitespace-pre-wrap break-words rounded-xl bg-slate-950/70 p-3 text-[11px] leading-5 text-slate-300">{JSON.stringify(entry.metadata || {}, null, 2)}</pre>
+                        </div>
+                      </div>
+                    </details>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {logs?.last_page > 1 ? (
+          <div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-4">
+            <p className="text-xs text-slate-500">
+              Showing {logs.from}–{logs.to} of {logs.total} audit records
+            </p>
+            <div className="flex gap-1">
+              {logs.links.map((link, index) => (
+                link.url ? (
+                  <button
+                    key={`${link.label}-${index}`}
+                    type="button"
+                    onClick={() => router.get(link.url, {}, { preserveScroll: true, preserveState: true })}
+                    className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-rose-500/20 font-semibold text-rose-300' : 'text-slate-500 hover:bg-white/[0.06] hover:text-white'}`}
+                    dangerouslySetInnerHTML={{ __html: link.label }}
+                  />
+                ) : (
+                  <span key={`${link.label}-${index}`} className="rounded-lg px-3 py-1.5 text-xs text-slate-700" dangerouslySetInnerHTML={{ __html: link.label }} />
+                )
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </AdminLayout>
+  )
+}

resources/js/Pages/Moderation/AiBiographyAdmin.jsx

@@ -151,7 +151,7 @@ export default function AiBiographyAdmin() {
   }
 
   return (
-    <div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8">
+    <div className="w-full pb-16 pt-8">
       <Head title="AI Biography Review" />
 
       <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.2),transparent_32%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.9))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">

resources/js/Pages/Moderation/ArtworkMaturityQueue.jsx

@@ -108,7 +108,7 @@ export default function ArtworkMaturityQueue() {
   ], [stats])
 
   return (
-    <div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8">
+    <div className="w-full pb-16 pt-8">
       <Head title="Artwork Maturity Queue" />
 
       <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.16),transparent_36%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">

resources/js/collections.jsx

@@ -7,6 +7,11 @@ const pages = {
     '!./Pages/Help/**/__tests__/**',
     '!./Pages/Help/**/*.test.jsx',
   ]),
+  ...import.meta.glob([
+    './Pages/Profile/**/*.jsx',
+    '!./Pages/Profile/**/__tests__/**',
+    '!./Pages/Profile/**/*.test.jsx',
+  ]),
   ...import.meta.glob([
     './Pages/Collection/**/*.jsx',
     '!./Pages/Collection/**/__tests__/**',

resources/js/components/Topbar.jsx

@@ -57,6 +57,7 @@ export default function Topbar({ user = null }) {
                   <div className="border-t border-neutral-700" />
                   <a href={user.uploadUrl} className="block px-4 py-2 text-sm hover:bg-white/5">Upload</a>
                   <a href="/studio/artworks" className="block px-4 py-2 text-sm hover:bg-white/5">Studio</a>
+                  {user.moderationUrl ? <a href={user.moderationUrl} className="block px-4 py-2 text-sm hover:bg-white/5">Moderation</a> : null}
                   <a href="/dashboard" className="block px-4 py-2 text-sm hover:bg-white/5">Dashboard</a>
                   <div className="border-t border-neutral-700" />
                   <a href="/logout" className="block px-4 py-2 text-sm text-red-400 hover:bg-white/5"

resources/js/entry-topbar.jsx

@@ -13,6 +13,7 @@ function mount() {
         username:    container.dataset.username || '',
         avatarUrl:   container.dataset.avatarUrl || null,
         uploadUrl:   container.dataset.uploadUrl || '/upload',
+        moderationUrl: container.dataset.moderationUrl || null,
       }
     : null
 

resources/js/profile.jsx

@@ -1,27 +0,0 @@
-import { mountInertiaRoot } from './bootstrap'
-import React from 'react'
-import { createInertiaApp } from '@inertiajs/react'
-import ProfileShow from './Pages/Profile/ProfileShow'
-import ProfileGallery from './Pages/Profile/ProfileGallery'
-import CollectionShow from './Pages/Collection/CollectionShow'
-import CollectionSeriesShow from './Pages/Collection/CollectionSeriesShow'
-import CollectionManage from './Pages/Collection/CollectionManage'
-import CollectionFeaturedIndex from './Pages/Collection/CollectionFeaturedIndex'
-import SavedCollections from './Pages/Collection/SavedCollections'
-
-const pages = {
-  'Profile/ProfileShow': ProfileShow,
-  'Profile/ProfileGallery': ProfileGallery,
-  'Collection/CollectionShow': CollectionShow,
-  'Collection/CollectionSeriesShow': CollectionSeriesShow,
-  'Collection/CollectionManage': CollectionManage,
-  'Collection/CollectionFeaturedIndex': CollectionFeaturedIndex,
-  'Collection/SavedCollections': SavedCollections,
-}
-
-createInertiaApp({
-  resolve: (name) => pages[name],
-  setup({ el, App, props }) {
-    mountInertiaRoot(el, App, props)
-  },
-})