feat(workflow): add workflow engine module (Phase 4)

Implement complete workflow engine with BPMN subset support:

Backend (erp-workflow crate):
- Token-driven execution engine with exclusive/parallel gateway support
- BPMN parser with flow graph validation
- Expression evaluator for conditional branching
- Process definition CRUD with draft/publish lifecycle
- Process instance management (start, suspend, terminate)
- Task service (pending, complete, delegate)
- PostgreSQL advisory locks for concurrent safety
- 5 database tables: process_definitions, process_instances,
  tokens, tasks, process_variables
- 13 API endpoints with RBAC protection
- Timeout checker framework (placeholder)

Frontend:
- Workflow page with 4 tabs (definitions, pending, completed, monitor)
- React Flow visual process designer (@xyflow/react)
- Process viewer with active node highlighting
- 3 API client modules for workflow endpoints
- Sidebar menu integration

apps/web/src/pages/workflow/ProcessViewer.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MarkerType,
+  type Node,
+  type Edge,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { NodeDef, EdgeDef } from '../../api/workflowDefinitions';
+
+const NODE_TYPE_STYLES: Record<string, { color: string; radius: number; width: number }> = {
+  StartEvent: { color: '#52c41a', radius: 50, width: 100 },
+  EndEvent: { color: '#ff4d4f', radius: 50, width: 100 },
+  UserTask: { color: '#1890ff', radius: 6, width: 160 },
+  ServiceTask: { color: '#722ed1', radius: 6, width: 160 },
+  ExclusiveGateway: { color: '#fa8c16', radius: 0, width: 100 },
+  ParallelGateway: { color: '#13c2c2', radius: 0, width: 100 },
+};
+
+interface ProcessViewerProps {
+  nodes: NodeDef[];
+  edges: EdgeDef[];
+  activeNodeIds?: string[];
+}
+
+export default function ProcessViewer({ nodes, edges, activeNodeIds = [] }: ProcessViewerProps) {
+  const flowNodes: Node[] = useMemo(() =>
+    nodes.map((n, i) => {
+      const style = NODE_TYPE_STYLES[n.type] || NODE_TYPE_STYLES.UserTask;
+      const isActive = activeNodeIds.includes(n.id);
+      return {
+        id: n.id,
+        type: 'default',
+        position: n.position || { x: 200, y: i * 120 + 50 },
+        data: { label: n.name },
+        style: {
+          background: isActive ? '#fff3cd' : style.color,
+          color: isActive ? '#856404' : '#fff',
+          padding: '8px 16px',
+          borderRadius: style.radius,
+          fontSize: 13,
+          fontWeight: 500,
+          border: isActive ? '3px solid #ffc107' : '2px solid rgba(255,255,255,0.3)',
+          width: style.width,
+          textAlign: 'center' as const,
+          boxShadow: isActive ? '0 0 8px rgba(255,193,7,0.5)' : 'none',
+        },
+      };
+    }),
+    [nodes, activeNodeIds],
+  );
+
+  const flowEdges: Edge[] = useMemo(() =>
+    edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      label: e.label || e.condition,
+      markerEnd: { type: MarkerType.ArrowClosed },
+      style: { stroke: '#999' },
+    })),
+    [edges],
+  );
+
+  return (
+    <div style={{ height: 400, border: '1px solid #d9d9d9', borderRadius: 6 }}>
+      <ReactFlow
+        nodes={flowNodes}
+        edges={flowEdges}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+      >
+        <Controls showInteractive={false} />
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1} />
+      </ReactFlow>
+    </div>
+  );
+}