HR Workflow Designer (Prototype)

A React-based prototype for designing and testing HR workflows.

Users can:

• Drag & drop workflow nodes onto a canvas
• Connect steps visually
• Configure details for each node type
• Validate the flow
• Run a mock simulation to see step-by-step execution

This is front-end only and uses simple mock APIs for automation metadata and simulation.

Table of contents

• Features
• Tech stack
• Getting started
  • Prerequisites
  • Install
  • Run dev server
  • Build for production
• App overview
  • Node types
  • Validation rules
  • Simulation
• Architecture
  • Folder structure
  • State management
  • Mock API layer
• Potential improvements

Features

Canvas & modeling

• Drag workflow node types from the left palette onto the central canvas
• Move nodes, connect them with edges, and rearrange the workflow visually
• Custom renderers for each node type (Start, Task, Approval, Automated, End)

Configuration panels

• Right sidebar shows Node details for the currently selected node
• Forms differ per node type (e.g., assignee for Tasks, approver role for Approvals)
• Start / Task nodes support dynamic key–value fields (metadata & custom fields)

Validation & simulation

• Built-in validation before running a simulation:
  • Exactly one Start node
  • At least one End node
  • Non-End nodes must have at least one outgoing connection
  • No cycles (acyclic graph requirement)
  • Start node cannot have incoming edges
• Test workflow panel simulates execution step-by-step using a mock API
  • Outputs a simple log describing each executed node

Tech stack

• Framework: React 18
• Build tool: Vite
• Language: TypeScript
• Canvas: React Flow
• State management: Zustand

Getting started

Prerequisites

• Node.js 18+
• npm

Install

npm install

Run dev server

npm run dev

Then open the URL shown in the terminal.

Build for production

npm run build
npm run preview

App overview

Node types

• Start, Task, Approval, Automated, End
• Each node type has its own configuration form and data fields

Validation rules

Before running a simulation, the workflow is validated:

• Exactly one Start node
• At least one End node
• Start node has no incoming edges
• Every non-End node has at least one outgoing edge
• No cycles (graph must be acyclic)

If validation fails, errors are displayed in the Test workflow panel and the simulation is not run.

Simulation

The Test workflow panel:

1. Runs validation.
2. If valid, serializes the graph to a WorkflowDTO.
3. Calls a mock simulateWorkflow function (a stand-in for POST /simulate).
4. Displays a simple execution log.

Architecture

Folder structure

src/
  main.tsx
  App.tsx
  index.css

  types/
    workflow.ts

  store/
    useWorkflowStore.ts

  api/
    automationsApi.ts
    simulateApi.ts

  components/
    layout/
      AppLayout.tsx

    canvas/
      WorkflowCanvas.tsx
      nodeTypes/
        StartNode.tsx
        TaskNode.tsx
        ApprovalNode.tsx
        AutomatedStepNode.tsx
        EndNode.tsx

    panels/
      NodeDetailsPanel.tsx
      StartNodeForm.tsx
      TaskNodeForm.tsx
      ApprovalNodeForm.tsx
      AutomatedNodeForm.tsx
      EndNodeForm.tsx
      SandboxPanel.tsx

    common/
      KeyValueEditor.tsx

State management

useWorkflowStore (Zustand) holds:

• Nodes, edges, selected node id
• Handlers for React Flow (onNodesChange, onEdgesChange, onConnect)
• Helpers: addNodeOfType, updateNodeData, validate, serialize

Mock API layer

• automationsApi.ts – mock GET /automations
• simulateApi.ts – mock POST /simulate

Potential improvements

• Import/export workflow JSON
• Undo/redo, better canvas UX
• More node types (branches, parallel steps)
• Real backend integration instead of mocks