@decido/plugin-chameleon 1.0.0

package/src/views/MadefrontKanbanView.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { MadefrontOrder, OrderStatus } from '../types';
+import { Phone, Calendar, Ruler, User } from 'lucide-react';
+import { useOrderStore } from '../stores/orderStore';
+
+const COLUMNS: { id: OrderStatus; title: string; color: string; coordinator: string }[] = [
+  { id: 'DISEÑO', title: 'Diseño', color: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400', coordinator: 'Paola' },
+  { id: 'OPTIMIZACION', title: 'Optimización y Fact.', color: 'bg-purple-500/10 border-purple-500/20 text-purple-700 dark:text-purple-400', coordinator: 'Diego' },
+  { id: 'CAJA', title: 'Caja', color: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-400', coordinator: 'Gloria' },
+  { id: 'PRODUCCION', title: 'Producción', color: 'bg-orange-500/10 border-orange-500/20 text-orange-700 dark:text-orange-400', coordinator: 'Gabriel, Diego' },
+  { id: 'DESPACHO', title: 'Despacho', color: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-400', coordinator: 'Manuel' },
+  { id: 'ENTREGADO', title: 'Entregado', color: 'bg-teal-500/10 border-teal-500/20 text-teal-700 dark:text-teal-400', coordinator: 'Local' },
+];
+
+function SortableItem({ order }: { order: MadefrontOrder }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: order.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="bg-surface-secondary p-3 rounded-xl shadow-sm lg:shadow border border-border-default mb-3 cursor-grab active:cursor-grabbing hover:border-border-hover hover:shadow-md transition-all group"
+    >
+      <div className="flex justify-between items-start mb-2">
+        <div className="flex flex-col">
+          <span className="font-bold text-text-primary text-sm">{order.id}</span>
+          {order.rawStage && (
+            <span className="text-[9px] uppercase tracking-wider text-text-tertiary mt-0.5 font-bold">
+              {order.rawStage.replace(/_/g, ' ')}
+            </span>
+          )}
+        </div>
+        <span className="text-[10px] font-medium px-2 py-0.5 bg-surface-tertiary rounded-full text-text-secondary border border-border-default">
+          {order.material.substring(0, 15)}...
+        </span>
+      </div>
+
+      <div className="space-y-1.5 text-xs text-text-secondary">
+        <div className="flex items-center gap-2">
+          <User size={13} className="text-text-tertiary" />
+          <span className="truncate">{order.client}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Ruler size={13} className="text-text-tertiary" />
+          <span>{order.measurements}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Calendar size={13} className="text-text-tertiary" />
+          <span>{order.createdAt}</span>
+        </div>
+        <div 
+          className="flex items-center gap-2 cursor-pointer hover:bg-surface-tertiary p-1 -ml-1 rounded transition-colors group/phone mt-1"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('studio:open-plugin', { detail: { pluginId: 'chameleon' } }));
+            }
+          }}
+          title="Abrir WhatsApp Studio"
+        >
+          <Phone size={13} className="text-green-500 group-hover/phone:animate-pulse" />
+          <span className="text-green-600 dark:text-green-400 font-medium group-hover/phone:underline">{order.whatsapp}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function MadefrontKanbanView() {
+  const { orders, updateStatus } = useOrderStore();
+  const [showFilters, setShowFilters] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter out "ENTREGADO" by default (Pending orders only)
+  const DEFAULT_COLS = ['DISEÑO', 'OPTIMIZACION', 'CAJA', 'PRODUCCION', 'DESPACHO'];
+  const [visibleColumns, setVisibleColumns] = useState<string[]>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('mf_kanban_cols');
+      if (saved) return JSON.parse(saved);
+    }
+    return DEFAULT_COLS;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('mf_kanban_cols', JSON.stringify(visibleColumns));
+  }, [visibleColumns]);
+
+  useEffect(() => {
+    const handleSearch = (e: any) => {
+      if (e.detail?.query) {
+        setSearchQuery(e.detail.query);
+        // Force the Kanban plugin to open if it's hidden behind another view
+        window.dispatchEvent(new CustomEvent('studio:open-plugin', { detail: { pluginId: 'chameleon', viewId: 'chameleon-kanban-view' } }));
+      }
+    };
+    window.addEventListener('studio:search-order', handleSearch);
+    return () => window.removeEventListener('studio:search-order', handleSearch);
+  }, []);
+
+  const toggleColumn = (colId: string) => {
+    setVisibleColumns(prev => 
+      prev.includes(colId) ? prev.filter(c => c !== colId) : [...prev, colId]
+    );
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    const activeOrder = orders.find(o => o.id === activeId);
+    if (!activeOrder) return;
+
+    // Determine target column
+    let targetStatus: OrderStatus | null = null;
+    const overColumn = COLUMNS.find(c => c.id === overId);
+    if (overColumn) targetStatus = overColumn.id;
+    else {
+      const overOrder = orders.find(o => o.id === overId);
+      if (overOrder) targetStatus = overOrder.status;
+    }
+
+    if (targetStatus && activeOrder.status !== targetStatus) {
+      // Optimizacion UI Optimista delegada 100% al store
+      updateStatus(activeOrder.id, targetStatus as any);
+    }
+  };
+
+  return (
+    <div className="h-full w-full bg-transparent p-4 flex flex-col overflow-hidden min-h-0 relative">
+      <div className="flex justify-between items-center mb-4 shrink-0">
+        <h2 className="text-lg font-bold text-text-primary flex items-center gap-2">
+          Kanban de Pedidos
+          <span className="text-xs bg-brand-primary/10 text-brand-primary px-2 py-0.5 rounded-full border border-brand-primary/20">
+            {orders.length} Totales
+          </span>
+        </h2>
+        
+        <div className="flex items-center gap-3 relative">
+          <div className="relative flex items-center">
+            <input 
+              type="text" 
+              placeholder="Buscar pedido, cliente..." 
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-3 pr-8 py-1.5 w-64 bg-surface-secondary border border-border-default rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-brand-primary/50 transition-colors"
+            />
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 text-text-muted hover:text-text-primary"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+          
+          <button 
+            onClick={() => setShowFilters(!showFilters)}
+            className="flex items-center gap-2 px-3 py-1.5 bg-surface-secondary border border-border-default rounded-lg text-sm font-medium text-text-secondary hover:text-text-primary transition-colors"
+          >
+            Filtros <span className="opacity-50">▾</span>
+          </button>
+          
+          {showFilters && (
+            <div className="absolute right-0 top-full mt-2 w-56 bg-surface-elevated border border-border-default shadow-xl rounded-xl p-3 z-50">
+              <h3 className="text-xs font-bold text-text-secondary uppercase mb-2">Columnas Visibles</h3>
+              <div className="flex flex-col gap-1.5">
+                {COLUMNS.map(col => (
+                  <label key={col.id} className="flex items-center gap-2 text-sm text-text-primary cursor-pointer hover:bg-surface-tertiary p-1.5 rounded-md transition-colors">
+                    <input 
+                      type="checkbox" 
+                      className="rounded border-border-default bg-surface-secondary text-brand-primary focus:ring-brand-primary/50"
+                      checked={visibleColumns.includes(col.id)}
+                      onChange={() => toggleColumn(col.id)}
+                    />
+                    {col.title}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex-1 min-h-0 flex gap-6 overflow-x-auto pb-4 pr-4 scrollbar-thin">
+          {COLUMNS.filter(c => visibleColumns.includes(c.id)).map(column => {
+            const columnOrders = orders.filter(o => {
+              if (o.status !== column.id) return false;
+              if (searchQuery) {
+                const q = searchQuery.toLowerCase();
+                return o.id.toLowerCase().includes(q) 
+                    || o.client.toLowerCase().includes(q) 
+                    || o.whatsapp.toLowerCase().includes(q)
+                    || o.material.toLowerCase().includes(q);
+              }
+              return true;
+            });
+
+            const MAX_RENDER = 100;
+            const displayOrders = columnOrders.slice(0, MAX_RENDER);
+
+            return (
+              <div key={column.id} className="flex flex-col shrink-0 w-[280px] bg-surface-primary/30 rounded-2xl border border-border-default overflow-hidden">
+                <div className={`p-3 border-b border-border-default ${column.color}`}>
+                  <h2 className="font-bold text-base">{column.title}</h2>
+                  <p className="text-[10px] opacity-80 mt-0.5 flex items-center gap-1 uppercase tracking-wider font-semibold">
+                    <User size={10} /> {column.coordinator}
+                  </p>
+                  <div className="mt-2 text-xs font-medium bg-black/5 dark:bg-white/10 px-2 py-0.5 rounded-md inline-block">
+                    {columnOrders.length} pedidos
+                  </div>
+                </div>
+
+                <div className="flex-1 p-4 overflow-y-auto min-h-0">
+                  <SortableContext
+                    id={column.id}
+                    items={displayOrders.map(o => o.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    <div className="min-h-[100px] h-full flex flex-col gap-0 pb-10">
+                      {displayOrders.map(order => (
+                        <SortableItem key={order.id} order={order} />
+                      ))}
+                      {columnOrders.length > MAX_RENDER && (
+                        <div className="p-3 mt-2 text-center text-xs font-medium text-text-tertiary bg-surface-tertiary/50 rounded-xl border border-border-subtle border-dashed">
+                          + {columnOrders.length - MAX_RENDER} pedidos ocultos<br/>
+                          <span className="text-[10px] text-brand-primary opacity-80 mt-1 inline-block">Usa el buscador para filtrar</span>
+                        </div>
+                      )}
+                    </div>
+                  </SortableContext>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </DndContext>
+    </div>
+  );
+}

package/src/views/roles/CajaView.tsx

@@ -0,0 +1,76 @@
+import { useOrderStore } from '../../stores/orderStore';
+import { useAuthStore } from '../../stores/authStore';
+import { CheckCircle, DollarSign, LogOut } from 'lucide-react';
+
+export const CajaView = () => {
+    const { getPendingPayments, approvePayment } = useOrderStore();
+    const { logout, currentUser } = useAuthStore();
+    const pendingOrders = getPendingPayments();
+
+    return (
+        <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
+            {/* Header Específico de Caja */}
+            <header className="bg-white border-b border-emerald-100 px-8 py-4 flex justify-between items-center sticky top-0 z-10">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 bg-emerald-100 text-emerald-600 rounded-lg">
+                        <DollarSign size={24} />
+                    </div>
+                    <div>
+                        <h1 className="text-xl font-bold text-emerald-950">Terminal de Caja</h1>
+                        <p className="text-xs text-emerald-600 font-medium uppercase tracking-wider">Operador: {currentUser}</p>
+                    </div>
+                </div>
+                <button onClick={logout} className="text-sm text-slate-400 hover:text-red-500 flex items-center gap-2 font-medium">
+                    <LogOut size={16} /> Salir
+                </button>
+            </header>
+
+            {/* Lista de Pagos Pendientes */}
+            <main className="p-8 max-w-5xl mx-auto">
+                <div className="flex justify-between items-end mb-6">
+                    <h2 className="text-2xl font-bold text-slate-800">Pendientes de Aprobación</h2>
+                    <span className="text-sm bg-slate-200 px-3 py-1 rounded-full text-slate-600 font-bold">{pendingOrders.length} PEDIDOS</span>
+                </div>
+
+                <div className="grid gap-4">
+                    {pendingOrders.map(order => (
+                        <div key={order.id} className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex justify-between items-center hover:shadow-md transition-shadow">
+                            <div>
+                                <div className="flex items-center gap-3 mb-1">
+                                    <span className="text-lg font-black text-slate-800">{order.id}</span>
+                                    <span className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs font-bold rounded uppercase">{order.client}</span>
+                                </div>
+                                <div className="text-sm text-slate-500 flex gap-4">
+                                    <span>📅 SLA: {order.slaHours}h</span>
+                                    <span>🪵 {order.material}</span>
+                                    <span>📏 {order.sheets} Láminas</span>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center gap-6">
+                                <div className="text-right">
+                                    <p className="text-xs text-slate-400 uppercase font-bold">Total a Pagar</p>
+                                    <p className="text-xl font-bold text-slate-900">$ {((order.sheets * 250000) + 50000).toLocaleString()}</p>
+                                </div>
+                                <button
+                                    onClick={() => approvePayment(order.id)}
+                                    className="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-emerald-200 transition-all active:scale-95"
+                                >
+                                    <CheckCircle size={20} />
+                                    CONFIRMAR PAGO
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+
+                    {pendingOrders.length === 0 && (
+                        <div className="text-center py-20 bg-white rounded-3xl border border-dashed border-slate-200">
+                            <CheckCircle size={48} className="mx-auto text-slate-200 mb-4" />
+                            <p className="text-slate-400">Todo al día. No hay pagos pendientes.</p>
+                        </div>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+};

package/src/views/roles/DespachoView.tsx

@@ -0,0 +1,100 @@
+import { useOrderStore } from '../../stores/orderStore';
+import { useAuthStore } from '../../stores/authStore';
+import { Truck, LogOut, CheckCircle, Navigation } from 'lucide-react';
+import { toast } from 'sonner';
+
+export const DespachoView = () => {
+    const { getOrdersByStage, updateStatus } = useOrderStore();
+    const { logout, currentUser } = useAuthStore();
+
+    // Pedidos listos para entregar
+    const dispatchOrders = getOrdersByStage('DESPACHO');
+
+    const handleDelivery = (id: string, whatsapp: string) => {
+        updateStatus(id, 'ENTREGADO');
+        // MOCK PROACTIVO (Día 5): Toast de WhatsApp al Carpintero/Cliente
+        toast.success(`Mensaje enviado a ${whatsapp}`, {
+            description: `📦 ¡Tu pedido ${id} ha sido entregado exitosamente!`,
+            icon: '✅'
+        });
+    };
+
+    return (
+        <div className="min-h-screen bg-slate-900 text-slate-100 font-sans">
+            <header className="bg-slate-950 border-b border-purple-500/30 px-6 py-4 flex justify-between items-center sticky top-0 z-10 shadow-lg shadow-purple-500/10">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 bg-purple-500/20 text-purple-400 rounded-lg">
+                        <Truck size={24} />
+                    </div>
+                    <div>
+                        <h1 className="text-xl font-bold text-white">Logística & Despacho</h1>
+                        <p className="text-xs text-purple-400 font-medium uppercase tracking-wider">Operador: {currentUser}</p>
+                    </div>
+                </div>
+                <button onClick={logout} className="text-sm text-slate-400 hover:text-red-400 flex items-center gap-2 font-medium bg-slate-800 px-4 py-2 rounded-lg transition-colors">
+                    <LogOut size={16} /> Salir
+                </button>
+            </header>
+
+            <main className="p-8 max-w-6xl mx-auto">
+                <div className="flex justify-between items-end mb-8">
+                    <div>
+                        <h2 className="text-3xl font-bold text-white mb-2">Pedidos Listos para Entrega</h2>
+                        <p className="text-slate-400">Verifica la identidad antes de entregar el paquete.</p>
+                    </div>
+                    <span className="text-sm bg-purple-500/20 border border-purple-500/30 px-4 py-2 rounded-full text-purple-300 font-bold tracking-widest">{dispatchOrders.length} PAQUETES</span>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {dispatchOrders.map(order => (
+                        <div key={order.id} className="bg-slate-800 border border-slate-700/50 rounded-2xl p-6 relative group overflow-hidden hover:border-purple-500/30 transition-colors">
+                            <div className="flex justify-between items-start mb-6">
+                                <div>
+                                    <h3 className="text-2xl font-black text-white mb-1 flex items-center gap-2">
+                                        {order.id}
+                                        <span className="bg-green-500/20 text-green-400 text-[10px] px-2 py-1 rounded-full uppercase tracking-widest font-bold">PAGADO</span>
+                                    </h3>
+                                    <p className="text-slate-400 flex items-center gap-2">
+                                        <Navigation size={14} className="text-purple-400" />
+                                        Destino: <strong className="text-white">{order.client}</strong>
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-4 mb-6 text-sm bg-slate-900/50 p-4 rounded-xl">
+                                <div>
+                                    <span className="block text-slate-500 text-xs mb-1 uppercase font-bold tracking-wider">Material</span>
+                                    <span className="font-medium text-slate-200">{order.material}</span>
+                                </div>
+                                <div>
+                                    <span className="block text-slate-500 text-xs mb-1 uppercase font-bold tracking-wider">Láminas (Volumen)</span>
+                                    <span className="font-medium text-slate-200">{order.sheets} unid.</span>
+                                </div>
+                                <div className="col-span-2 border-t border-slate-700/50 pt-3 mt-1">
+                                    <span className="block text-slate-500 text-xs mb-1 uppercase font-bold tracking-wider">Contacto WhatsApp</span>
+                                    <span className="font-mono text-purple-300">{order.whatsapp}</span>
+                                </div>
+                            </div>
+
+                            <button
+                                onClick={() => handleDelivery(order.id, order.whatsapp)}
+                                className="w-full bg-purple-600 hover:bg-purple-500 text-white py-4 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-purple-900/50 transition-all active:scale-95"
+                            >
+                                <CheckCircle size={20} />
+                                CONFIRMAR ENTREGA
+                            </button>
+                        </div>
+                    ))}
+
+                    {dispatchOrders.length === 0 && (
+                        <div className="col-span-full h-[40vh] flex flex-col items-center justify-center text-slate-500 border-2 border-dashed border-slate-700 rounded-3xl">
+                            <Truck size={64} className="mb-4 opacity-20" />
+                            <p className="text-lg font-medium">Bandeja de salida vacía</p>
+                            <p className="text-sm">Todo ha sido despachado a los clientes.</p>
+                        </div>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+};

package/src/views/roles/PlantaView.tsx

@@ -0,0 +1,83 @@
+import { useOrderStore } from '../../stores/orderStore';
+import { useAuthStore } from '../../stores/authStore';
+import { Hammer, LogOut, AlertTriangle, CheckSquare } from 'lucide-react';
+import { toast } from 'sonner';
+
+export const PlantaView = () => {
+    const { getOrdersByStage, updateStatus } = useOrderStore();
+    const { logout } = useAuthStore();
+
+    // Filtramos lo que está listo para corte
+    const productionOrders = getOrdersByStage('PRODUCCION');
+
+    const handleFinish = (id: string) => {
+        updateStatus(id, 'DESPACHO');
+        // MOCK PROACTIVO (Día 5): Toast simulando envío a WhatsApp
+        toast.success(`Enviando WhatsApp a +57...: El pedido ${id} pasó a Despacho`, {
+            description: 'Notificación de Producción',
+            icon: '📱'
+        });
+    };
+
+    return (
+        <div className="min-h-screen bg-neutral-900 text-white font-sans selection:bg-orange-500 selection:text-white">
+            {/* Header Industrial */}
+            <header className="bg-black border-b border-orange-600/30 px-6 py-4 flex justify-between items-center">
+                <div className="flex items-center gap-4">
+                    <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse shadow-[0_0_10px_#22c55e]"></div>
+                    <h1 className="text-2xl font-black tracking-tighter text-orange-500">KIOSCO DE PLANTA</h1>
+                </div>
+                <button onClick={logout} className="bg-neutral-800 p-3 rounded-lg hover:bg-neutral-700">
+                    <LogOut size={24} />
+                </button>
+            </header>
+
+            <main className="p-6">
+                {productionOrders.length === 0 ? (
+                    <div className="h-[60vh] flex flex-col items-center justify-center text-neutral-600">
+                        <Hammer size={80} className="mb-6 opacity-20" />
+                        <h2 className="text-3xl font-black uppercase">Máquinas Libres</h2>
+                        <p className="mt-2">Esperando asignación desde Caja...</p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {productionOrders.map(order => (
+                            <div key={order.id} className="bg-neutral-800 border-l-8 border-orange-500 rounded-r-2xl p-6 relative overflow-hidden group">
+                                <div className="absolute top-0 right-0 bg-neutral-700 px-4 py-2 rounded-bl-xl text-xs font-bold text-neutral-400">
+                                    MAQUINA: <span className="text-orange-400 text-base">{order.machine}</span>
+                                </div>
+
+                                <div className="mb-6 mt-2">
+                                    <h2 className="text-5xl font-black text-white mb-2">{order.id}</h2>
+                                    <p className="text-xl text-neutral-300 font-medium truncate">{order.material}</p>
+                                    <div className="mt-4 flex gap-2">
+                                        <span className="px-3 py-1 bg-neutral-700 rounded text-sm font-mono text-orange-200">
+                                            {order.sheets} LÁMINAS
+                                        </span>
+                                        <span className="px-3 py-1 bg-neutral-700 rounded text-sm font-mono text-orange-200">
+                                            {order.measurements}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div className="grid grid-cols-2 gap-3">
+                                    <button className="bg-neutral-700 hover:bg-neutral-600 text-neutral-300 py-4 rounded-xl font-bold flex flex-col items-center justify-center gap-1">
+                                        <AlertTriangle size={24} />
+                                        <span className="text-xs">REPORTAR</span>
+                                    </button>
+                                    <button
+                                        onClick={() => handleFinish(order.id)}
+                                        className="bg-orange-600 hover:bg-orange-500 text-white py-4 rounded-xl font-black text-lg flex flex-col items-center justify-center gap-1 shadow-[0_0_20px_rgba(234,88,12,0.3)] active:scale-95 transition-all"
+                                    >
+                                        <CheckSquare size={28} />
+                                        TERMINADO
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+};

package/src/views/roles/VentasView.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react';
+import { useOrderStore } from '../../stores/orderStore';
+import { useAuthStore } from '../../stores/authStore';
+import { useUIStore } from '../../stores/uiStore';
+import { Plus, LogOut, Package, GitMerge, FileSpreadsheet } from 'lucide-react';
+import { toast } from 'sonner';
+import { MadefrontKanbanView } from '../MadefrontKanbanView';
+
+import { MadefrontExcelView } from '../MadefrontExcelView';
+
+export const VentasView = () => {
+    const { createOrder } = useOrderStore();
+    const { logout } = useAuthStore();
+    const { currentView, setCurrentView } = useUIStore();
+    const [form, setForm] = useState({ client: '', whatsapp: '', material: '', sheets: '1', measurements: 'Adjunto' });
+
+    // Al entrar por primera vez, forzamos la vista Kanban (si no estamos probando otra cosa)
+    useEffect(() => {
+        if (currentView !== 'madefront_kanban' && currentView !== 'madefront_excel') {
+            setCurrentView('madefront_kanban');
+        }
+    }, [currentView, setCurrentView]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        createOrder(form);
+
+        // Toast Feedack visual
+        toast.success("Pedido Creado", {
+            description: `El pedido para ${form.client} fue enviado a Diseño/Caja.`,
+        });
+
+        setForm({ client: '', whatsapp: '', material: '', sheets: '1', measurements: 'Adjunto' });
+    };
+
+    return (
+        <div className="h-screen w-full bg-blue-50/50 font-sans text-slate-800 flex flex-col">
+            <header className="bg-white px-8 py-4 border-b border-blue-100 flex justify-between items-center z-10 shadow-sm shrink-0">
+                <h1 className="text-xl font-bold text-blue-900 flex items-center gap-2">
+                    <Package className="text-blue-500" /> Gerencia & Ventas
+                </h1>
+
+                {/* BOTONERA CENTRAL: Kanban vs Digital Twin vs Excel */}
+                <div className="flex bg-slate-100 p-1 rounded-xl">
+                    <button
+                        onClick={() => setCurrentView('madefront_kanban')}
+                        className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${currentView === 'madefront_kanban' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'}`}
+                    >
+                        Kanban Operativo
+                    </button>
+                    <button
+                        onClick={() => setCurrentView('madefront_excel')}
+                        className={`px-4 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2 ${currentView === 'madefront_excel' ? 'bg-white shadow-sm text-green-600' : 'text-slate-500 hover:text-slate-700'}`}
+                    >
+                        <FileSpreadsheet size={16} /> Datos
+                    </button>
+                </div>
+
+                <button onClick={logout} className="text-sm text-slate-500 hover:text-blue-600 flex items-center gap-2 bg-slate-100 px-4 py-2 rounded-lg">
+                    <LogOut size={16} /> Salir
+                </button>
+            </header>
+
+            <main className="flex-1 overflow-hidden flex flex-col w-full relative">
+                {currentView === 'madefront_kanban' ? (
+                    <div className="flex-1 flex flex-col p-4 md:p-6 overflow-hidden">
+                        {/* Formulario rápido colapsable o en modal (simplificado para que quede espacio al Kanban) */}
+                        <div className="mb-4 bg-white p-4 rounded-2xl shadow-sm border border-blue-100 flex gap-4 items-end shrink-0 overflow-x-auto">
+                            <div className="flex-1 min-w-[200px]">
+                                <label className="text-[10px] font-bold text-slate-400 uppercase">Cliente Nuevo</label>
+                                <input className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm" value={form.client} onChange={e => setForm({ ...form, client: e.target.value })} placeholder="Ej: Arq. Juan..." />
+                            </div>
+                            <div className="w-40 shrink-0">
+                                <label className="text-[10px] font-bold text-slate-400 uppercase">Teléfono</label>
+                                <input className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm" value={form.whatsapp} onChange={e => setForm({ ...form, whatsapp: e.target.value })} placeholder="300..." />
+                            </div>
+                            <div className="w-24 shrink-0">
+                                <label className="text-[10px] font-bold text-slate-400 uppercase">Láminas</label>
+                                <input type="number" className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm" value={form.sheets} onChange={e => setForm({ ...form, sheets: e.target.value })} />
+                            </div>
+                            <div className="w-48 shrink-0">
+                                <label className="text-[10px] font-bold text-slate-400 uppercase">Material</label>
+                                <input className="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm" value={form.material} onChange={e => setForm({ ...form, material: e.target.value })} placeholder="Ej: RH 15mm" />
+                            </div>
+                            <button onClick={handleSubmit} className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition-all flex items-center gap-2 shrink-0 h-[38px]">
+                                <Plus size={16} /> Crear
+                            </button>
+                        </div>
+
+                        {/* El Kanban Component */}
+                        <div className="flex-1 min-h-0 border border-slate-200 rounded-2xl overflow-hidden shadow-xl bg-white flex flex-col">
+                            <MadefrontKanbanView />
+                        </div>
+                    </div>
+                ) : (
+                    <MadefrontExcelView />
+                )}
+            </main>
+        </div>
+    );
+};