feat: metrics dashboard with WoW/MoM/YoY and creatives pipeline

Rebuild KPIs as a real dashboard (period deltas, tenant zoom), clarify
objetivos/calendario/activos sources, and turn creatives into a status
pipeline with delete.

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

src/app/dashboard/creatives/page.tsx

@@ -1,10 +1,11 @@
 /**
- * Creatividades multi-tenant — lista vía /api/creatives (RLS).
+ * Pipeline de creatividades publicitarias del cliente en contexto.
+ * No es la librería de assets (documentos) ni el sync live de Meta — es la cola de aprobación.
  */
 'use client';
 
 import React, { FormEvent, useEffect, useState } from 'react';
-import { Image as ImageIcon, Plus } from 'lucide-react';
+import { Image as ImageIcon, Plus, Trash2 } from 'lucide-react';
 
 type Creative = {
   id: string;
@@ -13,12 +14,20 @@ type Creative = {
   created_at?: string;
 };
 
+const STATUSES = [
+  { id: 'draft', label: 'Borrador' },
+  { id: 'in_review', label: 'En review' },
+  { id: 'approved', label: 'Aprobado' },
+  { id: 'rejected', label: 'Rechazado' },
+] as const;
+
 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);
+  const [busyId, setBusyId] = useState<string | null>(null);
 
   async function load() {
     setLoading(true);
@@ -50,15 +59,43 @@ export default function CreativesPage() {
     await load();
   }
 
+  async function setStatus(id: string, status: string) {
+    setBusyId(id);
+    setErr(null);
+    const res = await fetch('/api/creatives', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, status }),
+    });
+    const data = await res.json();
+    if (!res.ok) setErr(data.error ?? 'No se pudo actualizar');
+    await load();
+    setBusyId(null);
+  }
+
+  async function remove(id: string) {
+    if (!confirm('¿Borrar esta creatividad?')) return;
+    setBusyId(id);
+    setErr(null);
+    const res = await fetch(`/api/creatives?id=${encodeURIComponent(id)}`, {
+      method: 'DELETE',
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) setErr(data.error ?? 'No se pudo borrar');
+    await load();
+    setBusyId(null);
+  }
+
   return (
     <div className="space-y-8">
       <div>
         <h2 className="text-2xl font-bold tracking-tight text-white">
-          Creatividades
+          Pipeline de creatividades
         </h2>
-        <p className="text-sm text-gray-400 mt-1">
-          Borradores del cliente en contexto (selector arriba). Con superadmin
-          activo, ves/creas en ese tenant.
+        <p className="text-sm text-gray-400 mt-1 max-w-2xl">
+          Cola de aprobación de piezas ads del <strong className="text-gray-300">cliente en contexto</strong> (selector arriba):
+          borrador → review → aprobado. No sustituye Meta Ads Manager; el sync
+          automático de anuncios live llegará con la integración Meta.
         </p>
       </div>
 
@@ -71,12 +108,14 @@ export default function CreativesPage() {
 
       <form onSubmit={create} className="flex gap-3 items-end">
         <div className="flex-1">
-          <label className="text-[11px] uppercase text-gray-500">Título</label>
+          <label className="text-[11px] uppercase text-gray-500">
+            Nueva pieza
+          </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"
+            placeholder="Video Meta · testimonial ES"
             required
           />
         </div>
@@ -84,7 +123,7 @@ export default function CreativesPage() {
           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
+          <Plus className="w-4 h-4" /> Añadir
         </button>
       </form>
 
@@ -93,22 +132,59 @@ export default function CreativesPage() {
       ) : 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>
+          <p className="text-gray-300 font-medium">Pipeline vacío</p>
+          <p className="text-xs text-gray-500 mt-2 max-w-md mx-auto">
+            Úsalo para piezas en producción creativa por cliente. La biblioteca
+            de activos es para documentos/briefs aprobados; esto es el flow de
+            ads.
+          </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 className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+          {STATUSES.map((col) => {
+            const items = creatives.filter((c) => c.status === col.id);
+            return (
+              <div key={col.id} className="space-y-2">
+                <p className="text-[11px] uppercase tracking-wider text-gray-500 font-semibold px-1">
+                  {col.label} ({items.length})
+                </p>
+                <ul className="space-y-2 min-h-[80px]">
+                  {items.map((c) => (
+                    <li
+                      key={c.id}
+                      className="rounded-lg border border-gray-800 bg-[#111827] p-3 space-y-2"
+                    >
+                      <p className="text-sm text-white font-medium">{c.title}</p>
+                      <div className="flex items-center gap-2">
+                        <select
+                          className="flex-1 text-[11px] rounded bg-gray-900 border border-gray-700 text-gray-300 px-2 py-1"
+                          value={c.status}
+                          disabled={busyId === c.id}
+                          onChange={(e) => setStatus(c.id, e.target.value)}
+                        >
+                          {STATUSES.map((s) => (
+                            <option key={s.id} value={s.id}>
+                              {s.label}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          type="button"
+                          title="Borrar"
+                          disabled={busyId === c.id}
+                          onClick={() => remove(c.id)}
+                          className="p-1.5 rounded text-gray-500 hover:text-red-400 hover:bg-red-500/10"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
       )}
     </div>
   );