HR Workflow Designer Module

A React-based workflow designer application built with React Flow that allows HR administrators to visually create and test internal workflows such as onboarding, leave approval, and document verification.

Features

✅ Core Functionality

• Workflow Canvas (React Flow)

  • Drag-and-drop workflow builder
  • 5 custom node types: Start, Task, Approval, Automated Step, End
  • Connect nodes with edges
  • Select and edit nodes
  • Delete nodes/edges (Delete/Backspace key)
  • Auto-validation of workflow constraints

• Node Configuration Forms

  • Start Node: Title, optional metadata (key-value pairs)
  • Task Node: Title (required), description, assignee, due date, custom fields
  • Approval Node: Title, approver role (dropdown), auto-approve threshold
  • Automated Step Node: Title, action selection (from API), dynamic action parameters
  • End Node: End message, summary flag (boolean)

• Mock API Integration

  • GET /api/automations - Returns available automated actions
  • POST /api/simulate - Simulates workflow execution with step-by-step results

• Workflow Testing/Sandbox Panel

  • Validates workflow structure before execution
  • Executes workflow simulation
  • Displays step-by-step execution log with timeline
  • Shows execution status for each step
  • Error reporting

Architecture

Project Structure

src/
├── components/
│   ├── nodes/              # Custom React Flow node components
│   │   ├── BaseNode.tsx
│   │   ├── StartNode.tsx
│   │   ├── TaskNode.tsx
│   │   ├── ApprovalNode.tsx
│   │   ├── AutomatedStepNode.tsx
│   │   └── EndNode.tsx
│   ├── forms/              # Node configuration forms
│   │   ├── NodeFormPanel.tsx
│   │   ├── StartNodeForm.tsx
│   │   ├── TaskNodeForm.tsx
│   │   ├── ApprovalNodeForm.tsx
│   │   ├── AutomatedStepNodeForm.tsx
│   │   └── EndNodeForm.tsx
│   ├── Sidebar.tsx         # Node palette sidebar
│   ├── WorkflowCanvas.tsx  # Main React Flow canvas
│   └── TestingPanel.tsx    # Workflow simulation panel
├── hooks/
│   └── useWorkflow.ts      # Main workflow state management hook
├── services/
│   └── api.ts              # API service layer
├── types/
│   └── workflow.ts         # TypeScript type definitions
├── utils/
│   ├── nodeFactory.ts      # Node creation factory
│   └── workflowValidation.ts # Workflow validation logic
├── App.tsx                 # Main application component
└── main.tsx                # Application entry point

Design Decisions

1. State Management

   • Custom useWorkflow hook centralizes all workflow state
   • Uses React Flow's built-in useNodesState and useEdgesState hooks
   • Form state managed locally with debounced updates to parent

2. Node Architecture

   • Base node component with type-specific styling
   • Each node type extends BaseNode for consistency
   • Node data stored in React Flow's node.data property

3. Form Handling

   • Dynamic forms based on node type
   • Debounced updates (300ms) to prevent excessive re-renders
   • Controlled components with proper TypeScript typing
   • Key-value pair management for metadata and custom fields

4. API Abstraction

   • Centralized API service (services/api.ts)
   • Axios for HTTP requests
   • Type-safe request/response handling

5. Validation

   • Separate validation utility (utils/workflowValidation.ts)
   • Validates structure (start/end nodes, connections, cycles)
   • Node-specific validation (required fields)
   • Returns structured error objects with severity levels

6. Testing/Simulation

   • Mock server with custom /simulate endpoint
   • BFS traversal of workflow graph
   • Simulates execution step by step
   • Returns detailed step-by-step execution log

Scalability Considerations

• Extensible Node Types: Easy to add new node types by:

  1. Adding type to NodeType enum
  2. Creating node component in components/nodes/
  3. Creating form component in components/forms/
  4. Updating nodeFactory.ts and nodeTypes mapping

• Modular Forms: Form components are self-contained and can be extended with additional fields

• Validation System: Validation errors are structured and can be extended with more complex rules

• API Layer: Service abstraction allows easy migration to real backend

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd HR_Workflow_Designer_Module

2. Install dependencies:

npm install

3. Start the mock API server (in one terminal):

npm run server

4. Start the development server (in another terminal):

npm run dev

5. Open your browser to http://localhost:3000

Building for Production

npm run build
npm run preview

Usage

1. Creating a Workflow

   • Drag nodes from the left sidebar onto the canvas
   • Connect nodes by dragging from a node's bottom handle to another node's top handle
   • Click on a node to edit its configuration in the right panel

2. Editing Nodes

   • Select a node to open its configuration form (right panel)
   • Forms auto-save as you type (debounced with 300ms delay)
   • Required fields are marked with *
   • Each node type has specific configuration fields

3. Testing Workflows

   • Click "Show Testing" button in the toolbar
   • Testing panel opens as a modal dialog
   • Click "Run Simulation" to test the workflow execution
   • View step-by-step execution log with timeline visualization
   • Check validation errors before running simulation

4. Validating Workflows

   • Click "Validate" button in the toolbar
   • Toast notifications show validation results
   • Errors are highlighted on nodes with red borders and error badges
   • Warnings are shown with orange borders and warning badges
   • Hover over error badges to see validation messages

5. Export/Import Workflows

   • Export: Click "Export" button to save workflow as JSON file
   • Import: Click "Import" button to load workflow from JSON file
   • Imported workflows replace current workflow (with confirmation)

6. Visual Feedback

   • Nodes with validation errors show red borders and error badges
   • Mini-map highlights error nodes in red, warnings in orange
   • Use zoom controls (bottom-left) to navigate large workflows
   • Mini-map (bottom-right) provides overview and quick navigation

Technology Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• React Flow - Workflow canvas library
• React Icons - Icon library (Material Design icons)
• Axios - HTTP client
• JSON Server - Mock API server
• UUID - Unique ID generation

Completed Features

✅ All core functional requirements ✅ Custom React Flow nodes (5 types) ✅ Node configuration forms with dynamic fields ✅ Mock API integration ✅ Workflow testing/sandbox panel (Modal view) ✅ Workflow validation with visual error indicators ✅ Drag-and-drop from sidebar ✅ Node/edge deletion ✅ Export/Import workflow as JSON ✅ Mini-map with validation error highlighting ✅ Enhanced zoom controls ✅ Visual validation errors on nodes (error badges and colored borders) ✅ Toast notifications for user feedback ✅ Common toast component with configurable duration ✅ Clean architecture and folder structure ✅ TypeScript throughout ✅ Responsive UI with modern styling

Recent Enhancements Added

Export/Import Workflow

• Export: Click "Export" button to download workflow as JSON file
• Import: Click "Import" button to load workflow from JSON file
• File format includes version and export timestamp
• Validates imported workflow structure before loading

Visual Validation Errors

• Error Badges: Nodes with errors show red error badge in top-right corner
• Warning Badges: Nodes with warnings show orange warning badge
• Colored Borders: Error nodes have red border, warnings have orange border
• Tooltips: Hover over error badge to see validation messages
• Mini-map Integration: Mini-map highlights nodes with errors in red/orange

Enhanced Mini-map & Zoom Controls

• Mini-map: Bottom-right corner with validation error color coding
• Zoom Controls: Bottom-left with zoom in/out and fit view buttons
• Interactive Mini-map: Pan and zoom from mini-map view
• Custom Styling: Modern styling with border and background

Toast Notifications

• Common Component: ToastProvider component with configurable duration
• Error Toasts: Red toasts for errors
• Success Toasts: Green toasts for success
• Warning Toasts: Yellow toasts with warning icon
• Custom Styling: Consistent styling across all toast types
• React Icons: Uses Material Design icons from react-icons library

Testing Panel as Modal

• Modal View: Testing panel opens as centered modal with overlay
• Click Outside to Close: Click overlay to close modal
• Animation: Smooth fade-in and slide-up animations
• Scrollable Content: Long execution logs scroll within modal
• Better UX: More prominent and focused testing experience

Future Enhancements (Not Implemented)

If given more time, I would add:

• Node Templates: Pre-configured node templates
• Undo/Redo: History management for workflow edits
• Auto-layout: Automatic node positioning algorithms
• Node Version History: Track changes to nodes over time
• Workflow Library: Save and reuse common workflow patterns
• Real-time Collaboration: Multiple users editing simultaneously
• Advanced Validation: More complex business rule validation
• Performance Metrics: Track workflow execution times
• Conditional Branching: Support for decision nodes with conditions

Assumptions

1. No Authentication: As specified, no user authentication is required
2. No Persistence: Workflows are not saved to a backend (only in-memory)
3. Mock Data: All API responses are mocked for demonstration
4. Single Workflow: One workflow at a time (can be extended to multiple)
5. Linear Execution: Workflow simulation follows a linear path (no parallel execution)
6. Browser Support: Modern browsers with ES6+ support

Known Limitations

1. Workflow simulation is simplified (doesn't handle complex branching logic)
2. No support for conditional edges (if/else logic)
3. No parallel node execution in simulation
4. Form validation is basic (could be enhanced with schema validation)
5. No workflow templates or examples

License

This is a prototype/demo project for assessment purposes.