Upload beautify

resources/js/components/admin/AdminUploadQueue.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react'
+
+export default function AdminUploadQueue() {
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [notes, setNotes] = useState({})
+
+  const loadPending = async () => {
+    setLoading(true)
+    setError('')
+
+    try {
+      const response = await window.axios.get('/api/admin/uploads/pending')
+      setItems(Array.isArray(response?.data?.data) ? response.data.data : [])
+    } catch (loadError) {
+      setError(loadError?.response?.data?.message || 'Failed to load moderation queue.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadPending()
+  }, [])
+
+  const moderate = async (id, action) => {
+    try {
+      const payload = { note: String(notes[id] || '') }
+      await window.axios.post(`/api/admin/uploads/${id}/${action}`, payload)
+      setItems((prev) => prev.filter((item) => item.id !== id))
+    } catch (moderateError) {
+      setError(moderateError?.response?.data?.message || `Failed to ${action} upload.`)
+    }
+  }
+
+  return (
+    <section aria-label="Moderation queue" className="mx-auto w-full max-w-5xl rounded-2xl border border-white/10 bg-slate-900/60 p-4 md:p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-white">Pending Upload Moderation</h2>
+        <button type="button" onClick={loadPending} className="rounded-lg border border-white/20 px-3 py-1 text-xs text-white">
+          Refresh
+        </button>
+      </div>
+
+      {loading ? <p role="status" className="text-sm text-white/70">Loading…</p> : null}
+      {error ? <p role="alert" className="mb-3 text-sm text-rose-200">{error}</p> : null}
+      {!loading && items.length === 0 ? <p role="status" className="text-sm text-white/60">No pending uploads.</p> : null}
+
+      <ul className="space-y-3">
+        {items.map((item) => (
+          <li key={item.id} aria-label={`Pending upload ${item.id}`} className="rounded-xl border border-white/10 bg-white/5 p-3">
+            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+              <div>
+                <div className="text-sm font-medium text-white">{item.title || '(untitled upload)'}</div>
+                <div className="mt-1 text-xs text-white/65">{item.type} · {item.id}</div>
+                {item.preview_path ? <div className="mt-1 text-xs text-white/55">Preview: {item.preview_path}</div> : null}
+              </div>
+
+              <div className="w-full max-w-sm space-y-2">
+                <input
+                  type="text"
+                  aria-label={`Moderation note for ${item.id}`}
+                  value={notes[item.id] || ''}
+                  onChange={(event) => setNotes((prev) => ({ ...prev, [item.id]: event.target.value }))}
+                  placeholder="Moderation note"
+                  className="w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2 text-xs text-white"
+                />
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    aria-label={`Approve upload ${item.id}`}
+                    onClick={() => moderate(item.id, 'approve')}
+                    className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-semibold text-black"
+                  >
+                    Approve
+                  </button>
+                  <button
+                    type="button"
+                    aria-label={`Reject upload ${item.id}`}
+                    onClick={() => moderate(item.id, 'reject')}
+                    className="rounded-lg bg-rose-500 px-3 py-2 text-xs font-semibold text-white"
+                  >
+                    Reject
+                  </button>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

resources/js/components/admin/AdminUploadQueue.test.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AdminUploadQueue from './AdminUploadQueue'
+
+function makePendingUpload(overrides = {}) {
+  return {
+    id: '11111111-1111-1111-1111-111111111111',
+    title: 'Neon Skyline',
+    type: 'image',
+    preview_path: 'tmp/drafts/1111/preview.webp',
+    ...overrides,
+  }
+}
+
+describe('AdminUploadQueue', () => {
+  beforeEach(() => {
+    window.axios = {
+      get: vi.fn(),
+      post: vi.fn(),
+    }
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders pending list with accessible controls', async () => {
+    const upload = makePendingUpload()
+    window.axios.get.mockResolvedValueOnce({ data: { data: [upload] } })
+
+    render(<AdminUploadQueue />)
+
+    expect(screen.getByRole('heading', { name: 'Pending Upload Moderation' })).not.toBeNull()
+
+    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
+    expect(within(item).getByText('Neon Skyline')).not.toBeNull()
+    expect(within(item).getByRole('textbox', { name: `Moderation note for ${upload.id}` })).not.toBeNull()
+    expect(within(item).getByRole('button', { name: `Approve upload ${upload.id}` })).not.toBeNull()
+    expect(within(item).getByRole('button', { name: `Reject upload ${upload.id}` })).not.toBeNull()
+  })
+
+  it('approves upload and removes it from queue', async () => {
+    const upload = makePendingUpload()
+    window.axios.get.mockResolvedValueOnce({ data: { data: [upload] } })
+    window.axios.post.mockResolvedValueOnce({ data: { success: true } })
+
+    render(<AdminUploadQueue />)
+
+    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
+    await userEvent.click(within(item).getByRole('button', { name: `Approve upload ${upload.id}` }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('listitem', { name: `Pending upload ${upload.id}` })).toBeNull()
+    })
+
+    expect(window.axios.post).toHaveBeenCalledWith(`/api/admin/uploads/${upload.id}/approve`, { note: '' })
+  })
+
+  it('rejects upload with note and removes it from queue', async () => {
+    const upload = makePendingUpload({ id: '22222222-2222-2222-2222-222222222222', title: 'Retro Pack' })
+    window.axios.get.mockResolvedValueOnce({ data: { data: [upload] } })
+    window.axios.post.mockResolvedValueOnce({ data: { success: true } })
+
+    render(<AdminUploadQueue />)
+
+    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
+
+    await userEvent.type(
+      within(item).getByRole('textbox', { name: `Moderation note for ${upload.id}` }),
+      'Needs better quality screenshots'
+    )
+
+    await userEvent.click(within(item).getByRole('button', { name: `Reject upload ${upload.id}` }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('listitem', { name: `Pending upload ${upload.id}` })).toBeNull()
+    })
+
+    expect(window.axios.post).toHaveBeenCalledWith(`/api/admin/uploads/${upload.id}/reject`, {
+      note: 'Needs better quality screenshots',
+    })
+  })
+
+  it('shows API failure message and keeps item when moderation action fails', async () => {
+    const upload = makePendingUpload({ id: '33333333-3333-3333-3333-333333333333' })
+    window.axios.get.mockResolvedValueOnce({ data: { data: [upload] } })
+    window.axios.post.mockRejectedValueOnce({
+      response: { data: { message: 'Moderation API failed.' } },
+    })
+
+    render(<AdminUploadQueue />)
+
+    const item = await screen.findByRole('listitem', { name: `Pending upload ${upload.id}` })
+    await userEvent.click(within(item).getByRole('button', { name: `Approve upload ${upload.id}` }))
+
+    const alert = await screen.findByRole('alert')
+    expect(alert.textContent).toContain('Moderation API failed.')
+    expect(screen.getByRole('listitem', { name: `Pending upload ${upload.id}` })).not.toBeNull()
+  })
+
+  it('shows empty state when no pending uploads exist', async () => {
+    window.axios.get.mockResolvedValueOnce({ data: { data: [] } })
+
+    render(<AdminUploadQueue />)
+
+    const empty = await screen.findByText('No pending uploads.')
+    expect(empty).not.toBeNull()
+    expect(screen.queryAllByRole('listitem').length).toBe(0)
+  })
+})