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
@@ -1,29 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
CalendarDays,
|
||||
Instagram,
|
||||
Linkedin,
|
||||
Facebook,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
FileText,
|
||||
Layers,
|
||||
Tag,
|
||||
ExternalLink,
|
||||
X,
|
||||
Copy,
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
CalendarDays,
|
||||
Instagram,
|
||||
Linkedin,
|
||||
Facebook,
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
Check,
|
||||
Eye,
|
||||
Sparkles
|
||||
X,
|
||||
MessageSquare,
|
||||
ShieldCheck,
|
||||
Music2,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface Post {
|
||||
export type CalendarPost = {
|
||||
id: string;
|
||||
date: string;
|
||||
time: string;
|
||||
platform: 'instagram' | 'linkedin' | 'facebook';
|
||||
platform: string;
|
||||
format: string;
|
||||
pillar: string;
|
||||
title: string;
|
||||
@@ -31,378 +28,494 @@ interface Post {
|
||||
body: string;
|
||||
cta: string;
|
||||
hashtags: string;
|
||||
status: 'approved' | 'scheduled' | 'draft';
|
||||
status: 'approved' | 'scheduled' | 'draft' | string;
|
||||
objective_metric?: string;
|
||||
};
|
||||
|
||||
type Dual = {
|
||||
agency: boolean;
|
||||
client: boolean;
|
||||
both: boolean;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type Comment = {
|
||||
id: string;
|
||||
body: string;
|
||||
author_email?: string | null;
|
||||
author_party: 'agency' | 'client';
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
const PLATFORM_META: Record<
|
||||
string,
|
||||
{ label: string; color: string; Icon: React.ComponentType<{ className?: string }> }
|
||||
> = {
|
||||
instagram: {
|
||||
label: 'Instagram',
|
||||
color: 'from-pink-500 to-purple-600',
|
||||
Icon: Instagram,
|
||||
},
|
||||
linkedin: { label: 'LinkedIn', color: 'bg-[#0A66C2]', Icon: Linkedin },
|
||||
facebook: { label: 'Facebook', color: 'bg-[#1877F2]', Icon: Facebook },
|
||||
tiktok: { label: 'TikTok', color: 'bg-gray-100 text-black', Icon: Music2 },
|
||||
};
|
||||
|
||||
function platformMeta(p: string) {
|
||||
return (
|
||||
PLATFORM_META[p] || {
|
||||
label: p.charAt(0).toUpperCase() + p.slice(1),
|
||||
color: 'bg-gray-700',
|
||||
Icon: CalendarDays,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
interface CalendarClientProps {
|
||||
initialPosts: Post[];
|
||||
function DualBadge({ dual }: { dual?: Dual }) {
|
||||
if (!dual) {
|
||||
return (
|
||||
<span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border border-gray-700 text-gray-500">
|
||||
Sin checks
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (dual.both) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border border-emerald-500/40 bg-emerald-500/10 text-emerald-300">
|
||||
<ShieldCheck className="w-3 h-3" /> Doble OK
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border border-amber-500/30 bg-amber-500/10 text-amber-300">
|
||||
{dual.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CalendarClient({
|
||||
initialPosts,
|
||||
calendarTitle,
|
||||
canCollaborate = true,
|
||||
}: {
|
||||
initialPosts: CalendarPost[];
|
||||
calendarTitle: string;
|
||||
}
|
||||
canCollaborate?: boolean;
|
||||
}) {
|
||||
const platforms = useMemo(() => {
|
||||
const set = new Set(initialPosts.map((p) => p.platform).filter(Boolean));
|
||||
return ['all', ...[...set].sort()];
|
||||
}, [initialPosts]);
|
||||
|
||||
export default function CalendarClient({ initialPosts, calendarTitle }: CalendarClientProps) {
|
||||
const [platformFilter, setPlatformFilter] = useState<'all' | 'instagram' | 'linkedin' | 'facebook'>('all');
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'approved' | 'scheduled' | 'draft'>('all');
|
||||
const [selectedPost, setSelectedPost] = useState<Post | null>(null);
|
||||
const [platformFilter, setPlatformFilter] = useState('all');
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | 'approved' | 'scheduled' | 'draft'>(
|
||||
'all'
|
||||
);
|
||||
const [view, setView] = useState<'month' | 'list'>('month');
|
||||
const [selectedPost, setSelectedPost] = useState<CalendarPost | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [dualMap, setDualMap] = useState<Record<string, Dual>>({});
|
||||
const [comments, setComments] = useState<Comment[]>([]);
|
||||
const [commentText, setCommentText] = useState('');
|
||||
const [party, setParty] = useState<'agency' | 'client'>('client');
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [collabErr, setCollabErr] = useState<string | null>(null);
|
||||
|
||||
const ids = useMemo(() => initialPosts.map((p) => p.id).filter(Boolean), [initialPosts]);
|
||||
|
||||
const refreshDual = useCallback(async () => {
|
||||
if (!canCollaborate || !ids.length) return;
|
||||
const r = await fetch(`/api/calendar/collab?ids=${ids.map(encodeURIComponent).join(',')}`);
|
||||
const j = await r.json();
|
||||
if (r.ok) {
|
||||
setDualMap(j.dual || {});
|
||||
if (j.party) setParty(j.party);
|
||||
}
|
||||
}, [canCollaborate, ids]);
|
||||
|
||||
useEffect(() => {
|
||||
refreshDual();
|
||||
}, [refreshDual]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedPost || !canCollaborate) {
|
||||
setComments([]);
|
||||
return;
|
||||
}
|
||||
(async () => {
|
||||
const r = await fetch(
|
||||
`/api/calendar/collab?ids=${encodeURIComponent(selectedPost.id)}&resourceId=${encodeURIComponent(selectedPost.id)}`
|
||||
);
|
||||
const j = await r.json();
|
||||
if (r.ok) {
|
||||
setComments(j.comments || []);
|
||||
if (j.dual?.[selectedPost.id]) {
|
||||
setDualMap((prev) => ({ ...prev, [selectedPost.id]: j.dual[selectedPost.id] }));
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, [selectedPost, canCollaborate]);
|
||||
|
||||
// Filter posts
|
||||
const filteredPosts = initialPosts.filter((p) => {
|
||||
const matchPlatform = platformFilter === 'all' || p.platform === platformFilter;
|
||||
const matchStatus = statusFilter === 'all' || p.status === statusFilter;
|
||||
return matchPlatform && matchStatus;
|
||||
});
|
||||
|
||||
// KPI counters
|
||||
const totalPosts = initialPosts.length;
|
||||
const instagramCount = initialPosts.filter((p) => p.platform === 'instagram').length;
|
||||
const linkedinCount = initialPosts.filter((p) => p.platform === 'linkedin').length;
|
||||
const facebookCount = initialPosts.filter((p) => p.platform === 'facebook').length;
|
||||
const approvedCount = initialPosts.filter((p) => p.status === 'approved').length;
|
||||
const approvedCount = initialPosts.filter(
|
||||
(p) => dualMap[p.id]?.both || p.status === 'approved'
|
||||
).length;
|
||||
|
||||
const copyFullCopy = (post: Post) => {
|
||||
const byDay = useMemo(() => {
|
||||
const map = new Map<string, CalendarPost[]>();
|
||||
for (const p of filteredPosts) {
|
||||
const key = (p.date || '').slice(0, 10);
|
||||
if (!key) continue;
|
||||
const list = map.get(key) || [];
|
||||
list.push(p);
|
||||
map.set(key, list);
|
||||
}
|
||||
return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
||||
}, [filteredPosts]);
|
||||
|
||||
const copyFullCopy = (post: CalendarPost) => {
|
||||
const text = `${post.hook}\n\n${post.body}\n\n${post.cta}\n\n${post.hashtags}`;
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const getPlatformBadge = (platform: string) => {
|
||||
switch (platform) {
|
||||
case 'instagram':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold text-white bg-gradient-to-r from-pink-500 via-purple-500 to-amber-500 shadow-sm shadow-pink-500/20">
|
||||
<Instagram className="w-3.5 h-3.5" /> Instagram
|
||||
</span>
|
||||
);
|
||||
case 'linkedin':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold text-white bg-[#0A66C2] shadow-sm shadow-blue-500/20">
|
||||
<Linkedin className="w-3.5 h-3.5" /> LinkedIn
|
||||
</span>
|
||||
);
|
||||
case 'facebook':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-bold text-white bg-[#1877F2] shadow-sm shadow-blue-600/20">
|
||||
<Facebook className="w-3.5 h-3.5" /> Facebook
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
async function approve(action: 'approve' | 'revoke') {
|
||||
if (!selectedPost) return;
|
||||
setBusy(true);
|
||||
setCollabErr(null);
|
||||
try {
|
||||
const r = await fetch('/api/calendar/collab', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action, postId: selectedPost.id }),
|
||||
});
|
||||
const j = await r.json();
|
||||
if (!r.ok) throw new Error(j.error || 'Error');
|
||||
setDualMap((prev) => ({ ...prev, [selectedPost.id]: j.dual }));
|
||||
} catch (e) {
|
||||
setCollabErr(e instanceof Error ? e.message : 'Error');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'approved':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
|
||||
<CheckCircle2 className="w-3 h-3" /> Aprobado
|
||||
</span>
|
||||
);
|
||||
case 'scheduled':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-blue-500/10 text-blue-400 border border-blue-500/30">
|
||||
<Clock className="w-3 h-3" /> Programado
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-amber-500/10 text-amber-400 border border-amber-500/30">
|
||||
<Sparkles className="w-3 h-3" /> En Revisión
|
||||
</span>
|
||||
);
|
||||
async function sendComment() {
|
||||
if (!selectedPost || !commentText.trim()) return;
|
||||
setBusy(true);
|
||||
setCollabErr(null);
|
||||
try {
|
||||
const r = await fetch('/api/calendar/collab', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: 'comment',
|
||||
postId: selectedPost.id,
|
||||
body: commentText.trim(),
|
||||
}),
|
||||
});
|
||||
const j = await r.json();
|
||||
if (!r.ok) throw new Error(j.error || 'Error');
|
||||
setComments((prev) => [...prev, j.comment]);
|
||||
setCommentText('');
|
||||
} catch (e) {
|
||||
setCollabErr(e instanceof Error ? e.message : 'Error');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const myApproved =
|
||||
selectedPost && dualMap[selectedPost.id]
|
||||
? party === 'agency'
|
||||
? dualMap[selectedPost.id].agency
|
||||
: dualMap[selectedPost.id].client
|
||||
: false;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* KPI Top Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-5 gap-3.5">
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Total Posts</span>
|
||||
<CalendarDays className="w-4 h-4 text-brand-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{totalPosts}</p>
|
||||
<p className="text-[10px] text-gray-500 mt-0.5">Plan del mes</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Instagram</span>
|
||||
<Instagram className="w-4 h-4 text-pink-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{instagramCount}</p>
|
||||
<p className="text-[10px] text-pink-400/80 mt-0.5">Carruseles & Reels</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>LinkedIn</span>
|
||||
<Linkedin className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{linkedinCount}</p>
|
||||
<p className="text-[10px] text-blue-400/80 mt-0.5">Artículos & Casos B2B</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Facebook</span>
|
||||
<Facebook className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{facebookCount}</p>
|
||||
<p className="text-[10px] text-blue-500/80 mt-0.5">Comunidad & Ads</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4 col-span-2 sm:col-span-1">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Listos / Aprobados</span>
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-emerald-400">{approvedCount}</p>
|
||||
<p className="text-[10px] text-emerald-400/80 mt-0.5">{totalPosts > 0 ? Math.round((approvedCount / totalPosts) * 100) : 0}% validado</p>
|
||||
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
{calendarTitle} · privado (sin publicación pública) · doble check
|
||||
agencia/cliente
|
||||
</p>
|
||||
<div className="flex gap-1 rounded-lg border border-gray-800 p-0.5 bg-black/20">
|
||||
{(
|
||||
[
|
||||
['month', 'Mes'],
|
||||
['list', 'Lista'],
|
||||
] as const
|
||||
).map(([k, label]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => setView(k)}
|
||||
className={`px-2.5 py-1 text-xs rounded-md ${
|
||||
view === k ? 'bg-brand-500/20 text-brand-300' : 'text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
{/* Platform Tabs */}
|
||||
<div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
|
||||
<button
|
||||
onClick={() => setPlatformFilter('all')}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
|
||||
platformFilter === 'all'
|
||||
? 'bg-brand-500 text-white shadow-md shadow-brand-500/20'
|
||||
: 'bg-gray-800/60 text-gray-300 hover:text-white hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
Todos ({totalPosts})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPlatformFilter('instagram')}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition-all cursor-pointer ${
|
||||
platformFilter === 'instagram'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md shadow-pink-500/20'
|
||||
: 'bg-gray-800/60 text-gray-300 hover:text-white hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<Instagram className="w-3.5 h-3.5" /> Instagram ({instagramCount})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPlatformFilter('linkedin')}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition-all cursor-pointer ${
|
||||
platformFilter === 'linkedin'
|
||||
? 'bg-[#0A66C2] text-white shadow-md shadow-blue-500/20'
|
||||
: 'bg-gray-800/60 text-gray-300 hover:text-white hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<Linkedin className="w-3.5 h-3.5" /> LinkedIn ({linkedinCount})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPlatformFilter('facebook')}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition-all cursor-pointer ${
|
||||
platformFilter === 'facebook'
|
||||
? 'bg-[#1877F2] text-white shadow-md shadow-blue-600/20'
|
||||
: 'bg-gray-800/60 text-gray-300 hover:text-white hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<Facebook className="w-3.5 h-3.5" /> Facebook ({facebookCount})
|
||||
</button>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5">
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Total piezas</span>
|
||||
<CalendarDays className="w-4 h-4 text-brand-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{totalPosts}</p>
|
||||
</div>
|
||||
{platforms
|
||||
.filter((p) => p !== 'all')
|
||||
.slice(0, 2)
|
||||
.map((p) => {
|
||||
const meta = platformMeta(p);
|
||||
const n = initialPosts.filter((x) => x.platform === p).length;
|
||||
return (
|
||||
<div key={p} className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>{meta.label}</span>
|
||||
<meta.Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-white">{n}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between text-gray-400 text-xs mb-1">
|
||||
<span>Doble OK</span>
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
</div>
|
||||
<p className="text-2xl font-extrabold text-emerald-400">{approvedCount}</p>
|
||||
<p className="text-[10px] text-emerald-400/80 mt-0.5">
|
||||
{totalPosts > 0 ? Math.round((approvedCount / totalPosts) * 100) : 0}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Dropdown Filter */}
|
||||
{/* Unified + per-network tabs */}
|
||||
<div className="bg-[#111827] border border-gray-800 rounded-xl p-4 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
|
||||
{platforms.map((p) => {
|
||||
const count =
|
||||
p === 'all'
|
||||
? totalPosts
|
||||
: initialPosts.filter((x) => x.platform === p).length;
|
||||
const meta = p === 'all' ? null : platformMeta(p);
|
||||
const active = platformFilter === p;
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
type="button"
|
||||
onClick={() => setPlatformFilter(p)}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition-all whitespace-nowrap ${
|
||||
active
|
||||
? p === 'all'
|
||||
? 'bg-brand-500 text-white'
|
||||
: p === 'instagram'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
|
||||
: `${meta?.color || 'bg-gray-700'} text-white`
|
||||
: 'bg-gray-800/60 text-gray-300 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{meta && <meta.Icon className="w-3.5 h-3.5" />}
|
||||
{p === 'all' ? 'Unificado' : meta?.label} ({count})
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-400">Estado:</span>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e: any) => setStatusFilter(e.target.value)}
|
||||
onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
|
||||
className="bg-gray-900 border border-gray-700 text-xs text-white rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-brand-500"
|
||||
>
|
||||
<option value="all">Todos los estados</option>
|
||||
<option value="all">Todos</option>
|
||||
<option value="approved">Aprobados</option>
|
||||
<option value="scheduled">Programados</option>
|
||||
<option value="draft">Borradores en revisión</option>
|
||||
<option value="draft">En revisión</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Posts Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{filteredPosts.length === 0 ? (
|
||||
<div className="col-span-full bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
|
||||
<CalendarDays className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-base font-semibold text-white">No hay publicaciones con este filtro.</p>
|
||||
<p className="text-xs text-gray-400 mt-1">Prueba a seleccionar «Todos los canales» o «Todos los estados».</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredPosts.map((post) => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="bg-[#111827] border border-gray-800 hover:border-gray-700 rounded-xl p-5 flex flex-col justify-between transition-all group hover:shadow-xl hover:shadow-black/40"
|
||||
>
|
||||
<div>
|
||||
{/* Header: Platform & Status */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
{getPlatformBadge(post.platform)}
|
||||
{getStatusBadge(post.status)}
|
||||
</div>
|
||||
|
||||
{/* Date & Time */}
|
||||
<div className="flex items-center gap-2 text-xs text-brand-400 font-mono mb-2">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
<span>{new Date(post.date).toLocaleDateString('es-ES', { weekday: 'short', day: 'numeric', month: 'short' })} · {post.time}h</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h4 className="font-bold text-white text-base mb-1.5 group-hover:text-brand-400 transition-colors">
|
||||
{post.title}
|
||||
</h4>
|
||||
|
||||
{/* Pillars & Format Badges */}
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
<span className="text-[10px] px-2 py-0.5 rounded bg-gray-800 text-gray-300 border border-gray-700/50">
|
||||
{post.format}
|
||||
</span>
|
||||
<span className="text-[10px] px-2 py-0.5 rounded bg-brand-950/60 text-brand-400 border border-brand-800/40">
|
||||
{post.pillar}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Hook preview */}
|
||||
<div className="p-2.5 rounded-lg bg-gray-900/80 border border-gray-800/80 mb-3 text-xs text-gray-300 italic">
|
||||
«{post.hook}»
|
||||
</div>
|
||||
|
||||
{/* Truncated Body */}
|
||||
<p className="text-xs text-gray-400 line-clamp-3 whitespace-pre-wrap">
|
||||
{post.body}
|
||||
{view === 'month' ? (
|
||||
<div className="space-y-3">
|
||||
{byDay.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
byDay.map(([day, posts]) => (
|
||||
<div
|
||||
key={day}
|
||||
className="rounded-xl border border-gray-800 bg-[#111827] p-4"
|
||||
>
|
||||
<p className="text-xs font-semibold text-brand-400 font-mono mb-3">
|
||||
{new Date(day).toLocaleDateString('es-ES', {
|
||||
weekday: 'long',
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
})}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
dual={dualMap[post.id]}
|
||||
onOpen={() => setSelectedPost(post)}
|
||||
onCopy={() => copyFullCopy(post)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{filteredPosts.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
filteredPosts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
dual={dualMap[post.id]}
|
||||
onOpen={() => setSelectedPost(post)}
|
||||
onCopy={() => copyFullCopy(post)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions Footer */}
|
||||
<div className="pt-4 border-t border-gray-800/80 mt-4 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPost(post)}
|
||||
className="text-xs text-brand-400 hover:text-brand-300 font-semibold flex items-center gap-1.5 transition-colors cursor-pointer"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" /> Ver Post Completo
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyFullCopy(post)}
|
||||
className="p-1.5 rounded-md hover:bg-gray-800 text-gray-400 hover:text-gray-200 transition-colors cursor-pointer"
|
||||
title="Copiar copy completo"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Detail Modal */}
|
||||
{selectedPost && (
|
||||
<div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div className="bg-[#0D121F] border border-gray-800 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden shadow-2xl flex flex-col animate-in fade-in zoom-in duration-200">
|
||||
{/* Modal Header */}
|
||||
<div className="bg-[#0D121F] border border-gray-800 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden shadow-2xl flex flex-col">
|
||||
<div className="p-5 border-b border-gray-800 flex items-center justify-between bg-[#111827]">
|
||||
<div className="flex items-center gap-3">
|
||||
{getPlatformBadge(selectedPost.platform)}
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-white">{selectedPost.title}</h3>
|
||||
<p className="text-xs text-gray-400 font-mono">
|
||||
Programado para: {new Date(selectedPost.date).toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' })} a las {selectedPost.time}h
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-white">{selectedPost.title}</h3>
|
||||
<p className="text-xs text-gray-400 font-mono mt-0.5">
|
||||
{selectedPost.platform} · {selectedPost.date} · {selectedPost.time}h
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPost(null)}
|
||||
className="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-800 transition-colors"
|
||||
className="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-800"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 overflow-y-auto space-y-4 text-sm text-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-400 font-medium">Pilar:</span>
|
||||
<span className="text-xs font-semibold text-brand-400 bg-brand-950/60 px-2 py-0.5 rounded border border-brand-800/40">
|
||||
{selectedPost.pillar}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 font-medium ml-2">Formato:</span>
|
||||
<span className="text-xs font-semibold text-gray-300 bg-gray-800 px-2 py-0.5 rounded border border-gray-700/50">
|
||||
{selectedPost.format}
|
||||
</span>
|
||||
</div>
|
||||
{getStatusBadge(selectedPost.status)}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DualBadge dual={dualMap[selectedPost.id]} />
|
||||
<span className="text-[10px] text-gray-500">
|
||||
Tú: {party === 'agency' ? 'Agencia' : 'Cliente'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Hook */}
|
||||
<div>
|
||||
<label className="text-xs uppercase tracking-wider font-bold text-gray-400 block mb-1">
|
||||
Gancho / Hook de Apertura
|
||||
</label>
|
||||
<div className="p-3.5 rounded-xl bg-gray-900 border border-gray-800 font-medium text-amber-300 text-sm">
|
||||
{selectedPost.hook}
|
||||
</div>
|
||||
</div>
|
||||
<Block label="Hook" className="text-amber-300">
|
||||
{selectedPost.hook}
|
||||
</Block>
|
||||
<Block label="Copy">{selectedPost.body}</Block>
|
||||
<Block label="CTA" className="text-brand-300">
|
||||
{selectedPost.cta}
|
||||
</Block>
|
||||
<Block label="Hashtags" className="text-blue-400 font-mono text-xs">
|
||||
{selectedPost.hashtags}
|
||||
</Block>
|
||||
|
||||
{/* Body */}
|
||||
<div>
|
||||
<label className="text-xs uppercase tracking-wider font-bold text-gray-400 block mb-1">
|
||||
Cuerpo Persuasivo
|
||||
</label>
|
||||
<div className="p-4 rounded-xl bg-gray-900/80 border border-gray-800 whitespace-pre-wrap leading-relaxed text-gray-200 font-sans text-sm">
|
||||
{selectedPost.body}
|
||||
{canCollaborate && (
|
||||
<div className="rounded-xl border border-gray-800 bg-black/20 p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-white">
|
||||
<MessageSquare className="w-3.5 h-3.5 text-sky-400" />
|
||||
Comentarios
|
||||
</div>
|
||||
<ul className="space-y-2 max-h-40 overflow-y-auto">
|
||||
{comments.length === 0 && (
|
||||
<li className="text-xs text-gray-500">Sin comentarios aún.</li>
|
||||
)}
|
||||
{comments.map((c) => (
|
||||
<li
|
||||
key={c.id}
|
||||
className="text-xs border border-gray-800 rounded-lg px-2.5 py-2"
|
||||
>
|
||||
<div className="flex justify-between gap-2 text-[10px] text-gray-500 mb-1">
|
||||
<span>
|
||||
{c.author_party === 'agency' ? 'Agencia' : 'Cliente'}
|
||||
{c.author_email ? ` · ${c.author_email}` : ''}
|
||||
</span>
|
||||
<span>
|
||||
{new Date(c.created_at).toLocaleString('es-ES', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<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="Escribe un comentario…"
|
||||
className="flex-1 rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-xs text-white placeholder:text-gray-600 focus:outline-none focus:border-brand-500/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy || !commentText.trim()}
|
||||
onClick={sendComment}
|
||||
className="px-3 py-2 rounded-lg bg-sky-500/20 text-sky-300 border border-sky-500/30 text-xs font-semibold disabled:opacity-40"
|
||||
>
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
{collabErr && (
|
||||
<p className="text-[11px] text-red-400">{collabErr}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div>
|
||||
<label className="text-xs uppercase tracking-wider font-bold text-gray-400 block mb-1">
|
||||
Llamada a la Acción (CTA)
|
||||
</label>
|
||||
<div className="p-3 rounded-xl bg-brand-500/10 border border-brand-500/30 text-brand-300 text-xs font-semibold">
|
||||
👉 {selectedPost.cta}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hashtags */}
|
||||
<div>
|
||||
<label className="text-xs uppercase tracking-wider font-bold text-gray-400 block mb-1">
|
||||
Hashtags Recomendados
|
||||
</label>
|
||||
<div className="p-2.5 rounded-xl bg-gray-900 border border-gray-800 text-xs text-blue-400 font-mono">
|
||||
{selectedPost.hashtags}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="p-4 border-t border-gray-800 bg-[#111827] flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400">Generado por Agente #07 Contenido</span>
|
||||
<div className="flex gap-2">
|
||||
<div className="p-4 border-t border-gray-800 bg-[#111827] flex flex-wrap items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyFullCopy(selectedPost)}
|
||||
className="px-3 py-2 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-200 text-xs font-semibold inline-flex items-center gap-1.5"
|
||||
>
|
||||
{copied ? <Check className="w-3.5 h-3.5 text-emerald-300" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
Copiar copy
|
||||
</button>
|
||||
{canCollaborate && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyFullCopy(selectedPost)}
|
||||
className="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-semibold flex items-center gap-2 transition-all cursor-pointer shadow-lg shadow-brand-500/20"
|
||||
disabled={busy}
|
||||
onClick={() => approve(myApproved ? 'revoke' : 'approve')}
|
||||
className={`px-4 py-2 rounded-xl text-xs font-semibold inline-flex items-center gap-1.5 ${
|
||||
myApproved
|
||||
? 'bg-gray-800 text-gray-300 border border-gray-700'
|
||||
: 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40'
|
||||
}`}
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4 text-emerald-300" /> : <Copy className="w-4 h-4" />}
|
||||
<span>{copied ? '¡Copy Copiado!' : 'Copiar Texto para Publicar'}</span>
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
{myApproved ? 'Quitar mi OK' : `Aprobar (${party === 'agency' ? 'agencia' : 'cliente'})`}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedPost(null)}
|
||||
className="px-4 py-2 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-200 text-xs font-semibold transition-all cursor-pointer"
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -410,3 +523,89 @@ export default function CalendarClient({ initialPosts, calendarTitle }: Calendar
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="col-span-full bg-[#111827] border border-gray-800 rounded-xl p-12 text-center text-gray-400">
|
||||
<CalendarDays className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-base font-semibold text-white">Sin piezas con este filtro.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Block({
|
||||
label,
|
||||
children,
|
||||
className = '',
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<label className="text-xs uppercase tracking-wider font-bold text-gray-400 block mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<div
|
||||
className={`p-3.5 rounded-xl bg-gray-900 border border-gray-800 whitespace-pre-wrap ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PostCard({
|
||||
post,
|
||||
dual,
|
||||
onOpen,
|
||||
onCopy,
|
||||
}: {
|
||||
post: CalendarPost;
|
||||
dual?: Dual;
|
||||
onOpen: () => void;
|
||||
onCopy: () => void;
|
||||
}) {
|
||||
const meta = platformMeta(post.platform);
|
||||
return (
|
||||
<div className="bg-[#0D121F] border border-gray-800 hover:border-gray-700 rounded-xl p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2 gap-2">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[10px] font-bold text-white ${
|
||||
post.platform === 'instagram'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600'
|
||||
: meta.color
|
||||
}`}
|
||||
>
|
||||
<meta.Icon className="w-3 h-3" /> {meta.label}
|
||||
</span>
|
||||
<DualBadge dual={dual} />
|
||||
</div>
|
||||
<p className="text-[11px] text-brand-400 font-mono mb-1">
|
||||
{post.time ? `${post.time}h` : '—'} · {post.format}
|
||||
</p>
|
||||
<h4 className="font-bold text-white text-sm mb-1.5 line-clamp-2">{post.title}</h4>
|
||||
<p className="text-xs text-gray-400 line-clamp-2 italic">«{post.hook}»</p>
|
||||
</div>
|
||||
<div className="pt-3 mt-3 border-t border-gray-800/80 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className="text-xs text-brand-400 hover:text-brand-300 font-semibold inline-flex items-center gap-1"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" /> Ver / comentar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
className="p-1.5 rounded-md hover:bg-gray-800 text-gray-400"
|
||||
title="Copiar"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -59,9 +59,9 @@ export default async function CalendarioPage() {
|
||||
Calendario editorial — {ctx.label}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 mt-1 max-w-2xl">
|
||||
Plan de publicaciones (IG / FB / LinkedIn) guardado en{' '}
|
||||
<code>documents</code> con <code>type=calendar</code>, generado por
|
||||
agentes / ops y ligado al tenant. No es el calendario de Google Ads.
|
||||
Plan RRSS privado por cliente: vista unificada + pestaña por red.
|
||||
Cliente y agencia pueden leer, comentar y dar OK (doble check). Sin
|
||||
publicación pública.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
126
src/app/dashboard/kpis/canal/[channel]/page.tsx
Normal file
126
src/app/dashboard/kpis/canal/[channel]/page.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { createClient } from '@/lib/supabase/server';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { resolveActiveTenant, restGet } from '@/lib/tenant-context';
|
||||
import { isAgencyRole, userRole } from '@/lib/agency';
|
||||
import {
|
||||
KpiWeeklyRow,
|
||||
buildChannelSeries,
|
||||
formatEur,
|
||||
formatNum,
|
||||
} from '@/lib/metrics';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default async function CanalDashPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ channel: string }>;
|
||||
}) {
|
||||
const { channel: raw } = await params;
|
||||
const channel = decodeURIComponent(raw).toLowerCase();
|
||||
|
||||
const supabase = await createClient();
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
if (!user) redirect('/login');
|
||||
|
||||
const ctx = await resolveActiveTenant(user);
|
||||
const agency = isAgencyRole(userRole(user));
|
||||
|
||||
if (ctx.portfolioWide) {
|
||||
return (
|
||||
<p className="text-sm text-gray-400">
|
||||
Selecciona un cliente para ver el dash de canal.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
let weekly: KpiWeeklyRow[] = [];
|
||||
if (agency && ctx.viaView && ctx.tenantId) {
|
||||
const tid = encodeURIComponent(ctx.tenantId);
|
||||
const w = await restGet<KpiWeeklyRow[]>(
|
||||
`/rest/v1/kpi_weekly?tenant_id=eq.${tid}&select=*&order=week.asc`
|
||||
);
|
||||
weekly = w.data || [];
|
||||
} else {
|
||||
const { data } = await supabase
|
||||
.from('kpi_weekly')
|
||||
.select('*')
|
||||
.order('week', { ascending: true });
|
||||
weekly = (data as KpiWeeklyRow[]) || [];
|
||||
}
|
||||
|
||||
const series = buildChannelSeries(weekly);
|
||||
const points = series.points.filter((p) => p.channel === channel);
|
||||
const spend = points.reduce((a, p) => a + p.spend, 0);
|
||||
const leads = points.reduce((a, p) => a + p.leads, 0);
|
||||
const revenue = points.reduce((a, p) => a + p.revenue, 0);
|
||||
const cpl = leads > 0 ? spend / leads : 0;
|
||||
const roas = spend > 0 ? revenue / spend : 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/dashboard/kpis"
|
||||
className="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-white mb-3"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5" /> Volver a métricas
|
||||
</Link>
|
||||
<h2 className="text-2xl font-bold text-white capitalize">
|
||||
Canal · {channel}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
{ctx.label} · dash secundario (paid). CRM/GEO se añadirán aquí en v2.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: 'Inversión', value: formatEur(spend) },
|
||||
{ label: 'Leads', value: formatNum(leads) },
|
||||
{ label: 'CPL', value: cpl ? `${formatNum(cpl)} €` : '—' },
|
||||
{ label: 'ROAS', value: roas ? `${formatNum(roas)}x` : '—' },
|
||||
].map((s) => (
|
||||
<div
|
||||
key={s.label}
|
||||
className="rounded-xl border border-gray-800 bg-[#111827] px-4 py-3"
|
||||
>
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
{s.label}
|
||||
</p>
|
||||
<p className="text-xl font-bold text-white mt-1">{s.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-gray-800 bg-[#111827] p-5">
|
||||
<h3 className="text-sm font-semibold text-white mb-3">
|
||||
Semanas ({points.length})
|
||||
</h3>
|
||||
{points.length === 0 ? (
|
||||
<p className="text-xs text-gray-500">Sin datos para este canal.</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{points.map((p) => (
|
||||
<li
|
||||
key={p.week}
|
||||
className="flex flex-wrap items-center justify-between gap-2 text-xs border border-gray-800 rounded-lg px-3 py-2"
|
||||
>
|
||||
<span className="font-mono text-brand-400">{p.week}</span>
|
||||
<span className="text-gray-300">
|
||||
{formatEur(p.spend)} · {formatNum(p.leads)} leads · CPL{' '}
|
||||
{p.cpl ? `${formatNum(p.cpl)} €` : '—'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { resolveActiveTenant, restGet } from '@/lib/tenant-context';
|
||||
import {
|
||||
AdDailyRow,
|
||||
KpiWeeklyRow,
|
||||
buildChannelSeries,
|
||||
buildComparisons,
|
||||
sumDaily,
|
||||
sumWeekly,
|
||||
@@ -70,6 +71,7 @@ export default async function KpisPage() {
|
||||
: sumWeekly(weekly); // fallback: all available weeks if current month empty
|
||||
const dailyTotals = sumDaily(daily);
|
||||
const sparse = weekly.length < 4;
|
||||
const channelSeries = buildChannelSeries(weekly);
|
||||
|
||||
return (
|
||||
<MetricsDashboard
|
||||
@@ -80,6 +82,8 @@ export default async function KpisPage() {
|
||||
deltas={comparisons.deltas}
|
||||
daily={dailyTotals}
|
||||
sparse={sparse}
|
||||
weeklyRows={weekly}
|
||||
channelPoints={channelSeries.points}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user