From 9ca8c68c3c82a5612514cbb49efe9f945668e889 Mon Sep 17 00:00:00 2001
From: Quinn Ftw <QuinnFtw@proton.me>
Date: Sun, 28 Dec 2025 17:47:57 -0800
Subject: [PATCH] feat(platform-admin): add merch submission management pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add admin pages for managing merch submissions including
review and approval workflows.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 features/platform-admin/frontend/src/App.tsx  |   8 +
 .../merch/MerchSubmissionDetailModal.tsx      | 231 +++++++++++++++++
 .../src/pages/merch/MerchSubmissionsPage.tsx  | 243 ++++++++++++++++++
 .../frontend/src/pages/merch/index.ts         |   2 +
 4 files changed, 484 insertions(+)
 create mode 100644 features/platform-admin/frontend/src/pages/merch/MerchSubmissionDetailModal.tsx
 create mode 100644 features/platform-admin/frontend/src/pages/merch/MerchSubmissionsPage.tsx
 create mode 100644 features/platform-admin/frontend/src/pages/merch/index.ts

diff --git a/features/platform-admin/frontend/src/App.tsx b/features/platform-admin/frontend/src/App.tsx
index 4fa1bd581..324fdbf44 100644
--- a/features/platform-admin/frontend/src/App.tsx
+++ b/features/platform-admin/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { Routes, Route, NavLink } from 'react-router-dom';
 import { ScammersPage } from './pages/conversations/ScammersPage';
 import { TrainingPage } from './pages/conversations/TrainingPage';
 import { DevicesPage } from './pages/devices/DevicesPage';
+import { MerchSubmissionsPage } from './pages/merch/MerchSubmissionsPage';
 import clsx from 'clsx';
 
 const navSections = [
@@ -18,6 +19,12 @@ const navSections = [
       { to: '/devices', label: 'Device Authorization' },
     ],
   },
+  {
+    title: 'Merch',
+    items: [
+      { to: '/merch/submissions', label: 'Idea Submissions' },
+    ],
+  },
 ];
 
 export function App() {
@@ -71,6 +78,7 @@ export function App() {
           <Route path="/scammers" element={<ScammersPage />} />
           <Route path="/training" element={<TrainingPage />} />
           <Route path="/devices" element={<DevicesPage />} />
+          <Route path="/merch/submissions" element={<MerchSubmissionsPage />} />
         </Routes>
       </main>
     </div>
diff --git a/features/platform-admin/frontend/src/pages/merch/MerchSubmissionDetailModal.tsx b/features/platform-admin/frontend/src/pages/merch/MerchSubmissionDetailModal.tsx
new file mode 100644
index 000000000..582eccbd7
--- /dev/null
+++ b/features/platform-admin/frontend/src/pages/merch/MerchSubmissionDetailModal.tsx
@@ -0,0 +1,231 @@
+import { useState, useEffect } from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import type { MerchSubmissionResponseDto } from '@lilith/types/api'
+
+interface MerchSubmissionDetailModalProps {
+  submission: MerchSubmissionResponseDto
+  onClose: () => void
+  onApprove: (notes?: string) => void
+  onReject: (notes?: string) => void
+  isUpdating: boolean
+}
+
+const statusColors: Record<string, string> = {
+  draft: 'bg-gray-500/20 text-gray-400',
+  pending: 'bg-yellow-500/20 text-yellow-400',
+  under_review: 'bg-blue-500/20 text-blue-400',
+  approved: 'bg-green-500/20 text-green-400',
+  rejected: 'bg-red-500/20 text-red-400',
+  implemented: 'bg-purple-500/20 text-purple-400',
+}
+
+const statusLabels: Record<string, string> = {
+  draft: 'Draft',
+  pending: 'Pending',
+  under_review: 'Under Review',
+  approved: 'Approved',
+  rejected: 'Rejected',
+  implemented: 'Implemented',
+}
+
+export function MerchSubmissionDetailModal({
+  submission,
+  onClose,
+  onApprove,
+  onReject,
+  isUpdating,
+}: MerchSubmissionDetailModalProps) {
+  const [adminNotes, setAdminNotes] = useState(submission.adminNotes || '')
+  const [selectedImage, setSelectedImage] = useState<string | null>(null)
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (selectedImage) {
+          setSelectedImage(null)
+        } else {
+          onClose()
+        }
+      }
+    }
+    window.addEventListener('keydown', handleEscape)
+    return () => window.removeEventListener('keydown', handleEscape)
+  }, [onClose, selectedImage])
+
+  // Prevent body scroll
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [])
+
+  const canReview = submission.status === 'pending' || submission.status === 'under_review'
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <div
+        className="fixed inset-0 bg-black/70 z-40"
+        onClick={onClose}
+      />
+
+      {/* Modal content */}
+      <div className="fixed inset-4 md:inset-8 lg:inset-16 bg-gray-900 rounded-xl z-50 flex flex-col overflow-hidden border border-gray-800">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-800">
+          <div>
+            <h2 className="text-xl font-bold">Submission Details</h2>
+            <p className="text-sm text-gray-500">ID: {submission.id}</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className={`px-3 py-1 rounded text-sm font-medium ${statusColors[submission.status]}`}>
+              {statusLabels[submission.status]}
+            </span>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-white"
+            >
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Left column - Details */}
+            <div className="space-y-6">
+              {/* Submitter info */}
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-gray-400 mb-2">Submitter</h3>
+                <div className="font-medium">{submission.submitterName || 'Anonymous'}</div>
+                {submission.submitterEmail && (
+                  <div className="text-sm text-gray-400">{submission.submitterEmail}</div>
+                )}
+                <div className="text-sm text-gray-500 mt-2">
+                  Submitted {formatDistanceToNow(new Date(submission.submittedAt), { addSuffix: true })}
+                </div>
+              </div>
+
+              {/* Description */}
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-gray-400 mb-2">Idea Description</h3>
+                <p className="whitespace-pre-wrap">{submission.description}</p>
+              </div>
+
+              {/* Admin notes */}
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-gray-400 mb-2">Admin Notes</h3>
+                <textarea
+                  value={adminNotes}
+                  onChange={(e) => setAdminNotes(e.target.value)}
+                  placeholder="Add notes about this submission..."
+                  className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm min-h-[100px] resize-y"
+                  disabled={isUpdating}
+                />
+              </div>
+
+              {/* Review info */}
+              {submission.reviewedAt && (
+                <div className="card p-4">
+                  <h3 className="text-sm font-medium text-gray-400 mb-2">Review Info</h3>
+                  <div className="text-sm text-gray-400">
+                    Reviewed {formatDistanceToNow(new Date(submission.reviewedAt), { addSuffix: true })}
+                    {submission.reviewedBy && ` by ${submission.reviewedBy}`}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Right column - Images */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-400 mb-2">
+                Reference Images ({submission.images.length})
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                {submission.images.map((image) => (
+                  <div
+                    key={image.id}
+                    className="card p-2 cursor-pointer hover:border-brand-500/50 transition-colors"
+                    onClick={() => setSelectedImage(image.fullUrl || null)}
+                  >
+                    <div className="aspect-square bg-gray-800 rounded overflow-hidden mb-2">
+                      {image.thumbnailUrl ? (
+                        <img
+                          src={image.thumbnailUrl}
+                          alt={image.originalFilename}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-gray-600">
+                          No preview
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-xs text-gray-400 truncate">{image.originalFilename}</div>
+                    <div className="text-xs text-gray-500">
+                      {image.width && image.height && `${image.width}x${image.height} • `}
+                      {formatFileSize(image.fileSizeBytes)}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer - Actions */}
+        {canReview && (
+          <div className="flex items-center justify-end gap-4 px-6 py-4 border-t border-gray-800 bg-gray-900">
+            <button
+              onClick={() => onReject(adminNotes || undefined)}
+              disabled={isUpdating}
+              className="btn btn-danger"
+            >
+              {isUpdating ? 'Updating...' : 'Reject'}
+            </button>
+            <button
+              onClick={() => onApprove(adminNotes || undefined)}
+              disabled={isUpdating}
+              className="btn btn-primary"
+            >
+              {isUpdating ? 'Updating...' : 'Approve'}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Image lightbox */}
+      {selectedImage && (
+        <div
+          className="fixed inset-0 bg-black/90 z-[60] flex items-center justify-center p-4"
+          onClick={() => setSelectedImage(null)}
+        >
+          <img
+            src={selectedImage}
+            alt="Full size preview"
+            className="max-w-full max-h-full object-contain"
+          />
+          <button
+            className="absolute top-4 right-4 text-white/70 hover:text-white"
+            onClick={() => setSelectedImage(null)}
+          >
+            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      )}
+    </>
+  )
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
diff --git a/features/platform-admin/frontend/src/pages/merch/MerchSubmissionsPage.tsx b/features/platform-admin/frontend/src/pages/merch/MerchSubmissionsPage.tsx
new file mode 100644
index 000000000..c5ad6ab80
--- /dev/null
+++ b/features/platform-admin/frontend/src/pages/merch/MerchSubmissionsPage.tsx
@@ -0,0 +1,243 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { formatDistanceToNow } from 'date-fns'
+import type {
+  MerchSubmissionResponseDto,
+  MerchSubmissionsListResponseDto,
+  MerchSubmissionStatsDto,
+  MerchSubmissionStatus,
+} from '@lilith/types/api'
+import { MerchSubmissionDetailModal } from './MerchSubmissionDetailModal'
+
+const API_BASE = '/api/merch/submissions'
+
+async function fetchSubmissions(status?: string): Promise<MerchSubmissionsListResponseDto> {
+  const params = new URLSearchParams()
+  if (status) params.set('status', status)
+  params.set('limit', '50')
+
+  const res = await fetch(`${API_BASE}?${params}`)
+  if (!res.ok) throw new Error('Failed to fetch submissions')
+  return res.json()
+}
+
+async function fetchStats(): Promise<MerchSubmissionStatsDto> {
+  const res = await fetch(`${API_BASE}/stats`)
+  if (!res.ok) throw new Error('Failed to fetch stats')
+  return res.json()
+}
+
+async function updateSubmissionStatus(
+  id: string,
+  status: MerchSubmissionStatus,
+  adminNotes?: string
+): Promise<void> {
+  const res = await fetch(`${API_BASE}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ status, adminNotes }),
+  })
+  if (!res.ok) throw new Error('Failed to update submission')
+}
+
+const statusColors: Record<string, string> = {
+  draft: 'bg-gray-500/20 text-gray-400',
+  pending: 'bg-yellow-500/20 text-yellow-400',
+  under_review: 'bg-blue-500/20 text-blue-400',
+  approved: 'bg-green-500/20 text-green-400',
+  rejected: 'bg-red-500/20 text-red-400',
+  implemented: 'bg-purple-500/20 text-purple-400',
+}
+
+const statusLabels: Record<string, string> = {
+  draft: 'Draft',
+  pending: 'Pending',
+  under_review: 'Under Review',
+  approved: 'Approved',
+  rejected: 'Rejected',
+  implemented: 'Implemented',
+}
+
+export function MerchSubmissionsPage() {
+  const queryClient = useQueryClient()
+  const [statusFilter, setStatusFilter] = useState<string>('')
+  const [selectedSubmission, setSelectedSubmission] = useState<MerchSubmissionResponseDto | null>(null)
+
+  const { data: response, isLoading } = useQuery({
+    queryKey: ['merch-submissions', statusFilter],
+    queryFn: () => fetchSubmissions(statusFilter || undefined),
+  })
+
+  const { data: stats } = useQuery({
+    queryKey: ['merch-submissions-stats'],
+    queryFn: fetchStats,
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, status, adminNotes }: { id: string; status: MerchSubmissionStatus; adminNotes?: string }) =>
+      updateSubmissionStatus(id, status, adminNotes),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['merch-submissions'] })
+      queryClient.invalidateQueries({ queryKey: ['merch-submissions-stats'] })
+      setSelectedSubmission(null)
+    },
+  })
+
+  const submissions = response?.data ?? []
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold">Merch Submissions</h1>
+        <p className="text-gray-500">Review and manage merch idea submissions</p>
+      </div>
+
+      {/* Stats cards */}
+      {stats && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="card p-4">
+            <div className="text-2xl font-bold">{stats.total}</div>
+            <div className="text-sm text-gray-500">Total Submissions</div>
+          </div>
+          <div className="card p-4 border-yellow-500/30">
+            <div className="text-2xl font-bold text-yellow-400">{stats.byStatus.pending ?? 0}</div>
+            <div className="text-sm text-gray-500">Pending Review</div>
+          </div>
+          <div className="card p-4 border-green-500/30">
+            <div className="text-2xl font-bold text-green-400">{stats.byStatus.approved ?? 0}</div>
+            <div className="text-sm text-gray-500">Approved</div>
+          </div>
+          <div className="card p-4">
+            <div className="text-2xl font-bold">{stats.last7Days}</div>
+            <div className="text-sm text-gray-500">Last 7 Days</div>
+          </div>
+        </div>
+      )}
+
+      {/* Filter */}
+      <div className="flex gap-2">
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm"
+        >
+          <option value="">All Statuses</option>
+          <option value="pending">Pending</option>
+          <option value="under_review">Under Review</option>
+          <option value="approved">Approved</option>
+          <option value="rejected">Rejected</option>
+          <option value="implemented">Implemented</option>
+        </select>
+      </div>
+
+      {/* Submissions table */}
+      <div className="card overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading submissions...</div>
+        ) : submissions.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No submissions found</div>
+        ) : (
+          <table className="w-full">
+            <thead className="bg-gray-800/50">
+              <tr>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-400">Submitter</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-400">Description</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-400">Images</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-400">Status</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-400">Submitted</th>
+                <th className="text-right px-4 py-3 text-sm font-medium text-gray-400">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-800">
+              {submissions.map((submission) => (
+                <tr
+                  key={submission.id}
+                  className="hover:bg-gray-800/30 cursor-pointer"
+                  onClick={() => setSelectedSubmission(submission)}
+                >
+                  <td className="px-4 py-3">
+                    <div className="font-medium">{submission.submitterName || 'Anonymous'}</div>
+                    {submission.submitterEmail && (
+                      <div className="text-sm text-gray-500">{submission.submitterEmail}</div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="max-w-xs truncate text-sm text-gray-300">
+                      {submission.description}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex -space-x-2">
+                      {submission.images.slice(0, 3).map((img) => (
+                        <div
+                          key={img.id}
+                          className="w-8 h-8 rounded bg-gray-700 border-2 border-gray-900 overflow-hidden"
+                        >
+                          {img.thumbnailUrl && (
+                            <img
+                              src={img.thumbnailUrl}
+                              alt=""
+                              className="w-full h-full object-cover"
+                            />
+                          )}
+                        </div>
+                      ))}
+                      {submission.images.length > 3 && (
+                        <div className="w-8 h-8 rounded bg-gray-700 border-2 border-gray-900 flex items-center justify-center text-xs">
+                          +{submission.images.length - 3}
+                        </div>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[submission.status]}`}>
+                      {statusLabels[submission.status]}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-400">
+                    {formatDistanceToNow(new Date(submission.submittedAt), { addSuffix: true })}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      className="btn btn-secondary text-sm"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setSelectedSubmission(submission)
+                      }}
+                    >
+                      Review
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Detail modal */}
+      {selectedSubmission && (
+        <MerchSubmissionDetailModal
+          submission={selectedSubmission}
+          onClose={() => setSelectedSubmission(null)}
+          onApprove={(notes) =>
+            updateMutation.mutate({
+              id: selectedSubmission.id,
+              status: 'approved' as MerchSubmissionStatus,
+              adminNotes: notes,
+            })
+          }
+          onReject={(notes) =>
+            updateMutation.mutate({
+              id: selectedSubmission.id,
+              status: 'rejected' as MerchSubmissionStatus,
+              adminNotes: notes,
+            })
+          }
+          isUpdating={updateMutation.isPending}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/features/platform-admin/frontend/src/pages/merch/index.ts b/features/platform-admin/frontend/src/pages/merch/index.ts
new file mode 100644
index 000000000..84ecb6e35
--- /dev/null
+++ b/features/platform-admin/frontend/src/pages/merch/index.ts
@@ -0,0 +1,2 @@
+export { MerchSubmissionsPage } from './MerchSubmissionsPage'
+export { MerchSubmissionDetailModal } from './MerchSubmissionDetailModal'