From 0abb905477937742677d85bf9f9d0911ef8993e1 Mon Sep 17 00:00:00 2001
From: Afiq <mdafiqiskandar@gmail.com>
Date: Tue, 20 May 2025 12:37:57 +0800
Subject: [PATCH] Add Business Rule Node Configuration and Modals

- Introduced BusinessRuleNodeConfiguration and BusinessRuleNodeConfigurationModal components for configuring business rules within the process builder.
- Enhanced ProcessBuilderComponents to include the new Business Rule node type with default properties.
- Implemented BusinessRuleNode in ProcessFlowNodes for rendering business rule nodes with relevant details.
- Updated the process builder to support business rule configurations, allowing users to define conditions and actions visually.
- Improved overall user experience by refining the UI for business rule management and enhancing variable handling in the process builder.
---
 .../process-flow/ApiNodeConfiguration.vue     |   2 +-
 .../ApiNodeConfigurationModal.vue             |  72 ++
 .../BusinessRuleNodeConfiguration.vue         | 726 ++++++++++++++++++
 .../BusinessRuleNodeConfigurationModal.vue    |  78 ++
 .../process-flow/FormNodeConfiguration.vue    |   2 +-
 .../FormNodeConfigurationModal.vue            |  72 ++
 .../GatewayConditionManagerModal.vue          |  77 ++
 .../process-flow/ProcessBuilderComponents.vue |  16 +
 components/process-flow/ProcessFlowNodes.js   |  79 ++
 pages/process-builder/index.vue               |  97 ++-
 10 files changed, 1204 insertions(+), 17 deletions(-)
 create mode 100644 components/process-flow/ApiNodeConfigurationModal.vue
 create mode 100644 components/process-flow/BusinessRuleNodeConfiguration.vue
 create mode 100644 components/process-flow/BusinessRuleNodeConfigurationModal.vue
 create mode 100644 components/process-flow/FormNodeConfigurationModal.vue
 create mode 100644 components/process-flow/GatewayConditionManagerModal.vue

diff --git a/components/process-flow/ApiNodeConfiguration.vue b/components/process-flow/ApiNodeConfiguration.vue
index 01f8d1c..c805a99 100644
--- a/components/process-flow/ApiNodeConfiguration.vue
+++ b/components/process-flow/ApiNodeConfiguration.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="api-node-configuration">
-    <h3 class="text-lg font-semibold mb-4">API Call Configuration</h3>
+    <!-- <h3 class="text-lg font-semibold mb-4">API Call Configuration</h3> -->
     
     <!-- <div class="form-group mb-4">
       <label for="nodeLabel" class="form-label">Node Label</label>
diff --git a/components/process-flow/ApiNodeConfigurationModal.vue b/components/process-flow/ApiNodeConfigurationModal.vue
new file mode 100644
index 0000000..12209ac
--- /dev/null
+++ b/components/process-flow/ApiNodeConfigurationModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <RsModal
+    v-model="showModal"
+    title="API Call Configuration"
+    size="lg"
+    position="center"
+    :okCallback="saveAndClose"
+    okTitle="Save"
+    :cancelCallback="closeModal"
+  >
+    <template #body>
+      <ApiNodeConfiguration 
+        :nodeData="nodeData" 
+        :availableVariables="availableVariables"
+        @update="handleUpdate"
+      />
+    </template>
+  </RsModal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import ApiNodeConfiguration from './ApiNodeConfiguration.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  nodeData: {
+    type: Object,
+    required: true
+  },
+  availableVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update']);
+
+const showModal = ref(props.modelValue);
+const localNodeData = ref({ ...props.nodeData });
+
+// Watch for changes to modelValue prop to sync modal visibility
+watch(() => props.modelValue, (value) => {
+  showModal.value = value;
+});
+
+// Watch for changes to showModal to emit update:modelValue
+watch(() => showModal.value, (value) => {
+  emit('update:modelValue', value);
+});
+
+// Watch for changes to nodeData prop
+watch(() => props.nodeData, (value) => {
+  localNodeData.value = { ...value };
+}, { deep: true });
+
+function handleUpdate(updatedData) {
+  localNodeData.value = { ...updatedData };
+}
+
+function saveAndClose() {
+  emit('update', localNodeData.value);
+  showModal.value = false;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
+</script> 
\ No newline at end of file
diff --git a/components/process-flow/BusinessRuleNodeConfiguration.vue b/components/process-flow/BusinessRuleNodeConfiguration.vue
new file mode 100644
index 0000000..2cd4e64
--- /dev/null
+++ b/components/process-flow/BusinessRuleNodeConfiguration.vue
@@ -0,0 +1,726 @@
+<template>
+  <div class="business-rule-node-configuration">
+    <h3 class="text-lg font-semibold mb-4">Business Rule Configuration</h3>
+    
+    <div class="form-group mb-4">
+      <label for="nodeLabel" class="form-label">Rule Name</label>
+      <input
+        id="nodeLabel"
+        v-model="localNodeData.label"
+        type="text"
+        class="form-control"
+        placeholder="Rule Name"
+        @blur="saveChanges"
+      />
+    </div>
+    
+    <div class="form-group mb-4">
+      <label for="nodeDescription" class="form-label">Description</label>
+      <textarea
+        id="nodeDescription"
+        v-model="localNodeData.description"
+        class="form-control"
+        placeholder="Rule description"
+        rows="2"
+        @blur="saveChanges"
+      ></textarea>
+    </div>
+    
+    <!-- Rule Groups (IF-THEN Rules) -->
+    <div class="my-6">
+      <div class="flex justify-between items-center mb-3">
+        <h4 class="text-base font-medium">Business Rules</h4>
+        <button 
+          @click="addRuleGroup" 
+          class="btn-sm btn-primary flex items-center"
+        >
+          <i class="material-icons text-sm mr-1">add</i> Add Rule
+        </button>
+      </div>
+      
+      <div v-if="!localNodeData.ruleGroups || localNodeData.ruleGroups.length === 0" 
+           class="py-3 text-center text-gray-500 border border-dashed rounded-md">
+        No business rules defined. Click "Add Rule" to create your first rule.
+      </div>
+      
+      <div v-else class="space-y-6">
+        <!-- Each rule group is an if-then rule -->
+        <div 
+          v-for="(ruleGroup, groupIndex) in localNodeData.ruleGroups" 
+          :key="groupIndex"
+          class="rule-group border rounded-md overflow-hidden bg-white shadow-sm"
+        >
+          <!-- Rule header -->
+          <div class="rule-header bg-purple-50 px-4 py-2 flex justify-between items-center border-b">
+            <h5 class="font-medium">
+              <span class="text-purple-600">Rule {{ groupIndex + 1 }}:</span> 
+              {{ ruleGroup.name || 'Unnamed Rule' }}
+            </h5>
+            <div class="flex items-center space-x-2">
+              <input
+                v-model="ruleGroup.name"
+                type="text"
+                class="form-control h-8 text-sm"
+                placeholder="Rule name"
+                @blur="saveChanges"
+              />
+              <button 
+                @click="removeRuleGroup(groupIndex)" 
+                class="text-red-500 hover:text-red-700"
+                title="Remove rule"
+              >
+                <i class="material-icons">delete</i>
+              </button>
+            </div>
+          </div>
+          
+          <!-- IF section -->
+          <div class="if-section p-4 bg-gray-50 border-b">
+            <div class="flex justify-between items-center mb-2">
+              <h6 class="font-medium text-gray-700">IF</h6>
+              <button 
+                @click="addCondition(groupIndex)" 
+                class="btn-xs btn-secondary flex items-center"
+              >
+                <i class="material-icons text-xs mr-1">add</i> Add Condition
+              </button>
+            </div>
+            
+            <div v-if="!ruleGroup.conditions || ruleGroup.conditions.length === 0" 
+                class="py-2 text-center text-gray-500 text-sm border border-dashed rounded-md">
+              No conditions defined. Add a condition to specify when this rule applies.
+            </div>
+            
+            <div v-else>
+              <table class="w-full border-collapse">
+                <thead class="bg-white">
+                  <tr>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variable</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operator</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
+                    <th class="px-3 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-16">Actions</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white">
+                  <tr v-for="(condition, condIndex) in ruleGroup.conditions" :key="condIndex" class="border-t">
+                    <td class="px-3 py-2">
+                      <select
+                        v-model="condition.variable"
+                        class="form-control"
+                        @change="saveChanges"
+                      >
+                        <option value="" disabled>Select variable</option>
+                        <option
+                          v-for="variable in availableVariables"
+                          :key="variable.name"
+                          :value="variable.name"
+                        >
+                          {{ variable.label }}
+                        </option>
+                      </select>
+                    </td>
+                    <td class="px-3 py-2">
+                      <select
+                        v-model="condition.operator"
+                        class="form-control"
+                        @change="updateConditionOperator(groupIndex, condIndex)"
+                      >
+                        <option value="" disabled>Select operator</option>
+                        <option
+                          v-for="op in getOperatorsForType(
+                            availableVariables.find(v => v.name === condition.variable)?.type
+                          )"
+                          :key="op.value"
+                          :value="op.value"
+                        >
+                          {{ op.label }}
+                        </option>
+                      </select>
+                    </td>
+                    <td class="px-3 py-2">
+                      <template v-if="getInputType(
+                        availableVariables.find(v => v.name === condition.variable)?.type,
+                        condition.operator
+                      ) !== 'none'">
+                        <input
+                          v-model="condition.value"
+                          :type="getInputType(
+                            availableVariables.find(v => v.name === condition.variable)?.type,
+                            condition.operator
+                          )"
+                          class="form-control"
+                          :placeholder="condition.operator?.includes('n_days') ? 'Number of days' : 'Value'"
+                          @blur="saveChanges"
+                        />
+                      </template>
+                      <span v-else class="text-gray-400 text-sm italic">N/A</span>
+                    </td>
+                    <td class="px-3 py-2 text-center">
+                      <button 
+                        @click="removeCondition(groupIndex, condIndex)" 
+                        class="text-red-500 hover:text-red-700"
+                        title="Remove condition"
+                      >
+                        <i class="material-icons text-sm">delete</i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              
+              <div class="text-sm text-gray-500 mt-2">
+                <span class="font-medium">Condition Type:</span>
+                <label class="inline-flex items-center ml-2">
+                  <input type="radio" v-model="ruleGroup.conditionType" value="all" class="form-radio" @change="saveChanges" />
+                  <span class="ml-1">Match All (AND)</span>
+                </label>
+                <label class="inline-flex items-center ml-2">
+                  <input type="radio" v-model="ruleGroup.conditionType" value="any" class="form-radio" @change="saveChanges" />
+                  <span class="ml-1">Match Any (OR)</span>
+                </label>
+              </div>
+            </div>
+          </div>
+          
+          <!-- THEN section -->
+          <div class="then-section p-4">
+            <div class="flex justify-between items-center mb-2">
+              <h6 class="font-medium text-gray-700">THEN</h6>
+              <button 
+                @click="addAction(groupIndex)" 
+                class="btn-xs btn-secondary flex items-center"
+              >
+                <i class="material-icons text-xs mr-1">add</i> Add Action
+              </button>
+            </div>
+            
+            <div v-if="!ruleGroup.actions || ruleGroup.actions.length === 0" 
+                class="py-2 text-center text-gray-500 text-sm border border-dashed rounded-md">
+              No actions defined. Add an action to specify what happens when conditions are met.
+            </div>
+            
+            <div v-else>
+              <table class="w-full border-collapse">
+                <thead class="bg-white">
+                  <tr>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action Type</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Configuration</th>
+                    <th class="px-3 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-16">Actions</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white">
+                  <tr v-for="(action, actionIndex) in ruleGroup.actions" :key="actionIndex" class="border-t">
+                    <td class="px-3 py-2">
+                      <select
+                        v-model="action.type"
+                        class="form-control"
+                        @change="updateActionType(groupIndex, actionIndex)"
+                      >
+                        <option value="set_variable">Set Variable</option>
+                        <option value="calculate">Calculate Value</option>
+                        <option value="increment">Increment Variable</option>
+                        <option value="decrement">Decrement Variable</option>
+                      </select>
+                    </td>
+                    <td class="px-3 py-2">
+                      <select
+                        v-model="action.variable"
+                        class="form-control"
+                        @change="saveChanges"
+                      >
+                        <option value="" disabled>Target variable</option>
+                        <option
+                          v-for="variable in availableVariables"
+                          :key="variable.name"
+                          :value="variable.name"
+                        >
+                          {{ variable.label }}
+                        </option>
+                      </select>
+                    </td>
+                    <td class="px-3 py-2">
+                      <div v-if="action.type === 'set_variable'">
+                        <input
+                          v-model="action.value"
+                          type="text"
+                          class="form-control"
+                          placeholder="Value"
+                          @blur="saveChanges"
+                        />
+                      </div>
+                      <div v-else-if="action.type === 'calculate'" class="flex items-center space-x-2">
+                        <select
+                          v-model="action.operator"
+                          class="form-control w-24"
+                          @change="saveChanges"
+                        >
+                          <option value="add">+</option>
+                          <option value="subtract">-</option>
+                          <option value="multiply">×</option>
+                          <option value="divide">÷</option>
+                        </select>
+                        
+                        <input
+                          v-model="action.value"
+                          type="text"
+                          class="form-control"
+                          placeholder="Value"
+                          @blur="saveChanges"
+                        />
+                      </div>
+                      <div v-else>
+                        <span class="text-gray-400 text-sm italic">
+                          {{ action.type === 'increment' ? 'Will increase by 1' : 'Will decrease by 1' }}
+                        </span>
+                      </div>
+                    </td>
+                    <td class="px-3 py-2 text-center">
+                      <button 
+                        @click="removeAction(groupIndex, actionIndex)" 
+                        class="text-red-500 hover:text-red-700"
+                        title="Remove action"
+                      >
+                        <i class="material-icons text-sm">delete</i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Additional Settings -->
+    <!-- <div class="border-t border-gray-200 my-4 pt-4">
+      <h4 class="text-base font-medium mb-2"></h4>
+      
+      <div class="form-group mb-4">
+        <label class="form-label">Rule Priority</label>
+        <select
+          v-model="localNodeData.priority"
+          class="form-control"
+          @change="saveChanges"
+        >
+          <option value="high">High</option>
+          <option value="medium">Medium</option>
+          <option value="low">Low</option>
+        </select>
+        <small class="text-gray-500 text-xs mt-1 block">
+          Defines the execution priority of this rule when multiple rules are present.
+        </small>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useVariableStore } from '~/stores/variableStore';
+import { DateTime } from 'luxon';
+
+const props = defineProps({
+  nodeId: {
+    type: String,
+    required: true
+  },
+  nodeData: {
+    type: Object,
+    default: () => ({})
+  },
+  availableVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update', 'close']);
+
+// Get the variable store for variables
+const variableStore = useVariableStore();
+
+// Create a local copy of the node data for editing
+const localNodeData = ref({
+  label: '',
+  description: '',
+  ruleGroups: [],
+  priority: 'medium',
+  ...props.nodeData
+});
+
+// Get available variables for conditions and actions
+const availableVariables = computed(() => {
+  const processVars = variableStore.getAllVariables.process.map(v => ({
+    name: v.name || 'unnamed',
+    label: v?.description
+      ? `${v.description} (${v.name || 'unnamed'}, process)`
+      : `${v.name || 'unnamed'} (process)`,
+    type: v.type || 'string',
+    scope: 'process'
+  }));
+  
+  const globalVars = variableStore.getAllVariables.global.map(v => ({
+    name: v.name || 'unnamed',
+    label: v?.description
+      ? `${v.description} (${v.name || 'unnamed'}, global)`
+      : `${v.name || 'unnamed'} (global)`,
+    type: v.type || 'string',
+    scope: 'global'
+  }));
+  
+  return [...processVars, ...globalVars];
+});
+
+// Initialize with default values if needed
+onMounted(() => {
+  // If we have old-style conditions/actions, migrate them to the new format
+  if (Array.isArray(localNodeData.value.conditions) && localNodeData.value.conditions.length > 0) {
+    migrateOldFormat();
+  } else if (!localNodeData.value.ruleGroups) {
+    localNodeData.value.ruleGroups = [];
+  }
+  
+  if (!localNodeData.value.priority) {
+    localNodeData.value.priority = 'medium';
+  }
+  
+  saveChanges();
+});
+
+// Migrate old format to new format
+const migrateOldFormat = () => {
+  // Convert old format (separate conditions and actions) to new format (rule groups)
+  const defaultRuleGroup = {
+    name: 'Rule 1',
+    conditions: localNodeData.value.conditions || [],
+    actions: localNodeData.value.actions || [],
+    conditionType: 'all' // Default to "AND" logic
+  };
+  
+  localNodeData.value.ruleGroups = [defaultRuleGroup];
+  
+  // Remove old properties
+  delete localNodeData.value.conditions;
+  delete localNodeData.value.actions;
+};
+
+// Watch for changes from parent
+watch(() => props.nodeData, (newData) => {
+  if (newData) {
+    // Initialize with the passed data
+    localNodeData.value = {
+      label: '',
+      description: '',
+      ruleGroups: [],
+      priority: 'medium',
+      ...newData
+    };
+    
+    // Check if we need to migrate
+    if (Array.isArray(localNodeData.value.conditions) && !Array.isArray(localNodeData.value.ruleGroups)) {
+      migrateOldFormat();
+    }
+  }
+}, { deep: true });
+
+// Save changes to the node
+const saveChanges = () => {
+  emit('update', localNodeData.value);
+};
+
+// Rule group operations
+const addRuleGroup = () => {
+  localNodeData.value.ruleGroups.push({
+    name: `Rule ${localNodeData.value.ruleGroups.length + 1}`,
+    conditions: [],
+    actions: [],
+    conditionType: 'all'
+  });
+  saveChanges();
+};
+
+const removeRuleGroup = (groupIndex) => {
+  localNodeData.value.ruleGroups.splice(groupIndex, 1);
+  saveChanges();
+};
+
+// Condition operations
+const addCondition = (groupIndex) => {
+  localNodeData.value.ruleGroups[groupIndex].conditions.push({
+    variable: '',
+    operator: 'eq',
+    value: ''
+  });
+  saveChanges();
+};
+
+const removeCondition = (groupIndex, conditionIndex) => {
+  localNodeData.value.ruleGroups[groupIndex].conditions.splice(conditionIndex, 1);
+  saveChanges();
+};
+
+// Action operations
+const addAction = (groupIndex) => {
+  localNodeData.value.ruleGroups[groupIndex].actions.push({
+    type: 'set_variable',
+    variable: '',
+    value: ''
+  });
+  saveChanges();
+};
+
+const removeAction = (groupIndex, actionIndex) => {
+  localNodeData.value.ruleGroups[groupIndex].actions.splice(actionIndex, 1);
+  saveChanges();
+};
+
+// Update action properties based on type
+const updateActionType = (groupIndex, actionIndex) => {
+  const action = localNodeData.value.ruleGroups[groupIndex].actions[actionIndex];
+  
+  // Reset properties for the action type
+  if (action.type === 'set_variable') {
+    action.variable = action.variable || '';
+    action.value = action.value || '';
+    delete action.operator;
+  } else if (action.type === 'calculate') {
+    action.variable = action.variable || '';
+    action.operator = action.operator || 'add';
+    action.value = action.value || '';
+  } else if (['increment', 'decrement'].includes(action.type)) {
+    action.variable = action.variable || '';
+    delete action.value;
+    delete action.operator;
+  }
+  
+  saveChanges();
+};
+
+// Get operators based on variable type
+const getOperatorsForType = (type) => {
+  switch (type?.toLowerCase()) {
+    case 'number':
+    case 'int':
+    case 'decimal':
+      return [
+        { value: 'eq', label: '= (Equal to)' },
+        { value: 'neq', label: '≠ (Not equal to)' },
+        { value: 'gt', label: '> (Greater than)' },
+        { value: 'gte', label: '≥ (Greater than or equal)' },
+        { value: 'lt', label: '< (Less than)' },
+        { value: 'lte', label: '≤ (Less than or equal)' }
+      ];
+    case 'string':
+      return [
+        { value: 'eq', label: '= (Equal to)' },
+        { value: 'neq', label: '≠ (Not equal to)' },
+        { value: 'contains', label: 'Contains' },
+        { value: 'not_contains', label: 'Does not contain' },
+        { value: 'starts_with', label: 'Starts with' },
+        { value: 'ends_with', label: 'Ends with' },
+        { value: 'is_empty', label: 'Is empty' },
+        { value: 'is_not_empty', label: 'Is not empty' }
+      ];
+    case 'datetime':
+    case 'date':
+      return [
+        { value: 'eq', label: '= (Equal to)' },
+        { value: 'neq', label: '≠ (Not equal to)' },
+        { value: 'gt', label: '> (After)' },
+        { value: 'gte', label: '≥ (On or after)' },
+        { value: 'lt', label: '< (Before)' },
+        { value: 'lte', label: '≤ (On or before)' },
+        { value: 'is_today', label: 'Is today' },
+        { value: 'is_future', label: 'Is in the future' },
+        { value: 'is_past', label: 'Is in the past' },
+        { value: 'last_n_days', label: 'In the last N days' },
+        { value: 'next_n_days', label: 'In the next N days' }
+      ];
+    case 'boolean':
+      return [
+        { value: 'is_true', label: 'Is true' },
+        { value: 'is_false', label: 'Is false' }
+      ];
+    case 'object':
+      return [
+        { value: 'eq', label: '= (Equal to)' },
+        { value: 'neq', label: '≠ (Not equal to)' },
+        { value: 'contains_key', label: 'Contains key' },
+        { value: 'not_contains_key', label: 'Does not contain key' },
+        { value: 'is_empty', label: 'Is empty' },
+        { value: 'is_not_empty', label: 'Is not empty' }
+      ];
+    default:
+      return [
+        { value: 'eq', label: '= (Equal to)' },
+        { value: 'neq', label: '≠ (Not equal to)' },
+        { value: 'is_empty', label: 'Is empty' },
+        { value: 'is_not_empty', label: 'Is not empty' }
+      ];
+  }
+};
+
+// Get input type based on variable type and operator
+const getInputType = (varType, operator) => {
+  // Special operators that don't need value input
+  const noValueOperators = [
+    'is_empty', 'is_not_empty', 'is_true', 'is_false',
+    'is_today', 'is_future', 'is_past'
+  ];
+  
+  if (noValueOperators.includes(operator)) {
+    return 'none';
+  }
+
+  switch (varType?.toLowerCase()) {
+    case 'number':
+    case 'int':
+    case 'decimal':
+      return 'number';
+    case 'datetime':
+      return 'datetime-local';
+    case 'date':
+      return 'date';
+    case 'boolean':
+      return 'checkbox';
+    case 'object':
+      return 'text'; // For JSON input
+    default:
+      return 'text';
+  }
+};
+
+// Format value based on type for display/comparison
+const formatValue = (value, type, operator) => {
+  if (value === null || value === undefined) return '';
+  
+  switch (type?.toLowerCase()) {
+    case 'datetime':
+    case 'date':
+      try {
+        const dt = DateTime.fromISO(value);
+        return type === 'datetime' ? dt.toISO() : dt.toISODate();
+      } catch {
+        return value;
+      }
+    case 'number':
+    case 'int':
+    case 'decimal':
+      return Number(value);
+    case 'boolean':
+      return Boolean(value);
+    case 'object':
+      try {
+        return typeof value === 'string' ? value : JSON.stringify(value);
+      } catch {
+        return String(value);
+      }
+    default:
+      return String(value);
+  }
+};
+
+// Parse value from input based on type
+const parseValue = (value, type) => {
+  if (value === null || value === undefined) return null;
+  
+  switch (type?.toLowerCase()) {
+    case 'datetime':
+    case 'date':
+      try {
+        const dt = DateTime.fromISO(value);
+        return type === 'datetime' ? dt.toISO() : dt.toISODate();
+      } catch {
+        return value;
+      }
+    case 'number':
+    case 'int':
+      return parseInt(value);
+    case 'decimal':
+      return parseFloat(value);
+    case 'boolean':
+      return Boolean(value);
+    case 'object':
+      try {
+        return JSON.parse(value);
+      } catch {
+        return value;
+      }
+    default:
+      return value;
+  }
+};
+
+// Add new methods for handling condition updates
+const updateConditionOperator = (groupIndex, condIndex) => {
+  const condition = localNodeData.value.ruleGroups[groupIndex].conditions[condIndex];
+  const varType = availableVariables.value.find(v => v.name === condition.variable)?.type;
+  
+  // Reset value if operator doesn't need it
+  if (getInputType(varType, condition.operator) === 'none') {
+    condition.value = null;
+  }
+  
+  saveChanges();
+};
+</script>
+
+<style scoped>
+.form-label {
+  @apply block text-sm font-medium text-gray-700 mb-1;
+}
+
+.form-control {
+  @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
+}
+
+.form-checkbox {
+  @apply h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded;
+}
+
+.form-radio {
+  @apply h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300;
+}
+
+.btn-sm {
+  @apply px-2 py-1 text-xs font-medium rounded-md;
+}
+
+.btn-xs {
+  @apply px-1.5 py-0.5 text-xs font-medium rounded;
+}
+
+.btn-primary {
+  @apply px-4 py-2 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
+}
+
+.btn-secondary {
+  @apply px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500;
+}
+
+table {
+  @apply border rounded-md shadow-sm;
+}
+
+th {
+  @apply font-medium text-xs text-gray-600 bg-gray-50 py-2 px-3;
+}
+
+tbody tr {
+  @apply hover:bg-gray-50;
+}
+
+td {
+  @apply border-t border-gray-200 py-2 px-3;
+}
+
+.rule-group {
+  @apply transition-all duration-200 relative;
+}
+
+.rule-group:hover {
+  @apply shadow-md;
+}
+</style> 
\ No newline at end of file
diff --git a/components/process-flow/BusinessRuleNodeConfigurationModal.vue b/components/process-flow/BusinessRuleNodeConfigurationModal.vue
new file mode 100644
index 0000000..8005f56
--- /dev/null
+++ b/components/process-flow/BusinessRuleNodeConfigurationModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <RsModal
+    v-model="showModal"
+    title="Business Rule Configuration"
+    size="lg"
+    position="center"
+    :okCallback="saveAndClose"
+    okTitle="Save"
+    :cancelCallback="closeModal"
+  >
+    <template #body>
+      <BusinessRuleNodeConfiguration
+        :nodeId="nodeId"
+        :nodeData="nodeData"
+        :availableVariables="availableVariables"
+        @update="handleUpdate"
+        @close="closeModal"
+      />
+    </template>
+  </RsModal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import BusinessRuleNodeConfiguration from './BusinessRuleNodeConfiguration.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  nodeId: {
+    type: String,
+    required: true
+  },
+  nodeData: {
+    type: Object,
+    default: () => ({})
+  },
+  availableVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update']);
+
+const showModal = ref(props.modelValue);
+const localNodeData = ref({ ...props.nodeData });
+
+// Watch for changes to modelValue prop to sync modal visibility
+watch(() => props.modelValue, (value) => {
+  showModal.value = value;
+});
+
+// Watch for changes to showModal to emit update:modelValue
+watch(() => showModal.value, (value) => {
+  emit('update:modelValue', value);
+});
+
+// Watch for changes to nodeData prop
+watch(() => props.nodeData, (value) => {
+  localNodeData.value = { ...value };
+}, { deep: true });
+
+function handleUpdate(updatedData) {
+  localNodeData.value = { ...updatedData };
+}
+
+function saveAndClose() {
+  emit('update', localNodeData.value);
+  showModal.value = false;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
+</script> 
\ No newline at end of file
diff --git a/components/process-flow/FormNodeConfiguration.vue b/components/process-flow/FormNodeConfiguration.vue
index 8c51f4f..a30d4e2 100644
--- a/components/process-flow/FormNodeConfiguration.vue
+++ b/components/process-flow/FormNodeConfiguration.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-node-configuration">
-    <h3 class="text-lg font-semibold mb-4">Form Task Configuration</h3>
+    <!-- <h3 class="text-lg font-semibold mb-4">Form Task Configuration</h3> -->
     
     <!-- <div class="form-group mb-4">
       <label for="nodeLabel" class="form-label">Node Label</label>
diff --git a/components/process-flow/FormNodeConfigurationModal.vue b/components/process-flow/FormNodeConfigurationModal.vue
new file mode 100644
index 0000000..a6b993c
--- /dev/null
+++ b/components/process-flow/FormNodeConfigurationModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <RsModal
+    v-model="showModal"
+    title="Form Task Configuration"
+    size="lg"
+    position="center"
+    :okCallback="saveAndClose"
+    okTitle="Save"
+    :cancelCallback="closeModal"
+  >
+    <template #body>
+      <FormNodeConfiguration 
+        :nodeData="nodeData" 
+        :availableVariables="availableVariables"
+        @update="handleUpdate"
+      />
+    </template>
+  </RsModal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import FormNodeConfiguration from './FormNodeConfiguration.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  nodeData: {
+    type: Object,
+    required: true
+  },
+  availableVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update']);
+
+const showModal = ref(props.modelValue);
+const localNodeData = ref({ ...props.nodeData });
+
+// Watch for changes to modelValue prop to sync modal visibility
+watch(() => props.modelValue, (value) => {
+  showModal.value = value;
+});
+
+// Watch for changes to showModal to emit update:modelValue
+watch(() => showModal.value, (value) => {
+  emit('update:modelValue', value);
+});
+
+// Watch for changes to nodeData prop
+watch(() => props.nodeData, (value) => {
+  localNodeData.value = { ...value };
+}, { deep: true });
+
+function handleUpdate(updatedData) {
+  localNodeData.value = { ...updatedData };
+}
+
+function saveAndClose() {
+  emit('update', localNodeData.value);
+  showModal.value = false;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
+</script> 
\ No newline at end of file
diff --git a/components/process-flow/GatewayConditionManagerModal.vue b/components/process-flow/GatewayConditionManagerModal.vue
new file mode 100644
index 0000000..f980499
--- /dev/null
+++ b/components/process-flow/GatewayConditionManagerModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <RsModal
+    v-model="showModal"
+    title="Decision Point Configuration"
+    size="lg"
+    position="center"
+    :okCallback="saveAndClose"
+    okTitle="Save"
+    :cancelCallback="closeModal"
+  >
+    <template #body>
+      <div class="mb-4">
+        <h3 class="text-lg font-semibold">Configure Decision Paths</h3>
+        <p class="text-sm text-gray-600">Set up conditions to determine which path the process should follow.</p>
+      </div>
+      <GatewayConditionManager 
+        :conditions="conditions"
+        :availableVariables="availableVariables"
+        @update:conditions="handleConditionsUpdate"
+      />
+    </template>
+  </RsModal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import GatewayConditionManager from './GatewayConditionManager.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  conditions: {
+    type: Array,
+    required: true
+  },
+  availableVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:conditions']);
+
+const showModal = ref(props.modelValue);
+const localConditions = ref([...props.conditions]);
+
+// Watch for changes to modelValue prop to sync modal visibility
+watch(() => props.modelValue, (value) => {
+  showModal.value = value;
+});
+
+// Watch for changes to showModal to emit update:modelValue
+watch(() => showModal.value, (value) => {
+  emit('update:modelValue', value);
+});
+
+// Watch for changes to conditions prop
+watch(() => props.conditions, (value) => {
+  localConditions.value = [...value];
+}, { deep: true });
+
+function handleConditionsUpdate(updatedConditions) {
+  localConditions.value = [...updatedConditions];
+  emit('update:conditions', updatedConditions);
+}
+
+function saveAndClose() {
+  emit('update:conditions', localConditions.value);
+  showModal.value = false;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
+</script> 
\ No newline at end of file
diff --git a/components/process-flow/ProcessBuilderComponents.vue b/components/process-flow/ProcessBuilderComponents.vue
index 4b923de..7ff7f53 100644
--- a/components/process-flow/ProcessBuilderComponents.vue
+++ b/components/process-flow/ProcessBuilderComponents.vue
@@ -119,6 +119,22 @@ const availableComponents = [
       }
     }
   },
+  {
+    type: 'business-rule',
+    name: 'Business Rule',
+    category: 'Core',
+    icon: 'material-symbols:rule',
+    description: 'Apply business rules to process data',
+    defaultProps: {
+      label: 'Business Rule',
+      data: {
+        description: 'Applies business rules to process data',
+        conditions: [],
+        actions: [],
+        priority: 'medium'
+      }
+    }
+  },
   {
     type: 'gateway',
     name: 'Decision Point',
diff --git a/components/process-flow/ProcessFlowNodes.js b/components/process-flow/ProcessFlowNodes.js
index 6eb317b..0f0a7ed 100644
--- a/components/process-flow/ProcessFlowNodes.js
+++ b/components/process-flow/ProcessFlowNodes.js
@@ -374,6 +374,84 @@ export const ApiCallNode = markRaw({
   }
 });
 
+// Business Rule node
+export const BusinessRuleNode = markRaw({
+  props: ['id', 'type', 'label', 'selected', 'data'],
+  computed: {
+    nodeLabel() {
+      // Get label from either prop or data, with fallback
+      return this.label || (this.data && this.data.label) || 'Business Rule';
+    },
+    
+    ruleConditionSummary() {
+      // First try to use the new ruleGroups structure
+      if (this.data && this.data.ruleGroups && Array.isArray(this.data.ruleGroups)) {
+        // Count total conditions across all rule groups
+        const totalConditions = this.data.ruleGroups.reduce((count, group) => {
+          return count + (Array.isArray(group.conditions) ? group.conditions.length : 0);
+        }, 0);
+        
+        return totalConditions === 0 ? 'No conditions' : 
+               totalConditions === 1 ? '1 condition' : 
+               `${totalConditions} conditions`;
+      }
+      
+      // Fallback to old structure for backward compatibility
+      if (this.data && this.data.conditions && Array.isArray(this.data.conditions)) {
+        const count = this.data.conditions.length;
+        return count === 1 ? '1 condition' : `${count} conditions`;
+      }
+      
+      return 'No conditions defined';
+    },
+    
+    ruleActionSummary() {
+      // First try to use the new ruleGroups structure
+      if (this.data && this.data.ruleGroups && Array.isArray(this.data.ruleGroups)) {
+        // Count total actions across all rule groups
+        const totalActions = this.data.ruleGroups.reduce((count, group) => {
+          return count + (Array.isArray(group.actions) ? group.actions.length : 0);
+        }, 0);
+        
+        return totalActions === 0 ? 'No actions' : 
+               totalActions === 1 ? '1 action' : 
+               `${totalActions} actions`;
+      }
+      
+      // Fallback to old structure for backward compatibility
+      if (this.data && this.data.actions && Array.isArray(this.data.actions)) {
+        const count = this.data.actions.length;
+        return count === 1 ? '1 action' : `${count} actions`;
+      }
+      
+      return 'No actions defined';
+    }
+  },
+  render() {
+    return h(CustomNode, {
+      id: this.id,
+      type: 'business-rule',
+      label: this.nodeLabel,
+      selected: this.selected,
+      data: this.data,
+      onClick: () => this.$emit('node-click', this.id)
+    }, {
+      icon: () => h('i', { class: 'material-icons text-purple-600' }, 'rule'),
+      default: () => h('div', { class: 'node-details' }, [
+        h('p', { class: 'node-description' }, this.data?.description || 'Applies business rules to process data'),
+        h('div', { class: 'node-rule-detail flex items-center justify-between text-xs mt-1' }, [
+          h('span', { class: 'node-rule-detail-label' }, 'Conditions:'),
+          h('span', { class: 'node-rule-detail-value ml-1 font-medium text-purple-600' }, this.ruleConditionSummary)
+        ]),
+        h('div', { class: 'node-rule-detail flex items-center justify-between text-xs mt-1' }, [
+          h('span', { class: 'node-rule-detail-label' }, 'Actions:'),
+          h('span', { class: 'node-rule-detail-value ml-1 font-medium text-purple-600' }, this.ruleActionSummary)
+        ])
+      ])
+    });
+  }
+});
+
 // Export the node types object to use with Vue Flow
 export const nodeTypes = markRaw({
   task: TaskNode,
@@ -382,6 +460,7 @@ export const nodeTypes = markRaw({
   gateway: GatewayNode,
   form: FormNode,
   script: ScriptNode,
+  'business-rule': BusinessRuleNode,
   api: ApiCallNode
 });
 
diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue
index 42fc8e0..6757125 100644
--- a/pages/process-builder/index.vue
+++ b/pages/process-builder/index.vue
@@ -7,11 +7,16 @@ import ProcessFlowCanvas from '~/components/process-flow/ProcessFlowCanvas.vue';
 import ProcessBuilderComponents from '~/components/process-flow/ProcessBuilderComponents.vue';
 import FormSelector from '~/components/process-flow/FormSelector.vue';
 import GatewayConditionManager from '~/components/process-flow/GatewayConditionManager.vue';
+import GatewayConditionManagerModal from '~/components/process-flow/GatewayConditionManagerModal.vue';
 import ApiNodeConfiguration from '~/components/process-flow/ApiNodeConfiguration.vue';
+import ApiNodeConfigurationModal from '~/components/process-flow/ApiNodeConfigurationModal.vue';
 import VariableManager from '~/components/process-flow/VariableManager.vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import FormNodeConfiguration from '~/components/process-flow/FormNodeConfiguration.vue';
+import FormNodeConfigurationModal from '~/components/process-flow/FormNodeConfigurationModal.vue';
 import TaskNodeConfiguration from '~/components/process-flow/TaskNodeConfiguration.vue';
+import BusinessRuleNodeConfiguration from '~/components/process-flow/BusinessRuleNodeConfiguration.vue';
+import BusinessRuleNodeConfigurationModal from '~/components/process-flow/BusinessRuleNodeConfigurationModal.vue';
 
 // Define page meta
 definePageMeta({
@@ -54,6 +59,12 @@ const navigationConfirmed = ref(false);
 // Add a ref for the ProcessFlowCanvas component
 const processFlowCanvas = ref(null);
 
+// Add state for node configuration modals
+const showFormConfigModal = ref(false);
+const showApiConfigModal = ref(false);
+const showGatewayConfigModal = ref(false);
+const showBusinessRuleConfigModal = ref(false);
+
 // Component definitions
 const components = [
   {
@@ -686,6 +697,17 @@ const handleTaskNodeUpdate = (updatedData) => {
     updateNodeInStore();
   }
 };
+
+// Update handler for business rule node
+const handleBusinessRuleUpdate = (data) => {
+  if (selectedNodeData.value) {
+    selectedNodeData.value.data = {
+      ...selectedNodeData.value.data,
+      ...data
+    };
+    updateNodeInStore();
+  }
+};
 </script>
 
 <template>
@@ -795,29 +817,30 @@ const handleTaskNodeUpdate = (updatedData) => {
 
             <!-- Form Selection for Form Nodes -->
             <div v-if="selectedNodeData.type === 'form'">
-              <FormNodeConfiguration 
-                :nodeData="selectedNodeData.data"
-                :availableVariables="variableStore.getAllVariables.global"
-                @update="handleFormNodeUpdate"
-              />
+              <RsButton @click="showFormConfigModal = true" variant="primary" class="w-full">
+                Configure Form Task
+              </RsButton>
             </div>
 
             <!-- API Configuration for API Nodes -->
             <div v-if="selectedNodeData.type === 'api'">
-              <ApiNodeConfiguration 
-                :nodeData="selectedNodeData.data"
-                :availableVariables="gatewayAvailableVariables"
-                @update="handleApiNodeUpdate"
-              />
+              <RsButton @click="showApiConfigModal = true" variant="primary" class="w-full">
+                Configure API Call
+              </RsButton>
             </div>
 
             <!-- Gateway Conditions -->
             <div v-if="selectedNodeData.type === 'gateway'">
-              <GatewayConditionManager
-                :conditions="selectedNodeData.data.conditions"
-                @update:conditions="handleConditionUpdate"
-                :availableVariables="gatewayAvailableVariables"
-              />
+              <RsButton @click="showGatewayConfigModal = true" variant="primary" class="w-full">
+                Configure Decision Paths
+              </RsButton>
+            </div>
+            
+            <!-- Business Rule Configuration -->
+            <div v-if="selectedNodeData.type === 'business-rule'">
+              <RsButton @click="showBusinessRuleConfigModal = true" variant="primary" class="w-full">
+                Configure Business Rule
+              </RsButton>
             </div>
           </div>
         </div>
@@ -886,6 +909,43 @@ const handleTaskNodeUpdate = (updatedData) => {
         </div>
       </template>
     </RsModal>
+    
+    <!-- Form Task Configuration Modal -->
+    <FormNodeConfigurationModal
+      v-if="selectedNodeData && selectedNodeData.type === 'form'"
+      v-model="showFormConfigModal"
+      :nodeData="selectedNodeData.data"
+      :availableVariables="variableStore.getAllVariables.global"
+      @update="handleFormNodeUpdate"
+    />
+    
+    <!-- API Call Configuration Modal -->
+    <ApiNodeConfigurationModal
+      v-if="selectedNodeData && selectedNodeData.type === 'api'"
+      v-model="showApiConfigModal"
+      :nodeData="selectedNodeData.data"
+      :availableVariables="gatewayAvailableVariables"
+      @update="handleApiNodeUpdate"
+    />
+    
+    <!-- Gateway/Decision Point Configuration Modal -->
+    <GatewayConditionManagerModal
+      v-if="selectedNodeData && selectedNodeData.type === 'gateway'"
+      v-model="showGatewayConfigModal"
+      :conditions="selectedNodeData.data.conditions || []"
+      :availableVariables="gatewayAvailableVariables"
+      @update:conditions="handleConditionUpdate"
+    />
+    
+    <!-- Business Rule Configuration Modal -->
+    <BusinessRuleNodeConfigurationModal
+      v-if="selectedNodeData && selectedNodeData.type === 'business-rule'"
+      v-model="showBusinessRuleConfigModal"
+      :nodeId="selectedNodeData.id"
+      :nodeData="selectedNodeData.data"
+      :availableVariables="gatewayAvailableVariables"
+      @update="handleBusinessRuleUpdate"
+    />
   </div>
 </template>
 
@@ -942,6 +1002,13 @@ const handleTaskNodeUpdate = (updatedData) => {
   border: 1px solid #ddd;
 }
 
+:deep(.node-business-rule) {
+  min-width: 160px;
+  background: white;
+  border: 1px solid #ddd;
+  border-left: 4px solid #9333ea;  /* Purple border to match our icon color */
+}
+
 :deep(.node-details) {
   margin-top: 8px;
   font-size: 0.75rem;