Workflow Customizer

A Next.js application for visualizing and customizing workflow process data. This tool allows you to configure workflow stages, routing rules, and approval processes in an intuitive interface.

Features

• Workflow Visualization: View all workflow stages and routing rules in a clean, organized interface
• Stage Management:
  • Drag and drop to reorder stages
  • Edit stage properties (name, description, SLA)
  • Configure available actions (submit, approve, reject, sendback)
  • Set notification recipients for each action
  • Add new stages to the workflow
• Routing Rules:
  • View and edit conditional routing rules
  • Configure trigger stages and conditions
  • Set target stages for routing actions
  • Add new routing rules
• Data Export: Export modified workflows as JSON files
• Multiple Workflows: Switch between different workflow configurations

Getting Started

Prerequisites

• Node.js 18.17 or later
• npm or yarn

Installation

1. Navigate to the project directory:

   cd workflow-customizer

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

Usage

The application provides a comprehensive workflow management system with multiple views:

1. Workflow List (Home Page)

The main page at / displays all available workflows in a professional table layout:

Features:

• Statistics Dashboard: View total workflows, active, draft, and inactive counts
• Search Functionality: Search workflows by name, ID, or description
• Filter Options: Filter by workflow type and status
• Workflow Table: Displays key information for each workflow:
  • Workflow name and description
  • Type and status (with color-coded badges)
  • Number of stages and routing rules
  • Last modified date
• Actions:
  • Click on a workflow name to view details
  • Duplicate workflows with one click
  • Delete workflows (with confirmation)
  • Create new workflows with the "New Workflow" button

2. Workflow Detail View

Click on any workflow in the list to access the detailed management interface at /workflow/[id]. This provides a professional interface similar to enterprise workflow management systems:

1. Header Section:

   • Workflow title with status badge (Active/Inactive)
   • Workflow ID and type information
   • Action buttons: Edit, Duplicate, Delete, and Back

2. Navigation Tabs:

   • General: Workflow-wide settings
   • Stages: Stage configuration (default view)
   • Routing: Routing rules management
   • Products: Product-specific configurations

3. Stages Tab (Two-Panel Layout):

   • Left Panel: List of all workflow stages (draggable to reorder)
   • Right Panel: Detailed settings for the selected stage
     • General, Notifications, and Assigned Users tabs
     • Stage name and description
     • SLA configuration
     • Available actions (Submit, Approve, Reject, Send Back)
     • Hidden fields configuration

Reordering Stages

You can customize the workflow route by reordering stages using drag and drop:

1. Click and hold the numbered circle badge on any stage card
2. Drag the stage to a new position in the workflow
3. Release to drop the stage in its new position
4. The stage numbers will automatically update to reflect the new order
5. A visual overlay shows which stage you're dragging

Editing Stages

1. Click the "Edit" button on any stage card
2. Modify the stage properties:
   • Name: The stage identifier
   • Description: Additional context about the stage
   • SLA: Service level agreement time
   • SLA Unit: Time unit (hours, days, minutes)
3. Configure available actions:
   • Toggle each action (submit, approve, reject, sendback)
   • Set notification recipients for each action
4. Click "Save Changes"

Editing Routing Rules

1. Click the "Edit" button on any routing rule card
2. Modify the rule properties:
   • Name: Rule identifier
   • Description: Rule purpose
   • Trigger Stage: Which stage triggers this rule
   • Condition: Field, operator, and value for the condition
   • Action: Type and target stage
3. Click "Save Changes"

Adding New Elements

• New Stage: Click "+ Add Stage" button above the stages list
• New Routing Rule: Click "+ Add Rule" button above the routing rules list

Exporting Data

1. Make your desired changes to the workflow
2. Click the "Export JSON" button in the header
3. A JSON file will be downloaded with your modifications

Project Structure

workflow-customizer/
├── app/
│   ├── page.tsx              # Workflow list page (home)
│   ├── workflow/
│   │   └── [id]/
│   │       └── page.tsx      # Dynamic workflow detail page
│   └── layout.tsx            # Root layout
├── components/
│   ├── WorkflowTable.tsx     # Workflow list table component
│   ├── WorkflowSelector.tsx  # Workflow dropdown selector (legacy)
│   ├── StageCard.tsx         # Stage display card (legacy)
│   ├── StageEditor.tsx       # Stage editing modal (legacy)
│   ├── StageList.tsx         # Stage list sidebar (for detail view)
│   ├── StageDetailPanel.tsx  # Stage detail panel (for detail view)
│   ├── RoutingRuleCard.tsx   # Routing rule display card (legacy)
│   └── RoutingRuleEditor.tsx # Routing rule editing modal (legacy)
├── types/
│   ├── workflow.ts           # Workflow data type definitions
│   └── workflow-list.ts      # Workflow list item type definitions
├── lib/
│   └── workflow-loader.ts    # Workflow data loading utilities
└── public/
    └── mockdata/             # Sample workflow JSON files
        ├── workflow_01.json
        ├── workflow_02.json
        └── workflow_03.json

Data Structure

Workflow Schema

interface Workflow {
  document_reference_pattern: string;
  stages: Stage[];
  routing_rules: RoutingRule[];
  notifications: any[];
  notification_templates: any[];
  products: any[];
}

Stage Schema

interface Stage {
  name: string;
  description: string;
  sla: string;
  sla_unit: string;
  available_actions: AvailableActions;
  hide_fields: HideFields;
  assigned_users: string[];
  is_hod?: boolean;
}

Routing Rule Schema

interface RoutingRule {
  name: string;
  description: string;
  trigger_stage: string;
  condition: {
    field: string;
    operator: 'eq' | 'lt' | 'gt' | 'lte' | 'gte' | 'ne';
    value: string;
  };
  action: {
    type: 'NEXT_STAGE' | 'SKIP_STAGE' | 'NOTIFY';
    parameters: {
      target_stage?: string;
    };
  };
}

Technologies Used

• Next.js 15: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first styling
• React Hooks: State and effect management
• @dnd-kit: Modern drag and drop toolkit for React

Development

Build for Production

npm run build

Start Production Server

npm start

Linting

npm run lint

License

This project is created for Carmen Software workflow customization purposes.