@decido/plugin-chameleon 1.0.0

package/src/views/DiscoveryAdminView.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { DiscoveryStudio } from '@decido/discovery-studio';
+
+const SOCKET_URL = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+export const DiscoveryAdminView = () => {
+    const [gatewayStatus, setGatewayStatus] = useState<'connected' | 'disconnected'>('disconnected');
+    const [activeProvider, setActiveProvider] = useState<string>('Meta Cloud API');
+
+    useEffect(() => {
+        const socket = io(SOCKET_URL, {
+            reconnectionDelay: 2000,
+            reconnectionAttempts: Infinity,
+        });
+
+        socket.on('connect', () => {
+            console.log('[Discovery Admin] Conectado al backend de monitoreo:', socket.id);
+            setGatewayStatus('connected');
+        });
+
+        socket.on('disconnect', () => {
+            console.warn('[Discovery Admin] Desconectado del backend');
+            setGatewayStatus('disconnected');
+        });
+
+        // Evento enviado desde el backend (whatsappWebhookRoutes.ts / webhookQueue.ts)
+        socket.on('wa:status_update', (data: any) => {
+            console.log('[Discovery Admin] Estado del WA Gateway actualizado:', data);
+            // Esto podría ser refinado según lo que envíe tu backend.
+            if (data?.status) {
+                // ... logic to parse detailed provider status if needed
+            }
+        });
+
+        return () => {
+            socket.disconnect();
+        };
+    }, []);
+
+    return (
+        <div className="w-full h-full flex flex-col transition-colors" style={{
+            '--bg-primary': 'var(--ds-surface-primary, #ffffff)',
+            '--bg-elevated': 'var(--ds-surface-secondary, #f8fafc)',
+            '--bg-muted': 'var(--ds-surface-tertiary, #f1f5f9)',
+            '--border-color': 'var(--ds-border-default, #e2e8f0)',
+            '--text-primary': 'var(--ds-text-primary, #0f172a)',
+            '--text-secondary': 'var(--ds-text-secondary, #64748b)',
+            '--brand-primary': 'var(--ds-accent-blue, #3b82f6)',
+        } as React.CSSProperties}>
+            <div className="flex-1 w-full h-full min-h-0 relative">
+                <DiscoveryStudio 
+                    gatewayStatus={gatewayStatus}
+                    activeProvider={activeProvider}
+                />
+            </div>
+        </div>
+    );
+};

package/src/views/KuspideDashboardView.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Activity, Server, Thermometer, Wind, AlertTriangle, CheckCircle, Database, Settings } from 'lucide-react';
+
+export const KuspideDashboardView = () => {
+    return (
+        <div className="min-h-screen bg-[#05070a] p-8 text-white relative overflow-hidden">
+            {/* Background Effects */}
+            <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-emerald-600/20 blur-[120px] rounded-full mix-blend-screen pointer-events-none" />
+            <div className="absolute bottom-[-20%] right-[-10%] w-[40%] h-[40%] bg-cyan-600/20 blur-[120px] rounded-full mix-blend-screen pointer-events-none" />
+
+            <header className="mb-10 flex items-center justify-between relative z-10">
+                <div>
+                    <h1 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500 tracking-tight">
+                        KUSPIDE CONTROL TOWER
+                    </h1>
+                    <p className="text-emerald-500/80 font-mono text-sm mt-1 flex items-center gap-2">
+                        <Activity size={14} className="animate-pulse" /> Live Industrial Telemetry & IoT Mesh
+                    </p>
+                </div>
+                <div className="flex gap-4">
+                    <div className="bg-black/40 backdrop-blur-md px-5 py-2.5 rounded-xl border border-white/5 flex items-center gap-3 shadow-[0_0_15px_rgba(52,211,153,0.1)]">
+                        <Server size={18} className="text-emerald-400" />
+                        <span className="font-mono font-bold text-sm tracking-widest text-emerald-50">NODE_01 (Local)</span>
+                        <div className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-[pulse_2s_ease-in-out_infinite] shadow-[0_0_10px_rgba(16,185,129,0.8)]" />
+                    </div>
+                </div>
+            </header>
+
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 relative z-10">
+
+                {/* KPI Overview (Top Row) */}
+                <div className="lg:col-span-12 grid grid-cols-1 md:grid-cols-4 gap-6 mb-2">
+                    {[
+                        { label: "Global OEE", value: "87.3%", sub: "+2.1% (24h)", color: "emerald", icon: Activity },
+                        { label: "Active Fermenters", value: "4 / 4", sub: "Optimal Temps", color: "cyan", icon: Thermometer },
+                        { label: "Line Pressure", value: "1.2 Bar", sub: "Stable", color: "yellow", icon: Wind },
+                        { label: "DB Connection", value: "32ms", sub: "SSH Tunnel Active", color: "purple", icon: Database }
+                    ].map((kpi, idx) => (
+                        <motion.div
+                            key={idx}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: idx * 0.1 }}
+                            className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 relative overflow-hidden group hover:border-white/20 hover:bg-white/10 transition-all"
+                        >
+                            <div className={`absolute top-0 right-0 w-32 h-32 bg-${kpi.color}-500/10 rounded-bl-full blur-[30px] -mr-10 -mt-10 transition-all group-hover:bg-${kpi.color}-500/20`} />
+
+                            <div className="flex justify-between items-start mb-4">
+                                <span className="text-white/50 text-xs font-bold tracking-widest uppercase">{kpi.label}</span>
+                                <kpi.icon size={18} className={`text-${kpi.color}-400 opacity-80`} />
+                            </div>
+                            <div className="text-3xl font-black text-white tracking-tight mb-2">{kpi.value}</div>
+                            <div className={`text-xs font-mono text-${kpi.color}-400/80`}>{kpi.sub}</div>
+                        </motion.div>
+                    ))}
+                </div>
+
+                {/* Main Graph Area */}
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ delay: 0.3 }}
+                    className="lg:col-span-8 bg-black/60 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl flex flex-col min-h-[400px]"
+                >
+                    <div className="flex justify-between items-center mb-6 border-b border-white/5 pb-4">
+                        <h2 className="text-lg font-bold text-white flex items-center gap-2">
+                            <Wind size={18} className="text-cyan-400" />
+                            Live Temperature Drift (Fermenters)
+                        </h2>
+                        <div className="flex gap-2">
+                            <span className="flex items-center gap-1 text-[10px] font-mono font-bold text-white/50 bg-white/5 px-2 py-1 rounded">
+                                <div className="w-2 h-2 rounded-full bg-emerald-500" /> FERM-01
+                            </span>
+                            <span className="flex items-center gap-1 text-[10px] font-mono font-bold text-white/50 bg-white/5 px-2 py-1 rounded">
+                                <div className="w-2 h-2 rounded-full bg-cyan-500" /> FERM-02
+                            </span>
+                        </div>
+                    </div>
+
+                    <div className="flex-1 flex items-end justify-between px-4 gap-2 border-l border-b border-white/10 pb-2 relative">
+                        {/* Mock Graph Bars representing morphological chart */}
+                        {[40, 60, 45, 70, 55, 80, 65, 90, 75, 85, 60, 95].map((h, i) => (
+                            <div key={i} className="w-full flex justify-center group relative h-full items-end pb-2">
+                                <motion.div
+                                    initial={{ height: 0 }}
+                                    animate={{ height: `${h}%` }}
+                                    transition={{ duration: 1, delay: i * 0.05 }}
+                                    className="w-full max-w-[20px] bg-gradient-to-t from-emerald-900/40 to-emerald-400/60 rounded-t-sm hover:to-cyan-400/80 transition-colors mx-1"
+                                />
+                                <div className="absolute bottom-[-20px] text-[9px] font-mono text-white/30 hidden group-hover:block transition-all">
+                                    {(18 + h * 0.05).toFixed(1)}°C
+                                </div>
+                            </div>
+                        ))}
+
+                        {/* Target Line */}
+                        <div className="absolute w-full h-[1px] bg-dashed bg-rose-500/50 top-[30%] pointer-events-none" />
+                        <span className="absolute top-[30%] -right-8 text-[9px] font-mono text-rose-400 -translate-y-1/2">MAX</span>
+                    </div>
+                </motion.div>
+
+                {/* Right Column: AI Analysis & Logs */}
+                <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: 0.4 }}
+                    className="lg:col-span-4 flex flex-col gap-6"
+                >
+                    <div className="bg-black/40 backdrop-blur-xl border border-white/10 rounded-3xl p-6 shadow-xl flex-1">
+                        <h3 className="text-sm font-bold text-white/90 uppercase tracking-widest mb-4 flex items-center gap-2 border-b border-white/5 pb-3">
+                            <Settings size={16} className="text-purple-400" />
+                            Agent Commands
+                        </h3>
+                        <div className="space-y-3">
+                            <div className="p-3 rounded-xl bg-purple-500/10 border border-purple-500/20 text-sm">
+                                <p className="text-purple-300 font-bold mb-1">Mantenimiento Predictivo</p>
+                                <p className="text-purple-400/70 text-xs">Válvula 3 sugiere limpieza profunda. Probabilidad de falla: <span className="text-amber-400 font-bold">14%</span> dentro de 5 días.</p>
+                            </div>
+                            <div className="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-sm">
+                                <p className="text-emerald-300 font-bold mb-1">Análisis OEE</p>
+                                <p className="text-emerald-400/70 text-xs">Cuellos de botella resueltos. Operando al 105% de eficiencia programada.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="bg-zinc-950 border border-white/5 rounded-3xl p-5 shadow-xl font-mono text-xs flex-1 flex flex-col">
+                        <h3 className="font-bold text-zinc-500 mb-3 flex items-center gap-2 border-b border-zinc-800 pb-2">
+                            <Activity size={14} /> TTY_LOG (Real-time)
+                        </h3>
+                        <div className="flex-1 overflow-y-auto space-y-1.5 text-zinc-500">
+                            <p><span className="text-emerald-500">[10:00:01]</span> Frubeala-MCP Connected</p>
+                            <p><span className="text-cyan-500">[10:01:23]</span> SYNC Fermenter-01 {"{ Temp: 24.5C }"}</p>
+                            <p><span className="text-cyan-500">[10:01:24]</span> SYNC Fermenter-02 {"{ Temp: 22.1C }"}</p>
+                            <p><span className="text-purple-500">[10:05:40]</span> User executed `analyzeProductionLine`</p>
+                            <p><span className="text-yellow-500">[10:06:05]</span> Warning: Low raw material stock (Cebada)</p>
+                            <div className="opacity-30 italic mt-4 animate-pulse">Waiting for events...</div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </div>
+    );
+};

package/src/views/LoginView.tsx

@@ -0,0 +1,122 @@
+import { useAuthStore } from '../stores/authStore';
+import { useUIStore } from '../stores/uiStore';
+import { ShoppingBag, CreditCard, Hammer, Truck, ShieldCheck, MessageCircleCode } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export const LoginView = () => {
+    const { setRole } = useAuthStore();
+    const { setCurrentView } = useUIStore();
+
+    const roles = [
+        {
+            id: 'GERENCIA', label: 'Ventas & Diseño', user: 'Paola / Carlos', icon: <ShoppingBag className="w-8 h-8 @md:w-10 @md:h-10" />,
+            color: 'blue',
+            classes: {
+                hoverBorder: 'hover:border-blue-500/50', hoverBg: 'hover:bg-blue-500/10',
+                bg: 'bg-blue-500/10', text: 'text-blue-400', pulse: 'bg-blue-500'
+            }
+        },
+        {
+            id: 'CAJA', label: 'Caja & Pagos', user: 'Joan / Gloria', icon: <CreditCard className="w-8 h-8 @md:w-10 @md:h-10" />,
+            color: 'emerald',
+            classes: {
+                hoverBorder: 'hover:border-emerald-500/50', hoverBg: 'hover:bg-emerald-500/10',
+                bg: 'bg-emerald-500/10', text: 'text-emerald-400', pulse: 'bg-emerald-500'
+            }
+        },
+        {
+            id: 'PLANTA', label: 'Producción', user: 'Gabriel / Edwin', icon: <Hammer className="w-8 h-8 @md:w-10 @md:h-10" />,
+            color: 'orange',
+            classes: {
+                hoverBorder: 'hover:border-orange-500/50', hoverBg: 'hover:bg-orange-500/10',
+                bg: 'bg-orange-500/10', text: 'text-orange-400', pulse: 'bg-orange-500'
+            }
+        },
+        {
+            id: 'DESPACHO', label: 'Logística', user: 'Manuel', icon: <Truck className="w-8 h-8 @md:w-10 @md:h-10" />,
+            color: 'purple',
+            classes: {
+                hoverBorder: 'hover:border-purple-500/50', hoverBg: 'hover:bg-purple-500/10',
+                bg: 'bg-purple-500/10', text: 'text-purple-400', pulse: 'bg-purple-500'
+            }
+        },
+    ];
+
+    return (
+        <div className="@container h-full w-full overflow-y-auto overflow-x-hidden bg-slate-950 flex flex-col items-center justify-center p-4 @md:p-8 font-sans">
+            <div className="mb-8 @md:mb-12 text-center w-full max-w-full">
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 @md:p-4 bg-indigo-500/20 rounded-2xl border border-indigo-500/50 shadow-[0_0_40px_rgba(99,102,241,0.3)]">
+                        <ShieldCheck className="w-10 h-10 @md:w-12 @md:h-12 text-indigo-400" />
+                    </div>
+                </div>
+                <h1 className="text-3xl @sm:text-4xl @md:text-5xl @lg:text-6xl font-black text-white tracking-tighter mb-2 break-words">
+                    MADEFRONT <span className="text-indigo-500">FLOW</span>
+                </h1>
+                <p className="text-slate-400 text-[10px] @sm:text-xs @md:text-sm uppercase tracking-widest break-words max-w-[90%] mx-auto">
+                    Sistema Operativo Industrial 2.0
+                </p>
+            </div>
+
+            <div className="grid grid-cols-1 @sm:grid-cols-2 @xl:grid-cols-5 gap-4 @md:gap-6 w-full max-w-[1400px]">
+                {roles.map((role) => (
+                    <motion.button
+                        key={role.id}
+                        whileHover={{ y: -5, scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                        onClick={() => setRole(role.id as any, role.user)}
+                        className={`
+                            relative overflow-hidden group p-5 @md:p-8 rounded-3xl border border-white/5 
+                            bg-slate-900/50 backdrop-blur-sm text-left transition-all max-w-full
+                            ${role.classes.hoverBorder} ${role.classes.hoverBg} hover:shadow-[0_0_30px_rgba(0,0,0,0.3)]
+                            flex flex-col items-start min-w-0
+                        `}
+                    >
+                        <div className={`
+                            w-12 h-12 @md:w-16 @md:h-16 rounded-2xl mb-4 @md:mb-6 flex items-center justify-center shrink-0
+                            ${role.classes.bg} ${role.classes.text} group-hover:scale-110 transition-transform
+                        `}>
+                            {role.icon}
+                        </div>
+
+                        <h3 className="text-lg @md:text-2xl font-bold text-white mb-1 leading-tight break-words max-w-full shrink">
+                            {role.label}
+                        </h3>
+                        <p className="text-slate-500 text-xs @md:text-sm flex items-center gap-2 mt-auto pt-2 shrink min-w-0 max-w-full truncate">
+                            <span className={`w-2 h-2 rounded-full shrink-0 ${role.classes.pulse} animate-pulse`}></span>
+                            <span className="truncate">{role.user}</span>
+                        </p>
+                    </motion.button>
+                ))}
+
+                {/* Botón temporal para Discovery Admin WhatsApp */}
+                <motion.button
+                    whileHover={{ y: -5, scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => {
+                        setRole('NONE' as any, 'Agente Asistente');
+                        setCurrentView('discovery_admin' as any);
+                    }}
+                    className={`
+                        relative overflow-hidden group p-5 @md:p-8 rounded-3xl border border-white/5 
+                        bg-slate-900/50 backdrop-blur-sm text-left transition-all max-w-full
+                        hover:border-pink-500/50 hover:bg-pink-500/10 hover:shadow-[0_0_30px_rgba(0,0,0,0.3)]
+                        flex flex-col items-start min-w-0
+                    `}
+                >
+                    <div className="w-12 h-12 @md:w-16 @md:h-16 rounded-2xl mb-4 @md:mb-6 flex items-center justify-center shrink-0 bg-pink-500/10 text-pink-400 group-hover:scale-110 transition-transform">
+                        <MessageCircleCode className="w-8 h-8 @md:w-10 @md:h-10" />
+                    </div>
+
+                    <h3 className="text-lg @md:text-2xl font-bold text-white mb-1 leading-tight break-words max-w-full shrink">
+                        Studio Admin
+                    </h3>
+                    <p className="text-slate-500 text-xs @md:text-sm flex items-center gap-2 mt-auto pt-2 shrink min-w-0 max-w-full truncate">
+                        <span className="w-2 h-2 rounded-full shrink-0 bg-pink-500 animate-pulse"></span>
+                        <span className="truncate">WhatsApp Discovery</span>
+                    </p>
+                </motion.button>
+            </div>
+        </div>
+    );
+};

package/src/views/MadefrontChatView.tsx

@@ -0,0 +1,174 @@
+import { useState, useEffect, useRef } from 'react';
+import { Send, Bot, ArrowRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MadefrontOrder } from '../types';
+import { useOrderStore } from '../stores/orderStore';
+
+interface Message {
+  id: string;
+  sender: 'user' | 'bot';
+  text: string;
+  type?: 'order' | 'status' | 'info';
+  routedTo?: string;
+  timestamp: Date;
+}
+
+export function MadefrontChatView() {
+  const { createOrder: addOrder } = useOrderStore();
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: '1',
+      sender: 'bot',
+      text: '¡Hola! Bienvenido a Madefront, tu aliado estratégico en carpintería arquitectónica. ¿En qué te puedo ayudar hoy? (1. Hacer pedido, 2. Estado de pedido, 3. Cotización/Info)',
+      timestamp: new Date()
+    }
+  ]);
+  const [inputText, setInputText] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inputText.trim()) return;
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      sender: 'user',
+      text: inputText,
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMsg]);
+    setInputText('');
+
+    // Simulate bot response and routing
+    setTimeout(() => {
+      let botResponse = '';
+      let routedTo = '';
+      let type: 'order' | 'status' | 'info' | undefined;
+
+      const lowerInput = userMsg.text.toLowerCase();
+
+      if (lowerInput.includes('pedido') || lowerInput.includes('1') || lowerInput.includes('comprar')) {
+        botResponse = '¡Excelente! He recibido tu solicitud de pedido. Lo estoy enrutando al área de Diseño para que Paola comience a trabajarlo.';
+        routedTo = 'Diseño (Paola)';
+        type = 'order';
+
+        const newOrder: MadefrontOrder = {
+          id: `MF-${Math.floor(1000 + Math.random() * 9000)}`,
+          client: 'Cliente WhatsApp',
+          measurements: '2.40m x 1.20m',
+          material: 'Melamina RH 15mm',
+          sheets: 3,
+          createdAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toLocaleDateString(),
+          whatsapp: '+57 300 000 0000',
+          status: 'DISEÑO',
+          machine: 'SIGMA',
+          slaHours: 24,
+          isPaid: false,
+          logs: ['Creado por ChatBot']
+        };
+        addOrder(newOrder);
+
+      } else if (lowerInput.includes('estado') || lowerInput.includes('2')) {
+        botResponse = 'Para consultar el estado de tu pedido, por favor indícame el número de pedido (ej. MF-1234). Lo revisaré con el área de Producción (Gabriel/Diego) o Despacho (Manuel).';
+        type = 'status';
+      } else if (lowerInput.includes('cotizacion') || lowerInput.includes('info') || lowerInput.includes('3')) {
+        botResponse = 'Entendido. Te enviaré información sobre nuestros servicios de seccionado, enchape y perforación. Enrutando a Optimización y Facturación (Diego) para tu cotización.';
+        routedTo = 'Optimización y Facturación (Diego)';
+        type = 'info';
+      } else {
+        botResponse = 'No estoy seguro de entender. ¿Deseas hacer un pedido, consultar un estado o pedir información?';
+      }
+
+      const botMsg: Message = {
+        id: (Date.now() + 1).toString(),
+        sender: 'bot',
+        text: botResponse,
+        routedTo,
+        type,
+        timestamp: new Date()
+      };
+
+      setMessages(prev => [...prev, botMsg]);
+    }, 1000);
+  };
+
+  return (
+    <div className="h-full w-full bg-gray-50 flex flex-col items-center justify-center p-6">
+      <div className="w-full max-w-3xl bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col h-[80vh] border border-gray-100">
+
+        {/* Header */}
+        <div className="bg-[#128C7E] text-white p-4 flex items-center gap-4 shadow-md z-10">
+          <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center text-[#128C7E]">
+            <Bot size={28} />
+          </div>
+          <div>
+            <h2 className="font-bold text-lg">Madefront Bot</h2>
+            <p className="text-sm text-green-100">En línea • Enrutamiento Inteligente</p>
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-6 bg-[#E5DDD5] space-y-4">
+          <AnimatePresence>
+            {messages.map((msg) => (
+              <motion.div
+                key={msg.id}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div className={`max-w-[75%] rounded-2xl p-4 shadow-sm relative ${msg.sender === 'user'
+                  ? 'bg-[#DCF8C6] rounded-tr-none text-gray-800'
+                  : 'bg-white rounded-tl-none text-gray-800'
+                  }`}>
+                  <p className="text-[15px] leading-relaxed">{msg.text}</p>
+
+                  {msg.routedTo && (
+                    <div className="mt-3 pt-3 border-t border-gray-200/50 flex items-center gap-2 text-sm text-indigo-600 font-medium bg-indigo-50/50 -mx-4 -mb-4 p-3 rounded-b-2xl">
+                      <ArrowRight size={16} />
+                      Enrutado a: {msg.routedTo}
+                    </div>
+                  )}
+
+                  <div className="text-[11px] text-gray-400 text-right mt-1">
+                    {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input */}
+        <div className="p-4 bg-[#F0F0F0] border-t border-gray-200">
+          <form onSubmit={handleSend} className="flex gap-2">
+            <input
+              type="text"
+              value={inputText}
+              onChange={(e) => setInputText(e.target.value)}
+              placeholder="Escribe un mensaje..."
+              className="flex-1 rounded-full px-6 py-3 border-none focus:ring-2 focus:ring-[#128C7E] outline-none shadow-sm text-gray-700"
+            />
+            <button
+              type="submit"
+              disabled={!inputText.trim()}
+              className="w-12 h-12 bg-[#128C7E] text-white rounded-full flex items-center justify-center hover:bg-[#0E6655] transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
+            >
+              <Send size={20} className="ml-1" />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/MadefrontExcelView.tsx

@@ -0,0 +1,95 @@
+import { Search, Download, Filter, MoreHorizontal, FileSpreadsheet } from 'lucide-react';
+import { useOrderStore } from '../stores/orderStore';
+import { useUIStore } from '../stores/uiStore';
+
+export function MadefrontExcelView() {
+  const { orders } = useOrderStore();
+  const { searchTerm, setSearchTerm } = useUIStore();
+
+  const normalizeText = (text: string) => {
+    return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+  };
+
+  const normalizedSearchTerm = normalizeText(searchTerm);
+
+  const filteredOrders = orders.filter(order =>
+    normalizeText(order.id).includes(normalizedSearchTerm) ||
+    normalizeText(order.client).includes(normalizedSearchTerm) ||
+    normalizeText(order.status).includes(normalizedSearchTerm)
+  );
+
+  // --- LOGICA DE EXPORTACIÓN A CSV ---
+  const handleExportCSV = () => {
+    if (orders.length === 0) return;
+
+    // 1. Definir las cabeceras
+    const headers = ['Nº Pedido', 'Urgente', 'Cliente', 'WhatsApp', 'Material', 'Láminas', 'Máquina', 'Estado', 'Pagado', 'SLA (Horas)', 'Fecha Creación'];
+
+    // 2. Mapear los datos
+    const rows = orders.map(order => [
+      order.id,
+      order.isUrgent ? 'SI' : 'NO',
+      `"${order.client}"`, // Comillas para evitar problemas con comas en nombres
+      order.whatsapp,
+      `"${order.material}"`,
+      order.sheets.toString(),
+      order.machine,
+      order.status,
+      order.isPaid ? 'SI' : 'NO',
+      order.slaHours.toString(),
+      order.createdAt
+    ]);
+
+    // 3. Unir todo en formato CSV
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(row => row.join(','))
+    ].join('\n');
+
+    // 4. Crear un Blob y forzar la descarga
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.setAttribute('href', url);
+    link.setAttribute('download', `Madefront_Historial_${new Date().toISOString().split('T')[0]}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  // -----------------------------------
+
+  return (
+    <div className="h-full w-full bg-white p-8 flex flex-col">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-800 flex items-center gap-3">
+            <FileSpreadsheet className="text-green-600" size={32} />
+            Historial de Pedidos
+          </h1>
+          <p className="text-gray-500 mt-2">Registro completo de operaciones Madefront.</p>
+        </div>
+
+        <div className="flex items-center gap-4">
+          {/* Navigation/Actions for CSV Export of Decido DB Data */}
+          <button
+            onClick={handleExportCSV}
+            className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium transition-colors shadow-sm active:scale-95"
+          >
+            <Download size={18} />
+            Descargar CSV
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col">
+        <iframe 
+          src={`https://docs.google.com/spreadsheets/d/${(import.meta as any).env?.VITE_GOOGLE_SHEETS_ID || '1tu_YDOYiYeyWlw5_xqC5DHIsVB2bQdu1vCV3tCNoAYI'}/edit?rm=minimal`}
+          className="w-full h-full border-0"
+          title="Google Sheets Viewer"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
+      </div>
+    </div>
+  );
+}