feat(calendar): add dedicated monthly editorial calendar view for Instagram, Facebook, and LinkedIn
This commit is contained in:
Marcos Fargas
412
src/app/dashboard/calendario/CalendarClient.tsx
Normal file
412
src/app/dashboard/calendario/CalendarClient.tsx
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
CalendarDays,
|
||||||
|
Instagram,
|
||||||
|
Linkedin,
|
||||||
|
Facebook,
|
||||||
|
CheckCircle2,
|
||||||
|
Clock,
|
||||||
|
FileText,
|
||||||
|
Layers,
|
||||||
|
Tag,
|
||||||
|
ExternalLink,
|
||||||
|
X,
|
||||||
|
Copy,
|
||||||
|
Check,
|
||||||
|
Eye,
|
||||||
|
Sparkles
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
interface Post {
|
||||||
|
id: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
platform: 'instagram' | 'linkedin' | 'facebook';
|
||||||
|
format: string;
|
||||||
|
pillar: string;
|
||||||
|
title: string;
|
||||||
|
hook: string;
|
||||||
|
body: string;
|
||||||
|
cta: string;
|
||||||
|
hashtags: string;
|
||||||
|
status: 'approved' | 'scheduled' | 'draft';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarClientProps {
|
||||||
|
initialPosts: Post[];
|
||||||
|
calendarTitle: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
// 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 copyFullCopy = (post: Post) => {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* Status Dropdown Filter */}
|
||||||
|
<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)}
|
||||||
|
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="approved">Aprobados</option>
|
||||||
|
<option value="scheduled">Programados</option>
|
||||||
|
<option value="draft">Borradores 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}
|
||||||
|
</p>
|
||||||
|
</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="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>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedPost(null)}
|
||||||
|
className="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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}
|
||||||
|
</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">
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
64
src/app/dashboard/calendario/page.tsx
Normal file
64
src/app/dashboard/calendario/page.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createClient } from '@/lib/supabase/server';
|
||||||
|
import CalendarClient from './CalendarClient';
|
||||||
|
import { CalendarDays } from 'lucide-react';
|
||||||
|
|
||||||
|
export const revalidate = 0;
|
||||||
|
|
||||||
|
export default async function CalendarioPage() {
|
||||||
|
const supabase = await createClient();
|
||||||
|
const { data: { user } } = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
const tenantId = user?.app_metadata?.tenant_id || user?.user_metadata?.tenant_id || '0b3c5fc0-6901-4caf-b26a-b6a0201d8541';
|
||||||
|
const companyName = user?.user_metadata?.company || '4Ventures';
|
||||||
|
|
||||||
|
let calendarDocs: any[] = [];
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('documents')
|
||||||
|
.select('*')
|
||||||
|
.eq('type', 'calendar')
|
||||||
|
.eq('tenant_id', tenantId)
|
||||||
|
.order('created_at', { ascending: false });
|
||||||
|
|
||||||
|
if (!error && data) {
|
||||||
|
calendarDocs = data;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error fetching calendar documents:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse posts from calendar document
|
||||||
|
let posts: any[] = [];
|
||||||
|
if (calendarDocs.length > 0) {
|
||||||
|
try {
|
||||||
|
const raw = calendarDocs[0].content;
|
||||||
|
if (typeof raw === 'string') {
|
||||||
|
posts = JSON.parse(raw);
|
||||||
|
} else if (Array.isArray(raw)) {
|
||||||
|
posts = raw;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error parsing calendar JSON:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-md bg-brand-950/60 border border-brand-800/40 text-brand-400 text-xs font-semibold uppercase tracking-wider mb-2">
|
||||||
|
<CalendarDays className="w-3.5 h-3.5" /> Planificación de Redes Sociales · Agente #07
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight text-white">
|
||||||
|
Calendario Editorial Mensual — {companyName}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-400 mt-1">
|
||||||
|
Estrategia omnicanal de publicaciones para Instagram, Facebook y LinkedIn producida por los agentes de IA de 4Ventures.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CalendarClient initialPosts={posts} calendarTitle={calendarDocs[0]?.title || 'Calendario Septiembre 2026'} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,7 +8,8 @@ import {
|
|||||||
ShieldCheck,
|
ShieldCheck,
|
||||||
Layers,
|
Layers,
|
||||||
LogOut,
|
LogOut,
|
||||||
UserCheck
|
UserCheck,
|
||||||
|
CalendarDays
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { createClient } from '@/lib/supabase/server';
|
import { createClient } from '@/lib/supabase/server';
|
||||||
import { logoutAction } from '@/app/auth/actions';
|
import { logoutAction } from '@/app/auth/actions';
|
||||||
@@ -56,6 +57,13 @@ export default async function DashboardLayout({
|
|||||||
<Target className="w-4 h-4 text-emerald-400" />
|
<Target className="w-4 h-4 text-emerald-400" />
|
||||||
Objetivos del Mes
|
Objetivos del Mes
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/dashboard/calendario"
|
||||||
|
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
|
||||||
|
>
|
||||||
|
<CalendarDays className="w-4 h-4 text-pink-400" />
|
||||||
|
Calendario Editorial
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/dashboard/activos"
|
href="/dashboard/activos"
|
||||||
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
|
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-800/60 transition-all"
|
||||||
|
|||||||
Reference in New Issue
Block a user