@decido/shell 1.0.0 → 4.0.2

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

@@ -1,205 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Car, TrendingUp, TrendingDown, MapPin, BarChart3,
-    Package, Palette, Calendar
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI RUNT NODE — Mirror de PowerBI "RUNT_CONCESIONARIOS"
-   Datos REALES Grecco Motors · Febrero 2026
-   ═══════════════════════════════════════════════════════════════ */
-
-const RUNT_SUMMARY = {
-    total: 95, particular: 94, taxi: 1,
-    auto: 60, suv: 35,
-    ice: 86, hibrido: 9,
-};
-
-const MODELS = [
-    { model: 'Picanto', units: 46, pct: 48.4, color: '#ef4444' },
-    { model: 'K3 Cross', units: 12, pct: 12.6, color: '#f59e0b' },
-    { model: 'Sportage', units: 10, pct: 10.5, color: '#22c55e' },
-    { model: 'K3 Sedan', units: 8, pct: 8.4, color: '#3b82f6' },
-    { model: 'Soluto', units: 6, pct: 6.3, color: '#8b5cf6' },
-    { model: 'Stonic', units: 5, pct: 5.3, color: '#06b6d4' },
-    { model: 'Otros', units: 8, pct: 8.4, color: '#64748b' },
-];
-
-const VARIATION = [
-    { period: 'Feb 2026', units: 95, vs: null },
-    { period: 'Ene 2026', units: 147, vs: -35 },
-    { period: 'Feb 2025', units: 101, vs: -6 },
-    { period: 'Dic 2025', units: 182, vs: null },
-];
-
-const INVENTORY = [
-    { model: 'Stonic', qty: 15, year: '2027', color: '#22c55e' },
-    { model: 'Sportage', qty: 12, year: '2027', color: '#3b82f6' },
-    { model: 'Soluto', qty: 10, year: '2026', color: '#f59e0b' },
-    { model: 'Sonet', qty: 9, year: '2027', color: '#8b5cf6' },
-    { model: 'Tasman', qty: 6, year: '2027', color: '#ef4444' },
-    { model: 'EV5', qty: 4, year: '2027', color: '#06b6d4' },
-    { model: 'Picanto', qty: 8, year: '2026', color: '#f97316' },
-];
-
-const CITIES = [
-    { city: 'Girón', units: 41 },
-    { city: 'Villa del Rosario', units: 27 },
-    { city: 'Cúcuta', units: 9 },
-    { city: 'Bucaramanga', units: 6 },
-];
-
-const TOP_COLORS = [
-    { color: 'Gris', pct: 32 },
-    { color: 'Blanco', pct: 28 },
-    { color: 'Plata', pct: 18 },
-    { color: 'Negro', pct: 12 },
-    { color: 'Rojo', pct: 10 },
-];
-
-export const KiaPBIRuntNode = (props: any) => {
-    const [tab, setTab] = useState<'registro' | 'inventario' | 'variacion'>('registro');
-
-    return (
-        <BaseNode {...props} title="RUNT Grecco — 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-cyan-900/40">
-                    <div className="w-9 h-9 rounded bg-cyan-600/20 flex items-center justify-center">
-                        <Car size={16} className="text-cyan-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            RUNT CONCESIONARIOS
-                            <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-cyan-500/20 text-cyan-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Santander / Norte de Santander</div>
-                    </div>
-                </div>
-
-                {/* KPI Row */}
-                <div className="flex gap-1 px-3 py-2 border-b border-cyan-900/20">
-                    {[
-                        { label: 'Total', val: '95', color: 'text-cyan-400' },
-                        { label: 'Automóvil', val: '60', color: 'text-blue-400' },
-                        { label: 'SUV', val: '35', color: 'text-green-400' },
-                        { label: 'ICE', val: '86', color: 'text-yellow-400' },
-                        { label: 'Híbrido', val: '9', color: 'text-purple-400' },
-                    ].map(k => (
-                        <div key={k.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-cyan-900/10">
-                            <div className={`text-sm 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-cyan-900/20">
-                    {([
-                        { key: 'registro' as const, label: '📊 Registro' },
-                        { key: 'inventario' as const, label: '📦 Inventario' },
-                        { 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-cyan-600/20 text-cyan-300 border border-cyan-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'registro' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Matrículas por Modelo</div>
-                            {MODELS.map(m => (
-                                <div key={m.model} className="bg-[#16213e]/40 rounded p-2 border border-cyan-900/10"
-                                    style={{ borderLeftWidth: '3px', borderLeftColor: m.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-bold">{m.model}</span>
-                                        <span className="text-[10px] font-bold" style={{ color: m.color }}>{m.units} uds</span>
-                                    </div>
-                                    <div className="h-1.5 bg-[#0a0f1a] rounded-full mt-1">
-                                        <div className="h-full rounded-full" style={{ width: `${m.pct * 2}%`, background: m.color }} />
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mt-2 mb-1">Distribución Geográfica</div>
-                            {CITIES.map(c => (
-                                <div key={c.city} className="bg-[#16213e]/40 rounded p-1.5 flex items-center justify-between border border-cyan-900/10">
-                                    <span className="text-[9px]">📍 {c.city}</span>
-                                    <span className="text-[10px] font-bold text-cyan-400">{c.units} uds</span>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {tab === 'inventario' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Inventario Libre — Feb 14, 2026</div>
-                            {INVENTORY.map(inv => (
-                                <div key={inv.model} className="bg-[#16213e]/40 rounded p-2 border border-cyan-900/10"
-                                    style={{ borderLeftWidth: '3px', borderLeftColor: inv.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <div>
-                                            <span className="text-[10px] font-bold">{inv.model}</span>
-                                            <span className="text-[8px] text-slate-500 ml-1">MY{inv.year}</span>
-                                        </div>
-                                        <span className="text-[10px] font-bold" style={{ color: inv.color }}>{inv.qty}</span>
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mt-2 mb-1">Colores en Stock</div>
-                            <div className="flex gap-1">
-                                {TOP_COLORS.map(c => (
-                                    <div key={c.color} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-cyan-900/10">
-                                        <div className="text-[10px] font-bold text-white">{c.pct}%</div>
-                                        <div className="text-[7px] text-slate-500">{c.color}</div>
-                                    </div>
-                                ))}
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'variacion' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Variación RUNT</div>
-                            {VARIATION.filter(v => v.vs !== null).map(v => (
-                                <div key={v.period} className="bg-[#16213e]/40 rounded-lg p-3 border border-cyan-900/10">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[10px] font-bold">{v.period}</span>
-                                        <span className="text-sm font-bold text-white">{v.units} uds</span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <span className={`text-[10px] font-bold ${v.vs! < 0 ? 'text-red-400' : 'text-green-400'}`}>
-                                            {v.vs! > 0 ? '↑' : '↓'}{Math.abs(v.vs!)}% vs Feb 2026
-                                        </span>
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="bg-[#16213e]/40 rounded-lg p-3 border border-cyan-900/10 mt-2">
-                                <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Tendencia Trimestral</div>
-                                <div className="flex gap-1 items-end h-16">
-                                    {[{ m: 'Dic', v: 182 }, { m: 'Ene', v: 147 }, { m: 'Feb', v: 95 }].map(d => (
-                                        <div key={d.m} className="flex-1 flex flex-col items-center">
-                                            <span className="text-[8px] font-bold text-cyan-400 mb-0.5">{d.v}</span>
-                                            <div className="w-full bg-cyan-500/60 rounded-t" style={{ height: `${(d.v / 182) * 100}%` }} />
-                                            <span className="text-[7px] text-slate-500 mt-0.5">{d.m}</span>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                            <div className="bg-red-500/10 rounded-lg p-2 border border-red-500/20 text-[9px] text-red-400 mt-1">
-                                ⚠️ Tendencia decreciente: -35% MoM · -6% YoY. Market Share: Auto 2.9%, SUV 0.7%
-                            </div>
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,206 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Star, Award, TrendingUp, Target, Shield,
-    Users, Wrench, Heart, DollarSign, Laptop, ChevronUp, ChevronDown
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PARTNER SCORE NODE — Partner Program Scoring · Grecco Motors
-   Radar chart 5 ejes, scoring automatizado, trends
-   ═══════════════════════════════════════════════════════════════ */
-
-const AREAS = [
-    { key: 'ventas', label: 'Comercial', weight: 20, score: 95, prev: 92, icon: TrendingUp, color: '#3b82f6' },
-    { key: 'posventa', label: 'Servicio', weight: 20, score: 100, prev: 98, icon: Wrench, color: '#22c55e' },
-    { key: 'cx', label: 'Customer XP', weight: 15, score: 100, prev: 97, icon: Heart, color: '#a855f7' },
-    { key: 'financiero', label: 'Business Mgmt', weight: 15, score: 100, prev: 96, icon: DollarSign, color: '#f59e0b' },
-    { key: 'digital', label: 'Transf. Digital', weight: 10, score: 100, prev: 98, icon: Laptop, color: '#06b6d4' },
-    { key: 'marketing', label: 'Marketing', weight: 10, score: 99, prev: 97, icon: Target, color: '#e040fb' },
-    { key: 'repuestos', label: 'Repuestos', weight: 10, score: 92, prev: 89, icon: Shield, color: '#f97316' },
-];
-
-const RANKINGS = ['S+', 'S', 'A', 'B', 'C', 'D'] as const;
-
-const ACTION_ITEMS = [
-    { area: 'Digital', action: 'Completar módulo Academy — Finance Pro', impact: '+3 pts', deadline: 'Mar 15' },
-    { area: 'Financiero', action: 'Aumentar penetración seguros a 75%', impact: '+4 pts', deadline: 'Mar 30' },
-    { area: 'Ventas', action: 'Mejorar lead time < 2h para leads Hot', impact: '+2 pts', deadline: 'Feb 28' },
-];
-
-export const KiaPartnerScoreNode = (props: any) => {
-    const [scores, setScores] = useState(AREAS.map(a => ({ ...a })));
-    const [animPhase, setAnimPhase] = useState(0);
-
-    const totalScore = Math.round(scores.reduce((s, a) => s + (a.score * a.weight / 100), 0));
-    const prevTotal = Math.round(scores.reduce((s, a) => s + (a.prev * a.weight / 100), 0));
-    const ranking = totalScore >= 92 ? 'S+' : totalScore >= 85 ? 'S' : totalScore >= 75 ? 'A' : totalScore >= 65 ? 'B' : totalScore >= 50 ? 'C' : 'D';
-    const prevRanking = prevTotal >= 92 ? 'S+' : prevTotal >= 85 ? 'S' : prevTotal >= 75 ? 'A' : prevTotal >= 65 ? 'B' : prevTotal >= 50 ? 'C' : 'D';
-
-    // Radar chart math
-    const cx = 100, cy = 100, r = 70;
-    const n = scores.length;
-    const polygonPoints = scores.map((a, i) => {
-        const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
-        const radius = (a.score / 100) * r;
-        return `${cx + radius * Math.cos(angle)},${cy + radius * Math.sin(angle)}`;
-    }).join(' ');
-    const prevPolygon = scores.map((a, i) => {
-        const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
-        const radius = (a.prev / 100) * r;
-        return `${cx + radius * Math.cos(angle)},${cy + radius * Math.sin(angle)}`;
-    }).join(' ');
-    const gridLevels = [25, 50, 75, 100];
-
-    useEffect(() => {
-        const t = setTimeout(() => setAnimPhase(1), 500);
-        return () => clearTimeout(t);
-    }, []);
-
-    // Subtle score jitter
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setScores(prev => prev.map(a => ({
-                ...a,
-                score: Math.min(100, Math.max(60, a.score + Math.floor(Math.random() * 3 - 1))),
-            })));
-        }, 8000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <BaseNode {...props} title="Kia Partner Program" width={480} 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-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">PARTNER PROGRAM</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Scoring 360° · Ranking {ranking}</div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                        <div className={`px-3 py-1.5 rounded-lg text-base font-black ${ranking === 'S+' ? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30' :
-                            ranking === 'S' ? 'bg-green-500/20 text-green-400 border border-green-500/30' :
-                                'bg-blue-500/20 text-blue-400 border border-blue-500/30'
-                            }`}>
-                            {ranking}
-                        </div>
-                        <div className="text-right">
-                            <div className="text-lg font-bold">{totalScore}</div>
-                            <div className={`text-[9px] flex items-center gap-0.5 ${totalScore > prevTotal ? 'text-green-400' : 'text-red-400'}`}>
-                                {totalScore > prevTotal ? <ChevronUp size={9} /> : <ChevronDown size={9} />}
-                                {Math.abs(totalScore - prevTotal)} pts
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-3">
-
-                    {/* Radar Chart */}
-                    <div className="flex gap-3">
-                        <div className="flex-1">
-                            <svg viewBox="0 0 200 200" className="w-full">
-                                {/* Grid circles */}
-                                {gridLevels.map(level => (
-                                    <polygon key={level}
-                                        points={Array.from({ length: n }, (_, i) => {
-                                            const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
-                                            const radius = (level / 100) * r;
-                                            return `${cx + radius * Math.cos(angle)},${cy + radius * Math.sin(angle)}`;
-                                        }).join(' ')}
-                                        fill="none" stroke="rgba(100,116,139,0.15)" strokeWidth="0.5"
-                                    />
-                                ))}
-                                {/* Axes */}
-                                {scores.map((a, i) => {
-                                    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
-                                    return (
-                                        <React.Fragment key={a.key}>
-                                            <line x1={cx} y1={cy} x2={cx + r * Math.cos(angle)} y2={cy + r * Math.sin(angle)}
-                                                stroke="rgba(100,116,139,0.1)" strokeWidth="0.5" />
-                                            <text x={cx + (r + 14) * Math.cos(angle)} y={cy + (r + 14) * Math.sin(angle)}
-                                                fill={a.color} fontSize="7" fontWeight="600" textAnchor="middle" dominantBaseline="middle">
-                                                {a.label}
-                                            </text>
-                                        </React.Fragment>
-                                    );
-                                })}
-                                {/* Previous period */}
-                                <polygon points={prevPolygon} fill="rgba(100,116,139,0.06)" stroke="rgba(100,116,139,0.3)" strokeWidth="1" strokeDasharray="3,2" />
-                                {/* Current */}
-                                <polygon points={polygonPoints} fill="rgba(239,68,68,0.1)" stroke="#ef4444" strokeWidth="1.5"
-                                    style={{ transition: 'all 1s ease' }} />
-                                {/* Score points */}
-                                {scores.map((a, i) => {
-                                    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
-                                    const radius = (a.score / 100) * r;
-                                    return <circle key={a.key} cx={cx + radius * Math.cos(angle)} cy={cy + radius * Math.sin(angle)}
-                                        r="3" fill={a.color} stroke="#0f172a" strokeWidth="1" />;
-                                })}
-                            </svg>
-                        </div>
-
-                        {/* Breakdown */}
-                        <div className="w-[45%] space-y-1.5">
-                            {scores.map(a => (
-                                <div key={a.key} className="bg-slate-900 rounded-lg p-1.5 border border-slate-800">
-                                    <div className="flex items-center justify-between text-[10px] mb-0.5">
-                                        <div className="flex items-center gap-1">
-                                            <a.icon size={10} style={{ color: a.color }} />
-                                            <span className="font-semibold">{a.label}</span>
-                                        </div>
-                                        <div className="flex items-center gap-1">
-                                            <span className="font-bold" style={{ color: a.color }}>{a.score}</span>
-                                            <span className="text-[8px] text-slate-500">/ {a.weight}%</span>
-                                        </div>
-                                    </div>
-                                    <div className="w-full h-1 bg-slate-800 rounded-full">
-                                        <div className="h-full rounded-full transition-all duration-700" style={{ width: `${a.score}%`, background: a.color }} />
-                                    </div>
-                                    <div className={`text-[8px] mt-0.5 ${a.score > a.prev ? 'text-green-400' : 'text-red-400'}`}>
-                                        {a.score > a.prev ? '↑' : '↓'} {Math.abs(a.score - a.prev)} vs. anterior
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Action Items */}
-                    <div>
-                        <div className="text-[9px] text-slate-500 font-bold uppercase mb-1.5 flex items-center gap-1"><Target size={10} /> Plan de Mejora — Quick Wins</div>
-                        <div className="space-y-1">
-                            {ACTION_ITEMS.map((item, i) => (
-                                <div key={i} className="flex items-center gap-2 bg-slate-900 rounded-lg p-2 border border-slate-800">
-                                    <div className="flex-1 min-w-0">
-                                        <div className="text-[10px] text-slate-300">{item.action}</div>
-                                        <div className="text-[9px] text-slate-500">{item.area} · {item.deadline}</div>
-                                    </div>
-                                    <span className="text-[9px] font-bold text-green-400 whitespace-nowrap">{item.impact}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Ranking Scale */}
-                    <div className="bg-slate-900 rounded-lg p-2 border border-slate-800">
-                        <div className="text-[9px] text-slate-500 font-bold uppercase mb-1.5">Escala Partner Program</div>
-                        <div className="flex gap-1">
-                            {RANKINGS.map(r => (
-                                <div key={r} className={`flex-1 text-center py-1 rounded text-[10px] font-bold ${r === ranking
-                                    ? 'bg-red-500/20 text-red-400 border border-red-500/30'
-                                    : 'bg-slate-800 text-slate-500'
-                                    }`}>
-                                    {r}
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,226 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Brain, TrendingUp, AlertTriangle, BarChart3, Car,
-    Users, ShoppingCart, Wrench, ChevronUp, ChevronDown, Sparkles, Target
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PREDICTIVE ANALYTICS NODE — ML Models · Grecco Motors
-   Demand Forecast, Churn Prevention, Lead Conversion, Parts Demand
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Prediction {
-    model: string;
-    forecast: number;
-    trend: number;
-    confidence: number;
-}
-
-const DEMAND_FORECAST: Prediction[] = [
-    { model: 'Sportage', forecast: 42, trend: 8, confidence: 94 },
-    { model: 'Seltos', forecast: 28, trend: 3, confidence: 91 },
-    { model: 'EV6', forecast: 18, trend: 15, confidence: 87 },
-    { model: 'Picanto', forecast: 35, trend: -2, confidence: 92 },
-    { model: 'K3 Cross', forecast: 22, trend: 5, confidence: 89 },
-    { model: 'Sorento', forecast: 12, trend: 1, confidence: 85 },
-];
-
-const CHURN_RISKS = [
-    { name: 'Pedro Martínez', model: 'Sportage 2022', risk: 82, reason: 'NPS 45 + Sin servicio 14 meses', action: 'Llamada CX urgente' },
-    { name: 'Ana Restrepo', model: 'Seltos 2023', risk: 67, reason: 'Reclamación garantía sin resolver', action: 'Escalación Posventa' },
-    { name: 'Diego Arias', model: 'K3 2021', risk: 54, reason: 'Fin garantía próximo + sin contacto', action: 'Campaña retoma' },
-];
-
-const LEAD_CONVERSION = [
-    { source: 'Facebook Ads', leads: 156, predicted: 18, rate: 11.5, trend: 2.1 },
-    { source: 'Google Search', leads: 89, predicted: 14, rate: 15.7, trend: -0.3 },
-    { source: 'Walk-in', leads: 67, predicted: 22, rate: 32.8, trend: 1.4 },
-    { source: 'Referral', leads: 34, predicted: 12, rate: 35.3, trend: 3.2 },
-    { source: 'WhatsApp Bot', leads: 91, predicted: 9, rate: 9.9, trend: 4.5 },
-];
-
-const PARTS_FORECAST = [
-    { part: 'Filtro Aceite Sportage', current: 34, predicted: 52, reorder: true, daysToStockout: 8 },
-    { part: 'Pastillas Freno Seltos', current: 12, predicted: 28, reorder: true, daysToStockout: 3 },
-    { part: 'Bujías K3 NGK', current: 89, predicted: 15, reorder: false, daysToStockout: 45 },
-    { part: 'Batería 12V EV6 Aux', current: 6, predicted: 8, reorder: true, daysToStockout: 5 },
-    { part: 'Amortiguadores Sorento', current: 22, predicted: 10, reorder: false, daysToStockout: 18 },
-];
-
-export const KiaPredictiveNode = (props: any) => {
-    const [tab, setTab] = useState<'demand' | 'churn' | 'leads' | 'parts'>('demand');
-    const [forecast, setForecast] = useState(DEMAND_FORECAST.map(d => ({ ...d })));
-
-    // Subtle jitter on forecasts
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setForecast(prev => prev.map(d => ({
-                ...d,
-                forecast: d.forecast + Math.floor(Math.random() * 3 - 1),
-                confidence: Math.min(99, Math.max(80, d.confidence + Math.floor(Math.random() * 3 - 1))),
-            })));
-        }, 6000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const totalForecast = forecast.reduce((s, d) => s + d.forecast, 0);
-
-    return (
-        <BaseNode {...props} title="Kia Predictive Analytics" 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-purple-600/20 flex items-center justify-center border border-purple-500/30">
-                        <Brain size={16} className="text-purple-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            PREDICTIVE AI
-                            <span className="text-[8px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-normal">4 MODELOS</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Machine Learning · {totalForecast} unid/mes forecast</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
-                    {([
-                        { key: 'demand' as const, icon: BarChart3, label: 'Demanda' },
-                        { key: 'churn' as const, icon: AlertTriangle, label: 'Churn' },
-                        { key: 'leads' as const, icon: Users, label: 'Conversión' },
-                        { key: 'parts' as const, icon: ShoppingCart, label: 'Repuestos' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 flex items-center justify-center gap-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-purple-600/20 text-purple-400 border border-purple-500/30' : 'text-slate-500'
-                                }`}>
-                            <t.icon size={10} /> {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {/* Demand Forecast */}
-                    {tab === 'demand' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1 mb-1">
-                                <Sparkles size={10} className="text-purple-400" /> Forecast Próximo Mes — Por Modelo
-                            </div>
-                            {forecast.map(d => (
-                                <div key={d.model} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <div className="flex items-center gap-2">
-                                            <Car size={12} className="text-slate-400" />
-                                            <span className="text-[11px] font-bold">{d.model}</span>
-                                        </div>
-                                        <div className="flex items-center gap-2">
-                                            <span className={`text-[9px] flex items-center gap-0.5 ${d.trend > 0 ? 'text-green-400' : d.trend < 0 ? 'text-red-400' : 'text-slate-400'}`}>
-                                                {d.trend > 0 ? <ChevronUp size={9} /> : <ChevronDown size={9} />}
-                                                {Math.abs(d.trend)}%
-                                            </span>
-                                            <span className="text-sm font-bold text-blue-400">{d.forecast}</span>
-                                        </div>
-                                    </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-purple-500 transition-all duration-700"
-                                                style={{ width: `${Math.min(100, (d.forecast / 50) * 100)}%` }} />
-                                        </div>
-                                        <span className="text-[8px] text-slate-500">{d.confidence}% conf</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {/* Churn Prevention */}
-                    {tab === 'churn' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1 mb-1">
-                                <AlertTriangle size={10} className="text-red-400" /> Clientes en Riesgo de Pérdida
-                            </div>
-                            {CHURN_RISKS.map((c, i) => (
-                                <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800"
-                                    style={{ borderLeftWidth: '2px', borderLeftColor: c.risk > 70 ? '#ef4444' : c.risk > 50 ? '#f59e0b' : '#22c55e' }}>
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[11px] font-bold">{c.name}</span>
-                                        <span className={`text-sm font-black ${c.risk > 70 ? 'text-red-400' : c.risk > 50 ? 'text-yellow-400' : 'text-green-400'}`}>
-                                            {c.risk}%
-                                        </span>
-                                    </div>
-                                    <div className="text-[9px] text-slate-500 mb-1">{c.model}</div>
-                                    <div className="text-[9px] text-slate-400 mb-1">📋 {c.reason}</div>
-                                    <div className="text-[9px] text-purple-400 font-semibold flex items-center gap-1">
-                                        <Target size={8} /> {c.action}
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {/* Lead Conversion */}
-                    {tab === 'leads' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1 mb-1">
-                                <TrendingUp size={10} className="text-blue-400" /> Predicción de Conversión por Canal
-                            </div>
-                            {LEAD_CONVERSION.map(l => (
-                                <div key={l.source} 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-[11px] font-bold">{l.source}</span>
-                                        <div className="text-right">
-                                            <span className="text-sm font-bold text-green-400">{l.predicted}</span>
-                                            <span className="text-[9px] text-slate-500"> / {l.leads}</span>
-                                        </div>
-                                    </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-green-500 to-emerald-400"
-                                                style={{ width: `${Math.min(100, l.rate * 2.5)}%` }} />
-                                        </div>
-                                        <span className="text-[9px] font-bold text-green-400">{l.rate}%</span>
-                                        <span className={`text-[8px] ${l.trend > 0 ? 'text-green-400' : 'text-red-400'}`}>
-                                            {l.trend > 0 ? '↑' : '↓'}{Math.abs(l.trend)}%
-                                        </span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {/* Parts Demand */}
-                    {tab === 'parts' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1 mb-1">
-                                <ShoppingCart size={10} className="text-cyan-400" /> Predicción Demanda Repuestos
-                            </div>
-                            {PARTS_FORECAST.map(p => (
-                                <div key={p.part} className={`bg-slate-900/50 rounded-lg p-2.5 border ${p.reorder ? 'border-red-500/30' : 'border-slate-800'
-                                    }`}>
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[10px] font-bold">{p.part}</span>
-                                        {p.reorder && (
-                                            <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 items-center gap-3 text-[9px]">
-                                        <span className="text-slate-400">Stock: <span className="font-bold text-white">{p.current}</span></span>
-                                        <span className="text-slate-400">Demand: <span className="font-bold text-yellow-400">{p.predicted}/mes</span></span>
-                                        <span className={`font-bold ${p.daysToStockout < 7 ? 'text-red-400' : p.daysToStockout < 14 ? 'text-yellow-400' : 'text-green-400'}`}>
-                                            {p.daysToStockout}d stock
-                                        </span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};