@decido/plugin-chameleon 1.0.0

package/src/views/roles/WorkflowAdminView.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { ReactFlow, Background, Controls, Node, Edge, Handle, Position } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useOrderStore } from '../../stores/orderStore';
+import { OrderStatus } from '../../types';
+
+// Un nodo personalizado para mostrar el conteo de pedidos
+const StageNode = ({ data }: { data: { label: string; count: number; isWarning: boolean } }) => (
+    <div className={`px-6 py-4 rounded-2xl border-2 shadow-lg bg-white ${data.isWarning ? 'border-red-500 shadow-red-200' : 'border-indigo-200 shadow-indigo-100'}`}>
+        <Handle type="target" position={Position.Left} className="w-2 h-1/2 rounded-md bg-indigo-400 border-none -ml-1" />
+        <h3 className="font-black text-slate-800 text-sm">{data.label}</h3>
+        <div className={`text-3xl font-black mt-2 ${data.isWarning ? 'text-red-500' : 'text-indigo-600'}`}>
+            {data.count}
+        </div>
+        <p className="text-[10px] text-slate-500 font-mono mt-1 uppercase">Pedidos Activos</p>
+        <Handle type="source" position={Position.Right} className="w-2 h-1/2 rounded-md bg-indigo-400 border-none -mr-1" />
+    </div>
+);
+
+const nodeTypes = { stage: StageNode };
+
+export const WorkflowAdminView = () => {
+    const { orders } = useOrderStore();
+
+    // Calculamos cuántos pedidos hay en cada etapa dinámicamente
+    const counts = useMemo(() => {
+        return orders.reduce((acc, order) => {
+            acc[order.status] = (acc[order.status] || 0) + 1;
+            return acc;
+        }, {} as Record<OrderStatus, number>);
+    }, [orders]);
+
+    const initialNodes: Node[] = [
+        { id: '1', type: 'stage', position: { x: 50, y: 200 }, data: { label: 'Diseño', count: counts['DISEÑO'] || 0, isWarning: false } },
+        { id: '2', type: 'stage', position: { x: 300, y: 200 }, data: { label: 'Optimización', count: counts['OPTIMIZACION'] || 0, isWarning: false } },
+        { id: '3', type: 'stage', position: { x: 550, y: 200 }, data: { label: 'Caja', count: counts['CAJA'] || 0, isWarning: (counts['CAJA'] || 0) > 5 } }, // Alerta si hay > 5 por pagar
+        { id: '4', type: 'stage', position: { x: 800, y: 200 }, data: { label: 'Producción', count: counts['PRODUCCION'] || 0, isWarning: false } },
+        { id: '5', type: 'stage', position: { x: 1050, y: 200 }, data: { label: 'Despacho', count: counts['DESPACHO'] || 0, isWarning: false } },
+    ];
+
+    const initialEdges: Edge[] = [
+        { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#818cf8', strokeWidth: 3 } },
+        { id: 'e2-3', source: '2', target: '3', animated: true, style: { stroke: '#818cf8', strokeWidth: 3 } },
+        { id: 'e3-4', source: '3', target: '4', animated: true, style: { stroke: '#818cf8', strokeWidth: 3 } },
+        { id: 'e4-5', source: '4', target: '5', animated: true, style: { stroke: '#818cf8', strokeWidth: 3 } },
+    ];
+
+    return (
+        <div className="h-full w-full bg-slate-50 flex flex-col">
+            <div className="p-6 border-b border-slate-200 bg-white">
+                <h1 className="text-2xl font-black text-slate-800">Cerebro de Operaciones (Digital Twin)</h1>
+                <p className="text-slate-500 text-sm">Monitoreo en tiempo real del flujo de planta y cuellos de botella.</p>
+            </div>
+            <div className="flex-1 relative min-h-[500px] h-full">
+                <ReactFlow nodes={initialNodes} edges={initialEdges} nodeTypes={nodeTypes} fitView>
+                    <Background color="#cbd5e1" gap={24} />
+                    <Controls />
+                </ReactFlow>
+            </div>
+        </div>
+    );
+};

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": false,
+        "noImplicitAny": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}