feat(panel-cliente): soporte de filtrado mensual, histórico instagram ene-sep 2026 y enlaces a publicaciones

scripts/sync_bps_instagram_history.ts

@@ -0,0 +1,292 @@
+/**
+ * Extrae todas las publicaciones de Instagram de Blue Parrot School
+ * (Enero 2026 a Septiembre 2026) vía Meta Graph API:
+ *   1. Descarga portadas y slides de carruseles.
+ *   2. Sube los archivos a Supabase Storage (tenant-assets).
+ *   3. Inserta/actualiza las piezas en public.creative_pipeline (status: 'publicado').
+ *   4. Actualiza/sincroniza en public.documents (type: 'calendar') para reflejarlas en el Calendario.
+ */
+import { config } from 'dotenv';
+import { resolve } from 'path';
+import { createClient } from '@supabase/supabase-js';
+
+config({ path: resolve(process.cwd(), '.env.local') });
+
+const BPS_TENANT_ID = '8bec977a-6032-4759-aa7f-b5042081f450';
+const BPS_IG_ID = '17841431459801731';
+const BUCKET = 'tenant-assets';
+
+const META_TOKEN = process.env.META_ACCESS_TOKEN || '';
+
+type IgMedia = {
+  id: string;
+  caption?: string;
+  media_type: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
+  media_url?: string;
+  thumbnail_url?: string;
+  permalink?: string;
+  timestamp: string;
+  children?: {
+    data: Array<{
+      id: string;
+      media_type: string;
+      media_url: string;
+    }>;
+  };
+};
+
+function cleanTitle(caption?: string, date?: string): string {
+  if (!caption) return `Publicación Instagram ${date || ''}`.trim();
+  const firstLine = caption.split('\n')[0].trim();
+  // Quitar hashtags al inicio si los hay
+  const clean = firstLine.replace(/#\S+/g, '').trim();
+  if (clean.length > 5) {
+    return clean.slice(0, 100);
+  }
+  return caption.slice(0, 100).trim() || `Publicación ${date || ''}`;
+}
+
+async function fetchBuffer(url: string): Promise<Buffer | null> {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    const arrayBuffer = await res.arrayBuffer();
+    return Buffer.from(arrayBuffer);
+  } catch (err) {
+    console.error(`Error descargando ${url}:`, err);
+    return null;
+  }
+}
+
+async function main() {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL?.trim();
+  const key = process.env.SUPABASE_SERVICE_ROLE_KEY?.trim();
+  if (!url || !key) throw new Error('Faltan NEXT_PUBLIC_SUPABASE_URL / SUPABASE_SERVICE_ROLE_KEY');
+
+  const admin = createClient(url, key, { auth: { persistSession: false, autoRefreshToken: false } });
+
+  console.log('1. Consultando Meta Graph API para Blue Parrot School (@blueparrotschool)...');
+  const allMedia: IgMedia[] = [];
+  let nextUrl: string | null =
+    `https://graph.facebook.com/v21.0/${BPS_IG_ID}/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,children{id,media_type,media_url}&limit=50&access_token=${META_TOKEN}`;
+
+  while (nextUrl) {
+    const res = await fetch(nextUrl);
+    if (!res.ok) {
+      const err = await res.text();
+      throw new Error(`Graph API error: ${err}`);
+    }
+    const data = await res.json();
+    const items: IgMedia[] = data.data || [];
+    if (!items.length) break;
+
+    let reachedPast = false;
+    for (const it of items) {
+      const date = it.timestamp.slice(0, 10);
+      if (date >= '2026-01-01' && date <= '2026-09-30') {
+        allMedia.push(it);
+      } else if (date < '2026-01-01') {
+        reachedPast = true;
+        break;
+      }
+    }
+    if (reachedPast) break;
+    nextUrl = data.paging?.next || null;
+  }
+
+  console.log(`Encontradas ${allMedia.length} publicaciones en Instagram entre 2026-01 y 2026-09.`);
+
+  // Ordenar cronológicamente (antiguo a nuevo)
+  allMedia.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+
+  // 2. Subir a Supabase Storage y a public.creative_pipeline
+  console.log('2. Subiendo imágenes a Storage y registrando en public.creative_pipeline...');
+  let successCount = 0;
+
+  for (let i = 0; i < allMedia.length; i++) {
+    const it = allMedia[i];
+    const date = it.timestamp.slice(0, 10);
+    const month = date.slice(0, 7);
+    const isCarousel = it.media_type === 'CAROUSEL_ALBUM';
+    const isReel = it.media_type === 'VIDEO';
+    const format = isCarousel ? 'carrusel' : isReel ? 'reel' : 'post';
+    const title = cleanTitle(it.caption, date);
+
+    // Obtener URL de portada
+    const coverUrl = isReel
+      ? (it.thumbnail_url || it.media_url)
+      : isCarousel
+        ? (it.children?.data?.[0]?.media_url || it.media_url)
+        : it.media_url;
+
+    const extRef = `ig-${it.id}`;
+
+    // 1) Upsert fila base en creative_pipeline
+    const { data: row, error: upErr } = await admin
+      .from('creative_pipeline')
+      .upsert(
+        {
+          tenant_id: BPS_TENANT_ID,
+          external_ref: extRef,
+          title,
+          format,
+          month,
+          status: 'publicado',
+          caption: it.caption || null,
+          notes: it.permalink ? `Instagram: ${it.permalink}` : null,
+          created_at: it.timestamp,
+        },
+        { onConflict: 'tenant_id,external_ref' }
+      )
+      .select('id')
+      .single();
+
+    if (upErr || !row) {
+      console.error(`[ERROR upsert] ${extRef}: ${upErr?.message}`);
+      continue;
+    }
+    const itemId = row.id as string;
+
+    // 2) Descargar y subir portada
+    let coverPath: string | null = null;
+    if (coverUrl) {
+      const coverBuf = await fetchBuffer(coverUrl);
+      if (coverBuf) {
+        coverPath = `${BPS_TENANT_ID}/pipeline/${itemId}/cover.jpg`;
+        const upRes = await admin.storage.from(BUCKET).upload(coverPath, coverBuf, {
+          contentType: 'image/jpeg',
+          upsert: true,
+        });
+        if (upRes.error) {
+          console.error(`[WARN cover upload] ${extRef}: ${upRes.error.message}`);
+          coverPath = null;
+        }
+      }
+    }
+
+    // 3) Si es carrusel, descargar y subir slides
+    const slidePaths: string[] = [];
+    if (isCarousel && it.children?.data) {
+      const slides = it.children.data.slice(1); // slides posteriores a la portada
+      for (let sIdx = 0; sIdx < slides.length; sIdx++) {
+        const slide = slides[sIdx];
+        if (!slide.media_url) continue;
+        const slideBuf = await fetchBuffer(slide.media_url);
+        if (slideBuf) {
+          const sPath = `${BPS_TENANT_ID}/pipeline/${itemId}/slide-${sIdx + 1}.jpg`;
+          const sUp = await admin.storage.from(BUCKET).upload(sPath, slideBuf, {
+            contentType: 'image/jpeg',
+            upsert: true,
+          });
+          if (!sUp.error) {
+            slidePaths.push(sPath);
+          }
+        }
+      }
+    }
+
+    // 4) Actualizar registro con las rutas de storage
+    await admin
+      .from('creative_pipeline')
+      .update({
+        cover_path: coverPath,
+        cover_mime: coverPath ? 'image/jpeg' : null,
+        slide_paths: slidePaths,
+      })
+      .eq('id', itemId);
+
+    successCount++;
+    console.log(`[${i + 1}/${allMedia.length}] ${month} [${format}] ${title} (${slidePaths.length} slides)`);
+  }
+
+  console.log(`\nCreatividades cargadas en creative_pipeline: ${successCount} de ${allMedia.length}.`);
+
+  // 3. Sincronizar en public.documents (type = 'calendar')
+  console.log('\n3. Sincronizando con public.documents para el Calendario...');
+  // Agrupar las publicaciones de Instagram por mes
+  const igByMonth = new Map<string, IgMedia[]>();
+  for (const m of allMedia) {
+    const ym = m.timestamp.slice(0, 7);
+    const list = igByMonth.get(ym) || [];
+    list.push(m);
+    igByMonth.set(ym, list);
+  }
+
+  const { data: allDocs } = await admin
+    .from('documents')
+    .select('id, title, content')
+    .eq('tenant_id', BPS_TENANT_ID)
+    .eq('type', 'calendar');
+
+  const docsList = allDocs || [];
+
+  for (const [ym, igList] of igByMonth.entries()) {
+    // Buscar documento del mes
+    const doc = docsList.find((d) => {
+      try {
+        const c = typeof d.content === 'string' ? JSON.parse(d.content) : d.content;
+        return c?.month === ym;
+      } catch {
+        return false;
+      }
+    });
+
+    if (doc) {
+      let content = typeof doc.content === 'string' ? JSON.parse(doc.content) : doc.content;
+      const pieces: any[] = content?.pieces || [];
+
+      // Mapear posts de IG en piezas de calendario si no están
+      for (const ig of igList) {
+        const date = ig.timestamp.slice(0, 10);
+        const title = cleanTitle(ig.caption, date);
+        const isReel = ig.media_type === 'VIDEO';
+        const isCarousel = ig.media_type === 'CAROUSEL_ALBUM';
+        const format = isCarousel ? 'Carrusel' : isReel ? 'Reel' : 'Post';
+
+        // Buscar si ya existe una pieza en esa fecha
+        const match = pieces.find(
+          (p) => p.date === date && (p.title?.toLowerCase().includes(title.slice(0, 15).toLowerCase()) || p.platform === 'Instagram')
+        );
+
+        if (match) {
+          match.status = 'published';
+          match.meta_line = `Instagram: ${ig.permalink || ''}`;
+          if (!match.body && ig.caption) match.body = ig.caption;
+        } else {
+          // Agregar nueva pieza publicada
+          pieces.push({
+            id: `bps-${date}-ig-${ig.id}`,
+            date,
+            platform: 'Instagram',
+            format,
+            pillar: isReel ? 'reels' : isCarousel ? 'carrusel' : 'feed',
+            title,
+            body: ig.caption || undefined,
+            status: 'published',
+            kind: isReel ? 'reel' : 'post',
+            color: isReel ? '#7C66B8' : isCarousel ? '#2071cf' : '#0F9D8F',
+            meta_line: `Instagram: ${ig.permalink || ''}`,
+          });
+        }
+      }
+
+      // Ordenar piezas por fecha
+      pieces.sort((a, b) => a.date.localeCompare(b.date));
+      content.pieces = pieces;
+
+      await admin
+        .from('documents')
+        .update({ content })
+        .eq('id', doc.id);
+
+      console.log(`Mes ${ym} actualizado en Calendario: ${pieces.length} piezas.`);
+    }
+  }
+
+  console.log('\nSincronización completada con éxito.');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

src/app/api/creative-pipeline/route.ts

@@ -65,7 +65,7 @@ export async function GET(req: NextRequest) {
 
   let q = `${supabaseUrl()}/rest/v1/creative_pipeline?tenant_id=eq.${encodeURIComponent(
     ctx.tenantId
-  )}&select=${SELECT}&order=month.asc,created_at.asc`;
+  )}&select=${SELECT}&order=month.asc,created_at.asc&limit=1000`;
   if (month) q += `&month=eq.${encodeURIComponent(month)}`;
 
   if (ctx.viaView) {
@@ -87,7 +87,8 @@ export async function GET(req: NextRequest) {
     .from('creative_pipeline')
     .select(SELECT)
     .order('month', { ascending: true })
-    .order('created_at', { ascending: true });
+    .order('created_at', { ascending: true })
+    .limit(1000);
   if (month) query = query.eq('month', month);
 
   const { data, error } = await query;

src/components/CreativePipelineBoard.tsx

@@ -1,7 +1,20 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { ImagePlus, Plus, Trash2, Upload } from 'lucide-react';
+import {
+  ImagePlus,
+  Plus,
+  Trash2,
+  Upload,
+  Instagram,
+  ExternalLink,
+  X,
+  Eye,
+  Layers,
+  ChevronLeft,
+  ChevronRight,
+  Filter,
+} from 'lucide-react';
 import { PageHeader, Surface } from '@/components/ui';
 
 type PipelineItem = {
@@ -31,12 +44,19 @@ const STATUS_LABEL: Record<string, string> = {
 };
 
 const STATUS_COLOR: Record<string, string> = {
-  propuesta: 'bg-gray-100 text-gray-700',
+  propuesta: 'bg-gray-100 text-gray-700 border-gray-200',
-  en_diseno: 'bg-blue-100 text-blue-700',
+  en_diseno: 'bg-blue-100 text-blue-700 border-blue-200',
-  revision_interna: 'bg-amber-100 text-amber-800',
+  revision_interna: 'bg-amber-100 text-amber-800 border-amber-200',
-  aprobado: 'bg-emerald-100 text-emerald-700',
+  aprobado: 'bg-emerald-100 text-emerald-700 border-emerald-200',
-  rechazado: 'bg-red-100 text-red-700',
+  rechazado: 'bg-red-100 text-red-700 border-red-200',
-  publicado: 'bg-purple-100 text-purple-700',
+  publicado: 'bg-purple-100 text-purple-700 border-purple-200',
+};
+
+const FORMAT_CONFIG: Record<string, { label: string; badgeCls: string }> = {
+  post: { label: 'Post', badgeCls: 'bg-blue-50 text-blue-700 border-blue-200' },
+  carrusel: { label: 'Carrusel', badgeCls: 'bg-indigo-50 text-indigo-700 border-indigo-200' },
+  reel: { label: 'Reel', badgeCls: 'bg-pink-50 text-pink-700 border-pink-200' },
+  story: { label: 'Story', badgeCls: 'bg-amber-50 text-amber-700 border-amber-200' },
 };
 
 const AGENCY_STATUS_ORDER = [
@@ -60,6 +80,20 @@ function monthLabel(m: string | null) {
   return d.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
 }
 
+function monthShortLabel(m: string | null) {
+  if (!m) return 'Sin mes';
+  const [y, mm] = m.split('-');
+  const d = new Date(Number(y), Number(mm) - 1, 1);
+  const name = d.toLocaleDateString('es-ES', { month: 'short' });
+  return `${name} ${y.slice(2)}`;
+}
+
+function getInstagramUrl(notes: string | null): string | null {
+  if (!notes) return null;
+  const match = notes.match(/https?:\/\/(?:www\.)?instagram\.com\S+/i);
+  return match ? match[0] : null;
+}
+
 export default function CreativePipelineBoard() {
   const [items, setItems] = useState<PipelineItem[]>([]);
   const [isAgency, setIsAgency] = useState(false);
@@ -71,6 +105,9 @@ export default function CreativePipelineBoard() {
   const [newTitle, setNewTitle] = useState('');
   const [newFormat, setNewFormat] = useState<PipelineItem['format']>('post');
   const [newMonth, setNewMonth] = useState('');
+  const [selectedMonth, setSelectedMonth] = useState<string>('all');
+  const [selectedFormat, setSelectedFormat] = useState<string>('all');
+  const [previewItem, setPreviewItem] = useState<PipelineItem | null>(null);
 
   async function load() {
     setLoading(true);
@@ -89,15 +126,40 @@ export default function CreativePipelineBoard() {
     void load();
   }, []);
 
+  const monthCounts = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const it of items) {
+      const key = it.month || 'sin-mes';
+      map.set(key, (map.get(key) || 0) + 1);
+    }
+    return map;
+  }, [items]);
+
+  const months = useMemo(() => {
+    const set = new Set<string>();
+    for (const it of items) {
+      if (it.month) set.add(it.month);
+    }
+    return Array.from(set).sort();
+  }, [items]);
+
+  const filteredItems = useMemo(() => {
+    return items.filter((it) => {
+      if (selectedMonth !== 'all' && (it.month || 'sin-mes') !== selectedMonth) return false;
+      if (selectedFormat !== 'all' && it.format !== selectedFormat) return false;
+      return true;
+    });
+  }, [items, selectedMonth, selectedFormat]);
+
   const grouped = useMemo(() => {
     const map = new Map<string, PipelineItem[]>();
-    for (const it of items) {
+    for (const it of filteredItems) {
       const key = it.month || 'sin-mes';
       if (!map.has(key)) map.set(key, []);
       map.get(key)!.push(it);
     }
     return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
-  }, [items]);
+  }, [filteredItems]);
 
   async function createItem(e: React.FormEvent) {
     e.preventDefault();
@@ -133,6 +195,9 @@ export default function CreativePipelineBoard() {
         setErr(data.error || 'Error al cambiar estado');
         return;
       }
+      if (previewItem && previewItem.id === id) {
+        setPreviewItem({ ...previewItem, status });
+      }
       await load();
     } finally {
       setBusyId(null);
@@ -143,6 +208,7 @@ export default function CreativePipelineBoard() {
     setBusyId(id);
     try {
       await fetch(`/api/creative-pipeline?id=${encodeURIComponent(id)}`, { method: 'DELETE' });
+      if (previewItem?.id === id) setPreviewItem(null);
       await load();
     } finally {
       setBusyId(null);
@@ -180,7 +246,7 @@ export default function CreativePipelineBoard() {
       <PageHeader
         eyebrow="Producción editorial"
         title="Panel de Creatividades"
-        description="Propuesta → Diseño → Revisión interna → Aprobación del cliente."
+        description="Planificación, diseño y archivo histórico sincronizado con Instagram."
         actions={
           isAgency ? (
             <button
@@ -204,6 +270,77 @@ export default function CreativePipelineBoard() {
         </div>
       ) : null}
 
+      {/* Barra de Filtros por Mes y Formato */}
+      <div className="mb-6 space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+              Meses ({items.length} piezas):
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5 text-xs text-gray-500">
+            <Filter className="h-3.5 w-3.5" />
+            Mostrando <strong>{filteredItems.length}</strong> de {items.length}
+          </div>
+        </div>
+
+        {/* Meses pills */}
+        <div className="flex flex-wrap gap-1.5">
+          <button
+            onClick={() => setSelectedMonth('all')}
+            className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+              selectedMonth === 'all'
+                ? 'bg-gray-900 text-white shadow-sm'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Todos ({items.length})
+          </button>
+          {months.map((m) => {
+            const count = monthCounts.get(m) || 0;
+            const active = selectedMonth === m;
+            return (
+              <button
+                key={m}
+                onClick={() => setSelectedMonth(m)}
+                className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
+                  active
+                    ? 'bg-brand-600 text-white shadow-sm'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                {monthShortLabel(m)} ({count})
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Formatos pills */}
+        <div className="flex flex-wrap items-center gap-1.5 pt-1">
+          <span className="text-xs text-gray-400 mr-1">Formato:</span>
+          {['all', 'carrusel', 'reel', 'post', 'story'].map((f) => {
+            const active = selectedFormat === f;
+            const label =
+              f === 'all'
+                ? 'Todos los formatos'
+                : FORMAT_CONFIG[f]?.label || f;
+            return (
+              <button
+                key={f}
+                onClick={() => setSelectedFormat(f)}
+                className={`rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors ${
+                  active
+                    ? 'bg-gray-800 text-white'
+                    : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
+                }`}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {showForm && isAgency ? (
         <Surface className="mb-6">
           <form onSubmit={createItem} className="flex flex-wrap items-end gap-3">
@@ -240,7 +377,7 @@ export default function CreativePipelineBoard() {
             </div>
             <button
               type="submit"
-              className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white"
+              className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800"
             >
               Crear
             </button>
@@ -249,18 +386,29 @@ export default function CreativePipelineBoard() {
       ) : null}
 
       {loading ? (
-        <p className="text-sm text-gray-500">Cargando…</p>
+        <p className="text-sm text-gray-500">Cargando creatividades…</p>
       ) : items.length === 0 ? (
         <Surface>
           <p className="text-sm text-gray-500">Todavía no hay piezas en el pipeline.</p>
         </Surface>
+      ) : filteredItems.length === 0 ? (
+        <Surface>
+          <p className="text-sm text-gray-500">
+            No hay piezas con los filtros seleccionados (Mes: {selectedMonth}, Formato: {selectedFormat}).
+          </p>
+        </Surface>
       ) : (
         <div className="space-y-8">
           {grouped.map(([month, monthItems]) => (
             <div key={month}>
-              <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
+              <div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-2">
+                <h2 className="text-sm font-bold uppercase tracking-wider text-gray-700">
                   {monthLabel(month === 'sin-mes' ? null : month)}
                 </h2>
+                <span className="text-xs text-gray-500 font-medium">
+                  {monthItems.length} {monthItems.length === 1 ? 'pieza' : 'piezas'}
+                </span>
+              </div>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 {monthItems.map((it) => (
                   <PieceCard
@@ -271,6 +419,7 @@ export default function CreativePipelineBoard() {
                     onStatus={(s) => setStatus(it.id, s)}
                     onDelete={() => removeItem(it.id)}
                     onUpload={(file, slot, index) => uploadImage(it.id, file, slot, index)}
+                    onPreview={() => setPreviewItem(it)}
                   />
                 ))}
               </div>
@@ -278,6 +427,17 @@ export default function CreativePipelineBoard() {
           ))}
         </div>
       )}
+
+      {/* Modal de Detalle / Preview */}
+      {previewItem && (
+        <DetailModal
+          item={previewItem}
+          isAgency={isAgency}
+          busy={busyId === previewItem.id}
+          onClose={() => setPreviewItem(null)}
+          onStatus={(s) => setStatus(previewItem.id, s)}
+        />
+      )}
     </div>
   );
 }
@@ -289,6 +449,7 @@ function PieceCard({
   onStatus,
   onDelete,
   onUpload,
+  onPreview,
 }: {
   item: PipelineItem;
   isAgency: boolean;
@@ -296,26 +457,70 @@ function PieceCard({
   onStatus: (status: string) => void;
   onDelete: () => void;
   onUpload: (file: File, slot: 'cover' | 'slide', index: number) => void;
+  onPreview: () => void;
 }) {
   const cover = mediaUrl(item.cover_path);
   const slides = item.slide_paths || [];
   const isCarrusel = item.format === 'carrusel';
+  const formatInfo = FORMAT_CONFIG[item.format] || {
+    label: item.format,
+    badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
+  };
+  const igUrl = getInstagramUrl(item.notes);
 
   const clientCanDecide = !isAgency && item.status === 'revision_interna';
 
   return (
-    <Surface padded={false} className="overflow-hidden flex flex-col">
+    <Surface padded={false} className="overflow-hidden flex flex-col group transition-shadow hover:shadow-md">
-      <div className="relative aspect-[4/5] bg-gray-100">
+      {/* Portada / Imagen */}
+      <div className="relative aspect-[4/5] bg-gray-100 overflow-hidden cursor-pointer" onClick={onPreview}>
         {cover ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={cover} alt={item.title} className="h-full w-full object-cover" />
+          <img
+            src={cover}
+            alt={item.title}
+            className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+          />
         ) : (
           <div className="flex h-full items-center justify-center text-gray-300">
             <ImagePlus className="h-10 w-10" />
           </div>
         )}
+
+        {/* Badges superiores */}
+        <div className="absolute top-2 left-2 flex items-center gap-1.5 pointer-events-none">
+          <span
+            className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider border shadow-sm ${formatInfo.badgeCls}`}
+          >
+            {isCarrusel && <Layers className="h-2.5 w-2.5" />}
+            {formatInfo.label}
+          </span>
+          {isCarrusel && slides.length > 0 && (
+            <span className="rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm">
+              {slides.length} slides
+            </span>
+          )}
+        </div>
+
+        {/* Botón de vista rápida */}
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onPreview();
+          }}
+          className="absolute top-2 right-2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/75 transition-opacity"
+          title="Ver detalle"
+        >
+          <Eye className="h-3.5 w-3.5" />
+        </button>
+
+        {/* Botón subir imagen agencia */}
         {isAgency ? (
-          <label className="absolute bottom-2 right-2 cursor-pointer rounded-full bg-black/60 p-2 text-white hover:bg-black/80">
+          <label
+            onClick={(e) => e.stopPropagation()}
+            className="absolute bottom-2 right-2 cursor-pointer rounded-full bg-black/60 p-2 text-white hover:bg-black/80"
+          >
             <Upload className="h-3.5 w-3.5" />
             <input
               type="file"
@@ -330,21 +535,26 @@ function PieceCard({
         ) : null}
       </div>
 
+      {/* Tira de slides para carruseles */}
       {isCarrusel ? (
-        <div className="flex gap-1 overflow-x-auto p-2 bg-gray-50">
+        <div className="flex gap-1 overflow-x-auto p-2 bg-gray-50 border-t border-gray-100">
-          {Array.from({ length: 4 }).map((_, i) => {
+          {Array.from({ length: Math.min(Math.max(slides.length, 1), 4) }).map((_, i) => {
             const url = mediaUrl(slides[i] || null);
             return (
               <div
                 key={i}
-                className="relative h-14 w-11 shrink-0 overflow-hidden rounded bg-gray-200"
+                onClick={onPreview}
+                className="relative h-14 w-11 shrink-0 overflow-hidden rounded bg-gray-200 cursor-pointer border border-gray-200"
               >
                 {url ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img src={url} alt={`slide ${i + 1}`} className="h-full w-full object-cover" />
                 ) : null}
                 {isAgency ? (
-                  <label className="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/0 hover:bg-black/40 text-transparent hover:text-white text-[10px]">
+                  <label
+                    onClick={(e) => e.stopPropagation()}
+                    className="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/0 hover:bg-black/40 text-transparent hover:text-white text-[10px]"
+                  >
                     +
                     <input
                       type="file"
@@ -363,34 +573,57 @@ function PieceCard({
         </div>
       ) : null}
 
+      {/* Contenido de la tarjeta */}
       <div className="flex flex-1 flex-col gap-2 p-3">
         <div className="flex items-start justify-between gap-2">
-          <p className="text-sm font-medium text-gray-900 line-clamp-2">{item.title}</p>
+          <p
+            onClick={onPreview}
+            className="text-sm font-semibold text-gray-900 line-clamp-2 cursor-pointer hover:text-brand-600"
+          >
+            {item.title}
+          </p>
           {isAgency ? (
             <button
               onClick={onDelete}
               disabled={busy}
               className="shrink-0 text-gray-400 hover:text-red-500"
+              title="Eliminar"
             >
               <Trash2 className="h-4 w-4" />
             </button>
           ) : null}
         </div>
+
+        <div className="flex flex-wrap items-center gap-1.5">
           <span
-          className={`inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-medium ${
+            className={`inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-semibold border ${
-            STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700'
+              STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700 border-gray-200'
             }`}
           >
             {STATUS_LABEL[item.status] || item.status}
           </span>
 
+          {igUrl && (
+            <a
+              href={igUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm hover:opacity-90"
+              title="Abrir publicación original en Instagram"
+            >
+              <Instagram className="h-2.5 w-2.5" /> IG
+              <ExternalLink className="h-2 w-2" />
+            </a>
+          )}
+        </div>
+
         <div className="mt-auto pt-2">
           {isAgency ? (
             <select
               value={item.status}
               disabled={busy}
               onChange={(e) => onStatus(e.target.value)}
-              className="w-full rounded-lg border border-gray-200 px-2 py-1.5 text-xs"
+              className="w-full rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium"
             >
               {AGENCY_STATUS_ORDER.map((s) => (
                 <option key={s} value={s}>
@@ -419,6 +652,8 @@ function PieceCard({
             <p className="text-xs text-gray-400">
               {item.status === 'aprobado'
                 ? 'Aprobada por ti'
+                : item.status === 'publicado'
+                  ? 'Publicado en redes'
                   : 'Pendiente del equipo de 4Ventures'}
             </p>
           )}
@@ -427,3 +662,215 @@ function PieceCard({
     </Surface>
   );
 }
+
+function DetailModal({
+  item,
+  isAgency,
+  busy,
+  onClose,
+  onStatus,
+}: {
+  item: PipelineItem;
+  isAgency: boolean;
+  busy: boolean;
+  onClose: () => void;
+  onStatus: (status: string) => void;
+}) {
+  const slides = item.slide_paths || [];
+  const allImages = [item.cover_path, ...slides].filter(Boolean) as string[];
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  const activePath = allImages[activeIdx] || item.cover_path;
+  const currentUrl = mediaUrl(activePath);
+  const igUrl = getInstagramUrl(item.notes);
+  const formatInfo = FORMAT_CONFIG[item.format] || {
+    label: item.format,
+    badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
+  };
+
+  const clientCanDecide = !isAgency && item.status === 'revision_interna';
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="flex max-h-[92vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl md:flex-row"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Lado izquierdo: visor de imagen / slider */}
+        <div className="flex flex-1 flex-col bg-gray-900 p-4">
+          <div className="relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-black/40 min-h-[300px]">
+            {currentUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={currentUrl}
+                alt={item.title}
+                className="max-h-[60vh] max-w-full object-contain"
+              />
+            ) : (
+              <div className="flex flex-col items-center gap-2 text-gray-500">
+                <ImagePlus className="h-12 w-12" />
+                <span className="text-xs">Sin imagen cargada</span>
+              </div>
+            )}
+
+            {allImages.length > 1 && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => setActiveIdx((prev) => (prev > 0 ? prev - 1 : allImages.length - 1))}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setActiveIdx((prev) => (prev < allImages.length - 1 ? prev + 1 : 0))}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+                <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-2 py-0.5 text-xs text-white">
+                  {activeIdx + 1} / {allImages.length}
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Miniaturas de slides */}
+          {allImages.length > 1 && (
+            <div className="mt-3 flex gap-2 overflow-x-auto py-1">
+              {allImages.map((path, idx) => {
+                const url = mediaUrl(path);
+                const isSelected = idx === activeIdx;
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => setActiveIdx(idx)}
+                    className={`relative h-16 w-12 shrink-0 overflow-hidden rounded border-2 transition-all ${
+                      isSelected ? 'border-brand-500 scale-105' : 'border-transparent opacity-60 hover:opacity-100'
+                    }`}
+                  >
+                    {url && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={url} alt={`Slide ${idx + 1}`} className="h-full w-full object-cover" />
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Lado derecho: información, caption y acciones */}
+        <div className="flex w-full flex-col justify-between p-6 md:w-96 border-t md:border-t-0 md:border-l border-gray-100 overflow-y-auto">
+          <div className="space-y-4">
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <span
+                  className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-bold uppercase tracking-wider border ${formatInfo.badgeCls}`}
+                >
+                  {formatInfo.label}
+                </span>
+                <span
+                  className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold border ${
+                    STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700'
+                  }`}
+                >
+                  {STATUS_LABEL[item.status] || item.status}
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div>
+              <h3 className="text-base font-bold text-gray-900 leading-snug">{item.title}</h3>
+              <p className="mt-1 text-xs text-gray-500">
+                {monthLabel(item.month)} {item.external_ref ? `· Ref: ${item.external_ref}` : ''}
+              </p>
+            </div>
+
+            {igUrl && (
+              <a
+                href={igUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 px-3 py-2 text-xs font-bold text-white shadow-sm hover:opacity-95"
+              >
+                <Instagram className="h-4 w-4" />
+                <span>Ver publicación original en Instagram</span>
+                <ExternalLink className="h-3 w-3 ml-auto" />
+              </a>
+            )}
+
+            {item.caption && (
+              <div className="space-y-1">
+                <p className="text-xs font-semibold text-gray-700 uppercase tracking-wider">Texto / Copy</p>
+                <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-xs text-gray-800 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto">
+                  {item.caption}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="mt-6 border-t border-gray-100 pt-4">
+            {isAgency ? (
+              <div className="space-y-2">
+                <label className="block text-xs font-semibold text-gray-600">Cambiar estado (Agencia):</label>
+                <select
+                  value={item.status}
+                  disabled={busy}
+                  onChange={(e) => onStatus(e.target.value)}
+                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium"
+                >
+                  {AGENCY_STATUS_ORDER.map((s) => (
+                    <option key={s} value={s}>
+                      {STATUS_LABEL[s]}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            ) : clientCanDecide ? (
+              <div className="space-y-2">
+                <p className="text-xs font-semibold text-gray-600">Tu decisión como cliente:</p>
+                <div className="flex gap-2">
+                  <button
+                    disabled={busy}
+                    onClick={() => onStatus('aprobado')}
+                    className="flex-1 rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white hover:bg-emerald-700"
+                  >
+                    Aprobar pieza
+                  </button>
+                  <button
+                    disabled={busy}
+                    onClick={() => onStatus('rechazado')}
+                    className="flex-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-bold text-white hover:bg-red-700"
+                  >
+                    Solicitar cambios
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <p className="text-center text-xs text-gray-500">
+                {item.status === 'aprobado'
+                  ? '✓ Esta pieza fue aprobada por el cliente.'
+                  : item.status === 'publicado'
+                    ? '✓ Esta pieza está publicada y archivada.'
+                    : 'En proceso con el equipo de 4Ventures.'}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/RrssMonthView.tsx

@@ -10,6 +10,7 @@ import {
   MessageSquare,
   ShieldCheck,
   X,
+  ExternalLink,
 } from 'lucide-react';
 
 export type RrssPiece = {
@@ -544,6 +545,17 @@ export default function RrssMonthView({
                   <span className="text-[11px] text-gray-500 font-mono">
                     {p.date} · {p.format}
                   </span>
+                  {p.meta_line?.includes('http') && (
+                    <a
+                      href={p.meta_line.replace(/^Instagram:\s*/i, '').trim()}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                      className="inline-flex items-center gap-1 rounded bg-pink-50 border border-pink-200 px-1.5 py-0.5 text-[10px] font-semibold text-pink-700 hover:bg-pink-100"
+                    >
+                      <Instagram className="w-2.5 h-2.5" /> Ver en IG
+                    </a>
+                  )}
                   <DualBadge dual={dualMap[p.id]} />
                 </div>
                 <p className="text-sm font-bold text-gray-900">{p.title}</p>
@@ -578,7 +590,18 @@ export default function RrssMonthView({
             <div className="p-5 overflow-y-auto space-y-3 text-sm">
               <DualBadge dual={dualMap[selected.id]} />
               {selected.meta_line && (
+                selected.meta_line.includes('http') ? (
+                  <a
+                    href={selected.meta_line.replace(/^Instagram:\s*/i, '').trim()}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 px-3 py-1.5 text-xs font-bold text-white shadow-sm hover:opacity-95"
+                  >
+                    <Instagram className="w-3.5 h-3.5" /> Abrir en Instagram <ExternalLink className="w-3 h-3 ml-auto" />
+                  </a>
+                ) : (
                   <p className="text-xs text-gray-400">{selected.meta_line}</p>
+                )
               )}
               <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-amber-200 text-sm">
                 {selected.hook}