feat: preview de placement en pipeline de creatividades
Cada pieza muestra mock Meta/Google Ads o RRSS (feed, Stories, LinkedIn) como el Ad Tracker, con copy, media y canal editables. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
@@ -1,191 +1,11 @@
|
||||
/**
|
||||
* 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.
|
||||
* Pipeline de creatividades — cola de aprobación con preview de placement
|
||||
* (Meta/Google Ads + RRSS), estilo Ad Tracker.
|
||||
*/
|
||||
'use client';
|
||||
|
||||
import React, { FormEvent, useEffect, useState } from 'react';
|
||||
import { Image as ImageIcon, Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
type Creative = {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
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;
|
||||
import CreativesPipeline from '@/components/CreativesPipeline';
|
||||
|
||||
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);
|
||||
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();
|
||||
}
|
||||
|
||||
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">
|
||||
Pipeline de creatividades
|
||||
</h2>
|
||||
<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>
|
||||
|
||||
{warning && (
|
||||
<p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">
|
||||
{warning}
|
||||
</p>
|
||||
)}
|
||||
{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">
|
||||
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 ES"
|
||||
required
|
||||
/>
|
||||
</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" /> Añadir
|
||||
</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">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 guarda archivos validados (PDF, Excel, packs…); esto es
|
||||
el flow de ads.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
return <CreativesPipeline />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user