Add delete button to design approvals page

Allow admins to delete individual design submissions to clean up test data.
Includes confirmation dialog and reloads page on successful deletion.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/app/admin/designs/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { prisma } from '@/lib/prisma';
 import AdminNav from '@/components/AdminNav';
+import DeleteDesignButton from '@/components/DeleteDesignButton';
 
 export default async function DesignsPage() {
   let designs = [];
@@ -50,31 +51,33 @@ export default async function DesignsPage() {
           {items.map((d) => {
             const last = d.messages[0];
             return (
-              <Link
+              <div key={d.id} className="flex items-center gap-4 py-4 hover:bg-surface">
-                key={d.id}
+                <Link
-                href={`/admin/designs/${d.id}`}
+                  href={`/admin/designs/${d.id}`}
-                className="flex items-center gap-4 py-4 hover:bg-surface"
+                  className="flex-1 flex items-center gap-4"
-              >
+                >
-                <img
+                  <img
-                  src={d.designPreviewUrl}
+                    src={d.designPreviewUrl}
-                  alt="design preview"
+                    alt="design preview"
-                  className="h-14 w-14 border border-line object-cover"
+                    className="h-14 w-14 border border-line object-cover"
-                />
+                  />
-                <div className="flex-1">
+                  <div className="flex-1">
-                  <p className="font-medium">{d.customerName || d.customerEmail}</p>
+                    <p className="font-medium">{d.customerName || d.customerEmail}</p>
-                  <p className="truncate text-sm text-muted">
+                    <p className="truncate text-sm text-muted">
-                    {last ? (
+                      {last ? (
-                      <>
+                        <>
-                        {last.sender === 'ADMIN' ? 'You: ' : ''}
+                          {last.sender === 'ADMIN' ? 'You: ' : ''}
-                        {last.body}
+                          {last.body}
-                      </>
+                        </>
-                    ) : (
+                      ) : (
-                      'No messages yet'
+                        'No messages yet'
-                    )}
+                      )}
-                  </p>
+                    </p>
-                </div>
+                  </div>
-                <span className="tag-label">{d.product.name}</span>
+                  <span className="tag-label">{d.product.name}</span>
-              </Link>
+                </Link>
+                <DeleteDesignButton designId={d.id} />
+              </div>
             );
           })}
         </div>

src/components/DeleteDesignButton.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function DeleteDesignButton({ designId }: { designId: string }) {
+  const [deleting, setDeleting] = useState(false);
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!confirm('Delete this design? This cannot be undone.')) return;
+
+    setDeleting(true);
+    try {
+      const res = await fetch(`/api/designs/${designId}`, { method: 'DELETE' });
+      if (res.ok) {
+        window.location.reload();
+      } else {
+        alert('Failed to delete design');
+        setDeleting(false);
+      }
+    } catch (err) {
+      console.error('Error deleting design:', err);
+      alert('Error deleting design');
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDelete}
+      disabled={deleting}
+      className="border border-line px-3 py-2 text-sm text-muted hover:border-ink hover:text-ink disabled:opacity-50"
+    >
+      {deleting ? 'Deleting…' : 'Delete'}
+    </button>
+  );
+}