@decido/shell 1.0.0 → 4.0.1

package/src/components/playground/demos/KiaOmnichannelNode.tsx

@@ -1,162 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    MessageCircle, Mail, Phone, Bell, Send,
-    Clock, TrendingUp, Eye, CheckCheck, AlertCircle
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA OMNICHANNEL NODE — Communication Hub · Grecco Motors
-   WhatsApp + Email + SMS + Push — Unified inbox, templates, metrics
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Channel {
-    name: string;
-    icon: string;
-    sent: number;
-    opened: number;
-    replied: number;
-    converted: number;
-    avgResponse: string;
-    color: string;
-}
-
-const CHANNELS: Channel[] = [
-    { name: 'WhatsApp', icon: '💬', sent: 1245, opened: 1180, replied: 892, converted: 67, avgResponse: '2.3 min', color: '#22c55e' },
-    { name: 'Email', icon: '📧', sent: 3420, opened: 1368, replied: 342, converted: 28, avgResponse: '4.2 hrs', color: '#3b82f6' },
-    { name: 'SMS', icon: '📱', sent: 890, opened: 712, replied: 178, converted: 15, avgResponse: '18 min', color: '#f59e0b' },
-    { name: 'Push', icon: '🔔', sent: 2100, opened: 840, replied: 0, converted: 42, avgResponse: 'N/A', color: '#a855f7' },
-];
-
-const TEMPLATES = [
-    { name: 'Bienvenida Lead', channels: ['WhatsApp', 'Email'], stage: 'Lead', uses: 234, openRate: 94 },
-    { name: 'Seguimiento 48h', channels: ['WhatsApp', 'SMS'], stage: 'Contacto', uses: 178, openRate: 88 },
-    { name: 'Confirmación Test Drive', channels: ['WhatsApp', 'Email', 'SMS'], stage: 'Test Drive', uses: 89, openRate: 97 },
-    { name: 'Cotización Enviada', channels: ['Email', 'WhatsApp'], stage: 'Cotización', uses: 156, openRate: 91 },
-    { name: 'NPS Post-Servicio', channels: ['WhatsApp', 'SMS'], stage: 'Servicio', uses: 312, openRate: 82 },
-    { name: 'Recall Vehículo', channels: ['Email', 'SMS', 'Push'], stage: 'Urgente', uses: 45, openRate: 96 },
-];
-
-const CONVERSATIONS = [
-    { name: 'María Gómez', channel: 'WhatsApp', time: '17:28', msg: '¿El EV6 tiene carga rápida V2L?', status: 'pending', avatar: '🟢' },
-    { name: 'Carlos Ruiz', channel: 'Email', time: '17:15', msg: 'Re: Cotización Sportage Premium', status: 'replied', avatar: '🔵' },
-    { name: 'Laura Mejía', channel: 'WhatsApp', time: '16:58', msg: '¡Gracias por el servicio! ⭐⭐⭐⭐⭐', status: 'resolved', avatar: '🟢' },
-    { name: 'Diego Arias', channel: 'SMS', time: '16:42', msg: 'OK confirmo test drive sábado 10am', status: 'replied', avatar: '🟡' },
-    { name: 'Pedro Martínez', channel: 'WhatsApp', time: '16:30', msg: '¿Ya resolvieron mi reclamación?', status: 'escalated', avatar: '🔴' },
-];
-
-export const KiaOmnichannelNode = (props: any) => {
-    const [tab, setTab] = useState<'inbox' | 'templates' | 'metrics'>('inbox');
-    const [channels, setChannels] = useState(CHANNELS.map(c => ({ ...c })));
-
-    const totalSent = channels.reduce((s, c) => s + c.sent, 0);
-    const totalConverted = channels.reduce((s, c) => s + c.converted, 0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setChannels(prev => prev.map(c => ({
-                ...c,
-                sent: c.sent + Math.floor(Math.random() * 3),
-                opened: c.opened + Math.floor(Math.random() * 2),
-            })));
-        }, 5000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const statusColor = (s: string) =>
-        s === 'pending' ? 'text-yellow-400' : s === 'replied' ? 'text-blue-400' : s === 'resolved' ? 'text-green-400' : 'text-red-400';
-    const statusLabel = (s: string) =>
-        s === 'pending' ? 'Pendiente' : s === 'replied' ? 'Respondido' : s === 'resolved' ? 'Resuelto' : 'Escalado';
-
-    return (
-        <BaseNode {...props} title="Kia Omnichannel" width={500} height={620}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-green-600/20 flex items-center justify-center border border-green-500/30">
-                        <Send size={16} className="text-green-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            OMNICHANNEL HUB
-                            <span className="text-[8px] px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded">{CHANNELS.length} CANALES</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {totalSent.toLocaleString()} mensajes · {totalConverted} conversiones</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
-                    {([
-                        { key: 'inbox' as const, label: '📥 Inbox' },
-                        { key: 'templates' as const, label: '📋 Templates' },
-                        { key: 'metrics' as const, label: '📊 Métricas' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-green-600/20 text-green-400 border border-green-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'inbox' && CONVERSATIONS.map((c, i) => (
-                        <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800 flex items-start gap-2">
-                            <span className="text-sm">{c.avatar}</span>
-                            <div className="flex-1 min-w-0">
-                                <div className="flex items-center justify-between">
-                                    <span className="text-[10px] font-bold">{c.name}</span>
-                                    <span className="text-[8px] text-slate-500">{c.time}</span>
-                                </div>
-                                <div className="text-[9px] text-slate-400 truncate">{c.msg}</div>
-                                <div className="flex items-center gap-2 mt-0.5">
-                                    <span className="text-[8px] text-slate-600">{c.channel}</span>
-                                    <span className={`text-[8px] font-bold ${statusColor(c.status)}`}>{statusLabel(c.status)}</span>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'templates' && TEMPLATES.map(t => (
-                        <div key={t.name} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[10px] font-bold">{t.name}</span>
-                                <span className="text-[9px] text-green-400 font-bold">{t.openRate}% open</span>
-                            </div>
-                            <div className="flex items-center gap-2 text-[8px]">
-                                <span className="text-slate-500">Stage: {t.stage}</span>
-                                <span className="text-slate-500">Usado: {t.uses}×</span>
-                                <span className="text-slate-600">{t.channels.join(' · ')}</span>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'metrics' && channels.map(c => (
-                        <div key={c.name} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800"
-                            style={{ borderLeftWidth: '2px', borderLeftColor: c.color }}>
-                            <div className="flex items-center justify-between mb-1.5">
-                                <span className="text-[11px] font-bold">{c.icon} {c.name}</span>
-                                <span className="text-[9px] text-slate-500">⏱ {c.avgResponse}</span>
-                            </div>
-                            <div className="grid grid-cols-4 gap-1 text-center text-[8px]">
-                                <div><div className="font-bold text-[10px]" style={{ color: c.color }}>{c.sent}</div>Enviados</div>
-                                <div><div className="font-bold text-[10px] text-blue-400">{c.opened}</div>Abiertos</div>
-                                <div><div className="font-bold text-[10px] text-purple-400">{c.replied}</div>Replies</div>
-                                <div><div className="font-bold text-[10px] text-green-400">{c.converted}</div>Conv</div>
-                            </div>
-                            <div className="flex items-center gap-1 mt-1.5">
-                                <div className="flex-1 h-1 bg-slate-800 rounded-full">
-                                    <div className="h-full rounded-full" style={{ width: `${(c.opened / c.sent) * 100}%`, background: c.color }} />
-                                </div>
-                                <span className="text-[8px] text-slate-500">{((c.opened / c.sent) * 100).toFixed(0)}% open</span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

package/src/components/playground/demos/KiaPBIBudgetNode.tsx

@@ -1,152 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Wallet, TrendingUp, Calendar, BarChart3, Award,
-    CheckCircle, Clock, AlertTriangle
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI BUDGET NODE — Mirror de PowerBI "Budget Comarketing"
-   Datos REALES Grecco Motors · 2026
-   ═══════════════════════════════════════════════════════════════ */
-
-const fmtM = (n: number) => `$${(n / 1000000).toFixed(1)}M`;
-
-const MONTHS = [
-    { month: 'Ene 2026', class: 'S', partner: 99.4, retail: 181, retailTarget: 165, compliance: 109.7, budget: 23100000, booster: 7700000, total: 30951000 },
-    { month: 'Feb 2026', class: '—', partner: 0, retail: 0, retailTarget: 0, compliance: 0, budget: 0, booster: 0, total: 0 },
-];
-
-const BUDGET_STATUS = [
-    { label: 'Solicitado', value: 38006159, color: '#3b82f6' },
-    { label: 'Disponible', value: 38006159, color: '#22c55e' },
-    { label: 'Por Vencer (Sol)', value: 0, color: '#f59e0b' },
-    { label: 'Vencido (Sol)', value: 0, color: '#ef4444' },
-];
-
-const HISTORY = [
-    { month: 'Oct 2025', budget: 22500000, booster: 7500000, runt: 165 },
-    { month: 'Nov 2025', budget: 21800000, booster: 7270000, runt: 158 },
-    { month: 'Dic 2025', budget: 22200000, booster: 7400000, runt: 182 },
-    { month: 'Ene 2026', budget: 23100000, booster: 7700000, runt: 181 },
-];
-
-export const KiaPBIBudgetNode = (props: any) => {
-    const [tab, setTab] = useState<'resumen' | 'matriz' | 'variacion'>('resumen');
-    const acumulado = 38006159;
-
-    return (
-        <BaseNode {...props} title="Budget Comarketing — PBI" width={500} height={620}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-orange-900/40">
-                    <div className="w-9 h-9 rounded bg-orange-600/20 flex items-center justify-center">
-                        <Wallet size={16} className="text-orange-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            BUDGET COMARKETING
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">2026</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-orange-500/20 text-orange-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grupo Grecco · Acumulado: {fmtM(acumulado)}</div>
-                    </div>
-                </div>
-
-                {/* KPIs */}
-                <div className="flex gap-1 px-3 py-2 border-b border-orange-900/20">
-                    {[
-                        { label: 'Acumulado', val: fmtM(acumulado), color: 'text-orange-400' },
-                        { label: 'Class. Ene', val: 'S', color: 'text-yellow-400' },
-                        { label: 'Partner', val: '99.4%', color: 'text-green-400' },
-                        { label: 'Retail', val: '109.7%', color: 'text-blue-400' },
-                    ].map(k => (
-                        <div key={k.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-orange-900/10">
-                            <div className={`text-[10px] font-bold ${k.color}`}>{k.val}</div>
-                            <div className="text-[7px] text-slate-500">{k.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-orange-900/20">
-                    {([
-                        { key: 'resumen' as const, label: '📊 Resumen' },
-                        { key: 'matriz' as const, label: '📋 Matriz' },
-                        { key: 'variacion' as const, label: '📈 Variación' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-orange-600/20 text-orange-300 border border-orange-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {tab === 'resumen' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Estado del Presupuesto</div>
-                            {BUDGET_STATUS.map(b => (
-                                <div key={b.label} className="bg-[#16213e]/40 rounded p-2.5 border border-orange-900/10"
-                                    style={{ borderLeftWidth: '3px', borderLeftColor: b.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-bold">{b.label}</span>
-                                        <span className="text-[10px] font-bold" style={{ color: b.color }}>{fmtM(b.value)}</span>
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="bg-green-500/10 rounded p-2.5 border border-green-500/20 text-[9px] text-green-400 mt-2">
-                                ✅ Enero 2026: Retail 181 uds (meta 165) = 109.7% cumplimiento · Class S · Budget $30.9M
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'matriz' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Matriz 2026</div>
-                            <div className="bg-[#16213e]/40 rounded-lg border border-orange-900/20">
-                                <div className="grid grid-cols-5 gap-0 text-[7px] font-bold text-slate-500 p-2 border-b border-orange-900/10">
-                                    <div>Mes</div><div className="text-center">Class</div><div className="text-right">Budget</div><div className="text-right">Booster</div><div className="text-right">Total</div>
-                                </div>
-                                {MONTHS.map(m => (
-                                    <div key={m.month} className="grid grid-cols-5 gap-0 text-[9px] p-2 border-b border-orange-900/5">
-                                        <div className="font-bold">{m.month}</div>
-                                        <div className="text-center font-bold text-yellow-400">{m.class}</div>
-                                        <div className="text-right text-slate-400">{m.budget ? fmtM(m.budget) : '—'}</div>
-                                        <div className="text-right text-blue-400">{m.booster ? fmtM(m.booster) : '—'}</div>
-                                        <div className="text-right font-bold text-orange-400">{m.total ? fmtM(m.total) : '—'}</div>
-                                    </div>
-                                ))}
-                            </div>
-                            <div className="bg-orange-500/10 rounded p-2 border border-orange-500/20 text-[9px] text-orange-400 mt-1">
-                                📌 Feb 2026: Pendiente consolidación. Acumulado: {fmtM(acumulado)}
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'variacion' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Histórico Budget & RUNT</div>
-                            {HISTORY.map(h => (
-                                <div key={h.month} className="bg-[#16213e]/40 rounded-lg p-2.5 border border-orange-900/10">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[10px] font-bold">{h.month}</span>
-                                        <span className="text-[10px] font-bold text-cyan-400">{h.runt} RUNT</span>
-                                    </div>
-                                    <div className="flex gap-2 text-[9px]">
-                                        <span className="text-slate-400">Budget: <span className="font-bold text-orange-400">{fmtM(h.budget)}</span></span>
-                                        <span className="text-slate-400">Booster: <span className="font-bold text-blue-400">{fmtM(h.booster)}</span></span>
-                                        <span className="text-slate-400">Total: <span className="font-bold text-yellow-400">{fmtM(h.budget + h.booster)}</span></span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

package/src/components/playground/demos/KiaPBIConversionNode.tsx

@@ -1,206 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    TrendingUp, Users, Clock, BarChart3, Target,
-    Globe, MapPin, UserCheck, Megaphone
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI CONVERSION NODE — Mirror de PowerBI "Conversión - CRM"
-   Datos REALES Grecco Motors · Febrero 2026
-   ═══════════════════════════════════════════════════════════════ */
-
-const KPIS = [
-    { label: 'Conversión', value: '10.6%', delta: '+1.2%', positive: true },
-    { label: 'Lead Time', value: '5 días', delta: '-67%', positive: true },
-    { label: 'Opps Totales', value: '908', delta: '-43%', positive: false },
-    { label: 'Opps Únicas', value: '868', delta: '-42%', positive: false },
-    { label: 'Ventas Únicas', value: '92', delta: '-35%', positive: false },
-];
-
-const CHANNELS = [
-    { canal: 'Walk-in', conv: 34.6, color: '#22c55e' },
-    { canal: 'Concesionario', conv: 14.7, color: '#3b82f6' },
-    { canal: 'Marca', conv: 2.0, color: '#f59e0b' },
-    { canal: 'Digital', conv: 1.2, color: '#ef4444' },
-];
-
-const GEO = [
-    { ciudad: 'Bucaramanga', conv: 11.7, color: '#22c55e' },
-    { ciudad: 'Cúcuta', conv: 9.4, color: '#3b82f6' },
-];
-
-const SEGMENTS = [
-    { seg: 'SUV', conv: 12.8, color: '#8b5cf6' },
-    { seg: 'Automóvil', conv: 9.9, color: '#06b6d4' },
-];
-
-const MATRIX = [
-    { fuente: 'Showroom', opsUnicas: 226, ventas: 82, conv: 36.3 },
-    { fuente: 'BTL', opsUnicas: 19, ventas: 2, conv: 10.5 },
-    { fuente: 'Redes Sociales', opsUnicas: 489, ventas: 3, conv: 0.6 },
-];
-
-const CAMPAIGNS = [
-    { campaign: 'Walk-in', conv: 34.6, ventas: 84, platform: '—' },
-    { campaign: 'General', conv: 3.4, ventas: 6, platform: 'META' },
-    { campaign: 'Leads', conv: 0.6, ventas: 2, platform: 'META' },
-];
-
-const SELLERS = [
-    { name: 'Johan S. Blanco', leads: 142, pct: 91 },
-    { name: 'Paola E. Ortega', leads: 5, pct: 3.2 },
-    { name: 'Aura Y. Joya', leads: 2, pct: 1.3 },
-];
-
-export const KiaPBIConversionNode = (props: any) => {
-    const [tab, setTab] = useState<'overview' | 'matrix' | 'campaigns'>('overview');
-
-    return (
-        <BaseNode {...props} title="Conversión CRM — PBI" width={520} height={640}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-indigo-900/40">
-                    <div className="w-9 h-9 rounded bg-indigo-600/20 flex items-center justify-center">
-                        <TrendingUp size={16} className="text-indigo-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            CONVERSIÓN — CRM
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">FEB 2026</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-indigo-500/20 text-indigo-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · 5 hojas · Conversión 10.6%</div>
-                    </div>
-                </div>
-
-                {/* KPI Row */}
-                <div className="flex gap-1 px-2 py-2 border-b border-indigo-900/20">
-                    {KPIS.map(k => (
-                        <div key={k.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1 border border-indigo-900/10">
-                            <div className="text-[10px] font-bold text-white">{k.value}</div>
-                            <div className={`text-[7px] font-bold ${k.positive ? 'text-green-400' : 'text-red-400'}`}>{k.delta}</div>
-                            <div className="text-[7px] text-slate-500">{k.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-indigo-900/20">
-                    {([
-                        { key: 'overview' as const, label: '📊 Overview' },
-                        { key: 'matrix' as const, label: '📋 Matriz' },
-                        { key: 'campaigns' as const, label: '🎯 Campañas' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-indigo-600/30 text-indigo-300 border border-indigo-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {tab === 'overview' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Conversión por Canal</div>
-                            {CHANNELS.map(c => (
-                                <div key={c.canal} className="bg-[#16213e]/40 rounded p-2 border border-indigo-900/10"
-                                    style={{ borderLeftWidth: '3px', borderLeftColor: c.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-bold">{c.canal}</span>
-                                        <span className="text-[11px] font-black" style={{ color: c.color }}>{c.conv}%</span>
-                                    </div>
-                                    <div className="h-1.5 bg-[#0a0f1a] rounded-full mt-1">
-                                        <div className="h-full rounded-full" style={{ width: `${c.conv}%`, background: c.color }} />
-                                    </div>
-                                </div>
-                            ))}
-
-                            <div className="flex gap-2 mt-2">
-                                <div className="flex-1">
-                                    <div className="text-[8px] text-slate-500 font-bold uppercase mb-1">Geografía</div>
-                                    {GEO.map(g => (
-                                        <div key={g.ciudad} className="bg-[#16213e]/40 rounded p-1.5 mb-1 flex items-center justify-between border border-indigo-900/10">
-                                            <span className="text-[9px]">{g.ciudad}</span>
-                                            <span className="text-[10px] font-bold" style={{ color: g.color }}>{g.conv}%</span>
-                                        </div>
-                                    ))}
-                                </div>
-                                <div className="flex-1">
-                                    <div className="text-[8px] text-slate-500 font-bold uppercase mb-1">Segmento</div>
-                                    {SEGMENTS.map(s => (
-                                        <div key={s.seg} className="bg-[#16213e]/40 rounded p-1.5 mb-1 flex items-center justify-between border border-indigo-900/10">
-                                            <span className="text-[9px]">{s.seg}</span>
-                                            <span className="text-[10px] font-bold" style={{ color: s.color }}>{s.conv}%</span>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'matrix' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Matriz Fuente → Conversión</div>
-                            <div className="bg-[#16213e]/40 rounded-lg border border-indigo-900/20">
-                                <div className="grid grid-cols-4 gap-0 text-[8px] font-bold text-slate-500 p-2 border-b border-indigo-900/10">
-                                    <div>Fuente</div><div className="text-right">Únicos</div><div className="text-right">Ventas</div><div className="text-right">Conv %</div>
-                                </div>
-                                {MATRIX.map(m => (
-                                    <div key={m.fuente} className="grid grid-cols-4 gap-0 text-[9px] p-2 border-b border-indigo-900/5 hover:bg-indigo-500/5">
-                                        <div className="font-bold">{m.fuente}</div>
-                                        <div className="text-right text-slate-400">{m.opsUnicas}</div>
-                                        <div className="text-right font-bold text-green-400">{m.ventas}</div>
-                                        <div className={`text-right font-bold ${m.conv > 10 ? 'text-green-400' : m.conv > 3 ? 'text-yellow-400' : 'text-red-400'}`}>{m.conv}%</div>
-                                    </div>
-                                ))}
-                            </div>
-
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mt-2 mb-1">Top Vendedores (Digital)</div>
-                            {SELLERS.map(s => (
-                                <div key={s.name} className="bg-[#16213e]/40 rounded p-2 flex items-center justify-between border border-indigo-900/10">
-                                    <span className="text-[9px] font-bold">{s.name}</span>
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-[9px] text-slate-400">{s.leads} leads</span>
-                                        <span className="text-[9px] font-bold text-indigo-400">{s.pct}%</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {tab === 'campaigns' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Campañas — Conversión</div>
-                            {CAMPAIGNS.map(c => (
-                                <div key={c.campaign} className="bg-[#16213e]/40 rounded-lg p-3 border border-indigo-900/20">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[11px] font-bold">{c.campaign}</span>
-                                        <span className={`text-sm font-black ${c.conv > 10 ? 'text-green-400' : c.conv > 2 ? 'text-yellow-400' : 'text-red-400'}`}>{c.conv}%</span>
-                                    </div>
-                                    <div className="flex gap-3 text-[9px]">
-                                        <span className="text-slate-400">Ventas: <span className="font-bold text-white">{c.ventas}</span></span>
-                                        {c.platform !== '—' && <span className="text-slate-400">Plataforma: <span className="font-bold text-blue-400">{c.platform}</span></span>}
-                                    </div>
-                                    <div className="h-1.5 bg-[#0a0f1a] rounded-full mt-1.5">
-                                        <div className="h-full rounded-full bg-indigo-500" style={{ width: `${c.conv}%` }} />
-                                    </div>
-                                </div>
-                            ))}
-                            {/* Models by campaign */}
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mt-2 mb-1">Modelos en Campaña</div>
-                            <div className="flex flex-wrap gap-1">
-                                {['EV3', 'EV5', 'K3 Cross', 'K4', 'Sonet', 'Stonic', 'Sportage'].map(m => (
-                                    <span key={m} className="text-[8px] px-2 py-1 bg-[#16213e]/50 rounded border border-indigo-900/20 text-slate-400">{m}</span>
-                                ))}
-                            </div>
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};