@decido/shell 1.0.0 → 4.0.2

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

@@ -1,203 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Shield, AlertTriangle, Lock, Wifi, Activity, Eye, Globe,
-    Terminal, ShieldCheck, ShieldOff, Server, Radio, Cpu,
-    FileWarning, Scan, KeyRound
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA CYBER OPS NODE — CyberSecurity Operations · Grecco Motors
-   SOC Level 3 con threat intel, lockdown, y modules
-   ═══════════════════════════════════════════════════════════════ */
-
-const THREAT_SOURCES = [
-    { country: 'CN', label: 'China', attempts: 342, color: '#ef4444' },
-    { country: 'RU', label: 'Rusia', attempts: 198, color: '#f59e0b' },
-    { country: 'KP', label: 'Corea Norte', attempts: 87, color: '#a855f7' },
-    { country: 'US', label: 'USA', attempts: 67, color: '#3b82f6' },
-    { country: 'BR', label: 'Brasil', attempts: 45, color: '#22c55e' },
-    { country: 'IR', label: 'Irán', attempts: 31, color: '#06b6d4' },
-];
-
-const LOG_TEMPLATES = [
-    { level: 'info', msg: 'OTA Update Signature verified — EV6 Fleet Batch #42' },
-    { level: 'warning', msg: 'Anomalous CAN bus activity — Sportage KIA-5502' },
-    { level: 'critical', msg: 'Brute force on Kia Connect API — IP 45.33.X.X blocked' },
-    { level: 'info', msg: 'TLS 1.3 handshake OK — Kia Charge Station CS-02' },
-    { level: 'warning', msg: 'UDS diagnostic from unauthorized tool — EV9-002' },
-    { level: 'critical', msg: 'Firmware tampering signature mismatch — ECU #7' },
-    { level: 'info', msg: 'V2X integrity check passed — Intersection #14' },
-    { level: 'warning', msg: 'GPS spoofing mitigated — Fleet zone NE' },
-    { level: 'info', msg: 'Key fob relay attack prevention active — 847 vehicles' },
-    { level: 'critical', msg: 'SQL injection attempt on CRM endpoint — WAF blocked' },
-    { level: 'info', msg: 'Certificate rotation complete — Grecco Connect cluster' },
-    { level: 'warning', msg: 'Unusual data exfiltration pattern — DLP alert L2' },
-];
-
-const SECURITY_MODULES = [
-    { icon: ShieldCheck, label: 'Firewall NGF', status: 'active', threats: 1247 },
-    { icon: Eye, label: 'IDS/IPS', status: 'active', threats: 342 },
-    { icon: Lock, label: 'E2E Encryption', status: 'active', threats: 0 },
-    { icon: Wifi, label: 'V2X Guard', status: 'active', threats: 12 },
-    { icon: Scan, label: 'DLP Scanner', status: 'active', threats: 8 },
-    { icon: KeyRound, label: 'Zero Trust', status: 'active', threats: 156 },
-    { icon: FileWarning, label: 'WAF', status: 'active', threats: 89 },
-    { icon: Cpu, label: 'SIEM/SOAR', status: 'active', threats: 0 },
-];
-
-export const KiaCyberNode = (props: any) => {
-    const [logs, setLogs] = useState<{ id: number; time: string; level: string; msg: string }[]>([]);
-    const [threats, setThreats] = useState(THREAT_SOURCES);
-    const [lockdown, setLockdown] = useState(false);
-    const [stats, setStats] = useState({ blocked: 1247, scanned: 98420, uptime: 99.97, incidents: 3 });
-    const [view, setView] = useState<'overview' | 'modules'>('overview');
-    const logRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const template = LOG_TEMPLATES[Math.floor(Math.random() * LOG_TEMPLATES.length)];
-            setLogs(prev => [...prev, {
-                id: Date.now(), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
-                ...template,
-            }].slice(-40));
-        }, 2000);
-        return () => clearInterval(interval);
-    }, []);
-
-    useEffect(() => { if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight; }, [logs]);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setThreats(prev => prev.map(t => ({ ...t, attempts: t.attempts + Math.floor(Math.random() * 5) })));
-            setStats(prev => ({
-                ...prev,
-                blocked: prev.blocked + Math.floor(Math.random() * 3),
-                scanned: prev.scanned + Math.floor(Math.random() * 50),
-            }));
-        }, 4000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const triggerLockdown = () => {
-        setLockdown(true);
-        setLogs(prev => [...prev, {
-            id: Date.now(), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
-            level: 'critical', msg: '🔒 LOCKDOWN ACTIVATED — All external connections severed. OTA paused. Fleet isolated.',
-        }]);
-        setTimeout(() => setLockdown(false), 5000);
-    };
-
-    const totalThreats = threats.reduce((a, t) => a + t.attempts, 0);
-    const maxAttempts = Math.max(...threats.map(t => t.attempts));
-
-    return (
-        <BaseNode {...props} title="Kia CyberSecurity Operations" width={580} height={600}>
-            <div className={`flex flex-col h-full bg-[#060a12] text-white overflow-hidden transition-all duration-500 ${lockdown ? 'ring-2 ring-red-500 ring-inset' : ''}`}>
-
-                {/* Header */}
-                <div className={`flex items-center gap-3 p-3 border-b transition-all ${lockdown ? 'bg-red-900/30 border-red-500/30' : 'bg-[#0c1222] border-slate-800'}`}>
-                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                        <span className="text-red-500 font-bold text-[7px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            CYBER OPS CENTER
-                            {lockdown && <span className="text-[9px] bg-red-500 text-white px-1.5 py-0.5 rounded animate-pulse">LOCKDOWN</span>}
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors SOC · Level 3 · 24/7</div>
-                    </div>
-                    <div className="flex gap-1">
-                        {(['overview', 'modules'] as const).map(v => (
-                            <button key={v} onClick={() => setView(v)}
-                                className={`px-2 py-1 text-[9px] rounded font-semibold ${view === v ? 'bg-white text-black' : 'bg-slate-800 text-slate-300'}`}>
-                                {v === 'overview' ? '🌐' : '🛡️'} {v.charAt(0).toUpperCase() + v.slice(1)}
-                            </button>
-                        ))}
-                    </div>
-                    <button onClick={triggerLockdown} disabled={lockdown}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-bold transition-all ${lockdown
-                            ? 'bg-red-500/20 text-red-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-500 text-white'}`}>
-                        <Lock size={12} /> {lockdown ? 'ACTIVO' : 'LOCKDOWN'}
-                    </button>
-                </div>
-
-                {/* Stats Bar */}
-                <div className="flex gap-1.5 p-2 bg-[#0a0f1a] border-b border-slate-800">
-                    {[
-                        { val: stats.blocked.toLocaleString(), label: 'Bloqueados', color: 'red' },
-                        { val: stats.scanned.toLocaleString(), label: 'Escaneados', color: 'green' },
-                        { val: `${stats.uptime}%`, label: 'Uptime', color: 'blue' },
-                        { val: totalThreats.toString(), label: 'Amenazas', color: 'violet' },
-                        { val: stats.incidents.toString(), label: 'Incidentes', color: 'yellow' },
-                    ].map(s => (
-                        <div key={s.label} className={`flex-1 bg-${s.color}-500/5 border border-${s.color}-500/10 rounded p-1.5 text-center`}>
-                            <div className={`text-xs font-bold text-${s.color}-400`}>{s.val}</div>
-                            <div className="text-[8px] text-slate-500">{s.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                <div className="flex flex-1 overflow-hidden">
-                    {/* Left Panel */}
-                    <div className="w-[42%] border-r border-slate-800 p-2 flex flex-col">
-                        {view === 'overview' ? (
-                            <>
-                                <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><Globe size={10} /> Origen de Amenazas</div>
-                                <div className="space-y-1.5 flex-1">
-                                    {threats.map(t => (
-                                        <div key={t.country}>
-                                            <div className="flex items-center justify-between text-[10px] mb-0.5">
-                                                <div className="flex items-center gap-1.5">
-                                                    <div className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: t.color, boxShadow: `0 0 6px ${t.color}` }} />
-                                                    <span className="font-semibold">{t.label}</span>
-                                                </div>
-                                                <span className="font-mono text-slate-400">{t.attempts}</span>
-                                            </div>
-                                            <div className="w-full bg-slate-800 rounded-full h-1">
-                                                <div className="h-full rounded-full transition-all duration-500" style={{ width: `${(t.attempts / maxAttempts) * 100}%`, background: t.color }} />
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
-                        ) : (
-                            <>
-                                <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><Shield size={10} /> Módulos de Seguridad ({SECURITY_MODULES.length})</div>
-                                <div className="space-y-1 flex-1 overflow-y-auto">
-                                    {SECURITY_MODULES.map(m => (
-                                        <div key={m.label} className="flex items-center gap-2 text-[10px] bg-slate-900/50 rounded p-1.5 border border-slate-800">
-                                            <m.icon size={11} className={lockdown && m.label === 'V2X Guard' ? 'text-red-400' : 'text-green-400'} />
-                                            <span className="flex-1 text-slate-300">{m.label}</span>
-                                            <span className="text-[9px] text-slate-500 font-mono">{m.threats > 0 ? m.threats : '—'}</span>
-                                            <span className={`w-1.5 h-1.5 rounded-full ${lockdown && m.label === 'V2X Guard' ? 'bg-red-400' : 'bg-green-400'} animate-pulse`} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
-                        )}
-                    </div>
-
-                    {/* Log Stream */}
-                    <div className="flex-1 flex flex-col overflow-hidden">
-                        <div className="p-2 border-b border-slate-800 flex items-center justify-between">
-                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1"><Terminal size={10} /> Log Stream</div>
-                            <div className="flex items-center gap-1 text-[9px] text-green-400"><Activity size={9} className="animate-pulse" /> LIVE</div>
-                        </div>
-                        <div ref={logRef} className="flex-1 overflow-y-auto p-1.5 space-y-0.5 font-mono text-[9px]">
-                            {logs.map(log => (
-                                <div key={log.id}
-                                    className={`px-1.5 py-1 rounded border-l-2 ${log.level === 'critical' ? 'bg-red-500/5 border-red-500 text-red-200' :
-                                        log.level === 'warning' ? 'bg-yellow-500/5 border-yellow-500 text-yellow-200' :
-                                            'bg-slate-900/50 border-slate-700 text-slate-400'}`}>
-                                    <span className="text-slate-600">{log.time}</span> {log.msg}
-                                </div>
-                            ))}
-                            {logs.length === 0 && <div className="text-slate-600 text-center py-8">Esperando eventos...</div>}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,399 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    BarChart3,
-    Users,
-    Car,
-    AlertTriangle,
-    TrendingUp,
-    MessageSquare,
-    FileSpreadsheet,
-    RefreshCw,
-    Target,
-    Star,
-    Award,
-    Zap,
-    Activity,
-    Timer,
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA DASHBOARD NODE — Grecco Motors Executive Dashboard
-   Real KPIs from Partner Program & Business Data
-   ═══════════════════════════════════════════════════════════════ */
-
-/** Simulated live jitter for KPI values */
-const jitter = (base: number, range: number) =>
-    base + Math.round((Math.random() - 0.5) * range);
-
-export const KiaDashboardNode = (props: any) => {
-    /* ─── State ──────────────────────────────────────────── */
-    const [tick, setTick] = useState(0);
-    const [loading, setLoading] = useState(false);
-    const [activeTab, setActiveTab] = useState('vision360');
-
-    /* ─── Simulated Live KPIs ───────────────────────────── */
-    const kpis = {
-        ventasMes: jitter(132, 6),
-        meta: 150,
-        oportunidades: jitter(437, 12),
-        pedidos: jitter(15, 3),
-        entregas: jitter(30, 4),
-        tallerEntradas: jitter(49, 5),
-        recallsPendientes: jitter(12, 2),
-        leadsNuevos: jitter(87, 8),
-        nps: jitter(953, 8) / 10,
-        npsMeta: 91,
-        marketShareNacional: 13.3,
-        marketShareRegional: jitter(106, 4) / 10,
-        ticketPromedio: jitter(712, 20) / 10, // $71.2M
-        citasCumpl: jitter(65, 3),
-        showUpCumpl: jitter(93, 2),
-        testDriveCumpl: jitter(129, 5),
-        calificacion: 'S',
-    };
-
-    /* ─── Leads ─────────────────────────────────────────── */
-    const leads = [
-        { id: 1, name: 'Juan Pérez', source: 'Facebook', vehicle: 'Sportage', score: 95, status: 'Alta Prioridad' },
-        { id: 2, name: 'María Mendez', source: 'Instagram', vehicle: 'Picanto', score: 30, status: 'Baja' },
-        { id: 3, name: 'Carlos Ruiz', source: 'Web', vehicle: 'K3', score: 88, status: 'Alta Prioridad' },
-        { id: 4, name: 'Pedro Gómez', source: 'Walk-in', vehicle: 'Seltos', score: 45, status: 'Media' },
-        { id: 5, name: 'Andrea López', source: 'Google Ads', vehicle: 'EV6', score: 92, status: 'Alta Prioridad' },
-    ];
-
-    const vendedores = [
-        { name: 'Johan S. Blanco', pct: 66.8, color: '#22c55e' },
-        { name: 'Camila Torres', pct: 18.5, color: '#3b82f6' },
-        { name: 'Andrés Parra', pct: 14.7, color: '#a855f7' },
-    ];
-
-    const canales = [
-        { name: 'Redes Sociales', pct: 54.7, color: '#6366f1' },
-        { name: 'Walk-in', pct: 26.3, color: '#22c55e' },
-        { name: 'Google Ads', pct: 12.0, color: '#f59e0b' },
-        { name: 'Otros', pct: 7.0, color: '#64748b' },
-    ];
-
-    /* ─── Auto-refresh ──────────────────────────────────── */
-    useEffect(() => {
-        const iv = setInterval(() => setTick(t => t + 1), 8000);
-        return () => clearInterval(iv);
-    }, []);
-
-    const refreshData = useCallback(() => {
-        setLoading(true);
-        setTimeout(() => { setTick(t => t + 1); setLoading(false); }, 1200);
-    }, []);
-
-    /* ─── Render ────────────────────────────────────────── */
-    return (
-        <BaseNode {...props} title="Kia Ownership Management" width={900} height={700}>
-            <div className="flex flex-col h-full bg-slate-900 text-white p-4 gap-3 overflow-hidden">
-
-                {/* ── Header ──────────────────────────── */}
-                <div className="flex justify-between items-center bg-slate-800 p-3 rounded-lg border border-slate-700">
-                    <div className="flex items-center gap-3">
-                        <div className="w-12 h-12 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                            <span className="text-red-500 font-bold text-xs tracking-widest">KIA</span>
-                        </div>
-                        <div className="flex flex-col">
-                            <span className="text-sm font-bold tracking-wide text-white">GRECCO MOTORS — OWNERSHIP MANAGEMENT</span>
-                            <div className="flex items-center gap-2 mt-0.5">
-                                <span className="text-[10px] text-slate-400">Visión 360° · Metrokia</span>
-                                <span className="flex items-center gap-1 text-[10px] text-green-400 bg-green-500/10 px-1.5 rounded">
-                                    <Activity size={8} className="animate-pulse" /> LIVE
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex gap-1.5">
-                        {['vision360', 'financiero', 'operativo', 'equipo'].map(tab => (
-                            <button
-                                key={tab}
-                                onClick={() => setActiveTab(tab)}
-                                className={`px-3 py-1.5 text-[11px] font-semibold rounded capitalize transition-all ${activeTab === tab
-                                    ? 'bg-white text-black shadow-lg'
-                                    : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
-                                    }`}
-                            >
-                                {tab === 'vision360' ? '360°' : tab}
-                            </button>
-                        ))}
-                        <button
-                            onClick={refreshData}
-                            className={`flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 rounded text-xs font-semibold transition-all ${loading ? 'opacity-50' : ''}`}
-                        >
-                            <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
-                        </button>
-                    </div>
-                </div>
-
-                {/* ── Content ─────────────────────────── */}
-                <div className="flex-1 overflow-y-auto pr-1" key={tick}>
-
-                    {/* ─── Tab: Visión 360 ─────────────── */}
-                    {activeTab === 'vision360' && (
-                        <div className="grid grid-cols-4 gap-3">
-                            <KPICard label="Ventas Mes" value={kpis.ventasMes} target={kpis.meta} icon={BarChart3} color="text-green-400" />
-                            <KPICard label="Oportunidades" value={kpis.oportunidades} target={500} icon={Users} color="text-purple-400" />
-                            <KPICard label="Pedidos" value={kpis.pedidos} target={25} icon={Target} color="text-blue-400" />
-                            <KPICard label="Entregas" value={kpis.entregas} target={40} icon={Car} color="text-cyan-400" />
-
-                            {/* Cumplimiento Row */}
-                            <div className="col-span-4 grid grid-cols-3 gap-3">
-                                <ProgressCard label="Citas" value={kpis.citasCumpl} unit="%" target={80} color="#22c55e" />
-                                <ProgressCard label="Show Up" value={kpis.showUpCumpl} unit="%" target={85} color="#3b82f6" />
-                                <ProgressCard label="Test Drive" value={kpis.testDriveCumpl} unit="%" target={100} color="#f59e0b" />
-                            </div>
-
-                            {/* NPS + Market Share */}
-                            <div className="col-span-2 bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3 flex items-center gap-2">
-                                    <Star size={12} /> NPS & Market Share
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <div className="text-2xl font-bold text-green-400">{kpis.nps}%</div>
-                                        <div className="text-[10px] text-slate-500">NPS Comercial <span className="text-slate-600">(meta: {kpis.npsMeta}%)</span></div>
-                                    </div>
-                                    <div>
-                                        <div className="text-2xl font-bold text-blue-400">{kpis.marketShareNacional}%</div>
-                                        <div className="text-[10px] text-slate-500">MS Nacional <span className="text-green-500">#1</span></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* AI Insights */}
-                            <div className="col-span-2 bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3 flex items-center gap-2">
-                                    <MessageSquare size={12} /> AI Detección Oportunidades
-                                </h3>
-                                <div className="space-y-1.5">
-                                    {leads.slice(0, 3).map(lead => (
-                                        <div key={lead.id} className="flex justify-between items-center bg-slate-900/50 p-2 rounded hover:bg-slate-700/50 transition-colors cursor-pointer border-l-2 border-transparent hover:border-blue-500">
-                                            <div className="flex items-center gap-2">
-                                                <div className={`w-7 h-7 rounded-full flex items-center justify-center font-bold text-[10px] ${lead.score > 80 ? 'bg-green-500/20 text-green-400' : lead.score > 50 ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400'}`}>
-                                                    {lead.score}
-                                                </div>
-                                                <div>
-                                                    <div className="text-xs font-medium">{lead.name}</div>
-                                                    <div className="text-[9px] text-slate-500">{lead.vehicle} · {lead.source}</div>
-                                                </div>
-                                            </div>
-                                            <div className="text-[9px] font-mono text-slate-500">{lead.status}</div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Reportes Rápidos */}
-                            <div className="col-span-4 bg-slate-800 p-3 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-2 flex items-center gap-2">
-                                    <FileSpreadsheet size={12} /> Reportes Rápidos
-                                </h3>
-                                <div className="grid grid-cols-5 gap-2">
-                                    {['One Page Report', 'Resumen Indicadores', 'Partner Program', 'Budget Comarketing', 'RUNT Cruce'].map(r => (
-                                        <button key={r} className="bg-slate-900 hover:bg-slate-700 text-slate-300 hover:text-white px-2 py-1.5 rounded text-[10px] border border-slate-700 transition-all text-left truncate">{r}</button>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {/* ─── Tab: Financiero ──────────────── */}
-                    {activeTab === 'financiero' && (
-                        <div className="grid grid-cols-3 gap-3">
-                            <KPICard label="Ticket Promedio" value={`$${kpis.ticketPromedio}M`} target="$75M" icon={TrendingUp} color="text-green-400" />
-                            <KPICard label="MS Regional" value={`${kpis.marketShareRegional}%`} target="12%" icon={Award} color="text-blue-400" />
-                            <KPICard label="Calificación" value={kpis.calificacion} target="S+" icon={Star} color="text-yellow-400" />
-
-                            {/* Revenue Bars */}
-                            <div className="col-span-3 bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3">Ingresos por Línea de Negocio</h3>
-                                {[
-                                    { label: 'Vehículos Nuevos', pct: 62, color: '#22c55e' },
-                                    { label: 'Servicio & Taller', pct: 18, color: '#3b82f6' },
-                                    { label: 'Repuestos', pct: 12, color: '#f59e0b' },
-                                    { label: 'Vehículos Usados', pct: 8, color: '#a855f7' },
-                                ].map(item => (
-                                    <div key={item.label} className="mb-2.5">
-                                        <div className="flex justify-between text-[10px] mb-1">
-                                            <span className="text-slate-300">{item.label}</span>
-                                            <span className="text-slate-500">{item.pct}%</span>
-                                        </div>
-                                        <div className="h-2 bg-slate-900 rounded-full overflow-hidden">
-                                            <div className="h-full rounded-full transition-all duration-1000" style={{ width: `${item.pct}%`, background: item.color }} />
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-
-                            {/* Alerta Predictiva */}
-                            <div className="col-span-3 bg-red-500/10 border border-red-500/20 p-3 rounded-xl text-sm text-red-200 flex items-start gap-2">
-                                <AlertTriangle className="shrink-0 mt-0.5" size={16} />
-                                <div>
-                                    <span className="font-bold block text-xs">⚠️ Desviación Garantías Sportage GT</span>
-                                    <span className="opacity-80 text-[11px]">+15% reclamaciones vs. promedio. Posible campaña técnica requerida. Impacto estimado: $24M.</span>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {/* ─── Tab: Operativo ───────────────── */}
-                    {activeTab === 'operativo' && (
-                        <div className="grid grid-cols-4 gap-3">
-                            <KPICard label="Taller Entradas" value={kpis.tallerEntradas} target={60} icon={Car} color="text-blue-400" />
-                            <KPICard label="Recalls Activos" value={kpis.recallsPendientes} target={0} icon={AlertTriangle} color="text-red-400" />
-                            <KPICard label="Leads Nuevos" value={kpis.leadsNuevos} target={100} icon={Zap} color="text-purple-400" />
-                            <KPICard label="Lead Time" value="4.2h" target="3h" icon={Timer} color="text-cyan-400" />
-
-                            {/* Mini Embudo */}
-                            <div className="col-span-4 bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3">Mini Embudo — Febrero 2026</h3>
-                                <div className="flex items-center gap-1">
-                                    {[
-                                        { label: 'Opps', val: kpis.oportunidades, w: 100 },
-                                        { label: 'Citas', val: Math.round(kpis.oportunidades * 0.35), w: 80 },
-                                        { label: 'Show Up', val: Math.round(kpis.oportunidades * 0.32), w: 65 },
-                                        { label: 'Test Drive', val: Math.round(kpis.oportunidades * 0.18), w: 50 },
-                                        { label: 'Pedidos', val: kpis.pedidos, w: 25 },
-                                        { label: 'Entregas', val: kpis.entregas, w: 35 },
-                                    ].map((step, i) => (
-                                        <div key={step.label} className="flex items-center gap-1 flex-1">
-                                            <div className="flex flex-col items-center flex-1">
-                                                <div className="text-lg font-bold text-white">{step.val}</div>
-                                                <div
-                                                    className="w-full rounded transition-all duration-1000"
-                                                    style={{ height: '6px', background: `hsl(${220 - i * 30}, 70%, ${50 + i * 5}%)` }}
-                                                />
-                                                <div className="text-[9px] text-slate-500 mt-1">{step.label}</div>
-                                            </div>
-                                            {i < 5 && <span className="text-slate-600 text-xs">→</span>}
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Dashboards operativos */}
-                            <div className="col-span-4 grid grid-cols-3 gap-2">
-                                {['Capacidad Instalada', 'Varados', 'Garantías', 'Campañas', 'Budget Disponible', 'Budget Vencido'].map(item => (
-                                    <div key={item} className="bg-slate-800 p-3 rounded-lg border border-slate-700 hover:border-blue-500/50 transition-all cursor-pointer">
-                                        <div className="text-xs font-medium text-slate-200">{item}</div>
-                                        <div className="text-[10px] text-slate-500 mt-0.5">Ver detalle →</div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-
-                    {/* ─── Tab: Equipo ──────────────────── */}
-                    {activeTab === 'equipo' && (
-                        <div className="grid grid-cols-2 gap-3">
-                            {/* Vendedores */}
-                            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3 flex items-center gap-2">
-                                    <Users size={12} /> Top Vendedores
-                                </h3>
-                                {vendedores.map((v, i) => (
-                                    <div key={v.name} className="mb-3">
-                                        <div className="flex justify-between text-xs mb-1">
-                                            <span className="text-slate-200 flex items-center gap-2">
-                                                {i === 0 && <span className="text-yellow-400">🏆</span>}
-                                                {v.name}
-                                            </span>
-                                            <span className="font-mono text-slate-400">{v.pct}%</span>
-                                        </div>
-                                        <div className="h-2 bg-slate-900 rounded-full overflow-hidden">
-                                            <div className="h-full rounded-full transition-all duration-1000" style={{ width: `${v.pct}%`, background: v.color }} />
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-
-                            {/* Canales */}
-                            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3 flex items-center gap-2">
-                                    <TrendingUp size={12} /> Canales de Origen
-                                </h3>
-                                {canales.map(c => (
-                                    <div key={c.name} className="mb-3">
-                                        <div className="flex justify-between text-xs mb-1">
-                                            <span className="text-slate-200">{c.name}</span>
-                                            <span className="font-mono text-slate-400">{c.pct}%</span>
-                                        </div>
-                                        <div className="h-2 bg-slate-900 rounded-full overflow-hidden">
-                                            <div className="h-full rounded-full transition-all duration-1000" style={{ width: `${c.pct}%`, background: c.color }} />
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-
-                            {/* Partner Program */}
-                            <div className="col-span-2 bg-slate-800 p-4 rounded-xl border border-slate-700">
-                                <h3 className="text-[10px] uppercase text-slate-400 font-bold mb-3 flex items-center gap-2">
-                                    <Award size={12} /> Partner Program — Greco Motors
-                                </h3>
-                                <div className="grid grid-cols-5 gap-3">
-                                    {[
-                                        { area: 'Ventas', peso: 30, score: 87, color: '#22c55e' },
-                                        { area: 'Posventa', peso: 25, score: 78, color: '#3b82f6' },
-                                        { area: 'CX', peso: 20, score: 95, color: '#a855f7' },
-                                        { area: 'Financiero', peso: 15, score: 82, color: '#f59e0b' },
-                                        { area: 'Digital', peso: 10, score: 65, color: '#ec4899' },
-                                    ].map(a => (
-                                        <div key={a.area} className="flex flex-col items-center">
-                                            <div className="w-12 h-12 rounded-full border-2 flex items-center justify-center mb-1" style={{ borderColor: a.color }}>
-                                                <span className="text-sm font-bold" style={{ color: a.color }}>{a.score}</span>
-                                            </div>
-                                            <span className="text-[10px] text-slate-300">{a.area}</span>
-                                            <span className="text-[9px] text-slate-500">{a.peso}%</span>
-                                        </div>
-                                    ))}
-                                </div>
-                                <div className="mt-3 text-center">
-                                    <span className="text-sm text-slate-400">Calificación Actual: </span>
-                                    <span className="text-2xl font-bold text-yellow-400 ml-1">S</span>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};
-
-/* ═══════════════════════════════════════════════════════════════
-   SUB-COMPONENTS
-   ═══════════════════════════════════════════════════════════════ */
-
-const KPICard = ({ label, value, target, icon: Icon, color }: any) => (
-    <div className="bg-slate-800 p-3 rounded-xl border border-slate-700">
-        <div className="flex items-center justify-between mb-1.5">
-            <span className="text-slate-400 text-[10px] uppercase font-bold">{label}</span>
-            <Icon className={color} size={14} />
-        </div>
-        <div className="text-xl font-bold">{value} <span className="text-slate-500 text-xs font-normal">/ {target}</span></div>
-    </div>
-);
-
-const ProgressCard = ({ label, value, unit, target, color }: { label: string; value: number; unit: string; target: number; color: string }) => {
-    const pct = Math.min(value, 150);
-    const over = value >= target;
-    return (
-        <div className="bg-slate-800 p-3 rounded-xl border border-slate-700">
-            <div className="flex justify-between items-center mb-2">
-                <span className="text-[10px] uppercase text-slate-400 font-bold">{label}</span>
-                <span className={`text-sm font-bold ${over ? 'text-green-400' : 'text-yellow-400'}`}>{value}{unit}</span>
-            </div>
-            <div className="h-1.5 bg-slate-900 rounded-full overflow-hidden">
-                <div
-                    className="h-full rounded-full transition-all duration-1000"
-                    style={{ width: `${Math.min(pct, 100)}%`, background: over ? color : '#eab308' }}
-                />
-            </div>
-            <div className="text-[9px] text-slate-600 mt-1">Meta: {target}{unit}</div>
-        </div>
-    );
-};