feat(creatives): wire dashboard list/create to /api/creatives

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/dashboard/creatives/page.tsx

@@ -1,12 +1,55 @@
 /**
- * Stub: workflow de creatividades multi-tenant (upload, review, storage).
+ * Creatividades multi-tenant — lista vía /api/creatives (RLS).
  */
-import React from 'react';
+'use client';
-import { Image as ImageIcon, Upload } from 'lucide-react';
 
-export const revalidate = 0;
+import React, { FormEvent, useEffect, useState } from 'react';
+import { Image as ImageIcon, Plus } from 'lucide-react';
+
+type Creative = {
+  id: string;
+  title: string;
+  status: string;
+  created_at?: string;
+};
 
 export default function CreativesPage() {
+  const [creatives, setCreatives] = useState<Creative[]>([]);
+  const [title, setTitle] = useState('');
+  const [warning, setWarning] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  async function load() {
+    setLoading(true);
+    const res = await fetch('/api/creatives');
+    const data = await res.json();
+    setCreatives(data.creatives ?? []);
+    setWarning(data.warning ?? null);
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  async function create(e: FormEvent) {
+    e.preventDefault();
+    setErr(null);
+    const res = await fetch('/api/creatives', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      setErr(data.error ?? 'Error al crear');
+      return;
+    }
+    setTitle('');
+    await load();
+  }
+
   return (
     <div className="space-y-8">
       <div>
@@ -14,20 +57,59 @@ export default function CreativesPage() {
           Creatividades
         </h2>
         <p className="text-sm text-gray-400 mt-1">
-          Revisión cliente/agencia · roadmap 4Ventures Centro de Mando.
+          Borradores por tenant · aplica <code>sql/creatives.sql</code> en Studio
+          antes del primer uso.
         </p>
       </div>
-      <div className="bg-[#111827] border border-dashed border-gray-700 rounded-xl p-12 text-center">
+
-        <ImageIcon className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+      {warning && (
-        <p className="text-gray-300 font-medium">Próximo sprint</p>
+        <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">
-        <p className="text-xs text-gray-500 mt-2 max-w-md mx-auto">
+          {warning}
-          Upload (JPEG/PNG/WebP/MP4/PDF · máx 25MB), estados draft → in_review →
-          approved/rejected, comentarios y storage por tenant (Supabase Storage).
         </p>
-        <div className="mt-6 inline-flex items-center gap-2 text-amber-400/80 text-xs">
+      )}
-          <Upload className="w-3.5 h-3.5" /> docs/CONVERGENCE.md
+      {err && <p className="text-xs text-red-400">{err}</p>}
+
+      <form onSubmit={create} className="flex gap-3 items-end">
+        <div className="flex-1">
+          <label className="text-[11px] uppercase text-gray-500">Título</label>
+          <input
+            className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Video Meta · testimonial"
+            required
+          />
         </div>
-      </div>
+        <button
+          type="submit"
+          className="inline-flex items-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2 text-sm font-medium text-white"
+        >
+          <Plus className="w-4 h-4" /> Crear borrador
+        </button>
+      </form>
+
+      {loading ? (
+        <p className="text-sm text-gray-500">Cargando…</p>
+      ) : creatives.length === 0 ? (
+        <div className="bg-[#111827] border border-dashed border-gray-700 rounded-xl p-12 text-center">
+          <ImageIcon className="w-10 h-10 text-gray-600 mx-auto mb-3" />
+          <p className="text-gray-300 font-medium">Sin creatividades aún</p>
+        </div>
+      ) : (
+        <ul className="space-y-2">
+          {creatives.map((c) => (
+            <li
+              key={c.id}
+              className="flex justify-between items-center bg-[#111827] border border-gray-800 rounded-lg px-4 py-3"
+            >
+              <span className="text-sm text-white">{c.title}</span>
+              <span className="text-[10px] uppercase tracking-wider text-gray-400">
+                {c.status}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }