@decido/shell 1.0.0 → 4.0.1

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

@@ -1,165 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Cpu, Activity, TrendingUp, AlertTriangle, CheckCircle,
-    Clock, Zap, BarChart3, Eye, Radio, Server, Gauge
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA INTELLIGENCE HUB — Central AI Command · Grecco Motors
-   Unified view: todo el ecosistema en un solo nodo maestro
-   ═══════════════════════════════════════════════════════════════ */
-
-interface SystemNode {
-    id: string;
-    name: string;
-    status: 'online' | 'warning' | 'critical';
-    load: number;
-    events: number;
-    lastPing: string;
-}
-
-const SYSTEM_NODES: SystemNode[] = [
-    { id: 'dash', name: 'Dashboard', status: 'online', load: 34, events: 1247, lastPing: '0.2s' },
-    { id: 'embudo', name: 'Embudo', status: 'online', load: 28, events: 892, lastPing: '0.3s' },
-    { id: 'bot', name: 'WhatsApp Bot', status: 'online', load: 67, events: 3421, lastPing: '0.1s' },
-    { id: 'leads', name: 'Lead Scoring', status: 'online', load: 45, events: 567, lastPing: '0.4s' },
-    { id: 'workshop', name: 'Workshop', status: 'online', load: 52, events: 1893, lastPing: '0.2s' },
-    { id: 'fleet', name: 'Fleet Health', status: 'warning', load: 78, events: 234, lastPing: '1.2s' },
-    { id: 'gamif', name: 'Gamification', status: 'online', load: 21, events: 456, lastPing: '0.3s' },
-    { id: 'academy', name: 'Academy', status: 'online', load: 15, events: 189, lastPing: '0.5s' },
-    { id: 'store', name: 'Store', status: 'online', load: 38, events: 712, lastPing: '0.2s' },
-    { id: 'finance', name: 'Finance', status: 'online', load: 41, events: 923, lastPing: '0.3s' },
-    { id: 'cyber', name: 'CyberOps', status: 'online', load: 89, events: 5672, lastPing: '0.1s' },
-    { id: 'mobility', name: 'SmartMobility', status: 'online', load: 56, events: 1234, lastPing: '0.4s' },
-    { id: 'sim', name: 'Live Simulation', status: 'online', load: 62, events: 2341, lastPing: '0.1s' },
-    { id: 'partner', name: 'Partner Score', status: 'online', load: 12, events: 89, lastPing: '0.6s' },
-    { id: 'journey', name: 'Customer Journey', status: 'online', load: 33, events: 567, lastPing: '0.3s' },
-    { id: 'predictive', name: 'Predictive AI', status: 'online', load: 71, events: 1567, lastPing: '0.2s' },
-    { id: 'multi', name: 'Multi-Dealer', status: 'online', load: 25, events: 345, lastPing: '0.4s' },
-];
-
-const AI_DECISIONS = [
-    { time: '17:18', decision: 'Lead HOT María Gómez → Asignar Johan Blanco', confidence: 96, module: 'Lead Scoring' },
-    { time: '17:15', decision: 'Reorder: Pastillas Freno Seltos × 50 unid', confidence: 91, module: 'Predictive AI' },
-    { time: '17:12', decision: 'Churn Alert: Pedro Martínez → CX Manager', confidence: 82, module: 'Journey' },
-    { time: '17:08', decision: 'V2G Grid Balance: +12kW al grid', confidence: 94, module: 'SmartMobility' },
-    { time: '17:05', decision: 'Brute Force blocked → IP 45.33.X.X banned', confidence: 99, module: 'CyberOps' },
-    { time: '17:01', decision: 'Lucky Drive winner → Mantenimiento gratis', confidence: 88, module: 'Gamification' },
-    { time: '16:58', decision: 'Pre-aprobación: Score 812 Bancolombia $112M', confidence: 93, module: 'Finance' },
-    { time: '16:55', decision: 'Cross-sell: Polarizado Nano → 94% prob', confidence: 94, module: 'Journey' },
-];
-
-export const KiaIntelligenceHubNode = (props: any) => {
-    const [nodes, setNodes] = useState(SYSTEM_NODES.map(n => ({ ...n })));
-    const [tab, setTab] = useState<'status' | 'decisions'>('status');
-
-    const onlineCount = nodes.filter(n => n.status === 'online').length;
-    const warningCount = nodes.filter(n => n.status === 'warning').length;
-    const totalEvents = nodes.reduce((s, n) => s + n.events, 0);
-    const avgLoad = Math.round(nodes.reduce((s, n) => s + n.load, 0) / nodes.length);
-
-    // Live jitter
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setNodes(prev => prev.map(n => ({
-                ...n,
-                load: Math.min(99, Math.max(5, n.load + Math.floor(Math.random() * 7 - 3))),
-                events: n.events + Math.floor(Math.random() * 5),
-                status: n.load > 90 ? 'critical' as const : n.load > 75 ? 'warning' as const : 'online' as const,
-            })));
-        }, 3000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const statusColor = (s: string) =>
-        s === 'online' ? 'text-green-400' : s === 'warning' ? 'text-yellow-400' : 'text-red-400';
-    const statusBg = (s: string) =>
-        s === 'online' ? 'bg-green-500/20' : s === 'warning' ? 'bg-yellow-500/20' : 'bg-red-500/20';
-
-    return (
-        <BaseNode {...props} title="Kia Intelligence Hub" width={520} height={640}>
-            <div className="flex flex-col h-full bg-[#050810] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#0a1020] border-b border-slate-800">
-                    <div className="w-10 h-10 rounded-full bg-linear-to-br from-red-600/30 to-purple-600/30 flex items-center justify-center border border-red-500/20">
-                        <Cpu size={18} className="text-red-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            INTELLIGENCE HUB
-                            <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · AI Command Center · {nodes.length} sistemas</div>
-                    </div>
-                    <div className="flex gap-1 bg-slate-900 rounded-lg p-0.5 border border-slate-800">
-                        <button onClick={() => setTab('status')}
-                            className={`px-2 py-1 rounded text-[9px] font-bold ${tab === 'status' ? 'bg-red-600 text-white' : 'text-slate-500'}`}>
-                            🖥️ Estado
-                        </button>
-                        <button onClick={() => setTab('decisions')}
-                            className={`px-2 py-1 rounded text-[9px] font-bold ${tab === 'decisions' ? 'bg-red-600 text-white' : 'text-slate-500'}`}>
-                            🧠 IA Decisions
-                        </button>
-                    </div>
-                </div>
-
-                {/* KPIs */}
-                <div className="grid grid-cols-4 gap-1 p-2 bg-[#080e1a] border-b border-slate-800">
-                    <div className="text-center bg-green-500/5 border border-green-500/10 rounded p-1.5">
-                        <div className="text-base font-bold text-green-400">{onlineCount}</div>
-                        <div className="text-[7px] text-slate-500">ONLINE</div>
-                    </div>
-                    <div className="text-center bg-yellow-500/5 border border-yellow-500/10 rounded p-1.5">
-                        <div className="text-base font-bold text-yellow-400">{warningCount}</div>
-                        <div className="text-[7px] text-slate-500">WARNING</div>
-                    </div>
-                    <div className="text-center bg-blue-500/5 border border-blue-500/10 rounded p-1.5">
-                        <div className="text-base font-bold text-blue-400">{(totalEvents / 1000).toFixed(1)}k</div>
-                        <div className="text-[7px] text-slate-500">EVENTS</div>
-                    </div>
-                    <div className="text-center bg-purple-500/5 border border-purple-500/10 rounded p-1.5">
-                        <div className="text-base font-bold text-purple-400">{avgLoad}%</div>
-                        <div className="text-[7px] text-slate-500">AVG LOAD</div>
-                    </div>
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-2 space-y-1">
-
-                    {tab === 'status' && nodes.map(n => (
-                        <div key={n.id} className="flex items-center gap-2 bg-slate-900/40 rounded-lg px-2.5 py-1.5 border border-slate-800/50">
-                            <div className={`w-1.5 h-1.5 rounded-full ${n.status === 'online' ? 'bg-green-400' : n.status === 'warning' ? 'bg-yellow-400 animate-pulse' : 'bg-red-400 animate-pulse'}`} />
-                            <span className="text-[10px] font-semibold w-28 truncate">{n.name}</span>
-                            <div className="flex-1 h-1 bg-slate-800 rounded-full">
-                                <div className={`h-full rounded-full transition-all duration-500 ${n.load > 80 ? 'bg-red-500' : n.load > 60 ? 'bg-yellow-500' : 'bg-green-500'
-                                    }`} style={{ width: `${n.load}%` }} />
-                            </div>
-                            <span className={`text-[9px] font-mono w-8 text-right ${n.load > 80 ? 'text-red-400' : n.load > 60 ? 'text-yellow-400' : 'text-green-400'
-                                }`}>{n.load}%</span>
-                            <span className="text-[8px] text-slate-600 w-8 text-right">{n.lastPing}</span>
-                        </div>
-                    ))}
-
-                    {tab === 'decisions' && AI_DECISIONS.map((d, i) => (
-                        <div key={i} className="bg-slate-900/40 rounded-lg p-2.5 border border-slate-800/50"
-                            style={{ borderLeftWidth: '2px', borderLeftColor: d.confidence > 90 ? '#22c55e' : d.confidence > 80 ? '#3b82f6' : '#f59e0b' }}>
-                            <div className="flex items-center justify-between mb-0.5">
-                                <span className="text-[9px] font-mono text-slate-500">{d.time}</span>
-                                <span className="text-[8px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded">{d.module}</span>
-                            </div>
-                            <div className="text-[10px] text-slate-300">{d.decision}</div>
-                            <div className="flex items-center gap-1 mt-1">
-                                <div className="flex-1 h-0.5 bg-slate-800 rounded-full">
-                                    <div className="h-full rounded-full bg-green-500" style={{ width: `${d.confidence}%` }} />
-                                </div>
-                                <span className="text-[8px] text-green-400 font-bold">{d.confidence}%</span>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,183 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Package, Truck, AlertTriangle, Clock, TrendingUp,
-    BarChart3, RefreshCw, MapPin, ChevronUp, ChevronDown, ShoppingCart
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA INVENTORY NODE — Inventario & Supply Chain · Grecco Motors
-   Stock vehículos, aging, rotación, supply chain, auto-reorder
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Vehicle {
-    model: string;
-    color: string;
-    stock: number;
-    reserved: number;
-    transit: number;
-    aging: number;
-    rotation: number;
-    status: 'ok' | 'low' | 'critical';
-}
-
-const VEHICLES: Vehicle[] = [
-    { model: 'Picanto Vibrant', color: 'Gray Pearl', stock: 8, reserved: 3, transit: 4, aging: 18, rotation: 5.8, status: 'ok' },
-    { model: 'K3 Cross Zenith', color: 'Snow White', stock: 5, reserved: 2, transit: 3, aging: 15, rotation: 4.2, status: 'ok' },
-    { model: 'Sportage HEV', color: 'Steel Gray', stock: 12, reserved: 4, transit: 6, aging: 22, rotation: 3.1, status: 'ok' },
-    { model: 'Stonic Master', color: 'Orange', stock: 15, reserved: 1, transit: 0, aging: 45, rotation: 2.1, status: 'low' },
-    { model: 'Sonet Desire', color: 'Blue', stock: 9, reserved: 2, transit: 3, aging: 25, rotation: 3.5, status: 'ok' },
-    { model: 'Tasman 4x4', color: 'Black', stock: 6, reserved: 3, transit: 4, aging: 8, rotation: 6.2, status: 'ok' },
-    { model: 'EV5 Earth', color: 'White Pearl', stock: 4, reserved: 2, transit: 2, aging: 12, rotation: 4.0, status: 'low' },
-];
-const SHIPMENTS = [
-    { id: 'KIA-2026-0284', origin: 'Hwaseong, Korea', models: 'EV6 ×4, EV9 ×2', eta: 'Mar 8', status: 'En tránsito', progress: 72 },
-    { id: 'KIA-2026-0291', origin: 'Gwangju, Korea', models: 'Sportage ×5, Sorento ×3', eta: 'Mar 15', status: 'Embarcado', progress: 45 },
-    { id: 'KIA-2026-0303', origin: 'Saltillo, México', models: 'K3 ×8, Seltos ×6', eta: 'Feb 28', status: 'Aduana COL', progress: 88 },
-];
-
-const PARTS_ALERTS = [
-    { part: 'Pastillas Freno Seltos', stock: 12, min: 20, reorderQty: 50, supplier: 'Hyundai Mobis', eta: '5 días' },
-    { part: 'Batería Aux EV6', stock: 4, min: 8, reorderQty: 20, supplier: 'LG Energy', eta: '12 días' },
-    { part: 'Filtro Cabina Sportage', stock: 6, min: 15, reorderQty: 40, supplier: 'Mann Filter', eta: '3 días' },
-];
-
-export const KiaInventoryNode = (props: any) => {
-    const [tab, setTab] = useState<'stock' | 'supply' | 'parts'>('stock');
-    const [vehicles, setVehicles] = useState(VEHICLES.map(v => ({ ...v })));
-
-    const totalStock = vehicles.reduce((s, v) => s + v.stock, 0);
-    const totalReserved = vehicles.reduce((s, v) => s + v.reserved, 0);
-    const totalTransit = vehicles.reduce((s, v) => s + v.transit, 0);
-    const avgAging = Math.round(vehicles.filter(v => v.aging > 0).reduce((s, v) => s + v.aging, 0) / vehicles.filter(v => v.aging > 0).length);
-
-    // Jitter
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setVehicles(prev => prev.map(v => ({
-                ...v,
-                aging: v.stock > 0 ? v.aging + 1 : 0,
-                stock: Math.max(0, v.stock + (Math.random() > 0.8 ? (Math.random() > 0.5 ? 1 : -1) : 0)),
-            })));
-        }, 10000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <BaseNode {...props} title="Kia Inventory" width={500} height={620}>
-            <div className="flex flex-col h-full bg-[#060a12] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#0c1222] border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-orange-600/20 flex items-center justify-center border border-orange-500/30">
-                        <Package size={16} className="text-orange-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">INVENTARIO & SUPPLY CHAIN</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {totalStock} en stock · {totalTransit} en tránsito</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#0a0f1a] border-b border-slate-800">
-                    {([
-                        { key: 'stock' as const, label: '🚗 Stock' },
-                        { key: 'supply' as const, label: '🚢 Supply Chain' },
-                        { key: 'parts' as const, label: '⚠️ Repuestos' },
-                    ]).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-400 border border-orange-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* KPIs */}
-                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
-                    {[
-                        { label: 'Stock', val: totalStock.toString(), color: 'text-blue-400' },
-                        { label: 'Reservados', val: totalReserved.toString(), color: 'text-purple-400' },
-                        { label: 'En Tránsito', val: totalTransit.toString(), color: 'text-green-400' },
-                        { label: 'Aging Prom', val: `${avgAging}d`, color: 'text-yellow-400' },
-                    ].map(s => (
-                        <div key={s.label} className="flex-1 text-center bg-slate-900/50 rounded p-1.5 border border-slate-800/50">
-                            <div className={`text-sm font-bold ${s.color}`}>{s.val}</div>
-                            <div className="text-[8px] text-slate-500">{s.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'stock' && vehicles.map(v => (
-                        <div key={v.model} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800"
-                            style={{ borderLeftWidth: '2px', borderLeftColor: v.status === 'ok' ? '#22c55e' : v.status === 'low' ? '#f59e0b' : '#ef4444' }}>
-                            <div className="flex items-center justify-between mb-1">
-                                <div>
-                                    <span className="text-[11px] font-bold">{v.model}</span>
-                                    <span className="text-[9px] text-slate-500 ml-1.5">{v.color}</span>
-                                </div>
-                                <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${v.status === 'ok' ? 'bg-green-500/20 text-green-400' :
-                                    v.status === 'low' ? 'bg-yellow-500/20 text-yellow-400' :
-                                        'bg-red-500/20 text-red-400 animate-pulse'
-                                    }`}>{v.status === 'ok' ? 'OK' : v.status === 'low' ? 'BAJO' : 'CRÍTICO'}</span>
-                            </div>
-                            <div className="flex gap-3 text-[9px]">
-                                <span className="text-slate-400">Stock: <span className="font-bold text-white">{v.stock}</span></span>
-                                <span className="text-slate-400">Reserv: <span className="font-bold text-purple-400">{v.reserved}</span></span>
-                                <span className="text-slate-400">Transit: <span className="font-bold text-green-400">{v.transit}</span></span>
-                                <span className="text-slate-400">Aging: <span className={`font-bold ${v.aging > 30 ? 'text-red-400' : 'text-slate-300'}`}>{v.aging}d</span></span>
-                                <span className="text-slate-400">Rot: <span className="font-bold text-blue-400">{v.rotation}×</span></span>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'supply' && SHIPMENTS.map(s => (
-                        <div key={s.id} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800">
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[10px] font-bold text-white">{s.id}</span>
-                                <span className="text-[9px] text-green-400 font-semibold">{s.status}</span>
-                            </div>
-                            <div className="text-[9px] text-slate-400 mb-1">
-                                <MapPin size={9} className="inline mr-1" />{s.origin} → Medellín
-                            </div>
-                            <div className="text-[9px] text-slate-500 mb-2">{s.models}</div>
-                            <div className="flex items-center gap-2">
-                                <div className="flex-1 h-1.5 bg-slate-800 rounded-full">
-                                    <div className="h-full rounded-full bg-linear-to-r from-blue-500 to-green-500 transition-all"
-                                        style={{ width: `${s.progress}%` }} />
-                                </div>
-                                <span className="text-[9px] font-bold text-blue-400">{s.progress}%</span>
-                                <span className="text-[8px] text-slate-500">ETA: {s.eta}</span>
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'parts' && (
-                        <>
-                            <div className="text-[9px] text-red-400 font-bold uppercase mb-1 flex items-center gap-1">
-                                <AlertTriangle size={10} /> Alertas de Reabastecimiento
-                            </div>
-                            {PARTS_ALERTS.map(p => (
-                                <div key={p.part} className="bg-red-500/5 rounded-lg p-2.5 border border-red-500/20">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[10px] font-bold">{p.part}</span>
-                                        <span className="text-[8px] px-1.5 py-0.5 bg-red-500/20 text-red-400 rounded font-bold animate-pulse">REORDER</span>
-                                    </div>
-                                    <div className="flex gap-3 text-[9px] mb-1">
-                                        <span className="text-red-400">Stock: {p.stock}</span>
-                                        <span className="text-slate-500">Min: {p.min}</span>
-                                        <span className="text-green-400">Pedir: {p.reorderQty}</span>
-                                    </div>
-                                    <div className="text-[8px] text-slate-500">{p.supplier} · ETA: {p.eta}</div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,226 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Activity,
-    Users,
-    Flame,
-    ThermometerSun,
-    Snowflake,
-    TrendingUp,
-    Phone,
-    MessageSquare,
-    Mail,
-    Clock,
-    Zap,
-    Filter,
-    ArrowRight,
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA LEAD SCORING NODE
-   Visual pipeline de clasificación de leads con scoring IA
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Lead {
-    id: number;
-    name: string;
-    vehicle: string;
-    channel: string;
-    score: number;
-    status: 'hot' | 'warm' | 'cold' | 'nurture';
-    lastAction: string;
-    time: string;
-    assignedTo?: string;
-}
-
-const INITIAL_LEADS: Lead[] = [
-    { id: 1, name: 'Juan Pérez', vehicle: 'EV6 GT', channel: 'Facebook', score: 95, status: 'hot', lastAction: 'Agendó Test Drive', time: '2m', assignedTo: 'Johan Blanco' },
-    { id: 2, name: 'Andrea López', vehicle: 'Sportage', channel: 'Google Ads', score: 88, status: 'hot', lastAction: 'Preguntó financiación', time: '5m' },
-    { id: 3, name: 'Carlos Ruiz', vehicle: 'K3 Cross', channel: 'Web', score: 72, status: 'warm', lastAction: 'Comparó modelos', time: '12m' },
-    { id: 4, name: 'María Mendez', vehicle: 'Picanto', channel: 'Instagram', score: 45, status: 'cold', lastAction: 'Solo dio like', time: '1h' },
-    { id: 5, name: 'Pedro Gómez', vehicle: 'Seltos', channel: 'Walk-in', score: 68, status: 'warm', lastAction: 'Visitó showroom', time: '20m' },
-    { id: 6, name: 'Luisa Perea', vehicle: 'Sorento', channel: 'WhatsApp', score: 82, status: 'hot', lastAction: 'Pidió cotización', time: '8m' },
-    { id: 7, name: 'Diego Torres', vehicle: 'Stonic', channel: 'BTL', score: 35, status: 'nurture', lastAction: 'Registró datos ruleta', time: '2h' },
-    { id: 8, name: 'Camila Rey', vehicle: 'EV3', channel: 'Google Ads', score: 91, status: 'hot', lastAction: 'Pre-aprobación crédito', time: '3m', assignedTo: 'Camila Torres' },
-];
-
-const STATUS_CONFIG = {
-    hot: { icon: Flame, label: 'Caliente', color: '#ef4444', bg: '#ef444422' },
-    warm: { icon: ThermometerSun, label: 'Tibio', color: '#f59e0b', bg: '#f59e0b22' },
-    cold: { icon: Snowflake, label: 'Frío', color: '#3b82f6', bg: '#3b82f622' },
-    nurture: { icon: Activity, label: 'Nurture', color: '#a855f7', bg: '#a855f722' },
-};
-
-const CHANNEL_ICON: Record<string, typeof Phone> = {
-    Facebook: MessageSquare,
-    Instagram: MessageSquare,
-    'Google Ads': TrendingUp,
-    Web: TrendingUp,
-    WhatsApp: Phone,
-    'Walk-in': Users,
-    BTL: Users,
-};
-
-const jitter = (n: number, r: number) => n + Math.round((Math.random() - 0.5) * r);
-
-export const KiaLeadScoringNode = (props: any) => {
-    const [leads, setLeads] = useState(INITIAL_LEADS);
-    const [filter, setFilter] = useState<'all' | 'hot' | 'warm' | 'cold' | 'nurture'>('all');
-    const [tick, setTick] = useState(0);
-
-    /* Simulate new leads arriving */
-    useEffect(() => {
-        const iv = setInterval(() => {
-            setTick(t => t + 1);
-            setLeads(prev => prev.map(l => ({
-                ...l,
-                score: Math.min(100, Math.max(10, jitter(l.score, 4))),
-            })));
-        }, 6000);
-        return () => clearInterval(iv);
-    }, []);
-
-    const filtered = filter === 'all' ? leads : leads.filter(l => l.status === filter);
-    const counts = {
-        hot: leads.filter(l => l.status === 'hot').length,
-        warm: leads.filter(l => l.status === 'warm').length,
-        cold: leads.filter(l => l.status === 'cold').length,
-        nurture: leads.filter(l => l.status === 'nurture').length,
-    };
-
-    return (
-        <BaseNode {...props} title="Kia Lead Scoring — IA" width={520} height={620}>
-            <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">
-                    <div>
-                        <h2 className="text-sm font-bold tracking-wide">SCORING DE LEADS</h2>
-                        <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-[10px] text-slate-400">Clasificación IA · Tiempo Real</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 className="text-right">
-                        <div className="text-lg font-bold text-white">{leads.length}</div>
-                        <div className="text-[9px] text-slate-500">Leads Activos</div>
-                    </div>
-                </div>
-
-                {/* Pipeline Summary */}
-                <div className="grid grid-cols-4 gap-2">
-                    {(['hot', 'warm', 'cold', 'nurture'] as const).map(status => {
-                        const cfg = STATUS_CONFIG[status];
-                        const Icon = cfg.icon;
-                        const active = filter === status;
-                        return (
-                            <button
-                                key={status}
-                                onClick={() => setFilter(f => f === status ? 'all' : status)}
-                                className={`p-2 rounded-lg border transition-all text-center cursor-pointer ${active
-                                    ? 'border-white/30 scale-105'
-                                    : 'border-slate-700 hover:border-slate-600'
-                                    }`}
-                                style={{ background: active ? cfg.bg : '#1e293b' }}
-                            >
-                                <Icon size={14} className="mx-auto mb-1" style={{ color: cfg.color }} />
-                                <div className="text-lg font-bold" style={{ color: cfg.color }}>{counts[status]}</div>
-                                <div className="text-[9px] text-slate-500">{cfg.label}</div>
-                            </button>
-                        );
-                    })}
-                </div>
-
-                {/* Conversion Funnel Mini */}
-                <div className="flex items-center gap-1 bg-slate-800 rounded-lg p-2 border border-slate-700">
-                    <div className="flex items-center gap-1 flex-1 text-center">
-                        <div className="flex-1">
-                            <div className="text-xs font-bold text-purple-400">{leads.length}</div>
-                            <div className="text-[8px] text-slate-500">Total</div>
-                        </div>
-                        <ArrowRight size={10} className="text-slate-600" />
-                        <div className="flex-1">
-                            <div className="text-xs font-bold text-yellow-400">{counts.hot + counts.warm}</div>
-                            <div className="text-[8px] text-slate-500">Calificados</div>
-                        </div>
-                        <ArrowRight size={10} className="text-slate-600" />
-                        <div className="flex-1">
-                            <div className="text-xs font-bold text-green-400">{counts.hot}</div>
-                            <div className="text-[8px] text-slate-500">Calientes</div>
-                        </div>
-                        <ArrowRight size={10} className="text-slate-600" />
-                        <div className="flex-1">
-                            <div className="text-xs font-bold text-red-400">{leads.filter(l => l.assignedTo).length}</div>
-                            <div className="text-[8px] text-slate-500">Asignados</div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Lead List */}
-                <div className="flex-1 overflow-y-auto space-y-1.5 pr-1" key={tick}>
-                    {filtered.sort((a, b) => b.score - a.score).map(lead => {
-                        const cfg = STATUS_CONFIG[lead.status];
-                        const ChannelIcon = CHANNEL_ICON[lead.channel] || Users;
-                        return (
-                            <div
-                                key={lead.id}
-                                className="bg-slate-800 rounded-lg p-2.5 border border-slate-700 hover:border-slate-500 transition-all cursor-pointer group"
-                            >
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2 flex-1 min-w-0">
-                                        {/* Score Circle */}
-                                        <div
-                                            className="w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs shrink-0 border-2"
-                                            style={{ borderColor: cfg.color, color: cfg.color, background: cfg.bg }}
-                                        >
-                                            {lead.score}
-                                        </div>
-                                        <div className="min-w-0 flex-1">
-                                            <div className="flex items-center gap-1.5">
-                                                <span className="text-xs font-medium text-white truncate">{lead.name}</span>
-                                                <cfg.icon size={10} style={{ color: cfg.color }} />
-                                            </div>
-                                            <div className="flex items-center gap-1.5 text-[9px] text-slate-500">
-                                                <span>{lead.vehicle}</span>
-                                                <span>·</span>
-                                                <ChannelIcon size={8} />
-                                                <span>{lead.channel}</span>
-                                                <span>·</span>
-                                                <Clock size={8} />
-                                                <span>{lead.time}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="text-right shrink-0 ml-2">
-                                        <div className="text-[9px] text-slate-400 truncate max-w-[100px]">{lead.lastAction}</div>
-                                        {lead.assignedTo && (
-                                            <div className="text-[8px] text-green-400 flex items-center justify-end gap-1 mt-0.5">
-                                                <Zap size={8} /> {lead.assignedTo}
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                                {/* Score Bar */}
-                                <div className="mt-1.5 h-1 bg-slate-900 rounded-full overflow-hidden">
-                                    <div
-                                        className="h-full rounded-full transition-all duration-700"
-                                        style={{ width: `${lead.score}%`, background: cfg.color }}
-                                    />
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-
-                {/* Footer */}
-                <div className="flex items-center justify-between text-[10px] text-slate-500 pt-1 border-t border-slate-800">
-                    <span>Conv. Rate: <span className="text-green-400 font-bold">3.4%</span></span>
-                    <span>Avg Score: <span className="text-blue-400 font-bold">{Math.round(leads.reduce((s, l) => s + l.score, 0) / leads.length)}</span></span>
-                    <span>Auto-asignados: <span className="text-purple-400 font-bold">{leads.filter(l => l.assignedTo).length}</span></span>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};