PDF Insight Engine – Workflow Designer

An event-driven workflow designer for HR-style processes. Build flows with draggable nodes, configure them, simulate execution with live node status, and manage multiple pages of workflows.

Quick start

pnpm install   # or npm install / yarn
pnpm dev       # starts Vite dev server

Open the printed localhost URL to use the designer.

Features

• Drag-and-drop workflow nodes: Start, Task, Approval, Automated, End.
• Live simulation with animated steps and per-node runtime status badges (running/completed/failed).
• Export/import workflow JSON.
• Validation for required Start/End nodes and connectivity.
• Multi-page support: create a new page, which clears the canvas and simulation history.
• Clear/reset simulation window and results independently of canvas clear.
• UI built with shadcn components and Tailwind.

Architecture

• src/main.tsx: Entrypoint; renders App and global providers.
• src/App.tsx: Router + React Query + Toaster providers.
• src/pages/Index.tsx: Hosts the WorkflowCanvas.
• src/hooks/useWorkflow.ts: State/store for nodes, edges, CRUD, validation, import/export, and clear.
• src/components/workflow/WorkflowCanvas.tsx: Main layout (palette, canvas, config, simulation), React Flow wiring, page creation/reset, and node status injection.
• src/components/workflow/NodePalette.tsx: Draggable palette of node types.
• src/components/workflow/NodeConfigPanel.tsx + forms/*: Node configuration forms.
• src/components/workflow/SimulationPanel.tsx: Simulation controls, validation display, status/reset buttons, export/import, and stats.
• src/components/workflow/nodes/*: Custom node renderers with status badges.
• src/lib/mockApi.ts: Mocked automation actions and workflow simulation engine.
• src/types/workflow.ts: Types for nodes, edges, simulation, validation, and runtime status.

Event flow (high level)

1. Drag node from palette → canvas drop: onDrop in WorkflowCanvas creates a node via useWorkflow.addNode.
2. Select node: onNodeClick sets selectedNode; NodeConfigPanel renders the matching form.
3. Edit node: Form updates call useWorkflow.updateNodeData, refreshing React Flow nodes.
4. Connect nodes: React Flow onConnect adds animated edges.
5. Validate: useWorkflow.validateWorkflow checks Start/End presence and connectivity; warnings/errors show in SimulationPanel.
6. Simulate: SimulationPanel.runSimulation calls mockApi.simulateWorkflow. Steps emit running then completed to onStepChange, updating node badges live.
7. Reset/Clear:
   • Reset results: clears simulation progress/status without touching nodes.
   • Clear canvas: removes nodes/edges and resets status.
   • New page: clears canvas, resets simulation state, bumps page name.
8. Export/Import: onExport / onImport serialize or load { nodes, edges } JSON.

Styling

• Tailwind with CSS variables for node theme colors.
• shadcn UI (button, dialog, badge, input, etc.).
• React Flow for the canvas, minimap, controls, background grid.

Testing ideas

• Build a minimal valid flow (Start → Task → End); simulate and see running/completed badges.
• Remove Start node; verify validation error blocks simulation.
• Create a second page via “New”; confirm canvas and simulation panel are fresh.
• Import an exported JSON; nodes and edges should restore.