feat: dual agency/client approval on calendar and assets
Private RRSS calendar with unified + per-network tabs, comments, and double-check OK. Assets get review drawer with preview/comments. KPIs gain date presets, North Star strip, channel matrix and per-channel dash. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
@@ -23,6 +23,13 @@ type Asset = {
|
||||
created_at?: string;
|
||||
};
|
||||
|
||||
type Dual = {
|
||||
agency: boolean;
|
||||
client: boolean;
|
||||
both: boolean;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type DriveFile = {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -39,6 +46,32 @@ function formatBytes(n?: number | null) {
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function AssetImagePreview({ assetId, alt }: { assetId: string; alt: string }) {
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
const r = await fetch(`/api/assets/download?id=${encodeURIComponent(assetId)}`);
|
||||
const j = await r.json();
|
||||
if (!cancelled && r.ok && j.url) setUrl(j.url);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [assetId]);
|
||||
if (!url) {
|
||||
return <p className="text-xs text-gray-500">Cargando preview…</p>;
|
||||
}
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={url}
|
||||
alt={alt}
|
||||
className="w-full max-h-48 object-contain rounded-lg border border-gray-800 bg-black/40"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function iconHint(mime?: string | null) {
|
||||
if (!mime) return 'FILE';
|
||||
if (mime.startsWith('image/')) return 'IMG';
|
||||
@@ -61,12 +94,30 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const [drag, setDrag] = useState(false);
|
||||
const [dualMap, setDualMap] = useState<Record<string, Dual>>({});
|
||||
const [detailId, setDetailId] = useState<string | null>(null);
|
||||
const [comments, setComments] = useState<
|
||||
{ id: string; body: string; author_party: string; author_email?: string; created_at: string }[]
|
||||
>([]);
|
||||
const [commentText, setCommentText] = useState('');
|
||||
const [party, setParty] = useState<'agency' | 'client'>('client');
|
||||
const [collabBusy, setCollabBusy] = useState(false);
|
||||
|
||||
const loadPortal = useCallback(async () => {
|
||||
const res = await fetch('/api/assets');
|
||||
const data = await res.json();
|
||||
setAssets(data.assets || []);
|
||||
const list: Asset[] = data.assets || [];
|
||||
setAssets(list);
|
||||
if (data.warning) setWarning(data.warning);
|
||||
if (list.length) {
|
||||
const ids = list.map((a) => a.id).join(',');
|
||||
const c = await fetch(`/api/assets/collab?ids=${ids}`);
|
||||
const cj = await c.json();
|
||||
if (c.ok) {
|
||||
setDualMap(cj.dual || {});
|
||||
if (cj.party) setParty(cj.party);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadDrive = useCallback(async () => {
|
||||
@@ -362,9 +413,34 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
|
||||
: ''}
|
||||
</p>
|
||||
</div>
|
||||
<span className="hidden sm:inline-flex items-center gap-1 text-[10px] text-emerald-400">
|
||||
<CheckCircle2 className="w-3 h-3" /> Validado
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
setDetailId(a.id);
|
||||
const r = await fetch(
|
||||
`/api/assets/collab?ids=${a.id}&resourceId=${a.id}`
|
||||
);
|
||||
const j = await r.json();
|
||||
if (r.ok) {
|
||||
setComments(j.comments || []);
|
||||
if (j.dual?.[a.id]) {
|
||||
setDualMap((prev) => ({ ...prev, [a.id]: j.dual[a.id] }));
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="hidden sm:inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded border border-gray-700 text-gray-300 hover:text-white"
|
||||
title="Comentar / validar"
|
||||
>
|
||||
{dualMap[a.id]?.both ? (
|
||||
<span className="text-emerald-400 inline-flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> Doble OK
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-amber-300">
|
||||
{dualMap[a.id]?.label || 'En revisión'}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => download(a.id)}
|
||||
@@ -437,6 +513,135 @@ export default function AssetsLibrary({ tenantLabel }: { tenantLabel: string })
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{detailId && (
|
||||
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-lg rounded-2xl border border-gray-800 bg-[#0D121F] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">
|
||||
{assets.find((a) => a.id === detailId)?.file_name || 'Archivo'}
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500">
|
||||
Doble check · {dualMap[detailId]?.label || 'En revisión'} · tú:{' '}
|
||||
{party === 'agency' ? 'agencia' : 'cliente'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDetailId(null)}
|
||||
className="text-xs text-gray-400 hover:text-white"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 space-y-3 max-h-[60vh] overflow-y-auto">
|
||||
{(() => {
|
||||
const a = assets.find((x) => x.id === detailId);
|
||||
const isImg = a?.mime_type?.startsWith('image/');
|
||||
return isImg ? (
|
||||
<AssetImagePreview assetId={detailId} alt={a?.file_name || ''} />
|
||||
) : (
|
||||
<p className="text-xs text-gray-500">
|
||||
Preview disponible para imágenes. Usa descargar para el resto.
|
||||
</p>
|
||||
);
|
||||
})()}
|
||||
<ul className="space-y-2">
|
||||
{comments.length === 0 && (
|
||||
<li className="text-xs text-gray-500">Sin comentarios.</li>
|
||||
)}
|
||||
{comments.map((c) => (
|
||||
<li
|
||||
key={c.id}
|
||||
className="text-xs border border-gray-800 rounded-lg px-2.5 py-2"
|
||||
>
|
||||
<p className="text-[10px] text-gray-500 mb-1">
|
||||
{c.author_party === 'agency' ? 'Agencia' : 'Cliente'}
|
||||
{c.author_email ? ` · ${c.author_email}` : ''}
|
||||
</p>
|
||||
<p className="text-gray-200 whitespace-pre-wrap">{c.body}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={commentText}
|
||||
onChange={(e) => setCommentText(e.target.value)}
|
||||
placeholder="Comentario…"
|
||||
className="flex-1 rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-xs text-white"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={collabBusy || !commentText.trim()}
|
||||
onClick={async () => {
|
||||
setCollabBusy(true);
|
||||
try {
|
||||
const r = await fetch('/api/assets/collab', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: 'comment',
|
||||
assetId: detailId,
|
||||
body: commentText.trim(),
|
||||
}),
|
||||
});
|
||||
const j = await r.json();
|
||||
if (r.ok) {
|
||||
setComments((prev) => [...prev, j.comment]);
|
||||
setCommentText('');
|
||||
}
|
||||
} finally {
|
||||
setCollabBusy(false);
|
||||
}
|
||||
}}
|
||||
className="px-3 py-2 rounded-lg bg-sky-500/20 text-sky-300 border border-sky-500/30 text-xs"
|
||||
>
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-3 border-t border-gray-800 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={collabBusy}
|
||||
onClick={async () => {
|
||||
const mine =
|
||||
party === 'agency'
|
||||
? dualMap[detailId]?.agency
|
||||
: dualMap[detailId]?.client;
|
||||
setCollabBusy(true);
|
||||
try {
|
||||
const r = await fetch('/api/assets/collab', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: mine ? 'revoke' : 'approve',
|
||||
assetId: detailId,
|
||||
}),
|
||||
});
|
||||
const j = await r.json();
|
||||
if (r.ok) {
|
||||
setDualMap((prev) => ({ ...prev, [detailId]: j.dual }));
|
||||
}
|
||||
} finally {
|
||||
setCollabBusy(false);
|
||||
}
|
||||
}}
|
||||
className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40"
|
||||
>
|
||||
{party === 'agency'
|
||||
? dualMap[detailId]?.agency
|
||||
? 'Quitar OK agencia'
|
||||
: 'Aprobar (agencia)'
|
||||
: dualMap[detailId]?.client
|
||||
? 'Quitar OK cliente'
|
||||
: 'Aprobar (cliente)'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user