@decido/shell 1.0.0

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

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Car, DollarSign, Camera, ClipboardCheck, TrendingUp,
+    Clock, Calendar, ArrowRight, BarChart3, RefreshCw
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA USED VEHICLES NODE — Trade-In & Seminuevos · Grecco Motors
+   Stock usados, pricing AI, pipeline retomas, evaluación
+   ═══════════════════════════════════════════════════════════════ */
+
+const USED_STOCK = [
+    { model: 'Sportage 2023', km: 18500, price: 128000000, market: 132000000, days: 12, status: 'published', photos: 24, condition: 'A' },
+    { model: 'Seltos 2022', km: 34200, price: 82000000, market: 85000000, days: 28, status: 'published', photos: 18, condition: 'A' },
+    { model: 'Picanto 2023', km: 8900, price: 48000000, market: 51000000, days: 5, status: 'reconditioning', photos: 0, condition: 'A+' },
+    { model: 'K3 2021', km: 52000, price: 62000000, market: 65000000, days: 45, status: 'published', photos: 20, condition: 'B+' },
+    { model: 'Sorento 2022', km: 41000, price: 152000000, market: 158000000, days: 8, status: 'evaluation', photos: 12, condition: 'B' },
+];
+
+const PIPELINE = [
+    { stage: 'Avalúo', count: 3, color: '#3b82f6' },
+    { stage: 'Negociación', count: 2, color: '#f59e0b' },
+    { stage: 'Reconditioning', count: 1, color: '#a855f7' },
+    { stage: 'Publicación', count: 2, color: '#22c55e' },
+    { stage: 'Vendido', count: 8, color: '#10b981' },
+];
+
+const EVALUATIONS = [
+    { client: 'Mario López', vehicleIn: 'Sportage 2021 · 42k km', vehicleOut: 'EV6 GT', appraisal: 95000000, fasecolda: 98000000, delta: -3, status: 'En negociación' },
+    { client: 'Sandra Castillo', vehicleIn: 'Picanto 2022 · 15k km', vehicleOut: 'Seltos', appraisal: 42000000, fasecolda: 44500000, delta: -5.6, status: 'Avalúo listo' },
+    { client: 'Andrés Mejía', vehicleIn: 'Rio 2020 · 60k km', vehicleOut: 'K3 Cross', appraisal: 38000000, fasecolda: 40000000, delta: -5, status: 'Pendiente fotos' },
+];
+
+const fmtPrice = (n: number) => `$${(n / 1000000).toFixed(0)}M`;
+
+export const KiaUsedVehiclesNode = (props: any) => {
+    const [tab, setTab] = useState<'stock' | 'pipeline' | 'tradein'>('stock');
+    const [stock, setStock] = useState(USED_STOCK.map(v => ({ ...v })));
+
+    const totalStock = stock.length;
+    const avgDays = Math.round(stock.reduce((s, v) => s + v.days, 0) / stock.length);
+    const totalValue = stock.reduce((s, v) => s + v.price, 0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setStock(prev => prev.map(v => ({ ...v, days: v.days + (Math.random() > 0.9 ? 1 : 0) })));
+        }, 10000);
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <BaseNode {...props} title="Kia Used Vehicles" 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-amber-600/20 flex items-center justify-center border border-amber-500/30">
+                        <RefreshCw size={16} className="text-amber-400" />
+                    </div>
+                    <div className="flex-1">
+                        <div className="text-xs font-bold tracking-wide">VEHÍCULOS USADOS & RETOMAS</div>
+                        <div className="text-[10px] text-slate-400">Grecco Motors · {totalStock} en stock · {fmtPrice(totalValue)} valor</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: 'pipeline' as const, label: '📊 Pipeline' },
+                        { key: 'tradein' as const, label: '🔄 Trade-In' },
+                    ]).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-amber-600/20 text-amber-400 border border-amber-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: 'En Stock', val: totalStock.toString(), color: 'text-blue-400' },
+                        { label: 'Días Prom', val: `${avgDays}d`, color: avgDays > 30 ? 'text-red-400' : 'text-green-400' },
+                        { label: 'Valor Total', val: fmtPrice(totalValue), color: 'text-yellow-400' },
+                        { label: 'Vendidos/Mes', val: '8', color: 'text-green-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>
+
+                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
+
+                    {tab === 'stock' && stock.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.days > 30 ? '#ef4444' : v.days > 14 ? '#f59e0b' : '#22c55e' }}>
+                            <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">{(v.km / 1000).toFixed(0)}k km · {v.condition}</span>
+                                </div>
+                                <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${v.status === 'published' ? 'bg-green-500/20 text-green-400' :
+                                        v.status === 'reconditioning' ? 'bg-purple-500/20 text-purple-400' :
+                                            'bg-blue-500/20 text-blue-400'
+                                    }`}>{v.status}</span>
+                            </div>
+                            <div className="flex gap-3 text-[9px]">
+                                <span className="text-slate-400">Precio: <span className="font-bold text-yellow-400">{fmtPrice(v.price)}</span></span>
+                                <span className="text-slate-400">Mercado: <span className="font-bold text-green-400">{fmtPrice(v.market)}</span></span>
+                                <span className={`font-bold ${v.days > 30 ? 'text-red-400' : 'text-slate-300'}`}>{v.days}d</span>
+                                <span className="text-slate-500">📸 {v.photos}</span>
+                            </div>
+                        </div>
+                    ))}
+
+                    {tab === 'pipeline' && (
+                        <>
+                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-2">Pipeline Retomas</div>
+                            <div className="flex gap-0.5 mb-3">
+                                {PIPELINE.map(p => (
+                                    <div key={p.stage} className="flex-1 text-center">
+                                        <div className="h-12 rounded flex items-end justify-center pb-1"
+                                            style={{ background: `${p.color}15`, border: `1px solid ${p.color}30` }}>
+                                            <span className="text-lg font-black" style={{ color: p.color }}>{p.count}</span>
+                                        </div>
+                                        <div className="text-[7px] text-slate-500 mt-1">{p.stage}</div>
+                                    </div>
+                                ))}
+                            </div>
+                            <div className="bg-blue-500/5 rounded-lg p-2.5 border border-blue-500/20 text-[9px] text-blue-400">
+                                💡 Total pipeline: {PIPELINE.reduce((s, p) => s + p.count, 0)} vehículos · Ciclo promedio: 18 días
+                            </div>
+                        </>
+                    )}
+
+                    {tab === 'tradein' && EVALUATIONS.map((e, i) => (
+                        <div key={i} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800">
+                            <div className="flex items-center justify-between mb-1">
+                                <span className="text-[10px] font-bold">{e.client}</span>
+                                <span className="text-[8px] text-yellow-400 font-bold">{e.status}</span>
+                            </div>
+                            <div className="flex items-center gap-1 text-[9px] text-slate-400 mb-1">
+                                <span>{e.vehicleIn}</span>
+                                <ArrowRight size={10} className="text-slate-600" />
+                                <span className="text-indigo-400 font-bold">{e.vehicleOut}</span>
+                            </div>
+                            <div className="flex gap-3 text-[9px]">
+                                <span className="text-slate-400">Avalúo: <span className="font-bold text-yellow-400">{fmtPrice(e.appraisal)}</span></span>
+                                <span className="text-slate-400">Fasecolda: <span className="font-bold text-slate-300">{fmtPrice(e.fasecolda)}</span></span>
+                                <span className="text-red-400 font-bold">{e.delta}%</span>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </BaseNode>
+    );
+};

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

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Wrench, CheckCircle2, Clock, MessageCircle, Car, ClipboardList,
+    AlertTriangle, Activity, Timer, Users, TrendingUp, Zap,
+    ArrowRight, Eye, Settings, BarChart3
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA WORKSHOP NODE — Posventa Predictiva · Grecco Motors
+   Monitor de taller con SLA tracking, bahías y notificaciones
+   ═══════════════════════════════════════════════════════════════ */
+
+const STEPS = [
+    { id: 1, label: 'Recepción', icon: ClipboardList, color: '#6366f1' },
+    { id: 2, label: 'Diagnóstico', icon: Eye, color: '#3b82f6' },
+    { id: 3, label: 'Autorización', icon: CheckCircle2, color: '#0ea5e9' },
+    { id: 4, label: 'Reparación', icon: Wrench, color: '#f59e0b' },
+    { id: 5, label: 'Control QC', icon: Settings, color: '#22c55e' },
+    { id: 6, label: 'Entrega', icon: ArrowRight, color: '#10b981' },
+];
+
+interface Vehicle {
+    id: string; model: string; owner: string; phone: string;
+    step: number; type: string; time: string; slaHours: number;
+    elapsed: number; priority: 'normal' | 'urgente' | 'recall';
+    notified: boolean;
+}
+
+const jitter = (n: number, r: number) => n + Math.round((Math.random() - 0.5) * r);
+
+export const KiaWorkshopNode = (props: any) => {
+    const [vehicles, setVehicles] = useState<Vehicle[]>([
+        { id: 'KIA-882', model: 'Sportage GT', owner: 'Mauricio Díaz', phone: '+57 3XX', step: 4, type: 'Mantenimiento 30K', time: '2h 15m', slaHours: 4, elapsed: 2.25, priority: 'normal', notified: false },
+        { id: 'KIA-104', model: 'Picanto Ion', owner: 'Ana Torres', phone: '+57 3XX', step: 1, type: 'Recall Airbag', time: '10m', slaHours: 3, elapsed: 0.17, priority: 'recall', notified: false },
+        { id: 'KIA-993', model: 'Seltos HEV', owner: 'Jorge Vélez', phone: '+57 3XX', step: 5, type: 'Garantía Motor', time: '4h 30m', slaHours: 6, elapsed: 4.5, priority: 'normal', notified: true },
+        { id: 'KIA-551', model: 'Stonic', owner: 'Luisa Perea', phone: '+57 3XX', step: 6, type: 'Revisión Pre-entrega', time: '1h 00m', slaHours: 2, elapsed: 1, priority: 'normal', notified: true },
+        { id: 'KIA-220', model: 'EV6 GT', owner: 'Carlos Ruiz', phone: '+57 3XX', step: 2, type: 'Diagnóstico ADAS', time: '45m', slaHours: 3, elapsed: 0.75, priority: 'urgente', notified: false },
+        { id: 'KIA-711', model: 'K3 Cross', owner: 'Sandra Gómez', phone: '+57 3XX', step: 3, type: 'Servicio Express', time: '1h 20m', slaHours: 2, elapsed: 1.33, priority: 'normal', notified: false },
+    ]);
+
+    const [tick, setTick] = useState(0);
+
+    /* Simulated progress */
+    useEffect(() => {
+        const iv = setInterval(() => {
+            setTick(t => t + 1);
+            setVehicles(prev => prev.map(v => {
+                if (v.step < 6 && Math.random() > 0.75) {
+                    const newStep = v.step + 1;
+                    return { ...v, step: newStep, notified: newStep >= 5 ? true : v.notified };
+                }
+                return v;
+            }));
+        }, 6000);
+        return () => clearInterval(iv);
+    }, []);
+
+    const sendNotification = useCallback((vehicle: Vehicle) => {
+        setVehicles(prev => prev.map(v => v.id === vehicle.id ? { ...v, notified: true } : v));
+    }, []);
+
+    /* Stats */
+    const inShop = vehicles.filter(v => v.step < 6).length;
+    const ready = vehicles.filter(v => v.step >= 6).length;
+    const overSLA = vehicles.filter(v => v.elapsed > v.slaHours).length;
+    const recalls = vehicles.filter(v => v.priority === 'recall').length;
+
+    const priorityBorder = (p: string) =>
+        p === 'recall' ? 'border-l-red-500' : p === 'urgente' ? 'border-l-orange-500' : 'border-l-transparent';
+
+    return (
+        <BaseNode {...props} title="Kia Service Tracker" width={560} height={680}>
+            <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">MONITOR DE TALLER</h2>
+                        <div className="flex items-center gap-2 mt-0.5">
+                            <span className="text-[10px] text-slate-400">Grecco Motors · Sede Norte</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="flex gap-2">
+                        <StatChip label="En Taller" value={inShop} color="#3b82f6" icon={Car} />
+                        <StatChip label="Listos" value={ready} color="#22c55e" icon={CheckCircle2} />
+                        <StatChip label="SLA ⚠️" value={overSLA} color="#ef4444" icon={AlertTriangle} />
+                    </div>
+                </div>
+
+                {/* Bahías Overview */}
+                <div className="bg-slate-800 rounded-xl p-3 border border-slate-700">
+                    <div className="flex justify-between items-center mb-2">
+                        <span className="text-[10px] uppercase text-slate-400 font-bold">Bahías de Servicio — Capacidad</span>
+                        <span className="text-[10px] text-slate-500">{inShop}/8 ocupadas</span>
+                    </div>
+                    <div className="flex gap-1">
+                        {Array.from({ length: 8 }).map((_, i) => (
+                            <div
+                                key={i}
+                                className={`flex-1 h-3 rounded transition-all ${i < inShop
+                                    ? i < inShop - overSLA ? 'bg-blue-500' : 'bg-red-500 animate-pulse'
+                                    : 'bg-slate-700'
+                                    }`}
+                            />
+                        ))}
+                    </div>
+                    {recalls > 0 && (
+                        <div className="mt-2 text-[10px] text-red-400 flex items-center gap-1">
+                            <AlertTriangle size={10} /> {recalls} recall(s) activo(s) — prioridad máxima
+                        </div>
+                    )}
+                </div>
+
+                {/* Vehicle Cards */}
+                <div className="flex-1 overflow-y-auto space-y-2 pr-1" key={tick}>
+                    {vehicles.sort((a, b) => {
+                        const prio = { recall: 0, urgente: 1, normal: 2 };
+                        return prio[a.priority] - prio[b.priority] || a.step - b.step;
+                    }).map(vehicle => {
+                        const slaUsed = Math.min(100, (vehicle.elapsed / vehicle.slaHours) * 100);
+                        const overdue = vehicle.elapsed > vehicle.slaHours;
+                        const currentStep = STEPS[vehicle.step - 1];
+
+                        return (
+                            <div
+                                key={vehicle.id}
+                                className={`bg-slate-800 rounded-lg p-3 border border-slate-700 border-l-2 ${priorityBorder(vehicle.priority)} hover:border-slate-500 transition-all`}
+                            >
+                                {/* Vehicle Info */}
+                                <div className="flex justify-between items-start mb-2">
+                                    <div className="flex items-center gap-2">
+                                        <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center">
+                                            <Car size={14} className="text-slate-300" />
+                                        </div>
+                                        <div>
+                                            <div className="text-xs font-semibold flex items-center gap-1.5">
+                                                {vehicle.model}
+                                                {vehicle.priority === 'recall' && <span className="text-[8px] bg-red-500 text-white px-1 rounded font-bold">RECALL</span>}
+                                                {vehicle.priority === 'urgente' && <span className="text-[8px] bg-orange-500 text-white px-1 rounded font-bold">URGENTE</span>}
+                                            </div>
+                                            <div className="text-[10px] text-slate-500">{vehicle.owner} · {vehicle.id} · {vehicle.type}</div>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-1.5">
+                                        <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                                            <Clock size={9} /> {vehicle.time}
+                                        </span>
+                                        <button
+                                            onClick={() => sendNotification(vehicle)}
+                                            className={`flex items-center gap-1 px-2 py-1 text-[10px] font-bold rounded-full transition-all ${vehicle.notified
+                                                ? 'bg-green-500/10 text-green-400 border border-green-500/20'
+                                                : 'bg-green-600 text-white hover:bg-green-500'
+                                                }`}
+                                        >
+                                            <MessageCircle size={10} />
+                                            {vehicle.notified ? '✓' : 'WA'}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {/* Step Progress */}
+                                <div className="flex items-center gap-0.5 mb-1.5">
+                                    {STEPS.map((step, i) => {
+                                        const done = step.id <= vehicle.step;
+                                        const current = step.id === vehicle.step;
+                                        return (
+                                            <div key={step.id} className="flex items-center flex-1">
+                                                <div
+                                                    className={`flex-1 h-1.5 rounded-full transition-all duration-700 ${done ? '' : 'bg-slate-700'}`}
+                                                    style={done ? { background: step.color } : {}}
+                                                />
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                                <div className="flex justify-between items-center">
+                                    <span className="text-[9px] flex items-center gap-1" style={{ color: currentStep.color }}>
+                                        <currentStep.icon size={9} /> {currentStep.label}
+                                    </span>
+
+                                    {/* SLA Bar */}
+                                    <div className="flex items-center gap-1.5">
+                                        <div className="w-14 h-1 bg-slate-700 rounded-full overflow-hidden">
+                                            <div
+                                                className={`h-full rounded-full transition-all ${overdue ? 'bg-red-500' : 'bg-green-500'}`}
+                                                style={{ width: `${Math.min(slaUsed, 100)}%` }}
+                                            />
+                                        </div>
+                                        <span className={`text-[8px] font-mono ${overdue ? 'text-red-400' : 'text-green-400'}`}>
+                                            {overdue ? 'OVER' : `${Math.round(100 - slaUsed)}%`}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* Footer Stats */}
+                <div className="flex items-center justify-between text-[10px] text-slate-500 pt-1 border-t border-slate-800">
+                    <span>Tiempo Promedio: <span className="text-blue-400 font-bold">3.2h</span></span>
+                    <span>NPS Servicio: <span className="text-green-400 font-bold">92.1%</span></span>
+                    <span>Entradas Hoy: <span className="text-purple-400 font-bold">{jitter(49, 5)}</span></span>
+                </div>
+            </div>
+        </BaseNode>
+    );
+};
+
+/* ─── Sub-components ───────────────────────────────────────── */
+const StatChip = ({ label, value, color, icon: Icon }: any) => (
+    <div className="bg-slate-800 px-2 py-1 rounded border border-slate-700 text-center min-w-[50px]">
+        <Icon size={10} className="mx-auto mb-0.5" style={{ color }} />
+        <div className="text-sm font-bold" style={{ color }}>{value}</div>
+        <div className="text-[8px] text-slate-500">{label}</div>
+    </div>
+);

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

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import { BaseNode } from '@decido/macia-core';
+import {
+    Car, MapPin, Zap, Battery, Wifi, AlertTriangle,
+    CheckCircle2, Radio, Navigation, Clock, Route,
+    Plug, TrendingUp, ThermometerSun, Cloud
+} from 'lucide-react';
+
+/* ═══════════════════════════════════════════════════════════════
+   KIA SMART MOBILITY NODE — Connected Mobility Hub · Grecco Motors
+   Flota conectada, estaciones de carga, V2X, alertas live
+   ═══════════════════════════════════════════════════════════════ */
+
+const CONNECTED_CARS = [
+    { id: 'EV6-001', model: 'EV6 GT', driver: 'Carlos Ruiz', battery: 78, speed: 62, location: 'Av. El Poblado', charging: false, range: 340, temp: 24 },
+    { id: 'EV9-002', model: 'EV9', driver: 'Laura Mejía', battery: 23, speed: 0, location: 'Kia Charge CC Santafé', charging: true, range: 95, temp: 22 },
+    { id: 'NE-003', model: 'Niro EV', driver: 'Pedro Gómez', battery: 91, speed: 45, location: 'Autopista Sur', charging: false, range: 380, temp: 26 },
+    { id: 'SP-004', model: 'Sportage HEV', driver: 'Ana Torres', battery: 55, speed: 78, location: 'Vía Las Palmas', charging: false, range: 210, temp: 19 },
+    { id: 'EV3-005', model: 'EV3', driver: 'Andrea López', battery: 88, speed: 35, location: 'Calle 10 Envigado', charging: false, range: 310, temp: 25 },
+    { id: 'SO-006', model: 'Sorento HEV', driver: 'Mauricio Díaz', battery: 42, speed: 0, location: 'Grecco Motors Taller', charging: false, range: 155, temp: 21 },
+];
+
+const CHARGING_STATIONS = [
+    { id: 'CS-01', name: 'Kia Charge CC Santafé', available: 2, total: 4, power: '150kW', type: 'Ultra' },
+    { id: 'CS-02', name: 'Kia Charge Av 80', available: 3, total: 3, power: '50kW', type: 'DC' },
+    { id: 'CS-03', name: 'Kia Charge Laureles', available: 0, total: 2, power: '150kW', type: 'Ultra' },
+    { id: 'CS-04', name: 'Grecco Motors HQ', available: 4, total: 6, power: '350kW', type: 'V2G' },
+    { id: 'CS-05', name: 'Kia Charge El Tesoro', available: 1, total: 2, power: '50kW', type: 'DC' },
+];
+
+const ALERT_TEMPLATES = [
+    { type: 'warning', msg: 'EV9-002: Batería al 23% — ruta a estación más cercana activada' },
+    { type: 'info', msg: 'EV6-001: OTA v3.2.1 disponible — programada para 2:00 AM' },
+    { type: 'critical', msg: 'CS-03 Laureles: Todos los cargadores ocupados — cola 15 min' },
+    { type: 'info', msg: 'EV3-005: Pre-acondicionamiento de cabina activado — 24°C' },
+    { type: 'warning', msg: 'SO-006: Mantenimiento programado en 200 km — cita auto-agendada' },
+    { type: 'info', msg: 'CS-04 HQ: V2G grid balancing activo — exportando 12 kW a red' },
+];
+
+export const KiaSmartMobilityNode = (props: any) => {
+    const [cars, setCars] = useState(CONNECTED_CARS);
+    const [selectedCar, setSelectedCar] = useState<string>('EV6-001');
+    const [alerts] = useState(ALERT_TEMPLATES);
+    const [v2gExport, setV2gExport] = useState(12.4);
+
+    const car = cars.find(c => c.id === selectedCar)!;
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCars(prev => prev.map(c => ({
+                ...c,
+                speed: c.charging ? 0 : Math.max(0, c.speed + Math.floor(Math.random() * 20 - 10)),
+                battery: c.charging ? Math.min(100, c.battery + 0.5) : Math.max(0, c.battery - (c.speed > 0 ? 0.1 : 0)),
+            })));
+            setV2gExport(v => Math.max(0, v + (Math.random() - 0.5) * 2));
+        }, 3000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const totalMoving = cars.filter(c => c.speed > 0).length;
+    const totalCharging = cars.filter(c => c.charging).length;
+    const avgBattery = Math.round(cars.reduce((s, c) => s + c.battery, 0) / cars.length);
+
+    return (
+        <BaseNode {...props} title="Kia Connected Mobility" width={600} height={580}>
+            <div className="flex flex-col h-full bg-[#070b14] text-white overflow-hidden">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-3 bg-[#0c1222] border-b border-slate-800">
+                    <div className="flex items-center gap-3">
+                        <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>
+                            <div className="text-xs font-bold tracking-wide">SMART MOBILITY HUB</div>
+                            <div className="text-[10px] text-slate-500">Kia Connect · Grecco Motors · {cars.length} conectados</div>
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        <div className="bg-green-500/10 border border-green-500/20 rounded px-2 py-1 text-center">
+                            <div className="text-xs font-bold text-green-400">{totalMoving}</div>
+                            <div className="text-[8px] text-slate-500">En ruta</div>
+                        </div>
+                        <div className="bg-blue-500/10 border border-blue-500/20 rounded px-2 py-1 text-center">
+                            <div className="text-xs font-bold text-blue-400">{totalCharging}</div>
+                            <div className="text-[8px] text-slate-500">Cargando</div>
+                        </div>
+                        <div className="bg-violet-500/10 border border-violet-500/20 rounded px-2 py-1 text-center">
+                            <div className="text-xs font-bold text-violet-400">{avgBattery}%</div>
+                            <div className="text-[8px] text-slate-500">Bat Prom</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex flex-1 overflow-hidden">
+                    {/* Left: Fleet + Stations */}
+                    <div className="w-[45%] border-r border-slate-800 flex flex-col overflow-hidden">
+                        <div className="p-2 border-b border-slate-800">
+                            <div className="text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1"><Car size={10} /> Flota Conectada</div>
+                        </div>
+                        <div className="flex-1 overflow-y-auto">
+                            {cars.map(c => (
+                                <div key={c.id} onClick={() => setSelectedCar(c.id)}
+                                    className={`p-2 border-b border-slate-800/50 cursor-pointer transition-all ${selectedCar === c.id ? 'bg-red-500/5 border-l-2 border-l-red-500' : 'hover:bg-slate-900/50'}`}>
+                                    <div className="flex items-center justify-between">
+                                        <div>
+                                            <div className="text-[11px] font-semibold">{c.model}</div>
+                                            <div className="text-[9px] text-slate-500">{c.driver}</div>
+                                        </div>
+                                        <div className="text-right">
+                                            <div className={`text-[10px] font-bold ${c.charging ? 'text-blue-400' : c.speed > 0 ? 'text-green-400' : 'text-slate-500'}`}>
+                                                {c.charging ? '⚡ Cargando' : c.speed > 0 ? `${c.speed} km/h` : 'Detenido'}
+                                            </div>
+                                            <div className="flex items-center gap-1 text-[9px] text-slate-500">
+                                                <Battery size={9} /> {Math.round(c.battery)}%
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-1 mt-1 text-[9px] text-slate-500"><MapPin size={8} /> {c.location}</div>
+                                </div>
+                            ))}
+                        </div>
+
+                        {/* Charging stations */}
+                        <div className="border-t border-slate-800 max-h-[35%] overflow-y-auto">
+                            <div className="p-2 text-[9px] text-slate-500 font-bold uppercase flex items-center gap-1 sticky top-0 bg-[#070b14]"><Zap size={10} /> Kia Charge ({CHARGING_STATIONS.length})</div>
+                            {CHARGING_STATIONS.map(s => (
+                                <div key={s.id} className="px-2 py-1.5 flex items-center justify-between text-[10px] border-t border-slate-800/30">
+                                    <div>
+                                        <div className="text-slate-300">{s.name}</div>
+                                        <div className="text-[9px] text-slate-500">{s.power} · {s.type}</div>
+                                    </div>
+                                    <span className={`font-bold ${s.available > 0 ? 'text-green-400' : 'text-red-400'}`}>
+                                        {s.available}/{s.total}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Right: Detail + Alerts */}
+                    <div className="flex-1 flex flex-col overflow-y-auto">
+                        <div className="p-3 border-b border-slate-800">
+                            <div className="flex items-center justify-between mb-2">
+                                <div>
+                                    <div className="text-sm font-bold">{car.model}</div>
+                                    <div className="text-[10px] text-slate-500">{car.id} · {car.driver}</div>
+                                </div>
+                                <div className="flex items-center gap-1 text-[9px] text-green-400"><Wifi size={10} className="animate-pulse" /> LIVE</div>
+                            </div>
+
+                            <div className="grid grid-cols-4 gap-1.5">
+                                <div className="bg-slate-900 rounded p-2 text-center border border-slate-800">
+                                    <Navigation size={12} className="mx-auto text-cyan-400 mb-0.5" />
+                                    <div className="text-base font-bold">{car.speed}</div>
+                                    <div className="text-[8px] text-slate-500">km/h</div>
+                                </div>
+                                <div className="bg-slate-900 rounded p-2 text-center border border-slate-800">
+                                    <Battery size={12} className={`mx-auto mb-0.5 ${car.battery > 50 ? 'text-green-400' : car.battery > 20 ? 'text-yellow-400' : 'text-red-400'}`} />
+                                    <div className="text-base font-bold">{Math.round(car.battery)}%</div>
+                                    <div className="text-[8px] text-slate-500">Batería</div>
+                                </div>
+                                <div className="bg-slate-900 rounded p-2 text-center border border-slate-800">
+                                    <Route size={12} className="mx-auto text-violet-400 mb-0.5" />
+                                    <div className="text-base font-bold">{car.range}</div>
+                                    <div className="text-[8px] text-slate-500">km rango</div>
+                                </div>
+                                <div className="bg-slate-900 rounded p-2 text-center border border-slate-800">
+                                    <ThermometerSun size={12} className="mx-auto text-orange-400 mb-0.5" />
+                                    <div className="text-base font-bold">{car.temp}°</div>
+                                    <div className="text-[8px] text-slate-500">Cabina</div>
+                                </div>
+                            </div>
+
+                            <div className="mt-2 flex items-center gap-1 text-[10px] text-slate-400"><MapPin size={10} /> {car.location}</div>
+                        </div>
+
+                        {/* V2G Status */}
+                        <div className="px-3 py-2 border-b border-slate-800 bg-green-500/5">
+                            <div className="flex items-center justify-between text-[10px]">
+                                <span className="text-green-400 font-bold flex items-center gap-1"><Plug size={10} /> V2G Grid Balancing</span>
+                                <span className="text-green-300 font-mono">{v2gExport.toFixed(1)} kW → Red</span>
+                            </div>
+                        </div>
+
+                        {/* Alerts */}
+                        <div className="flex-1 p-2">
+                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-2 flex items-center gap-1"><AlertTriangle size={10} /> Alertas Live</div>
+                            <div className="space-y-1.5">
+                                {alerts.map((a, i) => (
+                                    <div key={i}
+                                        className={`p-2 rounded border text-[10px] leading-relaxed ${a.type === 'critical' ? 'bg-red-500/10 border-red-500/20 text-red-200' :
+                                            a.type === 'warning' ? 'bg-yellow-500/10 border-yellow-500/20 text-yellow-200' :
+                                                'bg-blue-500/10 border-blue-500/20 text-blue-200'}`}>
+                                        {a.msg}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </BaseNode>
+    );
+};