diff --git a/components/process-flow/ArrowEdge.vue b/components/process-flow/ArrowEdge.vue
new file mode 100644
index 0000000..0936c0b
--- /dev/null
+++ b/components/process-flow/ArrowEdge.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from '@vue-flow/core'
+import { computed } from 'vue'
+
+const props = defineProps({
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  animated: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  markerEnd: {
+    type: String,
+    default: '',
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  }
+})
+
+const path = computed(() => {
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+    borderRadius: 8,
+    offset: 20
+  })
+  
+  return {
+    path: edgePath,
+    labelX,
+    labelY
+  }
+})
+
+const edgeStyle = computed(() => ({
+  stroke: props.selected ? '#ff6b6b' : '#555',
+  strokeWidth: props.selected ? 3 : 2,
+  strokeDasharray: props.animated ? '5,5' : 'none',
+  ...props.style
+}))
+
+const markerEndUrl = computed(() => {
+  return props.selected ? 'url(#arrow-selected)' : 'url(#arrow)'
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <!-- Main edge path -->
+  <BaseEdge 
+    :path="path.path" 
+    :style="edgeStyle"
+    :marker-end="markerEndUrl"
+    :class="{
+      'animated': animated,
+      'selected': selected
+    }"
+  />
+
+  <!-- Edge label if provided -->
+  <EdgeLabelRenderer v-if="label">
+    <div
+      :style="{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path.labelX}px, ${path.labelY}px)`,
+        pointerEvents: 'all',
+        fontSize: '11px',
+        fontWeight: '600',
+        background: 'white',
+        padding: '3px 8px',
+        borderRadius: '12px',
+        border: '1.5px solid #3b82f6',
+        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.2)',
+        color: '#1e40af',
+        whiteSpace: 'nowrap',
+        zIndex: 10
+      }"
+      class="edge-label nodrag nopan"
+    >
+      {{ label }}
+    </div>
+  </EdgeLabelRenderer>
+</template>
+
+<style scoped>
+.animated {
+  animation: dash 2s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/process-flow/CustomEdge.vue b/components/process-flow/CustomEdge.vue
new file mode 100644
index 0000000..1de3794
--- /dev/null
+++ b/components/process-flow/CustomEdge.vue
@@ -0,0 +1,285 @@
+<template>
+  <g>
+
+    <!-- Main edge path -->
+    <BaseEdge
+      :id="id"
+      :path="edgePath"
+      :style="{
+        stroke: selected ? '#ff6b6b' : edgeStyle.stroke || '#555',
+        strokeWidth: selected ? 3 : edgeStyle.strokeWidth || 2,
+        ...edgeStyle
+      }"
+      :marker-end="selected ? 'url(#arrow-selected)' : 'url(#arrow)'"
+      :class="{
+        'vue-flow__edge-path': true,
+        'custom-edge': true,
+        'selected': selected,
+        'animated': animated
+      }"
+    />
+
+    <!-- Interactive control points for path adjustment -->
+    <g v-if="selected && showControlPoints" class="edge-control-points">
+      <!-- Mid-point control for path bending -->
+      <circle
+        :cx="labelX"
+        :cy="labelY"
+        r="4"
+        fill="#3b82f6"
+        stroke="white"
+        stroke-width="2"
+        class="edge-control-point"
+        style="cursor: move;"
+        @mousedown="onControlPointMouseDown"
+        @touchstart="onControlPointMouseDown"
+      />
+      
+      <!-- Visual indicator for draggable control -->
+      <circle
+        :cx="labelX"
+        :cy="labelY"
+        r="8"
+        fill="rgba(59, 130, 246, 0.2)"
+        class="edge-control-indicator"
+        style="pointer-events: none;"
+      />
+    </g>
+
+    <!-- Edge label using EdgeLabelRenderer for HTML content -->
+    <EdgeLabelRenderer v-if="label">
+      <div
+        :style="{
+          position: 'absolute',
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          pointerEvents: 'all',
+          fontSize: '12px',
+          fontWeight: '500'
+        }"
+        class="edge-label-container nodrag nopan"
+      >
+        <div class="edge-label">
+          {{ label }}
+        </div>
+      </div>
+    </EdgeLabelRenderer>
+  </g>
+</template>
+
+<script setup>
+import { computed, ref, inject } from 'vue'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, getSmoothStepPath, getStraightPath } from '@vue-flow/core'
+import { useEdge } from '@vue-flow/core'
+
+const props = defineProps({
+  id: String,
+  sourceX: Number,
+  sourceY: Number,
+  targetX: Number,
+  targetY: Number,
+  sourcePosition: String,
+  targetPosition: String,
+  selected: Boolean,
+  animated: Boolean,
+  label: String,
+  style: Object,
+  type: {
+    type: String,
+    default: 'smoothstep'
+  },
+  data: Object,
+  markerEnd: String,
+  markerStart: String
+})
+
+// Get edge instance for updating
+const { edge } = useEdge()
+
+// Control state
+const showControlPoints = ref(true)
+const isDragging = ref(false)
+const pathOffset = ref({ x: 0, y: 0 })
+
+// Computed edge style
+const edgeStyle = computed(() => ({
+  stroke: '#555',
+  strokeWidth: 2,
+  ...props.style
+}))
+
+// Calculate edge path based on type with optional offset for custom positioning
+const edgePath = computed(() => {
+  try {
+    const offsetX = pathOffset.value.x || 0
+    const offsetY = pathOffset.value.y || 0
+    
+    // Apply offset to create custom path curvature
+    const centerX = (props.sourceX + props.targetX) / 2 + offsetX
+    const centerY = (props.sourceY + props.targetY) / 2 + offsetY
+    
+    switch (props.type) {
+      case 'straight':
+        return getStraightPath(props.sourceX, props.sourceY, props.targetX, props.targetY)[0]
+      case 'smoothstep':
+      case 'custom':
+        return getSmoothStepPath(
+          props.sourceX,
+          props.sourceY,
+          props.sourcePosition,
+          props.targetX,
+          props.targetY,
+          props.targetPosition,
+          centerX,
+          centerY,
+          20, // offset
+          8   // border radius
+        )[0]
+      case 'bezier':
+      default:
+        return getBezierPath({
+          sourceX: props.sourceX,
+          sourceY: props.sourceY,
+          sourcePosition: props.sourcePosition,
+          targetX: props.targetX,
+          targetY: props.targetY,
+          targetPosition: props.targetPosition,
+          curvature: 0.25
+        })[0]
+    }
+  } catch (error) {
+    console.error('Error calculating edge path:', error)
+    // Fallback to a simple straight line
+    return `M ${props.sourceX} ${props.sourceY} L ${props.targetX} ${props.targetY}`
+  }
+})
+
+// Calculate label position
+const labelX = computed(() => {
+  return (props.sourceX + props.targetX) / 2 + pathOffset.value.x
+})
+
+const labelY = computed(() => {
+  return (props.sourceY + props.targetY) / 2 + pathOffset.value.y
+})
+
+// Control point drag handling
+const onControlPointMouseDown = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  
+  isDragging.value = true
+  const startX = event.clientX || event.touches[0].clientX
+  const startY = event.clientY || event.touches[0].clientY
+  const startOffsetX = pathOffset.value.x
+  const startOffsetY = pathOffset.value.y
+  
+  const onMouseMove = (moveEvent) => {
+    if (!isDragging.value) return
+    
+    const currentX = moveEvent.clientX || moveEvent.touches[0].clientX
+    const currentY = moveEvent.clientY || moveEvent.touches[0].clientY
+    
+    const deltaX = currentX - startX
+    const deltaY = currentY - startY
+    
+    // Update path offset for custom positioning
+    pathOffset.value = {
+      x: startOffsetX + deltaX,
+      y: startOffsetY + deltaY
+    }
+    
+    // Store the custom path in edge data for persistence
+    if (edge.value) {
+      edge.value.data = {
+        ...edge.value.data,
+        customPath: pathOffset.value
+      }
+    }
+  }
+  
+  const onMouseUp = () => {
+    isDragging.value = false
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+    document.removeEventListener('touchmove', onMouseMove)
+    document.removeEventListener('touchend', onMouseUp)
+  }
+  
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  document.addEventListener('touchmove', onMouseMove)
+  document.addEventListener('touchend', onMouseUp)
+}
+
+// Initialize path offset from saved data
+try {
+  if (edge.value && edge.value.data && edge.value.data.customPath) {
+    pathOffset.value = edge.value.data.customPath
+  }
+} catch (error) {
+  console.log('Edge data not available yet, using default path')
+}
+</script>
+
+<script>
+export default {
+  name: 'CustomEdge',
+  inheritAttrs: false
+}
+</script>
+
+<style scoped>
+.edge-label-container {
+  z-index: 1000;
+}
+
+.edge-label {
+  background: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.edge-control-point {
+  cursor: move;
+  transition: r 0.2s ease;
+}
+
+.edge-control-point:hover {
+  r: 5;
+  fill: #2563eb;
+}
+
+.custom-edge {
+  transition: stroke-width 0.2s ease, stroke 0.2s ease;
+}
+
+.custom-edge.animated {
+  stroke-dasharray: 5;
+  animation: dash 1s linear infinite;
+}
+
+.custom-edge.selected {
+  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.5));
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+/* Hide control points when not selected */
+.edge-control-points {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.selected .edge-control-points {
+  opacity: 1;
+}
+</style> 
\ No newline at end of file
diff --git a/components/process-flow/EdgeConfiguration.vue b/components/process-flow/EdgeConfiguration.vue
new file mode 100644
index 0000000..e1ff698
--- /dev/null
+++ b/components/process-flow/EdgeConfiguration.vue
@@ -0,0 +1,386 @@
+<template>
+  <div v-if="selectedEdge" class="edge-configuration">
+    <RsCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+          </svg>
+          <span class="font-medium">Edge Configuration</span>
+        </div>
+      </template>
+      
+      <template #body>
+        <div class="space-y-4">
+          <!-- Edge Information -->
+          <div class="bg-gray-50 p-3 rounded-lg">
+            <div class="text-sm text-gray-600 mb-2">Connection:</div>
+            <div class="text-sm font-mono">
+              {{ selectedEdge.sourceNode?.data?.label || selectedEdge.source }} 
+              → {{ selectedEdge.targetNode?.data?.label || selectedEdge.target }}
+            </div>
+          </div>
+          
+          <!-- Edge Label -->
+          <FormKit
+            type="text"
+            name="label"
+            label="Label"
+            v-model="edgeConfig.label"
+            placeholder="Enter edge label"
+            help="Text displayed on the edge"
+            @input="updateEdge"
+          />
+          
+          <!-- Edge Type -->
+          <FormKit
+            type="select"
+            name="type"
+            label="Edge Type"
+            v-model="edgeConfig.type"
+            :options="edgeTypeOptions"
+            help="Visual style of the edge path"
+            @input="updateEdge"
+          />
+          
+          <!-- Animation -->
+          <FormKit
+            type="checkbox"
+            name="animated"
+            label="Animated"
+            v-model="edgeConfig.animated"
+            help="Show flowing animation on the edge"
+            @input="updateEdge"
+          />
+          
+          <!-- Style Options -->
+          <div class="space-y-3">
+            <div class="text-sm font-medium text-gray-700">Style</div>
+            
+            <!-- Stroke Color -->
+            <FormKit
+              type="color"
+              name="strokeColor"
+              label="Color"
+              v-model="edgeConfig.style.stroke"
+              @input="updateEdge"
+            />
+            
+            <!-- Stroke Width -->
+            <FormKit
+              type="range"
+              name="strokeWidth"
+              label="Width"
+              v-model="edgeConfig.style.strokeWidth"
+              :min="1"
+              :max="8"
+              :step="0.5"
+              help="Line thickness"
+              @input="updateEdge"
+            />
+            
+            <!-- Dash Pattern -->
+            <FormKit
+              type="select"
+              name="dashPattern"
+              label="Line Style"
+              v-model="edgeConfig.dashPattern"
+              :options="dashPatternOptions"
+              help="Solid or dashed line"
+              @input="updateEdge"
+            />
+          </div>
+          
+          <!-- Arrow Configuration -->
+          <div class="space-y-3">
+            <div class="text-sm font-medium text-gray-700">Arrows</div>
+            
+            <FormKit
+              type="checkbox"
+              name="showStartArrow"
+              label="Start Arrow"
+              v-model="edgeConfig.showStartArrow"
+              help="Show arrow at the start of the edge"
+              @input="updateEdge"
+            />
+            
+            <FormKit
+              type="checkbox"
+              name="showEndArrow"
+              label="End Arrow"
+              v-model="edgeConfig.showEndArrow"
+              help="Show arrow at the end of the edge"
+              @input="updateEdge"
+            />
+          </div>
+          
+          <!-- Path Customization -->
+          <div class="space-y-3">
+            <div class="text-sm font-medium text-gray-700">Path Adjustment</div>
+            
+            <div class="text-sm text-gray-600 mb-2">
+              Select the edge to see control points for custom positioning
+            </div>
+            
+            <RsButton 
+              v-if="edgeConfig.customPath" 
+              @click="resetPath" 
+              variant="secondary" 
+              size="sm"
+              class="w-full"
+            >
+              Reset to Auto Path
+            </RsButton>
+          </div>
+          
+          <!-- Advanced Options -->
+          <RsCollapse>
+            <RsCollapseItem title="Advanced Options">
+              <!-- Z-Index -->
+              <FormKit
+                type="range"
+                name="zIndex"
+                label="Layer (Z-Index)"
+                v-model="edgeConfig.zIndex"
+                :min="0"
+                :max="1000"
+                :step="1"
+                help="Higher values appear on top"
+                @input="updateEdge"
+              />
+              
+              <!-- Interaction Width -->
+              <FormKit
+                type="range"
+                name="interactionWidth"
+                label="Click Area Width"
+                v-model="edgeConfig.interactionWidth"
+                :min="5"
+                :max="30"
+                :step="1"
+                help="Invisible area around edge for easier clicking"
+                @input="updateEdge"
+              />
+              
+              <!-- Updatable -->
+              <FormKit
+                type="checkbox"
+                name="updatable"
+                label="Allow Reconnection"
+                v-model="edgeConfig.updatable"
+                help="Allow dragging edge endpoints to reconnect"
+                @input="updateEdge"
+              />
+            </RsCollapseItem>
+          </RsCollapse>
+        </div>
+      </template>
+      
+      <template #footer>
+        <div class="flex justify-between gap-2">
+          <RsButton @click="deleteEdge" variant="danger" size="sm">
+            Delete Edge
+          </RsButton>
+          <RsButton @click="closeConfiguration" variant="secondary" size="sm">
+            Close
+          </RsButton>
+        </div>
+      </template>
+    </RsCard>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import RsCard from '~/components/RsCard.vue'
+import RsButton from '~/components/RsButton.vue'
+import RsCollapse from '~/components/RsCollapse.vue'
+import RsCollapseItem from '~/components/RsCollapseItem.vue'
+
+const props = defineProps({
+  selectedEdge: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['updateEdge', 'deleteEdge', 'close'])
+
+// Edge configuration object
+const edgeConfig = ref({
+  label: '',
+  type: 'custom',
+  animated: true,
+  style: {
+    stroke: '#555',
+    strokeWidth: 2,
+    strokeDasharray: ''
+  },
+  showStartArrow: false,
+  showEndArrow: true,
+  dashPattern: 'solid',
+  customPath: null,
+  zIndex: 0,
+  interactionWidth: 10,
+  updatable: true
+})
+
+// Edge type options
+const edgeTypeOptions = [
+  { label: 'Custom (Smooth Step)', value: 'custom' },
+  { label: 'Bezier Curve', value: 'bezier' },
+  { label: 'Straight Line', value: 'straight' },
+  { label: 'Step', value: 'step' },
+  { label: 'Smooth Step', value: 'smoothstep' }
+]
+
+// Dash pattern options
+const dashPatternOptions = [
+  { label: 'Solid', value: 'solid' },
+  { label: 'Dashed', value: 'dashed' },
+  { label: 'Dotted', value: 'dotted' },
+  { label: 'Dash-Dot', value: 'dashdot' }
+]
+
+// Watch for selected edge changes
+watch(() => props.selectedEdge, (newEdge) => {
+  if (newEdge) {
+    // Load edge configuration
+    edgeConfig.value = {
+      label: newEdge.label || '',
+      type: newEdge.type || 'custom',
+      animated: newEdge.animated !== undefined ? newEdge.animated : true,
+      style: {
+        stroke: newEdge.style?.stroke || '#555',
+        strokeWidth: newEdge.style?.strokeWidth || 2,
+        strokeDasharray: newEdge.style?.strokeDasharray || ''
+      },
+      showStartArrow: !!newEdge.markerStart,
+      showEndArrow: !!newEdge.markerEnd,
+      dashPattern: getDashPatternFromStyle(newEdge.style?.strokeDasharray),
+      customPath: newEdge.data?.customPath || null,
+      zIndex: newEdge.zIndex || 0,
+      interactionWidth: newEdge.interactionWidth || 10,
+      updatable: newEdge.updatable !== undefined ? newEdge.updatable : true
+    }
+  }
+}, { immediate: true })
+
+// Helper function to determine dash pattern from style
+function getDashPatternFromStyle(dasharray) {
+  if (!dasharray) return 'solid'
+  if (dasharray === '5 5') return 'dashed'
+  if (dasharray === '2 2') return 'dotted'
+  if (dasharray === '5 2 2 2') return 'dashdot'
+  return 'solid'
+}
+
+// Helper function to get dash array from pattern
+function getDashArrayFromPattern(pattern) {
+  switch (pattern) {
+    case 'dashed': return '5 5'
+    case 'dotted': return '2 2'
+    case 'dashdot': return '5 2 2 2'
+    default: return ''
+  }
+}
+
+// Update edge function
+function updateEdge() {
+  if (!props.selectedEdge) return
+  
+  const updates = {
+    label: edgeConfig.value.label,
+    type: edgeConfig.value.type,
+    animated: edgeConfig.value.animated,
+    style: {
+      ...edgeConfig.value.style,
+      strokeDasharray: getDashArrayFromPattern(edgeConfig.value.dashPattern)
+    },
+    markerStart: edgeConfig.value.showStartArrow ? 'url(#arrow)' : undefined,
+    markerEnd: edgeConfig.value.showEndArrow ? 'url(#arrow)' : undefined,
+    zIndex: edgeConfig.value.zIndex,
+    interactionWidth: edgeConfig.value.interactionWidth,
+    updatable: edgeConfig.value.updatable
+  }
+  
+  emit('updateEdge', props.selectedEdge.id, updates)
+}
+
+// Reset path to auto-generated
+function resetPath() {
+  if (!props.selectedEdge) return
+  
+  edgeConfig.value.customPath = null
+  emit('updateEdge', props.selectedEdge.id, {
+    data: {
+      ...props.selectedEdge.data,
+      customPath: null
+    }
+  })
+}
+
+// Delete edge
+function deleteEdge() {
+  if (!props.selectedEdge) return
+  emit('deleteEdge', props.selectedEdge.id)
+}
+
+// Close configuration
+function closeConfiguration() {
+  emit('close')
+}
+</script>
+
+<style scoped>
+.edge-configuration {
+  width: 300px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+:deep(.formkit-outer) {
+  margin-bottom: 1rem;
+}
+
+:deep(.formkit-label) {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgb(55 65 81);
+}
+
+:deep(.formkit-help) {
+  font-size: 0.75rem;
+  color: rgb(107 114 128);
+}
+
+:deep(.formkit-input[type="color"]) {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid rgb(209 213 219);
+}
+
+:deep(.formkit-input[type="range"]) {
+  width: 100%;
+}
+
+/* Custom scrollbar */
+.edge-configuration::-webkit-scrollbar {
+  width: 6px;
+}
+
+.edge-configuration::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.edge-configuration::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.edge-configuration::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style> 
\ No newline at end of file
diff --git a/components/process-flow/InteractiveArrowEdge.vue b/components/process-flow/InteractiveArrowEdge.vue
new file mode 100644
index 0000000..64f135a
--- /dev/null
+++ b/components/process-flow/InteractiveArrowEdge.vue
@@ -0,0 +1,268 @@
+<script setup>
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, useVueFlow } from '@vue-flow/core'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  id: String,
+  sourceX: Number,
+  sourceY: Number,
+  targetX: Number,
+  targetY: Number,
+  sourcePosition: String,
+  targetPosition: String,
+  selected: Boolean,
+  animated: Boolean,
+  label: String,
+  style: Object,
+  markerEnd: String,
+  data: Object
+})
+
+const { updateEdgeData } = useVueFlow()
+
+// Custom path offset for manual positioning
+const pathOffset = ref({ x: 0, y: 0 })
+
+// Initialize from saved data
+if (props.data?.pathOffset) {
+  pathOffset.value = props.data.pathOffset
+}
+
+// Calculate edge path with custom offset
+const path = computed(() => {
+  try {
+    // Apply the offset to create a custom control point
+    const centerX = (props.sourceX + props.targetX) / 2 + pathOffset.value.x
+    const centerY = (props.sourceY + props.targetY) / 2 + pathOffset.value.y
+    
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      sourcePosition: props.sourcePosition,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      targetPosition: props.targetPosition,
+      borderRadius: 8,
+      offset: 20,
+      // Override center point with our custom position
+      centerX,
+      centerY
+    })
+    
+    return {
+      path: edgePath,
+      labelX: labelX || centerX,
+      labelY: labelY || centerY,
+      controlX: centerX,
+      controlY: centerY
+    }
+  } catch (error) {
+    // Fallback to simple calculation
+    const centerX = (props.sourceX + props.targetX) / 2 + pathOffset.value.x
+    const centerY = (props.sourceY + props.targetY) / 2 + pathOffset.value.y
+    return {
+      path: `M ${props.sourceX} ${props.sourceY} Q ${centerX} ${centerY} ${props.targetX} ${props.targetY}`,
+      labelX: centerX,
+      labelY: centerY,
+      controlX: centerX,
+      controlY: centerY
+    }
+  }
+})
+
+const edgeStyle = computed(() => ({
+  stroke: props.selected ? '#ff6b6b' : '#555',
+  strokeWidth: props.selected ? 3 : 2,
+  strokeDasharray: props.animated ? '5,5' : 'none',
+  ...props.style
+}))
+
+const markerEndUrl = computed(() => {
+  return props.selected ? 'url(#arrow-selected)' : 'url(#arrow)'
+})
+
+// Drag handling for control point
+const isDragging = ref(false)
+
+const onControlPointMouseDown = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  
+  isDragging.value = true
+  const startX = event.clientX
+  const startY = event.clientY
+  const startOffsetX = pathOffset.value.x
+  const startOffsetY = pathOffset.value.y
+  
+  const onMouseMove = (moveEvent) => {
+    if (!isDragging.value) return
+    
+    const deltaX = moveEvent.clientX - startX
+    const deltaY = moveEvent.clientY - startY
+    
+    // Apply zoom factor (assuming 1.0 for now, can be enhanced)
+    pathOffset.value = {
+      x: startOffsetX + deltaX,
+      y: startOffsetY + deltaY
+    }
+  }
+  
+  const onMouseUp = () => {
+    isDragging.value = false
+    
+    // Save the new path offset to edge data
+    if (props.id && updateEdgeData) {
+      updateEdgeData(props.id, {
+        ...props.data,
+        pathOffset: pathOffset.value
+      })
+    }
+    
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+  }
+  
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+// Reset path offset
+const resetPath = () => {
+  pathOffset.value = { x: 0, y: 0 }
+  if (props.id && updateEdgeData) {
+    updateEdgeData(props.id, {
+      ...props.data,
+      pathOffset: undefined
+    })
+  }
+}
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <!-- Main edge path -->
+  <BaseEdge 
+    :path="path.path" 
+    :style="edgeStyle"
+    :marker-end="markerEndUrl"
+    :class="{
+      'animated': animated,
+      'selected': selected
+    }"
+  />
+
+  <!-- Control point for edge repositioning (only when selected) -->
+  <g v-if="selected" class="edge-controls">
+    <!-- Control point circle -->
+    <circle
+      :cx="path.controlX"
+      :cy="path.controlY"
+      r="4"
+      fill="#3b82f6"
+      stroke="white"
+      stroke-width="2"
+      class="edge-control-point"
+      style="cursor: move;"
+      @mousedown="onControlPointMouseDown"
+    />
+    
+    <!-- Larger invisible area for easier clicking -->
+    <circle
+      :cx="path.controlX"
+      :cy="path.controlY"
+      r="12"
+      fill="transparent"
+      class="edge-control-area"
+      style="cursor: move;"
+      @mousedown="onControlPointMouseDown"
+    />
+    
+    <!-- Visual indicator for draggable control -->
+    <circle
+      :cx="path.controlX"
+      :cy="path.controlY"
+      r="8"
+      fill="rgba(59, 130, 246, 0.2)"
+      class="edge-control-indicator"
+      style="pointer-events: none;"
+    />
+  </g>
+
+  <!-- Edge label if provided -->
+  <EdgeLabelRenderer v-if="label">
+    <div
+      :style="{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path.labelX}px, ${path.labelY}px)`,
+        pointerEvents: 'all',
+        fontSize: '11px',
+        fontWeight: '600',
+        background: 'white',
+        padding: '3px 8px',
+        borderRadius: '12px',
+        border: '1.5px solid #3b82f6',
+        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.2)',
+        color: '#1e40af',
+        whiteSpace: 'nowrap',
+        zIndex: 10
+      }"
+      class="edge-label nodrag nopan"
+    >
+      {{ label }}
+    </div>
+  </EdgeLabelRenderer>
+
+  <!-- Reset button for custom positioning -->
+  <EdgeLabelRenderer v-if="selected && (pathOffset.x !== 0 || pathOffset.y !== 0)">
+    <div
+      :style="{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path.controlX + 20}px, ${path.controlY - 20}px)`,
+        pointerEvents: 'all'
+      }"
+      class="edge-reset-button nodrag nopan"
+    >
+      <button
+        @click="resetPath"
+        style="
+          background: #ef4444;
+          color: white;
+          border: none;
+          border-radius: 3px;
+          padding: 2px 6px;
+          font-size: 10px;
+          cursor: pointer;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        "
+        title="Reset edge path"
+      >
+        Reset
+      </button>
+    </div>
+  </EdgeLabelRenderer>
+</template>
+
+<style scoped>
+.edge-control-point {
+  transition: r 0.2s ease;
+}
+
+.edge-control-point:hover {
+  r: 5;
+}
+
+.animated {
+  animation: dash 2s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/components/process-flow/ProcessFlowCanvas.vue b/components/process-flow/ProcessFlowCanvas.vue
index 1dc78e4..710ccfa 100644
--- a/components/process-flow/ProcessFlowCanvas.vue
+++ b/components/process-flow/ProcessFlowCanvas.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted, computed, shallowRef, watch, defineExpose, nextTick } from 'vue';
+import { ref, onMounted, computed, shallowRef, watch, defineExpose, nextTick, markRaw } from 'vue';
 import { VueFlow, useVueFlow, Panel } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
 import { MiniMap } from '@vue-flow/minimap';
 import { nodeTypes as customNodeTypes, nodeStyles } from './ProcessFlowNodes';
+import InteractiveArrowEdge from './InteractiveArrowEdge.vue';
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
 import '@vue-flow/controls/dist/style.css';
@@ -55,17 +56,30 @@ const {
 } = useVueFlow({
   defaultEdgeOptions: {
     animated: true,
-    type: 'smoothstep'
+    type: 'custom',
+    style: { 
+      stroke: '#555',
+      strokeWidth: 2
+    },
+    markerEnd: 'url(#arrow)'
   },
   deleteKeyCode: 'Delete',
   selectionKeyCode: 'Shift',
   multiSelectionKeyCode: 'Control',
   connectionMode: 'strict',
+  edgeUpdaterRadius: 12,
+  edgesUpdatable: true,
+  defaultMarkerColor: '#555',
   isValidConnection: (connection) => {
     return true;
   }
 });
 
+// Define custom edge types - use markRaw to prevent reactivity issues
+const edgeTypes = {
+  custom: markRaw(InteractiveArrowEdge)
+};
+
 // Default nodes if empty
 const defaultNodes = [];
 
@@ -586,9 +600,13 @@ const handleConnect = (connection) => {
     target: connection.target,
     sourceHandle: connection.sourceHandle,
     targetHandle: connection.targetHandle,
-    type: 'smoothstep',
+    type: 'custom',
     animated: true,
-    style: { stroke: '#555' },
+    style: { 
+      stroke: '#555',
+      strokeWidth: 2
+    },
+    markerEnd: 'url(#arrow)',
     label: label
   };
   
@@ -733,6 +751,25 @@ function updateNode(nodeId, newData) {
     nodeToUpdate.position = { ...newData.position };
   }
   
+  // Update style if provided
+  if (newData.style !== undefined) {
+    nodeToUpdate.style = {
+      ...(nodeToUpdate.style || {}),
+      ...newData.style
+    };
+    
+    // Also apply style directly to DOM element for immediate visual feedback
+    nextTick(() => {
+      const nodeElement = document.querySelector(`[data-id="${nodeId}"]`);
+      if (nodeElement) {
+        // Apply styles directly to the DOM element
+        Object.entries(newData.style).forEach(([key, value]) => {
+          nodeElement.style[key] = value;
+        });
+      }
+    });
+  }
+  
   // Force re-render by updating node internals
   updateNodeInternals([nodeId]);
   
@@ -1053,7 +1090,7 @@ function fromObject(flowObject) {
                 sourceHandle: edge.sourceHandle,
                 targetHandle: edge.targetHandle,
                 label: edge.label || '',
-                type: edge.type || 'smoothstep',
+                type: edge.type || 'custom',
                 animated: edge.animated !== undefined ? edge.animated : true,
                 data: edge.data || {}
                 // Only include essential properties
@@ -1102,6 +1139,7 @@ function fromObject(flowObject) {
       v-bind="flowOptions"
       class="bg-slate-50 process-flow"
       :nodeTypes="customNodeTypes"
+      :edgeTypes="edgeTypes"
       @node-click="onNodeClick"
       @edge-click="onEdgeClick"
       @pane-click="onPaneClick"
@@ -1110,21 +1148,72 @@ function fromObject(flowObject) {
       @edgeDoubleClick="onEdgeDelete"
       @keyup.delete="onDeleteKeyPress"
     >
+      <!-- Global SVG definitions for arrows -->
+      <svg style="position: absolute; top: 0; left: 0; width: 0; height: 0">
+        <defs>
+          <marker
+            id="arrow"
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="3"
+            markerWidth="6"
+            markerHeight="6"
+            orient="auto"
+            markerUnits="strokeWidth"
+          >
+            <path d="M0,0 L0,6 L9,3 z" fill="#555" />
+          </marker>
+          <marker
+            id="arrow-selected"
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="3"
+            markerWidth="6"
+            markerHeight="6"
+            orient="auto"
+            markerUnits="strokeWidth"
+          >
+            <path d="M0,0 L0,6 L9,3 z" fill="#ff6b6b" />
+          </marker>
+          <marker
+            id="arrow-animated"
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="3"
+            markerWidth="6"
+            markerHeight="6"
+            orient="auto"
+            markerUnits="strokeWidth"
+          >
+            <path d="M0,0 L0,6 L9,3 z" fill="#3b82f6" />
+          </marker>
+        </defs>
+      </svg>
       <Background pattern-color="#aaa" gap="20" />
       <Controls />
       <MiniMap />
       
+      <!-- Custom edge template -->
+      <template #edge-custom="edgeProps">
+        <InteractiveArrowEdge v-bind="edgeProps" />
+      </template>
+      
       <template #edge-label="{ label }">
         <div class="edge-label">{{ label }}</div>
       </template>
 
       <Panel position="top-right" class="node-controls">
         <div class="p-2 bg-white rounded shadow-sm text-sm">
-          <div class="mb-1">Controls:</div>
+          <div class="mb-1 font-medium">Controls:</div>
           <div>• Delete: Remove selected</div>
           <div>• Shift: Select nodes</div>
           <div>• Drag between nodes to connect</div>
           <div>• Double-click to remove</div>
+          <div class="mt-2 mb-1 font-medium">Edge Features:</div>
+          <div>• Arrows show flow direction</div>
+          <div>• Select edge for controls</div>
+          <div>• Blue dot = drag to reposition</div>
+          <div>• Reset button restores path</div>
         </div>
       </Panel>
     </VueFlow>
@@ -1181,21 +1270,28 @@ function fromObject(flowObject) {
 
 .edge-label {
   background-color: white;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-size: 10px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1.5px solid #3b82f6;
+  color: #1e40af;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+  white-space: nowrap;
+  z-index: 10;
 }
 
 /* Vue Flow custom styles */
 :deep(.vue-flow__edge-path) {
   stroke: #555;
   stroke-width: 2px;
+  transition: stroke-width 0.2s ease, stroke 0.2s ease;
 }
 
 :deep(.vue-flow__edge.selected .vue-flow__edge-path) {
   stroke: #ff6b6b;
   stroke-width: 3px;
+  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.3));
 }
 
 :deep(.vue-flow__edge.animated .vue-flow__edge-path) {
@@ -1203,6 +1299,49 @@ function fromObject(flowObject) {
   animation: flowEdgeAnimation 2s linear infinite;
 }
 
+:deep(.vue-flow__edge:hover .vue-flow__edge-path) {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
+}
+
+/* Custom edge styles */
+:deep(.custom-edge) {
+  cursor: pointer;
+}
+
+:deep(.custom-edge.selected) {
+  filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.5));
+}
+
+/* Edge updater styles */
+:deep(.vue-flow__edge-updater) {
+  stroke: #3b82f6;
+  fill: #3b82f6;
+  stroke-width: 2;
+  cursor: crosshair;
+}
+
+:deep(.vue-flow__edge-updater:hover) {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+/* Edge control point styles for better visibility */
+:deep(.edge-control-point) {
+  cursor: move !important;
+  opacity: 0;
+  transition: opacity 0.2s ease, r 0.2s ease;
+}
+
+:deep(.vue-flow__edge.selected .edge-control-point) {
+  opacity: 1;
+}
+
+:deep(.edge-control-point:hover) {
+  r: 6 !important;
+  fill: #2563eb !important;
+}
+
 /* Add custom node icon styles */
 :deep(.custom-node) {
   border-radius: 6px;
diff --git a/components/process-flow/ProcessFlowNodes.js b/components/process-flow/ProcessFlowNodes.js
index 23ccb73..0cf4d1c 100644
--- a/components/process-flow/ProcessFlowNodes.js
+++ b/components/process-flow/ProcessFlowNodes.js
@@ -1346,14 +1346,20 @@ export const nodeStyles = `
 
 .node-gateway .custom-node-content {
   position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   transform: rotate(-45deg);
-  width: 120%;
-  height: 120%;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 8px;
+  padding: 0;
+  text-align: center;
+  z-index: 10;
 }
 
 .node-start .custom-node-content,
@@ -1427,12 +1433,12 @@ export const nodeStyles = `
 }
 
 .node-gateway .custom-node-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: #333;
-  margin: 0;
+  font-size: 11px;
+  font-weight: 700;
+  color: #c2410c;
+  margin: 0 0 4px 0;
   text-align: center;
-  width: 100%;
+  width: 90%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1501,9 +1507,13 @@ export const nodeStyles = `
 }
 
 .gateway-details {
-  width: 100%;
+  width: 80%;
   text-align: center;
-  margin-top: 4px;
+  margin-top: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 
@@ -1584,9 +1594,11 @@ export const nodeStyles = `
 
 .node-gateway .node-description {
   text-align: center;
-  margin-bottom: 4px;
-  font-size: 10px;
+  margin-bottom: 2px;
+  font-size: 8px;
+  line-height: 1.1;
   overflow: hidden;
+  max-width: 80px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -1595,12 +1607,12 @@ export const nodeStyles = `
 
 .node-gateway .node-rule-detail {
   display: flex;
-  font-size: 10px;
+  font-size: 8px;
   color: #666;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  margin-bottom: 3px;
+  width: 80%;
+  margin-bottom: 2px;
 }
 
 .node-gateway .node-rule-detail-label {
@@ -1612,9 +1624,11 @@ export const nodeStyles = `
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 10px;
-  max-width: 60px;
+  font-size: 8px;
+  max-width: 50px;
   text-align: center;
+  font-weight: 600;
+  color: #c2410c;
 }
 
 .node-gateway .material-icons {
@@ -1714,13 +1728,13 @@ export const nodeStyles = `
   background: white;
   cursor: move;
   transition: all 0.2s ease;
-  z-index: -10 !important; /* Lower z-index so shapes stay in background */
+  /* z-index is now controlled dynamically through node data */
 }
 
 .shape-node.selected {
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  z-index: -8 !important; /* Still behind process nodes when selected */
+  /* z-index is now controlled dynamically through node data */
 }
 
 .shape-node:hover {
diff --git a/components/process-flow/VariableBrowser.vue b/components/process-flow/VariableBrowser.vue
index 1ce4f36..41d9aa3 100644
--- a/components/process-flow/VariableBrowser.vue
+++ b/components/process-flow/VariableBrowser.vue
@@ -118,13 +118,34 @@
                     v-model="newVariableType"
                     class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200"
                   >
-                    <option value="string">String (Text)</option>
-                    <option value="int">Integer (Whole Number)</option>
-                    <option value="decimal">Decimal (Number with decimals)</option>
-                    <option value="boolean">Boolean (True/False)</option>
-                    <option value="date">Date</option>
-                    <option value="datetime">DateTime</option>
-                    <option value="object">Object (JSON)</option>
+                    <optgroup label="Common Types">
+                      <option value="string">String (Text)</option>
+                      <option value="int">Integer (Whole Number)</option>
+                      <option value="decimal">Decimal (Number with decimals)</option>
+                      <option value="boolean">Boolean (True/False)</option>
+                    </optgroup>
+                    <optgroup label="Date & Time Types">
+                      <option value="date">Date</option>
+                      <option value="datetime">DateTime</option>
+                      <option value="time">Time</option>
+                      <option value="timestamp">Timestamp</option>
+                    </optgroup>
+                    <optgroup label="Complex Types">
+                      <option value="object">Object (JSON)</option>
+                      <option value="array">Array (List)</option>
+                      <option value="map">Map (Key-Value Pairs)</option>
+                    </optgroup>
+                    <optgroup label="Special Types">
+                      <option value="currency">Currency</option>
+                      <option value="percentage">Percentage</option>
+                      <option value="email">Email</option>
+                      <option value="url">URL</option>
+                      <option value="phone">Phone Number</option>
+                      <option value="file">File</option>
+                      <option value="image">Image</option>
+                      <option value="binary">Binary Data</option>
+                      <option value="uuid">UUID</option>
+                    </optgroup>
                   </select>
                 </div>
 
@@ -240,6 +261,7 @@ const errorMessage = computed(() => {
 });
 
 const groupedVariables = computed(() => {
+  // Initialize with common types but allow for dynamic additions
   const types = {
     string: { label: 'Text Variables', variables: [] },
     int: { label: 'Integer Variables', variables: [] },
@@ -248,6 +270,7 @@ const groupedVariables = computed(() => {
     date: { label: 'Date Variables', variables: [] },
     datetime: { label: 'DateTime Variables', variables: [] },
     object: { label: 'Object Variables', variables: [] }
+    // Other types will be added dynamically
   };
 
   let variables = props.availableVariables;
@@ -259,9 +282,16 @@ const groupedVariables = computed(() => {
 
   variables.forEach(variable => {
     const type = variable.type || 'string';
-    if (types[type]) {
-      types[type].variables.push(variable);
+    
+    // If type doesn't exist in our types object, add it dynamically
+    if (!types[type]) {
+      // Create a friendly label from the type name
+      const label = type.charAt(0).toUpperCase() + type.slice(1) + ' Variables';
+      types[type] = { label, variables: [] };
     }
+    
+    // Add the variable to its type group
+    types[type].variables.push(variable);
   });
 
   return Object.values(types).filter(group => group.variables.length > 0);
@@ -344,10 +374,26 @@ const getTypeColorClass = (type) => {
     string: 'bg-blue-100 text-blue-800',
     int: 'bg-purple-100 text-purple-800',
     decimal: 'bg-purple-100 text-purple-800',
+    number: 'bg-purple-100 text-purple-800',
     boolean: 'bg-indigo-100 text-indigo-800',
     date: 'bg-amber-100 text-amber-800',
     datetime: 'bg-amber-100 text-amber-800',
-    object: 'bg-emerald-100 text-emerald-800'
+    object: 'bg-emerald-100 text-emerald-800',
+    // Add colors for any additional types you know about
+    array: 'bg-emerald-100 text-emerald-800',
+    map: 'bg-teal-100 text-teal-800',
+    set: 'bg-teal-100 text-teal-800',
+    binary: 'bg-slate-100 text-slate-800',
+    time: 'bg-amber-100 text-amber-800',
+    timestamp: 'bg-amber-100 text-amber-800',
+    uuid: 'bg-violet-100 text-violet-800',
+    email: 'bg-blue-100 text-blue-800',
+    url: 'bg-blue-100 text-blue-800',
+    phone: 'bg-blue-100 text-blue-800',
+    currency: 'bg-green-100 text-green-800',
+    percentage: 'bg-purple-100 text-purple-800',
+    file: 'bg-orange-100 text-orange-800',
+    image: 'bg-orange-100 text-orange-800'
   };
   return classes[type] || 'bg-gray-100 text-gray-800';
 };
@@ -361,13 +407,47 @@ const formatPreviewValue = (value, type) => {
     case 'boolean':
       return value ? 'true' : 'false';
     case 'object':
+    case 'array':
+    case 'map':
+    case 'set':
       try {
         const str = typeof value === 'string' ? value : JSON.stringify(value);
         return str.length > 30 ? `${str.substring(0, 30)}...` : str;
       } catch {
         return 'Invalid JSON';
       }
+    case 'date':
+    case 'datetime':
+    case 'time':
+    case 'timestamp':
+      // Try to format dates nicely if possible
+      try {
+        if (value instanceof Date) {
+          return value.toLocaleString();
+        } else if (typeof value === 'string' && (value.includes('T') || value.includes('-'))) {
+          return new Date(value).toLocaleString();
+        }
+      } catch {}
+      return String(value);
+    case 'int':
+    case 'decimal':
+    case 'percentage':
+    case 'currency':
+      // For numeric types
+      if (typeof value === 'number') {
+        return value.toString();
+      }
+      return String(value);
+    case 'file':
+    case 'image':
+    case 'binary':
+      // For file-like types
+      if (typeof value === 'string') {
+        return value.length > 20 ? `${value.substring(0, 20)}...` : value;
+      }
+      return '[Binary Data]';
     default:
+      // For any other type, just convert to string
       return String(value);
   }
 };
diff --git a/docs/BR/business-rules.md b/docs/BR/business-rules.md
new file mode 100644
index 0000000..c63fab9
--- /dev/null
+++ b/docs/BR/business-rules.md
@@ -0,0 +1,111 @@
+Definisi Aktiviti BF-NAS-PRF-AS-QS-03 Analisa Data (Had Kifayah)
+DEFINISI AKTIVITI FUNGSI BISNES
+Rujukan Fungsi	BF-NAS-PRF-AS_QS
+Nama Fungsi	Pendaftaran Pantas Perseorangan
+Rujukan Aktiviti	BF-NAS-PRF-AS-QS-03
+Nama Aktiviti	Analisa Data (Had Kifayah)
+Keterangan Aktiviti	Proses pengiraan had kifayah asnaf menggunakan maklumat konfigurasi had kifayah dan juga maklumat yang telah diisi oleh pemohon/pendaftar
+Aktor	NAS 
+
+Aktiviti Sebelum	 -
+	
+Aktiviti Selepas/ Aktiviti Lain	BF-NAS-PRF-AS-QS-04
+Syor Status Keluarga Asnaf
+
+Kaedah/Operasi (Bagaimana):
+1.	Sebagai contoh, proses pengiraan had kifayah menggunakan maklumat-maklumat didalam konfigurasi had kifayah. Untuk kes pendaftaran pantas perseorangan, hanya minimum maklumat yang dimasukkan. Oleh itu proses pengiraan had kifayah akan menggunakan maklumat-maklumat yang dimasukkan oleh pemohon.
+•	No Pengenalan
+•	Pendapatan
+•	Bilangan tanggungan
+2.	Sistem akan membuat pengiraan had kifayah menggunakan maklumat yang dimasukkan satu persatu mengikut formula had kifayah yang telah dikonfigurasi.
+3.	Pengesyoran profil akan menggunakan maklumat %had kifayah, contohnya:
+•	0%-49.9% - Fakir
+•	50 – 100% - Miskin
+•	>100% - Non-FM
+4.	Pengiraan had kifayah ini adalah dinamik. Sistem akan membuat pengiraan mengikut formula terkini.
+5.	Data had kifayah keluarga akan disimpan ke dalam pangkalan data 
+6.	Sistem akan menjana ID rekod dan masa tindakan.
+7.	Rekod Log
+o	Tindakan Admin direkodkan ke dalam Audit Trail, termasuk:
+-	Nama pengguna
+-	Tarikh dan Masa
+-	Jenis perubahan (Tambah/Kemaskini)
+-	Butiran data
+8.	Pemberitahuan Sistem (Automatik) – ‘Pengiraan had kifayah selesai’
+Penggunaan Maklumat:
+1.	No Pengenalan Ketua Keluarga(CRU)
+2.	No Pengenalan Tanggungan (CRU)
+3.	Jumlah had kifayah mengikut formula (CRU)
+4.	Kira Jumlah Had Kifayah Keluarga (CRU)
+5.	Kira %Had Kifayah (CRU)
+6.	Kategori Keluarga (CRU)
+Polisi dan Dasar Berkaitan
+1.	Dasar Keselamatan ICT LZS
+•	Polisi Pengurusan Data ICT Kuatkuasa 1 Jan 2020 (3)
+•	Polisi Perlindungan Data Peribadi LZS
+2.	Garis Panduan dan Syarat Kelayakan Agihan Zakat
+•	Menetapkan prinsip asas mengenai pemberian zakat termasuk had keperluan asas dan mekanisme kelayakan penerima.
+•	Kelulusan kadar kifayah mesti selari dengan keutamaan dan strategi agihan semasa.
+Kaedah Alternatif
+Tiada 
+Ciri-ciri Kualiti (Keperluan Bukan Fungsian)
+1.	Audit Trail
+Catatan Tambahan:
+Aktiviti akan dipanggil setiap kali membuat pendaftaran pantas asnaf.
+
+Jadual 28: Definisi Aktiviti BF-NAS-PRF-AS-QS-03 Analisa Data (Had Kifayah)
+
+Definisi Aktiviti BF-NAS-PRF-AS-QS-04 Syor Status Keluarga Asnaf
+DEFINISI AKTIVITI FUNGSI BISNES
+Rujukan Fungsi	BF-NAS-PRF-AS-QS
+Nama Fungsi	Pendaftaran Pantas Perseorangan
+Rujukan Aktiviti	BF-NAS-PRF-AS-QS-04
+Nama Aktiviti	Syor Status Keluarga Asnaf
+Keterangan Aktiviti	Sistem akan mengesyorkan status keluarga asnaf hasil dari pengiraan had kifayah.
+Aktor	NAS 
+
+Aktiviti Sebelum	 -
+	
+Aktiviti Selepas/ Aktiviti Lain	BF-NAS-PRF-AS-QS-05
+Pengesahan
+
+Kaedah/Operasi (Bagaimana):
+1.	Pengesyoran profil akan menggunakan maklumat %had kifayah, contohnya:
+a.	0%-49.9% - Fakir
+b.	50 – 100% - Miskin
+c.	>100% - Non-FM
+2.	Pengiraan had kifayah ini adalah dinamik. Sistem akan membuat pengiraan mengikut formula terkini.
+3.	Notifikasi berkenaan maklumat ID ketua keluarga akan dihantar kepada pegawai yang akan membuat pengesahan.
+4.	Pengesahan akan dilakukan oleh pegawai yang telah dikonfigurasi untuk mengesahkan profil ini.
+5.	Jika tarikh masuk islam diisi, status individu tersebut akan menjadi ‘Muallaf’ dengan syarat tempoh tarikh masuk islam dengan tarikh semasa kurang dari 5 tahun.
+6.	Status keluarga akan ditentukan oleh proses pengiraan had kifayah.
+7.	Status individu tanggungan akan menggunakan tetapan status keluarga tersebut. (Fakir, Miskin, Muallaf, Non-FM)
+8.	Simpan maklumat 
+a.	%Had kifayah kepada %had kifayah syor
+b.	status keluarga kepada kategori keluarga asnaf syor
+c.	status asnaf = status keluarga kepada kategori asnaf syor 
+9.	Ringkasan maklumat asnaf yang digenerate oleh AI perlu disimpan di dalam pangkalan data (syor pengesahan) berserta tarikh janaan laporan (tarikh pengesyoran) dan akan dipaparkan kemudian pada proses pengesahan.
+Penggunaan Maklumat:
+Maklumat Had Kifayah
+1.	No Pengenalan Ketua Keluarga(R)
+2.	Nama (R)
+3.	Alamat (R)
+4.	%Had Kifayah syor (C)
+5.	Kategori Keluarga Asnaf syor (C)
+6.	Kategori Asnaf syor (C)
+7.	Kategori Tanggungan syor (C)
+8.	Syor Pengesahan (C) 
+9.	Tarikh Pengesyoran (C)
+Polisi dan Dasar Berkaitan
+1.	Dasar Keselamatan ICT LZS
+•	Polisi Pengurusan Data ICT Kuatkuasa 1 Jan 2020 (3)
+•	Polisi Perlindungan Data Peribadi LZS
+2.	Garis Panduan dan Syarat Kelayakan Agihan Zakat
+•	Menetapkan prinsip asas mengenai pemberian zakat termasuk had keperluan asas dan mekanisme kelayakan penerima.
+•	Kelulusan kadar kifayah mesti selari dengan keutamaan dan strategi agihan semasa.
+Kaedah Alternatif
+Tiada 
+Ciri-ciri Kualiti (Keperluan Bukan Fungsian)
+Tiada 
+Catatan Tambahan:
+Aktiviti akan dipanggil setiap kali membuat pendaftaran pantas asnaf.
diff --git a/docs/json/form/customScript.js b/docs/json/form/customScript.js
index babe8a0..28d3152 100644
--- a/docs/json/form/customScript.js
+++ b/docs/json/form/customScript.js
@@ -1,41 +1,889 @@
-// Conditional logic for showing 'Nyatakan keperluan lain' field
-onFieldChange("keperluan_mendesak", (value) => {
-  if (Array.isArray(value) && value.includes("lain_lain")) {
-    showField("keperluan_lain_nyatakan");
-  } else {
-    hideField("keperluan_lain_nyatakan");
-    setField("keperluan_lain_nyatakan", "");
+this.hideField("form_jeniskp_1");
+this.hideField("form_jeniskp_2");
+this.hideField("form_jeniskp_3");
+
+this.onFieldChange("select_1", (value) => {
+  this.hideField("form_jeniskp_1");
+  this.hideField("form_jeniskp_2");
+  this.hideField("form_jeniskp_3");
+  if (value && value.trim()) {
+    if (value == "jeniskp_1") this.showField("form_jeniskp_1");
+    if (value == "jeniskp_2") this.showField("form_jeniskp_2");
+    if (value == "jeniskp_3") this.showField("form_jeniskp_3");
   }
 });
-
-// Show success message on form load
-showInfo(
-  "Sila lengkapkan semua maklumat yang diperlukan untuk penilaian awal."
-);
 // Conditional Logic Script
 
-// Conditional logic for field: keperluan_lain_nyatakan
-onFieldChange("keperluan_mendesak", function () {
-  if (
-    String(getField("keperluan_mendesak") || "")
-      .toLowerCase()
-      .includes("lain_lain".toLowerCase())
-  ) {
-    showField("keperluan_lain_nyatakan");
+// Conditional Logic Script
+
+// Conditional Logic Script
+
+// Conditional Logic Script
+
+// Conditional Logic Script
+
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
   } else {
-    hideField("keperluan_lain_nyatakan");
+    showField("nyatakan_lain2");
   }
 });
 
-// Initial evaluation for field: keperluan_lain_nyatakan
+// Initial evaluation for field: nyatakan_lain2
 (function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+
+// Hide "Nyatakan Hubungan Lain-lain" initially
+this.hideField("hubungan_lain_nyatakan");
+
+// Show/hide relationship specification field
+this.onFieldChange("hubungan_keluarga", (value) => {
+  if (value && value.includes("lain_lain")) {
+    this.showField("hubungan_lain_nyatakan");
+  } else {
+    this.hideField("hubungan_lain_nyatakan");
+  }
+});
+
+// Hide "Sebab Pembayaran Tunai" initially
+this.hideField("sebab_tunai");
+
+// Show/hide cash payment reason field
+this.onFieldChange("cara_pembayaran", (value) => {
+  if (value && value.includes("tunai")) {
+    this.showField("sebab_tunai");
+  } else {
+    this.hideField("sebab_tunai");
+  }
+});
+
+// Hide education specification field initially
+this.hideField("pendidikan_lain_tanggungan");
+
+// Show/hide education specification field
+this.onFieldChange("pendidikan_tertinggi_tanggungan", (value) => {
+  if (value && value.includes("lain_lain")) {
+    this.showField("pendidikan_lain_tanggungan");
+  } else {
+    this.hideField("pendidikan_lain_tanggungan");
+  }
+});
+
+// Hide school information initially
+this.hideField("maklumat_sekolah");
+
+// Show/hide school information based on schooling status
+this.onFieldChange("bersekolah_tanggungan", (value) => {
+  if (value === "ya") {
+    this.showField("maklumat_sekolah");
+  } else {
+    this.hideField("maklumat_sekolah");
+  }
+});
+
+// Handle repeating group conditional logic for each dependent
+this.onFieldChange("tanggungan_maklumat", (value) => {
+  if (value && Array.isArray(value)) {
+    value.forEach((item, index) => {
+      // Handle race specification for each dependent
+      if (item.bangsa_tanggungan !== "lain_lain") {
+        // Hide the specification field for this item
+        const fieldName = `tanggungan_maklumat[${index}].bangsa_lain_tanggungan`;
+        // Note: Repeating group field hiding requires specific handling
+      }
+    });
+  }
+});
+
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+
+// Conditional logic for field: hubungan_lain_nyatakan
+onFieldChange("hubungan_keluarga", function () {
   if (
-    String(getField("keperluan_mendesak") || "")
+    !String(getField("hubungan_keluarga") || "")
       .toLowerCase()
       .includes("lain_lain".toLowerCase())
   ) {
-    showField("keperluan_lain_nyatakan");
+    hideField("hubungan_lain_nyatakan");
   } else {
-    hideField("keperluan_lain_nyatakan");
+    showField("hubungan_lain_nyatakan");
+  }
+});
+
+// Initial evaluation for field: hubungan_lain_nyatakan
+(function () {
+  if (
+    !String(getField("hubungan_keluarga") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("hubungan_lain_nyatakan");
+  } else {
+    showField("hubungan_lain_nyatakan");
+  }
+})();
+
+// Conditional logic for field: sebab_tunai
+onFieldChange("cara_pembayaran", function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+});
+
+// Initial evaluation for field: sebab_tunai
+(function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+})();
+
+// Conditional logic for field: pendidikan_lain_tanggungan
+onFieldChange("pendidikan_tertinggi_tanggungan", function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+});
+
+// Initial evaluation for field: pendidikan_lain_tanggungan
+(function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+})();
+
+// Conditional logic for field: maklumat_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("maklumat_sekolah");
+  } else {
+    showField("maklumat_sekolah");
+  }
+});
+
+// Initial evaluation for field: maklumat_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("maklumat_sekolah");
+  } else {
+    showField("maklumat_sekolah");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+
+// Conditional logic for field: hubungan_lain_nyatakan
+onFieldChange("hubungan_keluarga", function () {
+  if (
+    !String(getField("hubungan_keluarga") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("hubungan_lain_nyatakan");
+  } else {
+    showField("hubungan_lain_nyatakan");
+  }
+});
+
+// Initial evaluation for field: hubungan_lain_nyatakan
+(function () {
+  if (
+    !String(getField("hubungan_keluarga") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("hubungan_lain_nyatakan");
+  } else {
+    showField("hubungan_lain_nyatakan");
+  }
+})();
+
+// Conditional logic for field: bangsa_lain_tanggungan
+onFieldChange("bangsa_tanggungan", function () {
+  if (getField("bangsa_tanggungan") !== "lain_lain") {
+    hideField("bangsa_lain_tanggungan");
+  } else {
+    showField("bangsa_lain_tanggungan");
+  }
+});
+
+// Initial evaluation for field: bangsa_lain_tanggungan
+(function () {
+  if (getField("bangsa_tanggungan") !== "lain_lain") {
+    hideField("bangsa_lain_tanggungan");
+  } else {
+    showField("bangsa_lain_tanggungan");
+  }
+})();
+
+// Conditional logic for field: sebab_tunai
+onFieldChange("cara_pembayaran", function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+});
+
+// Initial evaluation for field: sebab_tunai
+(function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+})();
+
+// Conditional logic for field: pendidikan_lain_tanggungan
+onFieldChange("pendidikan_tertinggi_tanggungan", function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+});
+
+// Initial evaluation for field: pendidikan_lain_tanggungan
+(function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+})();
+
+// Conditional logic for field: nama_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("nama_sekolah");
+  } else {
+    showField("nama_sekolah");
+  }
+});
+
+// Initial evaluation for field: nama_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("nama_sekolah");
+  } else {
+    showField("nama_sekolah");
+  }
+})();
+
+// Conditional logic for field: alamat_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("alamat_sekolah");
+  } else {
+    showField("alamat_sekolah");
+  }
+});
+
+// Initial evaluation for field: alamat_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("alamat_sekolah");
+  } else {
+    showField("alamat_sekolah");
+  }
+})();
+
+// Conditional logic for field: daerah_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("daerah_sekolah");
+  } else {
+    showField("daerah_sekolah");
+  }
+});
+
+// Initial evaluation for field: daerah_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("daerah_sekolah");
+  } else {
+    showField("daerah_sekolah");
+  }
+})();
+
+// Conditional logic for field: negeri_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("negeri_sekolah");
+  } else {
+    showField("negeri_sekolah");
+  }
+});
+
+// Initial evaluation for field: negeri_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("negeri_sekolah");
+  } else {
+    showField("negeri_sekolah");
+  }
+})();
+
+// Conditional logic for field: poskod_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("poskod_sekolah");
+  } else {
+    showField("poskod_sekolah");
+  }
+});
+
+// Initial evaluation for field: poskod_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("poskod_sekolah");
+  } else {
+    showField("poskod_sekolah");
+  }
+})();
+// Conditional Logic Script
+
+// Conditional logic for field: nyatakan_lain2
+onFieldChange("radio_bangsa", function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+});
+
+// Initial evaluation for field: nyatakan_lain2
+(function () {
+  if (getField("radio_bangsa") !== "lain") {
+    hideField("nyatakan_lain2");
+  } else {
+    showField("nyatakan_lain2");
+  }
+})();
+
+// Conditional logic for field: text_14
+onFieldChange("radio_pendidikan", function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+});
+
+// Initial evaluation for field: text_14
+(function () {
+  if (getField("radio_pendidikan") !== "lain") {
+    hideField("text_14");
+  } else {
+    showField("text_14");
+  }
+})();
+
+// Conditional logic for field: hubungan_lain_nyatakan
+onFieldChange("hubungan_keluarga", function () {
+  if (
+    !String(getField("hubungan_keluarga") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("hubungan_lain_nyatakan");
+  } else {
+    showField("hubungan_lain_nyatakan");
+  }
+});
+
+// Initial evaluation for field: hubungan_lain_nyatakan
+(function () {
+  if (
+    !String(getField("hubungan_keluarga") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("hubungan_lain_nyatakan");
+  } else {
+    showField("hubungan_lain_nyatakan");
+  }
+})();
+
+// Conditional logic for field: bangsa_lain_tanggungan
+onFieldChange("bangsa_tanggungan", function () {
+  if (getField("bangsa_tanggungan") !== "lain_lain") {
+    hideField("bangsa_lain_tanggungan");
+  } else {
+    showField("bangsa_lain_tanggungan");
+  }
+});
+
+// Initial evaluation for field: bangsa_lain_tanggungan
+(function () {
+  if (getField("bangsa_tanggungan") !== "lain_lain") {
+    hideField("bangsa_lain_tanggungan");
+  } else {
+    showField("bangsa_lain_tanggungan");
+  }
+})();
+
+// Conditional logic for field: sebab_tunai
+onFieldChange("cara_pembayaran", function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+});
+
+// Initial evaluation for field: sebab_tunai
+(function () {
+  if (
+    !String(getField("cara_pembayaran") || "")
+      .toLowerCase()
+      .includes("tunai".toLowerCase())
+  ) {
+    hideField("sebab_tunai");
+  } else {
+    showField("sebab_tunai");
+  }
+})();
+
+// Conditional logic for field: pendidikan_lain_tanggungan
+onFieldChange("pendidikan_tertinggi_tanggungan", function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+});
+
+// Initial evaluation for field: pendidikan_lain_tanggungan
+(function () {
+  if (
+    !String(getField("pendidikan_tertinggi_tanggungan") || "")
+      .toLowerCase()
+      .includes("lain_lain".toLowerCase())
+  ) {
+    hideField("pendidikan_lain_tanggungan");
+  } else {
+    showField("pendidikan_lain_tanggungan");
+  }
+})();
+
+// Conditional logic for field: nama_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("nama_sekolah");
+  } else {
+    showField("nama_sekolah");
+  }
+});
+
+// Initial evaluation for field: nama_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("nama_sekolah");
+  } else {
+    showField("nama_sekolah");
+  }
+})();
+
+// Conditional logic for field: alamat_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("alamat_sekolah");
+  } else {
+    showField("alamat_sekolah");
+  }
+});
+
+// Initial evaluation for field: alamat_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("alamat_sekolah");
+  } else {
+    showField("alamat_sekolah");
+  }
+})();
+
+// Conditional logic for field: daerah_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("daerah_sekolah");
+  } else {
+    showField("daerah_sekolah");
+  }
+});
+
+// Initial evaluation for field: daerah_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("daerah_sekolah");
+  } else {
+    showField("daerah_sekolah");
+  }
+})();
+
+// Conditional logic for field: negeri_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("negeri_sekolah");
+  } else {
+    showField("negeri_sekolah");
+  }
+});
+
+// Initial evaluation for field: negeri_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("negeri_sekolah");
+  } else {
+    showField("negeri_sekolah");
+  }
+})();
+
+// Conditional logic for field: poskod_sekolah
+onFieldChange("bersekolah_tanggungan", function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("poskod_sekolah");
+  } else {
+    showField("poskod_sekolah");
+  }
+});
+
+// Initial evaluation for field: poskod_sekolah
+(function () {
+  if (getField("bersekolah_tanggungan") !== "ya") {
+    hideField("poskod_sekolah");
+  } else {
+    showField("poskod_sekolah");
   }
 })();
diff --git a/docs/json/form/formComponents.json b/docs/json/form/formComponents.json
index 8c4ce10..8ee39bd 100644
--- a/docs/json/form/formComponents.json
+++ b/docs/json/form/formComponents.json
@@ -2,9 +2,9 @@
   {
     "type": "heading",
     "props": {
-      "name": "heading_main",
-      "level": 1,
-      "value": "Penilaian Awal",
+      "name": "heading_2",
+      "level": 2,
+      "value": "SEKSYEN A",
       "width": "100%",
       "gridColumn": "span 12",
       "conditionalLogic": {
@@ -16,10 +16,829 @@
     }
   },
   {
-    "type": "paragraph",
+    "type": "heading",
     "props": {
-      "name": "paragraph_intro",
-      "value": "Sila lengkapkan borang penilaian awal ini untuk membantu kami memahami keperluan anda dengan lebih baik.",
+      "name": "heading_1",
+      "level": 3,
+      "value": "1. MAKLUMAT PENDAFTARAN ASNAF (KETUA KELUARGA)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "Untuk Mualaf, nama mengikut kad pengenalan",
+      "name": "text_3",
+      "type": "text",
+      "label": "Nama",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "help": "",
+      "name": "select_1",
+      "type": "select",
+      "label": "Jenis Kad Pengenalan",
+      "width": "100%",
+      "options": [
+        { "label": "Sila Pilih Jenis Kad Pengenalan", "value": "jeniskp" },
+        { "label": "MyKad/MyKid", "value": "jeniskp_1" },
+        { "label": "No. K/P/Polis/Tentera/No. Pasport", "value": "jeniskp_2" },
+        { "label": "No. Sijil Beranak", "value": "jeniskp_3" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "",
+      "name": "form_jeniskp_1",
+      "type": "text",
+      "label": "MyKad/MyKid",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "",
+      "name": "form_jeniskp_2",
+      "type": "text",
+      "label": "No. K/P/Polis/Tentera/No. Pasport",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "",
+      "name": "form_jeniskp_3",
+      "type": "text",
+      "label": "No. Sijil Beranak",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "Isi Jika Berkenaan",
+      "name": "text_warganegara",
+      "type": "text",
+      "label": "Warganegara",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "help": "",
+      "name": "radio_jantina",
+      "type": "radio",
+      "label": "Jantina",
+      "width": "50%",
+      "options": [
+        { "label": "Lelaki", "value": "lelaki" },
+        { "label": "Perempuan", "value": "perempuan" }
+      ],
+      "gridColumn": "span 6",
+      "validation": "required",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "help": "",
+      "name": "radio_bangsa",
+      "type": "select",
+      "label": "Bangsa",
+      "width": "50%",
+      "options": [
+        { "label": "Melayu", "value": "melayu" },
+        { "label": "Cina", "value": "cina" },
+        { "label": "India", "value": "india" },
+        { "label": "Lain-lain", "value": "lain" }
+      ],
+      "gridColumn": "span 6",
+      "validation": "required",
+      "placeholder": "Select an option"
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "",
+      "name": "nyatakan_lain2",
+      "type": "text",
+      "label": "Nyatakan (Bangsa Lain-Lain)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Enter text...",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          { "field": "radio_bangsa", "value": "lain", "operator": "not_equals" }
+        ]
+      }
+    }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "help": "",
+      "name": "radio_9_copy",
+      "type": "radio",
+      "label": "Bersekolah",
+      "width": "50%",
+      "options": [
+        { "label": "Ya", "value": "ya" },
+        { "label": "Tidak", "value": "tidak" }
+      ],
+      "gridColumn": "span 6",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "help": "",
+      "name": "radio_pendidikan",
+      "type": "select",
+      "label": "Pendidikan Tertinggi",
+      "width": "50%",
+      "options": [
+        { "label": "Peringkat Rendah", "value": "rendah" },
+        { "label": "SRP/PMR", "value": "srp" },
+        { "label": "SPM", "value": "spm" },
+        { "label": "Sijil", "value": "sijil" },
+        { "label": "Diploma", "value": "diploma" },
+        { "label": "STPM", "value": "stpm" },
+        { "label": "Ijazah", "value": "ijazah" },
+        { "label": "Lain-Lain", "value": "lain" }
+      ],
+      "gridColumn": "span 6",
+      "validation": "required",
+      "placeholder": "Select an option"
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "",
+      "name": "text_14",
+      "type": "text",
+      "label": "Nyatakan (Pendidikan Tertinggi Lain-Lain)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Enter text...",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "radio_pendidikan",
+            "value": "lain",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "date",
+    "props": {
+      "help": "Isi Jika Berkenaan",
+      "name": "date_masukislam",
+      "type": "date",
+      "label": "Tarikh Masuk Islam",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "date",
+    "props": {
+      "help": "Isi Jika Berkenaan",
+      "name": "date_masukislam_copy",
+      "type": "date",
+      "label": "Tarikh Mula Kelas fardu Ain Muallaf (KFAM)",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "help": "",
+      "name": "select_statusperkahwinan",
+      "type": "select",
+      "label": "Status Perkahwinan",
+      "width": "100%",
+      "options": [
+        { "label": "Berkahwin", "value": "berkahwin" },
+        { "label": "Ibu Tinggal/Bapa Tinggal", "value": "ibubapatunggal" },
+        { "label": "Bujang", "value": "bujang" },
+        { "label": "Duda", "value": "duda" },
+        { "label": "Janda", "value": "janda" },
+        { "label": "Balu", "value": "balu" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "Select an option",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "heading",
+    "props": {
+      "name": "heading_seksyen_b",
+      "level": 2,
+      "value": "SEKSYEN B",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "heading",
+    "props": {
+      "name": "heading_tanggungan",
+      "level": 3,
+      "value": "1. MAKLUMAT PERIBADI TANGGUNGAN (Ruangan WAJIB diisi)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "checkbox",
+    "props": {
+      "help": "Pilih semua yang berkenaan",
+      "name": "hubungan_keluarga",
+      "type": "checkbox",
+      "label": "Hubungan dengan Pemohon/Asnaf",
+      "width": "100%",
+      "options": [
+        { "label": "Pasangan Pemohon", "value": "pasangan" },
+        { "label": "Isteri Kedua", "value": "isteri_kedua" },
+        { "label": "Isteri Ketiga", "value": "isteri_ketiga" },
+        { "label": "Isteri Keempat", "value": "isteri_keempat" },
+        { "label": "Ipar", "value": "ipar" },
+        { "label": "Abang", "value": "abang" },
+        { "label": "Bapa", "value": "bapa" },
+        { "label": "Ibu", "value": "ibu" },
+        { "label": "Kakak", "value": "kakak" },
+        { "label": "Adik", "value": "adik" },
+        { "label": "Anak", "value": "anak" },
+        { "label": "Cucu", "value": "cucu" },
+        { "label": "Bapa Mertua", "value": "bapa_mertua" },
+        { "label": "Ibu Mertua", "value": "ibu_mertua" },
+        { "label": "Lain-lain (Sila Nyatakan)", "value": "lain_lain" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required"
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "hubungan_lain_nyatakan",
+      "type": "text",
+      "label": "Nyatakan Hubungan Lain-lain",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Sila nyatakan hubungan lain-lain",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "hubungan_keluarga",
+            "value": "lain_lain",
+            "operator": "not_contains"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "nama_tanggungan",
+      "type": "text",
+      "label": "Nama (Untuk Mualaf, nama mengikut kad pengenalan)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "Masukkan nama lengkap",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "name": "jenis_kad_tanggungan",
+      "type": "select",
+      "label": "Jenis Pengenalan",
+      "width": "100%",
+      "options": [
+        { "label": "Sila Pilih Jenis Pengenalan", "value": "" },
+        { "label": "MyKad/MyKid", "value": "mykad" },
+        { "label": "No. K/P/Polis/Tentera/No. Pasport", "value": "kp_polis" },
+        { "label": "No. Sijil Beranak", "value": "sijil_beranak" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "Sila pilih jenis pengenalan",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "no_pengenalan_tanggungan",
+      "type": "text",
+      "label": "No. Pengenalan",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "Masukkan nombor pengenalan",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "name": "jantina_tanggungan",
+      "type": "radio",
+      "label": "Jantina",
+      "width": "100%",
+      "options": [
+        { "label": "Lelaki", "value": "lelaki" },
+        { "label": "Perempuan", "value": "perempuan" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "date",
+    "props": {
+      "name": "tarikh_lahir_tanggungan",
+      "type": "date",
+      "label": "Tarikh Lahir",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "required",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "tempat_lahir_tanggungan",
+      "type": "text",
+      "label": "Tempat Lahir",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan tempat lahir",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "name": "bangsa_tanggungan",
+      "type": "select",
+      "label": "Bangsa",
+      "width": "100%",
+      "options": [
+        { "label": "Sila Pilih Bangsa", "value": "" },
+        { "label": "Melayu", "value": "melayu" },
+        { "label": "Cina", "value": "cina" },
+        { "label": "India", "value": "india" },
+        { "label": "Lain-lain (Sila Nyatakan)", "value": "lain_lain" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "placeholder": "Sila pilih bangsa",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "bangsa_lain_tanggungan",
+      "type": "text",
+      "label": "Nyatakan Bangsa Lain-lain",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Sila nyatakan bangsa lain-lain",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bangsa_tanggungan",
+            "value": "lain_lain",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "select",
+    "props": {
+      "name": "status_kahwin_tanggungan",
+      "type": "select",
+      "label": "Status Perkahwinan",
+      "width": "100%",
+      "options": [
+        { "label": "Sila Pilih Status Perkahwinan", "value": "" },
+        { "label": "Berkahwin", "value": "berkahwin" },
+        { "label": "Ibu Tinggal/Bapa Tinggal", "value": "ibu_bapa_tinggal" },
+        { "label": "Bujang", "value": "bujang" },
+        { "label": "Duda", "value": "duda" },
+        { "label": "Janda", "value": "janda" },
+        { "label": "Balu", "value": "balu" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Sila pilih status perkahwinan",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "date",
+    "props": {
+      "help": "Jika Berkenaan",
+      "name": "tarikh_masuk_islam_tanggungan",
+      "type": "date",
+      "label": "Tarikh Masuk Islam",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "date",
+    "props": {
+      "help": "Jika Berkenaan",
+      "name": "tarikh_mula_kfam_tanggungan",
+      "type": "date",
+      "label": "Tarikh Mula KFAM",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "help": "Jika Berkenaan",
+      "name": "warganegara_tanggungan",
+      "type": "text",
+      "label": "Warganegara",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan warganegara",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "tempat_menetap_tanggungan",
+      "type": "text",
+      "label": "Tempoh Menetap Di Selangor",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Contoh: 5 Tahun",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "no_telefon_tanggungan",
+      "type": "text",
+      "label": "No. Telefon/Telefon Bimbit",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Contoh: 03-12345678",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "heading",
+    "props": {
+      "name": "heading_maklumat_perbankan",
+      "level": 3,
+      "value": "MAKLUMAT PERBANKAN (Jika Berkenaan)",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "nama_pemegang_akaun",
+      "type": "text",
+      "label": "Nama Pemegang Akaun",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan nama pemegang akaun",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "nama_bank",
+      "type": "text",
+      "label": "Bank",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "placeholder": "Masukkan nama bank",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "no_akaun_bank",
+      "type": "text",
+      "label": "No. Akaun Bank",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "placeholder": "Masukkan nombor akaun",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "checkbox",
+    "props": {
+      "name": "cara_pembayaran",
+      "type": "checkbox",
+      "label": "Cara Pembayaran",
+      "width": "100%",
+      "options": [
+        { "label": "Akaun", "value": "akaun" },
+        { "label": "Cek", "value": "cek" },
+        { "label": "Tunai, Nyatakan Sebab", "value": "tunai" },
+        { "label": "Uzur/Sakit", "value": "uzur_sakit" },
+        { "label": "Muflis", "value": "muflis" },
+        { "label": "Disenarai Hitam", "value": "disenarai_hitam" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "sebab_tunai",
+      "type": "text",
+      "label": "Sebab Pembayaran Tunai",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Sila nyatakan sebab",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "cara_pembayaran",
+            "value": "tunai",
+            "operator": "not_contains"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "heading",
+    "props": {
+      "name": "heading_pendidikan",
+      "level": 3,
+      "value": "2. PENDIDIKAN",
       "width": "100%",
       "gridColumn": "span 12",
       "conditionalLogic": {
@@ -33,10 +852,9 @@
   {
     "type": "radio",
     "props": {
-      "help": "Sila nyatakan sama ada anda mempunyai komitmen kewangan yang tinggi",
-      "name": "komitmen_pembiayaan",
+      "name": "bersekolah_tanggungan",
       "type": "radio",
-      "label": "1. Adakah tuan/puan mempunyai komitmen dan pembiayaan melibatkan kos yang tinggi?",
+      "label": "Bersekolah",
       "width": "100%",
       "options": [
         { "label": "Ya", "value": "ya" },
@@ -55,23 +873,248 @@
   {
     "type": "checkbox",
     "props": {
-      "help": "Sila pilih keperluan yang mendesak. Boleh pilih lebih daripada satu.",
-      "name": "keperluan_mendesak",
+      "name": "pendidikan_tertinggi_tanggungan",
       "type": "checkbox",
-      "label": "2. Apakah keperluan tuan/puan mendesak sekarang ini?",
+      "label": "Pendidikan Tertinggi",
       "width": "100%",
       "options": [
-        { "label": "Perubatan Kritikal", "value": "perubatan_kritikal" },
-        { "label": "Bencana", "value": "bencana" },
-        { "label": "Kematian", "value": "kematian" },
+        { "label": "Peringkat Rendah", "value": "peringkat_rendah" },
+        { "label": "SRP/PMR", "value": "srp_pmr" },
+        { "label": "SPM", "value": "spm" },
+        { "label": "STPM", "value": "stpm" },
+        { "label": "Pra Sekolah", "value": "pra_sekolah" },
+        { "label": "Sekolah Rendah Kebangsaan", "value": "srk" },
+        { "label": "Sekolah Menengah Kebangsaan", "value": "smk" },
+        { "label": "Sekolah Menengah Agama", "value": "sma" },
+        { "label": "Sijil", "value": "sijil" },
+        { "label": "Diploma", "value": "diploma" },
+        { "label": "Ijazah", "value": "ijazah" },
+        { "label": "Lain-Lain (Sila Nyatakan)", "value": "lain_lain" },
         {
-          "label": "Konflik Keluarga (tiada tempat bergantung)",
-          "value": "konflik_keluarga"
+          "label": "Sekolah Rendah Kebangsaan dan Agama",
+          "value": "srk_agama"
         },
-        { "label": "Tiada Tempat Tinggal", "value": "tiada_tempat_tinggal" },
-        { "label": "Tunggakan Bil Utiliti", "value": "tunggakan_utiliti" },
-        { "label": "Selain dari di atas", "value": "lain_lain" },
-        { "label": "Tidak mendesak", "value": "tidak_mendesak" }
+        { "label": "IPTA/IPTS", "value": "ipta_ipts" },
+        { "label": "Maahad Tahfiz", "value": "maahad_tahfiz" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "pendidikan_lain_tanggungan",
+      "type": "text",
+      "label": "Nyatakan Pendidikan Lain-lain",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Sila nyatakan pendidikan lain-lain",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "pendidikan_tertinggi_tanggungan",
+            "value": "lain_lain",
+            "operator": "not_contains"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "nama_sekolah",
+      "type": "text",
+      "label": "Nama Sekolah/Institusi",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan nama sekolah/institusi",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bersekolah_tanggungan",
+            "value": "ya",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "textarea",
+    "props": {
+      "name": "alamat_sekolah",
+      "type": "textarea",
+      "label": "Alamat Sekolah/Institusi",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan alamat lengkap sekolah/institusi",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bersekolah_tanggungan",
+            "value": "ya",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "daerah_sekolah",
+      "type": "text",
+      "label": "Daerah",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "placeholder": "Masukkan daerah",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bersekolah_tanggungan",
+            "value": "ya",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "negeri_sekolah",
+      "type": "text",
+      "label": "Negeri",
+      "width": "50%",
+      "gridColumn": "span 6",
+      "validation": "",
+      "placeholder": "Masukkan negeri",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bersekolah_tanggungan",
+            "value": "ya",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "text",
+    "props": {
+      "name": "poskod_sekolah",
+      "type": "text",
+      "label": "Poskod",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "validation": "",
+      "placeholder": "Masukkan poskod",
+      "conditionalLogic": {
+        "action": "hide",
+        "enabled": true,
+        "operator": "and",
+        "conditions": [
+          {
+            "field": "bersekolah_tanggungan",
+            "value": "ya",
+            "operator": "not_equals"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "name": "tinggal_bersama_keluarga",
+      "type": "radio",
+      "label": "Tinggal Bersama Keluarga",
+      "width": "100%",
+      "options": [
+        { "label": "Ya", "value": "ya" },
+        { "label": "Tidak", "value": "tidak" },
+        { "label": "Asrama", "value": "asrama" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "heading",
+    "props": {
+      "name": "heading_family_tree",
+      "level": 2,
+      "value": "PILIHAN FAMILY TREE",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "paragraph",
+    "props": {
+      "name": "paragraph_family_tree",
+      "value": "Sila pilih sama ada anda ingin melihat family tree atau tidak.",
+      "width": "100%",
+      "gridColumn": "span 12",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "help": "Pilih sama ada ingin melihat family tree atau tidak",
+      "name": "lihat_family_tree",
+      "type": "radio",
+      "label": "Lihat Family Tree?",
+      "width": "100%",
+      "options": [
+        { "label": "Ya", "value": "ya" },
+        { "label": "Tidak", "value": "tidak" }
       ],
       "gridColumn": "span 12",
       "validation": "required",
@@ -84,75 +1127,11 @@
     }
   },
   {
-    "type": "textarea",
+    "type": "heading",
     "props": {
-      "help": "Sila nyatakan keperluan lain yang tidak disenaraikan di atas",
-      "name": "keperluan_lain_nyatakan",
-      "rows": 3,
-      "type": "textarea",
-      "label": "Nyatakan keperluan lain:",
-      "width": "100%",
-      "gridColumn": "span 12",
-      "validation": "",
-      "placeholder": "Sila nyatakan keperluan anda...",
-      "conditionalLogic": {
-        "action": "show",
-        "enabled": true,
-        "operator": "and",
-        "conditions": [
-          {
-            "field": "keperluan_mendesak",
-            "value": "lain_lain",
-            "operator": "contains"
-          }
-        ]
-      }
-    }
-  },
-  {
-    "type": "file",
-    "props": {
-      "help": "Sila muat naik dokumen yang berkaitan dengan permohonan anda. Format yang diterima: PDF, DOC, DOCX, JPG, PNG. Saiz maksimum: 10MB",
-      "name": "dokumen_berkaitan",
-      "type": "file",
-      "label": "3. Upload dokumen yang berkaitan",
-      "width": "100%",
-      "accept": ".pdf,.doc,.docx,.jpg,.jpeg,.png",
-      "multiple": true,
-      "gridColumn": "span 12",
-      "validation": "",
-      "conditionalLogic": {
-        "action": "show",
-        "enabled": false,
-        "operator": "and",
-        "conditions": []
-      }
-    }
-  },
-  {
-    "type": "textarea",
-    "props": {
-      "help": "Sila berikan catatan tambahan yang boleh membantu kami memahami permohonan anda",
-      "name": "catatan_tambahan",
-      "rows": 5,
-      "type": "textarea",
-      "label": "4. Catatan tambahan berkaitan permohonan",
-      "width": "100%",
-      "gridColumn": "span 12",
-      "validation": "",
-      "placeholder": "Sila berikan catatan tambahan...",
-      "conditionalLogic": {
-        "action": "show",
-        "enabled": false,
-        "operator": "and",
-        "conditions": []
-      }
-    }
-  },
-  {
-    "type": "divider",
-    "props": {
-      "name": "divider_submit",
+      "name": "heading_kategori_asnaf",
+      "level": 2,
+      "value": "PILIHAN KATEGORI ASNAF",
       "width": "100%",
       "gridColumn": "span 12",
       "conditionalLogic": {
@@ -164,16 +1143,11 @@
     }
   },
   {
-    "type": "button",
+    "type": "paragraph",
     "props": {
-      "name": "submit_button",
-      "size": "lg",
-      "label": "Hantar Penilaian Awal",
+      "name": "paragraph_kategori_asnaf",
+      "value": "Sila pilih kategori asnaf yang bersesuaian.",
       "width": "100%",
-      "onClick": "",
-      "variant": "primary",
-      "disabled": false,
-      "buttonType": "submit",
       "gridColumn": "span 12",
       "conditionalLogic": {
         "action": "show",
@@ -182,5 +1156,27 @@
         "conditions": []
       }
     }
+  },
+  {
+    "type": "radio",
+    "props": {
+      "help": "Pilih kategori asnaf",
+      "name": "kategori_asnaf",
+      "type": "radio",
+      "label": "Kategori Asnaf",
+      "width": "100%",
+      "options": [
+        { "label": "Fakir Miskin", "value": "fakir_miskin" },
+        { "label": "Bukan Fakir Miskin", "value": "bukan_fakir_miskin" }
+      ],
+      "gridColumn": "span 12",
+      "validation": "required",
+      "conditionalLogic": {
+        "action": "show",
+        "enabled": false,
+        "operator": "and",
+        "conditions": []
+      }
+    }
   }
 ]
diff --git a/docs/json/process-builder/currentDefiniton.json b/docs/json/process-builder/currentDefiniton.json
new file mode 100644
index 0000000..1d1562d
--- /dev/null
+++ b/docs/json/process-builder/currentDefiniton.json
@@ -0,0 +1,2195 @@
+{
+  "edges": [
+    {
+      "id": "start-1751870920411-form-1752471000000-1752110219601",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "start-1751870920411",
+      "target": "form-1752471000000",
+      "animated": true,
+      "sourceHandle": "start-1751870920411-right",
+      "targetHandle": "form-1752471000000-left"
+    },
+    {
+      "id": "form-1752471000000-api-1752471000010-1752110221444",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-1752471000000",
+      "target": "api-1752471000010",
+      "animated": true,
+      "sourceHandle": "form-1752471000000-bottom",
+      "targetHandle": "api-1752471000010-top"
+    },
+    {
+      "id": "api-1752471000010-script-1752471000020-1752110222889",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-1752471000010",
+      "target": "script-1752471000020",
+      "animated": true,
+      "sourceHandle": "api-1752471000010-right",
+      "targetHandle": "script-1752471000020-left"
+    },
+    {
+      "id": "script-1752471000020-form-1751870928350-1752110513125",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-1752471000020",
+      "target": "form-1751870928350",
+      "animated": true,
+      "sourceHandle": "script-1752471000020-right",
+      "targetHandle": "form-1751870928350-left"
+    },
+    {
+      "id": "form-1751870928350-api-1751871528249-1752110547688",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-1751870928350",
+      "target": "api-1751871528249",
+      "animated": true,
+      "sourceHandle": "form-1751870928350-bottom",
+      "targetHandle": "api-1751871528249-top"
+    },
+    {
+      "id": "api-1751871528249-script-1751871635000-1752110661170",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-1751871528249",
+      "target": "script-1751871635000",
+      "animated": true,
+      "sourceHandle": "api-1751871528249-right",
+      "targetHandle": "script-1751871635000-left"
+    },
+    {
+      "id": "start-1751870920411-form-1753000000000-1752115210580",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "start-1751870920411",
+      "target": "form-1753000000000",
+      "animated": true,
+      "sourceHandle": "start-1751870920411-right",
+      "targetHandle": "form-1753000000000-left"
+    },
+    {
+      "id": "form-1753000000000-api-1753000000001-1752115217959",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-1753000000000",
+      "target": "api-1753000000001",
+      "animated": true,
+      "sourceHandle": "form-1753000000000-bottom",
+      "targetHandle": "api-1753000000001-top"
+    },
+    {
+      "id": "api-1753000000001-script-1753000000002-1752115222952",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-1753000000001",
+      "target": "script-1753000000002",
+      "animated": true,
+      "sourceHandle": "api-1753000000001-right",
+      "targetHandle": "script-1753000000002-left"
+    },
+    {
+      "id": "script-1753000000002-gateway-1753100000000-1752202680793",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-1753000000002",
+      "target": "gateway-1753100000000",
+      "animated": true,
+      "sourceHandle": "script-1753000000002-right",
+      "targetHandle": "gateway-1753100000000-left"
+    },
+    {
+      "id": "gateway-1753100000000-form-1751870928350-1752202820616",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-1753100000000",
+      "target": "form-1751870928350",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000000-right",
+      "targetHandle": "form-1751870928350-left"
+    },
+    {
+      "id": "form-1753100000001-gateway-1753100000002-1752202841767",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-1753100000001",
+      "target": "gateway-1753100000002",
+      "animated": true,
+      "sourceHandle": "form-1753100000001-right",
+      "targetHandle": "gateway-1753100000002-left"
+    },
+    {
+      "id": "gateway-1753100000002-subprocess-1753100000003-1752202973206",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-1753100000002",
+      "target": "subprocess-1753100000003",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000002-right",
+      "targetHandle": "subprocess-1753100000003-left"
+    },
+    {
+      "id": "gateway-1753100000000-form-1753100000001-1752203198190",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-1753100000000",
+      "target": "form-1753100000001",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000000-right",
+      "targetHandle": "form-1753100000001-top"
+    },
+    {
+      "id": "script-1751871635000-form-family-tree-choice-1752204006162",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-1751871635000",
+      "target": "form-family-tree-choice",
+      "animated": true,
+      "sourceHandle": "script-1751871635000-right",
+      "targetHandle": "form-family-tree-choice-left"
+    },
+    {
+      "id": "form-family-tree-choice-gateway-family-tree-choice-1752204014461",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-family-tree-choice",
+      "target": "gateway-family-tree-choice",
+      "animated": true,
+      "sourceHandle": "form-family-tree-choice-bottom",
+      "targetHandle": "gateway-family-tree-choice-left"
+    },
+    {
+      "id": "gateway-family-tree-choice-api-1752114771983-1752204050925",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-family-tree-choice",
+      "target": "api-1752114771983",
+      "animated": true,
+      "sourceHandle": "gateway-family-tree-choice-right",
+      "targetHandle": "api-1752114771983-left"
+    },
+    {
+      "id": "api-1752114771983-html-1752109761532-1752204167660",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-1752114771983",
+      "target": "html-1752109761532",
+      "animated": true,
+      "sourceHandle": "api-1752114771983-bottom",
+      "targetHandle": "html-1752109761532-left"
+    },
+    {
+      "id": "gateway-family-tree-choice-form-kategori-asnaf-1752204312974",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-family-tree-choice",
+      "target": "form-kategori-asnaf",
+      "animated": true,
+      "sourceHandle": "gateway-family-tree-choice-right",
+      "targetHandle": "form-kategori-asnaf-top"
+    },
+    {
+      "id": "form-kategori-asnaf-gateway-fakir-miskin-choice-1752204332412",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-kategori-asnaf",
+      "target": "gateway-fakir-miskin-choice",
+      "animated": true,
+      "sourceHandle": "form-kategori-asnaf-bottom",
+      "targetHandle": "gateway-fakir-miskin-choice-left"
+    },
+    {
+      "id": "gateway-1753100000002-subprocess-1752202751327-1752204374213",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-1753100000002",
+      "target": "subprocess-1752202751327",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000002-right",
+      "targetHandle": "subprocess-1752202751327-left"
+    },
+    {
+      "id": "gateway-fakir-miskin-choice-business-rule-1751871900000-1752204422657",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-fakir-miskin-choice",
+      "target": "business-rule-1751871900000",
+      "animated": true,
+      "sourceHandle": "gateway-fakir-miskin-choice-right",
+      "targetHandle": "business-rule-1751871900000-left"
+    },
+    {
+      "id": "business-rule-1751871900000-business-rule-1751871901000-1752206876221",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "business-rule-1751871900000",
+      "target": "business-rule-1751871901000",
+      "animated": true,
+      "sourceHandle": "business-rule-1751871900000-bottom",
+      "targetHandle": "business-rule-1751871901000-top"
+    },
+    {
+      "id": "business-rule-1751871901000-notification-1753200000002-1752207615091",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "business-rule-1751871901000",
+      "target": "notification-1753200000002",
+      "animated": true,
+      "sourceHandle": "business-rule-1751871901000-right",
+      "targetHandle": "notification-1753200000002-top"
+    },
+    {
+      "id": "business-rule-1751871901000-form-pengesahan-1752207621840",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "business-rule-1751871901000",
+      "target": "form-pengesahan",
+      "animated": true,
+      "sourceHandle": "business-rule-1751871901000-bottom",
+      "targetHandle": "form-pengesahan-top"
+    },
+    {
+      "id": "api-pengesahan-submit-form-pengesahan-1752208003574",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-pengesahan-submit",
+      "target": "form-pengesahan",
+      "animated": true,
+      "sourceHandle": "api-pengesahan-submit-right",
+      "targetHandle": "form-pengesahan-left"
+    },
+    {
+      "id": "script-process-pengesahan-api-pengesahan-submit-1752208004921",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-process-pengesahan",
+      "target": "api-pengesahan-submit",
+      "animated": true,
+      "sourceHandle": "script-process-pengesahan-bottom",
+      "targetHandle": "api-pengesahan-submit-top"
+    },
+    {
+      "id": "gateway-status-check-subprocess-1752202751327-berjaya-fm",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Berjaya FM",
+      "source": "gateway-status-check",
+      "target": "subprocess-1752202751327",
+      "animated": true,
+      "sourceHandle": "gateway-status-check-right",
+      "targetHandle": "subprocess-1752202751327-left"
+    },
+    {
+      "id": "gateway-status-check-notification-1753200000002-berjaya-miskin",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Berjaya Miskin",
+      "source": "gateway-status-check",
+      "target": "notification-1753200000002",
+      "animated": true,
+      "sourceHandle": "gateway-status-check-bottom",
+      "targetHandle": "notification-1753200000002-left"
+    },
+    {
+      "id": "gateway-status-check-notification-1753200000002-berjaya-non-fm",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Berjaya Non-FM",
+      "source": "gateway-status-check",
+      "target": "notification-1753200000002",
+      "animated": true,
+      "sourceHandle": "gateway-status-check-top",
+      "targetHandle": "notification-1753200000002-left"
+    },
+    {
+      "id": "gateway-status-check-notification-1753200000002-gagal",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Gagal",
+      "source": "gateway-status-check",
+      "target": "notification-1753200000002",
+      "animated": true,
+      "sourceHandle": "gateway-status-check-left",
+      "targetHandle": "notification-1753200000002-left"
+    },
+    {
+      "id": "script-process-pengesahan-gateway-status-check-1752208100000",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-process-pengesahan",
+      "target": "gateway-status-check",
+      "animated": true,
+      "sourceHandle": "script-process-pengesahan-right",
+      "targetHandle": "gateway-status-check-left"
+    }
+  ],
+  "nodes": [
+    {
+      "id": "gateway-family-tree-choice",
+      "data": {
+        "label": "Lihat Family Tree?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "ya",
+                "operator": "eq",
+                "variable": "lihatFamilyTree",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "tidak",
+                "operator": "eq",
+                "variable": "lihatFamilyTree",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "gateway-fakir-miskin-choice",
+        "description": "Choose whether to view family tree",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Lihat Family Tree?",
+      "position": { "x": 2070, "y": -345 }
+    },
+    {
+      "id": "form-family-tree-choice",
+      "data": {
+        "label": "Pilihan Family Tree",
+        "formId": 6,
+        "formName": "Pilihan Family Tree",
+        "formUuid": "6e07fc8f-a160-478a-85fd-fa3364401547",
+        "description": "Form untuk memilih sama ada mahu lihat family tree atau tidak",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          { "formField": "nama_pemohon", "processVariable": "applicantName" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          {
+            "formField": "lihat_family_tree",
+            "processVariable": "lihatFamilyTree"
+          }
+        ],
+        "fieldConditions": []
+      },
+      "type": "form",
+      "label": "Pilihan Family Tree",
+      "position": { "x": 2040, "y": -540 }
+    },
+    {
+      "id": "gateway-fakir-miskin-choice",
+      "data": {
+        "label": "Fakir Miskin?",
+        "shape": "diamond",
+        "textColor": "#333333",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "fakir_miskin",
+                "operator": "eq",
+                "variable": "kategoriAsnaf",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "bukan_fakir_miskin",
+                "operator": "eq",
+                "variable": "kategoriAsnaf",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "business-rule-1751871900000",
+        "description": "Determine if applicant is Fakir Miskin",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Fakir Miskin?",
+      "position": { "x": 2085, "y": 210 }
+    },
+    {
+      "id": "form-kategori-asnaf",
+      "data": {
+        "label": "Pilihan Kategori Asnaf",
+        "formId": 7,
+        "formName": "Pilihan Kategori Asnaf",
+        "formUuid": "7e07fc8f-a160-478a-85fd-fa3364401548",
+        "description": "Form untuk memilih kategori asnaf",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          { "formField": "nama_pemohon", "processVariable": "applicantName" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          { "formField": "kategori_asnaf", "processVariable": "kategoriAsnaf" }
+        ],
+        "fieldConditions": []
+      },
+      "type": "form",
+      "label": "Pilihan Kategori Asnaf",
+      "position": { "x": 2055, "y": -30 }
+    },
+    {
+      "id": "start-1751870920411",
+      "data": { "label": "Start", "description": "Process start point" },
+      "type": "start",
+      "label": "Start",
+      "position": { "x": -75, "y": -510 }
+    },
+    {
+      "id": "form-1752471000000",
+      "data": {
+        "label": "Penilaian Awal",
+        "formId": 3,
+        "formName": "Penilaian Awal",
+        "formUuid": "8e07fc8f-a160-478a-85fd-fa3364401544",
+        "description": "Form: Penilaian Awal untuk permohonan bantuan",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [],
+        "assignmentType": "public",
+        "outputMappings": [
+          {
+            "formField": "komitmen_pembiayaan",
+            "processVariable": "komitmenKosTinggi"
+          },
+          {
+            "formField": "keperluan_mendesak",
+            "processVariable": "keperluanMendesak"
+          },
+          {
+            "formField": "keperluan_lain_nyatakan",
+            "processVariable": "keperluanLainNyatakan"
+          },
+          {
+            "formField": "dokumen_berkaitan",
+            "processVariable": "dokumenBerkaitan"
+          },
+          {
+            "formField": "catatan_tambahan",
+            "processVariable": "catatanTambahan"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "Penilaian Awal",
+      "position": { "x": 435, "y": -540 }
+    },
+    {
+      "id": "api-1752471000010",
+      "data": {
+        "label": "Submit Penilaian Awal API",
+        "apiUrl": "https://jsonplaceholder.typicode.com/posts",
+        "headers": "{ \"Content-Type\": \"application/json\" }",
+        "apiMethod": "POST",
+        "description": "Submit penilaian awal data to external system",
+        "requestBody": "{\n  \"komitmenKosTinggi\": \"{komitmenKosTinggi}\",\n  \"keperluanMendesak\": \"{keperluanMendesak}\",\n  \"keperluanLainNyatakan\": \"{keperluanLainNyatakan}\",\n  \"dokumenBerkaitan\": \"{dokumenBerkaitan}\",\n  \"catatanTambahan\": \"{catatanTambahan}\"\n}",
+        "errorVariable": "penilaianAwalApiError",
+        "outputVariable": "penilaianAwalApiResponse",
+        "continueOnError": false
+      },
+      "type": "api",
+      "label": "Submit Penilaian Awal API",
+      "position": { "x": 435, "y": -345 }
+    },
+    {
+      "id": "script-1752471000020",
+      "data": {
+        "label": "Process Penilaian Awal Response",
+        "scriptCode": "// Extract important data from Penilaian Awal API response\nconst apiData = processVariables.penilaianAwalApiResponse;\n\nif (apiData && apiData.data) {\n  // Generate a reference number for the assessment\n  processVariables.penilaianAwalId = apiData.data.id || 'PA-' + Date.now();\n  \n  // Process the high cost commitment answer\n  processVariables.hasHighCostCommitment = processVariables.komitmenKosTinggi === 'ya';\n  \n  // Process urgent needs\n  if (Array.isArray(processVariables.keperluanMendesak)) {\n    // Set flags for specific urgent needs\n    processVariables.hasUrgentMedicalNeed = processVariables.keperluanMendesak.includes('perubatan_kritikal');\n    processVariables.hasDisasterNeed = processVariables.keperluanMendesak.includes('bencana');\n    processVariables.hasDeathRelatedNeed = processVariables.keperluanMendesak.includes('kematian');\n    processVariables.hasFamilyConflict = processVariables.keperluanMendesak.includes('konflik_keluarga');\n    processVariables.hasHomelessness = processVariables.keperluanMendesak.includes('tiada_tempat_tinggal');\n    processVariables.hasUtilityArrears = processVariables.keperluanMendesak.includes('tunggakan_utiliti');\n    processVariables.hasOtherNeeds = processVariables.keperluanMendesak.includes('lain_lain');\n    processVariables.hasNoUrgentNeeds = processVariables.keperluanMendesak.includes('tidak_mendesak');\n    \n    // Calculate urgency score based on selected needs\n    let urgencyScore = 0;\n    if (processVariables.hasUrgentMedicalNeed) urgencyScore += 5;\n    if (processVariables.hasDisasterNeed) urgencyScore += 5;\n    if (processVariables.hasDeathRelatedNeed) urgencyScore += 4;\n    if (processVariables.hasFamilyConflict) urgencyScore += 3;\n    if (processVariables.hasHomelessness) urgencyScore += 5;\n    if (processVariables.hasUtilityArrears) urgencyScore += 2;\n    if (processVariables.hasOtherNeeds) urgencyScore += 1;\n    if (processVariables.hasNoUrgentNeeds) urgencyScore = 0;\n    \n    processVariables.urgencyScore = urgencyScore;\n    processVariables.urgencyLevel = urgencyScore >= 5 ? 'high' : (urgencyScore >= 3 ? 'medium' : 'low');\n  }\n  \n  // Check if documents were uploaded\n  processVariables.hasUploadedDocuments = processVariables.dokumenBerkaitan && \n    Array.isArray(processVariables.dokumenBerkaitan) && \n    processVariables.dokumenBerkaitan.length > 0;\n  \n  // Set status for next step\n  processVariables.penilaianAwalStatus = 'completed';\n  processVariables.readyForPersonalInfo = true;\n  \n  console.log('Penilaian Awal processed successfully:', {\n    penilaianAwalId: processVariables.penilaianAwalId,\n    urgencyLevel: processVariables.urgencyLevel,\n    urgencyScore: processVariables.urgencyScore,\n    hasHighCostCommitment: processVariables.hasHighCostCommitment,\n    hasUploadedDocuments: processVariables.hasUploadedDocuments\n  });\n} else {\n  // Handle API error case\n  processVariables.penilaianAwalStatus = 'failed';\n  processVariables.readyForPersonalInfo = false;\n  processVariables.penilaianAwalError = 'Failed to submit penilaian awal';\n}",
+        "description": "Process the penilaian awal form data and API response",
+        "errorVariable": "penilaianAwalScriptError",
+        "inputVariables": [
+          "penilaianAwalApiResponse",
+          "komitmenKosTinggi",
+          "keperluanMendesak",
+          "keperluanLainNyatakan",
+          "dokumenBerkaitan",
+          "catatanTambahan"
+        ],
+        "scriptLanguage": "javascript",
+        "continueOnError": false,
+        "outputVariables": [
+          {
+            "name": "penilaianAwalId",
+            "type": "string",
+            "description": "Generated ID for the initial assessment"
+          },
+          {
+            "name": "hasHighCostCommitment",
+            "type": "boolean",
+            "description": "Whether applicant has high cost commitments"
+          },
+          {
+            "name": "urgencyScore",
+            "type": "number",
+            "description": "Calculated urgency score based on needs"
+          },
+          {
+            "name": "urgencyLevel",
+            "type": "string",
+            "description": "Urgency level (high/medium/low)"
+          },
+          {
+            "name": "hasUrgentMedicalNeed",
+            "type": "boolean",
+            "description": "Whether applicant has urgent medical needs"
+          },
+          {
+            "name": "hasDisasterNeed",
+            "type": "boolean",
+            "description": "Whether applicant has disaster-related needs"
+          },
+          {
+            "name": "hasDeathRelatedNeed",
+            "type": "boolean",
+            "description": "Whether applicant has death-related needs"
+          },
+          {
+            "name": "hasFamilyConflict",
+            "type": "boolean",
+            "description": "Whether applicant has family conflict"
+          },
+          {
+            "name": "hasHomelessness",
+            "type": "boolean",
+            "description": "Whether applicant is homeless"
+          },
+          {
+            "name": "hasUtilityArrears",
+            "type": "boolean",
+            "description": "Whether applicant has utility arrears"
+          },
+          {
+            "name": "hasOtherNeeds",
+            "type": "boolean",
+            "description": "Whether applicant has other needs"
+          },
+          {
+            "name": "hasNoUrgentNeeds",
+            "type": "boolean",
+            "description": "Whether applicant has no urgent needs"
+          },
+          {
+            "name": "hasUploadedDocuments",
+            "type": "boolean",
+            "description": "Whether documents were uploaded"
+          },
+          {
+            "name": "penilaianAwalStatus",
+            "type": "string",
+            "description": "Status of initial assessment submission"
+          },
+          {
+            "name": "readyForPersonalInfo",
+            "type": "boolean",
+            "description": "Whether ready for personal info form"
+          }
+        ]
+      },
+      "type": "script",
+      "label": "Process Penilaian Awal Response",
+      "position": { "x": 780, "y": -345 }
+    },
+    {
+      "id": "form-1751870928350",
+      "data": {
+        "label": "Borang Maklumat Peribadi",
+        "formId": 1,
+        "formName": "Borang Maklumat Peribadi",
+        "formUuid": "9f08fc8f-b170-478a-85fd-fa3364401533",
+        "description": "Form: Borang Maklumat Peribadi",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [],
+        "assignmentType": "public",
+        "outputMappings": [
+          { "formField": "text_3", "processVariable": "text3" },
+          { "formField": "select_1", "processVariable": "select1" },
+          { "formField": "form_jeniskp_1", "processVariable": "formJeniskp1" },
+          { "formField": "form_jeniskp_2", "processVariable": "formJeniskp2" },
+          { "formField": "form_jeniskp_3", "processVariable": "formJeniskp3" },
+          {
+            "formField": "text_warganegara",
+            "processVariable": "textWarganegara"
+          },
+          { "formField": "radio_jantina", "processVariable": "radioJantina" },
+          { "formField": "radio_bangsa", "processVariable": "radioBangsa" },
+          { "formField": "nyatakan_lain2", "processVariable": "nyatakanLain2" },
+          { "formField": "radio_9_copy", "processVariable": "radio9Copy" },
+          {
+            "formField": "radio_pendidikan",
+            "processVariable": "radioPendidikan"
+          },
+          { "formField": "text_14", "processVariable": "text14" },
+          {
+            "formField": "date_masukislam",
+            "processVariable": "dateMasukislam"
+          },
+          {
+            "formField": "date_masukislam_copy",
+            "processVariable": "dateMasukislamCopy"
+          },
+          {
+            "formField": "select_statusperkahwinan",
+            "processVariable": "selectStatusperkahwinan"
+          },
+          {
+            "formField": "hubungan_keluarga",
+            "processVariable": "hubunganKeluarga"
+          },
+          {
+            "formField": "hubungan_lain_nyatakan",
+            "processVariable": "hubunganLainNyatakan"
+          },
+          {
+            "formField": "nama_tanggungan",
+            "processVariable": "namaTanggungan"
+          },
+          {
+            "formField": "jenis_kad_tanggungan",
+            "processVariable": "jenisKadTanggungan"
+          },
+          {
+            "formField": "no_pengenalan_tanggungan",
+            "processVariable": "noPengenalanTanggungan"
+          },
+          {
+            "formField": "jantina_tanggungan",
+            "processVariable": "jantinaTanggungan"
+          },
+          {
+            "formField": "tarikh_lahir_tanggungan",
+            "processVariable": "tarikhLahirTanggungan"
+          },
+          {
+            "formField": "tempat_lahir_tanggungan",
+            "processVariable": "tempatLahirTanggungan"
+          },
+          {
+            "formField": "bangsa_tanggungan",
+            "processVariable": "bangsaTanggungan"
+          },
+          {
+            "formField": "bangsa_lain_tanggungan",
+            "processVariable": "bangsaLainTanggungan"
+          },
+          {
+            "formField": "status_kahwin_tanggungan",
+            "processVariable": "statusKahwinTanggungan"
+          },
+          {
+            "formField": "tarikh_masuk_islam_tanggungan",
+            "processVariable": "tarikhMasukIslamTanggungan"
+          },
+          {
+            "formField": "tarikh_mula_kfam_tanggungan",
+            "processVariable": "tarikhMulaKfamTanggungan"
+          },
+          {
+            "formField": "warganegara_tanggungan",
+            "processVariable": "warganegaraTanggungan"
+          },
+          {
+            "formField": "tempat_menetap_tanggungan",
+            "processVariable": "tempatMenetapTanggungan"
+          },
+          {
+            "formField": "no_telefon_tanggungan",
+            "processVariable": "noTelefonTanggungan"
+          },
+          {
+            "formField": "nama_pemegang_akaun",
+            "processVariable": "namaPemegangAkaun"
+          },
+          { "formField": "nama_bank", "processVariable": "namaBank" },
+          { "formField": "no_akaun_bank", "processVariable": "noAkaunBank" },
+          {
+            "formField": "cara_pembayaran",
+            "processVariable": "caraPembayaran"
+          },
+          { "formField": "sebab_tunai", "processVariable": "sebabTunai" },
+          {
+            "formField": "bersekolah_tanggungan",
+            "processVariable": "bersekolahTanggungan"
+          },
+          {
+            "formField": "pendidikan_tertinggi_tanggungan",
+            "processVariable": "pendidikanTertinggiTanggungan"
+          },
+          {
+            "formField": "pendidikan_lain_tanggungan",
+            "processVariable": "pendidikanLainTanggungan"
+          },
+          { "formField": "nama_sekolah", "processVariable": "namaSekolah" },
+          { "formField": "alamat_sekolah", "processVariable": "alamatSekolah" },
+          { "formField": "daerah_sekolah", "processVariable": "daerahSekolah" },
+          { "formField": "negeri_sekolah", "processVariable": "negeriSekolah" },
+          { "formField": "poskod_sekolah", "processVariable": "poskodSekolah" },
+          {
+            "formField": "tinggal_bersama_keluarga",
+            "processVariable": "tinggalBersamaKeluarga"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "Borang Maklumat Peribadi",
+      "position": { "x": 1260, "y": -540 }
+    },
+    {
+      "id": "api-1751871528249",
+      "data": {
+        "label": "Submit Profile API",
+        "apiUrl": "https://jsonplaceholder.typicode.com/posts",
+        "headers": "{ \"Content-Type\": \"application/json\" }",
+        "apiMethod": "POST",
+        "description": "Submit user profile to external system",
+        "requestBody": "{\n  \"applicantName\": \"{text3}\",\n  \"idType\": \"{select1}\",\n  \"mykadNumber\": \"{formJeniskp1}\",\n  \"passportNumber\": \"{formJeniskp2}\",\n  \"birthCertNumber\": \"{formJeniskp3}\",\n  \"nationality\": \"{textWarganegara}\",\n  \"gender\": \"{radioJantina}\",\n  \"race\": \"{radioBangsa}\",\n  \"otherRace\": \"{nyatakanLain2}\",\n  \"isStudying\": \"{radio9Copy}\",\n  \"education\": \"{radioPendidikan}\",\n  \"otherEducation\": \"{text14}\",\n  \"islamConversionDate\": \"{dateMasukislam}\",\n  \"kfamStartDate\": \"{dateMasukislamCopy}\",\n  \"maritalStatus\": \"{selectStatusperkahwinan}\",\n  \"dependentInfo\": {\n    \"relationship\": \"{hubunganKeluarga}\",\n    \"otherRelationship\": \"{hubunganLainNyatakan}\",\n    \"name\": \"{namaTanggungan}\",\n    \"idType\": \"{jenisKadTanggungan}\",\n    \"idNumber\": \"{noPengenalanTanggungan}\",\n    \"gender\": \"{jantinaTanggungan}\",\n    \"birthDate\": \"{tarikhLahirTanggungan}\",\n    \"birthPlace\": \"{tempatLahirTanggungan}\",\n    \"race\": \"{bangsaTanggungan}\",\n    \"otherRace\": \"{bangsaLainTanggungan}\",\n    \"maritalStatus\": \"{statusKahwinTanggungan}\",\n    \"islamConversionDate\": \"{tarikhMasukIslamTanggungan}\",\n    \"kfamStartDate\": \"{tarikhMulaKfamTanggungan}\",\n    \"nationality\": \"{warganegaraTanggungan}\",\n    \"residenceDuration\": \"{tempatMenetapTanggungan}\",\n    \"phoneNumber\": \"{noTelefonTanggungan}\",\n    \"isStudying\": \"{bersekolahTanggungan}\",\n    \"education\": \"{pendidikanTertinggiTanggungan}\",\n    \"otherEducation\": \"{pendidikanLainTanggungan}\",\n    \"schoolName\": \"{namaSekolah}\",\n    \"schoolAddress\": \"{alamatSekolah}\",\n    \"schoolDistrict\": \"{daerahSekolah}\",\n    \"schoolState\": \"{negeriSekolah}\",\n    \"schoolPostcode\": \"{poskodSekolah}\",\n    \"liveWithFamily\": \"{tinggalBersamaKeluarga}\"\n  },\n  \"bankingInfo\": {\n    \"accountHolderName\": \"{namaPemegangAkaun}\",\n    \"bankName\": \"{namaBank}\",\n    \"accountNumber\": \"{noAkaunBank}\",\n    \"paymentMethod\": \"{caraPembayaran}\",\n    \"cashReason\": \"{sebabTunai}\"\n  }\n}",
+        "errorVariable": "apiError",
+        "outputVariable": "apiResponse",
+        "continueOnError": false
+      },
+      "type": "api",
+      "label": "Submit Profile API",
+      "position": { "x": 1260, "y": -345 }
+    },
+    {
+      "id": "script-1751871635000",
+      "data": {
+        "label": "Process API Response",
+        "scriptCode": "// Extract important data from API response\nconst apiData = processVariables.apiResponse;\n\nif (apiData && apiData.data) {\n  // Extract application ID\n  processVariables.applicationId = apiData.data.id || 'APP-' + Date.now();\n  \n  // Determine if documents are required based on profile\n  processVariables.documentsRequired = true;\n  \n  // Set verification level based on education and other factors\n  if (processVariables.radioPendidikan === 'ijazah' || processVariables.radioPendidikan === 'diploma') {\n    processVariables.verificationLevel = 'enhanced';\n    processVariables.documentsRequired = true;\n  } else {\n    processVariables.verificationLevel = 'standard';\n  }\n  \n  // Extract applicant name for verification form\n  processVariables.applicantName = processVariables.text3;\n  \n  // Process dependent information if available\n  if (processVariables.namaTanggungan) {\n    processVariables.hasDependents = true;\n    processVariables.dependentCount = 1;\n    processVariables.dependentName = processVariables.namaTanggungan;\n  } else {\n    processVariables.hasDependents = false;\n    processVariables.dependentCount = 0;\n  }\n  \n  // Process banking information\n  if (processVariables.namaBank && processVariables.noAkaunBank) {\n    processVariables.hasBankingInfo = true;\n    processVariables.paymentReady = true;\n  } else {\n    processVariables.hasBankingInfo = false;\n    processVariables.paymentReady = false;\n  }\n  \n  // Set status for next step\n  processVariables.profileSubmissionStatus = 'success';\n  processVariables.nextStepReady = true;\n  \n  console.log('Profile processed successfully:', {\n    applicationId: processVariables.applicationId,\n    verificationLevel: processVariables.verificationLevel,\n    documentsRequired: processVariables.documentsRequired,\n    hasDependents: processVariables.hasDependents,\n    hasBankingInfo: processVariables.hasBankingInfo\n  });\n} else {\n  // Handle API error case\n  processVariables.profileSubmissionStatus = 'failed';\n  processVariables.nextStepReady = false;\n  processVariables.errorMessage = 'Failed to submit profile';\n}",
+        "description": "Transform API response for document verification step",
+        "errorVariable": "scriptError",
+        "inputVariables": [
+          "apiResponse",
+          "text3",
+          "radioPendidikan",
+          "namaTanggungan",
+          "namaBank",
+          "noAkaunBank"
+        ],
+        "scriptLanguage": "javascript",
+        "continueOnError": false,
+        "outputVariables": [
+          {
+            "name": "applicationId",
+            "type": "string",
+            "description": "Generated application ID"
+          },
+          {
+            "name": "documentsRequired",
+            "type": "boolean",
+            "description": "Whether documents verification is required"
+          },
+          {
+            "name": "verificationLevel",
+            "type": "string",
+            "description": "Level of verification required"
+          },
+          {
+            "name": "applicantName",
+            "type": "string",
+            "description": "Applicant name for verification"
+          },
+          {
+            "name": "hasDependents",
+            "type": "boolean",
+            "description": "Whether applicant has dependents"
+          },
+          {
+            "name": "dependentCount",
+            "type": "number",
+            "description": "Number of dependents"
+          },
+          {
+            "name": "dependentName",
+            "type": "string",
+            "description": "Name of dependent"
+          },
+          {
+            "name": "hasBankingInfo",
+            "type": "boolean",
+            "description": "Whether banking information is provided"
+          },
+          {
+            "name": "paymentReady",
+            "type": "boolean",
+            "description": "Whether payment processing is ready"
+          },
+          {
+            "name": "profileSubmissionStatus",
+            "type": "string",
+            "description": "Status of profile submission"
+          },
+          {
+            "name": "nextStepReady",
+            "type": "boolean",
+            "description": "Whether ready for next step"
+          }
+        ]
+      },
+      "type": "script",
+      "label": "Process API Response",
+      "position": { "x": 1590, "y": -345 }
+    },
+    {
+      "id": "business-rule-1751871900000",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-03 Analisa Data (Had Kifayah)",
+        "shape": "rectangle",
+        "textColor": "#1e40af",
+        "ruleGroups": [
+          {
+            "id": "group-1",
+            "name": "Ketua Keluarga Base Amount",
+            "actions": [
+              {
+                "id": "action-1-1",
+                "type": "set_variable",
+                "value": 1215,
+                "variable": "baseKifayahKetuaKeluarga"
+              },
+              {
+                "id": "action-1-2",
+                "type": "set_variable",
+                "value": "ketua_keluarga",
+                "variable": "categoryKetuaKeluarga"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-1-1",
+                "value": "",
+                "operator": "neq",
+                "variable": "noKadPengenalan",
+                "valueType": "string"
+              }
+            ]
+          },
+          {
+            "id": "group-2",
+            "name": "Dewasa Bekerja (18 Tahun Ke Atas)",
+            "actions": [
+              {
+                "id": "action-2-1",
+                "type": "set_variable",
+                "value": 412,
+                "variable": "hadKifayahDewasaBekerja"
+              },
+              {
+                "id": "action-2-2",
+                "type": "calculation",
+                "formula": "hadKifayahDewasaBekerja * bilanganDewasaBekerja",
+                "variable": "totalHadKifayahDewasaBekerja"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-2-1",
+                "value": 0,
+                "operator": "gt",
+                "variable": "bilanganDewasaBekerja"
+              }
+            ]
+          },
+          {
+            "id": "group-3",
+            "name": "Dewasa Tidak Bekerja (18 Tahun Ke Atas)",
+            "actions": [
+              {
+                "id": "action-3-1",
+                "type": "set_variable",
+                "value": 167,
+                "variable": "hadKifayahDewasaTidakBekerja"
+              },
+              {
+                "id": "action-3-2",
+                "type": "calculation",
+                "formula": "hadKifayahDewasaTidakBekerja * bilanganDewasaTidakBekerja",
+                "variable": "totalHadKifayahDewasaTidakBekerja"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-3-1",
+                "value": 0,
+                "operator": "gt",
+                "variable": "bilanganDewasaTidakBekerja"
+              }
+            ]
+          },
+          {
+            "id": "group-4",
+            "name": "Tanggungan Belajar IPT",
+            "actions": [
+              {
+                "id": "action-4-1",
+                "type": "set_variable",
+                "value": 613,
+                "variable": "hadKifayahTanggunganIPT"
+              },
+              {
+                "id": "action-4-2",
+                "type": "calculation",
+                "formula": "hadKifayahTanggunganIPT * bilanganTanggunganIPT",
+                "variable": "totalHadKifayahTanggunganIPT"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-4-1",
+                "value": 0,
+                "operator": "gt",
+                "variable": "bilanganTanggunganIPT"
+              }
+            ]
+          },
+          {
+            "id": "group-5",
+            "name": "Tanggungan Berumur 7-17 tahun",
+            "actions": [
+              {
+                "id": "action-5-1",
+                "type": "set_variable",
+                "value": 408,
+                "variable": "hadKifayahTanggungan7to17"
+              },
+              {
+                "id": "action-5-2",
+                "type": "calculation",
+                "formula": "hadKifayahTanggungan7to17 * bilanganTanggungan7to17",
+                "variable": "totalHadKifayahTanggungan7to17"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-5-1",
+                "value": 0,
+                "operator": "gt",
+                "variable": "bilanganTanggungan7to17"
+              }
+            ]
+          },
+          {
+            "id": "group-6",
+            "name": "Tanggungan 6 Tahun Ke Bawah",
+            "actions": [
+              {
+                "id": "action-6-1",
+                "type": "set_variable",
+                "value": 175,
+                "variable": "hadKifayahTanggungan6KeBawah"
+              },
+              {
+                "id": "action-6-2",
+                "type": "calculation",
+                "formula": "hadKifayahTanggungan6KeBawah * bilanganTanggungan6KeBawah",
+                "variable": "totalHadKifayahTanggungan6KeBawah"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-6-1",
+                "value": 0,
+                "operator": "gt",
+                "variable": "bilanganTanggungan6KeBawah"
+              }
+            ]
+          },
+          {
+            "id": "group-7",
+            "name": "Calculate Total Had Kifayah",
+            "actions": [
+              {
+                "id": "action-7-1",
+                "type": "calculation",
+                "formula": "baseKifayahKetuaKeluarga + (totalHadKifayahDewasaBekerja || 0) + (totalHadKifayahDewasaTidakBekerja || 0) + (totalHadKifayahTanggunganIPT || 0) + (totalHadKifayahTanggungan7to17 || 0) + (totalHadKifayahTanggungan6KeBawah || 0)",
+                "variable": "totalJumlahHadKifayah"
+              },
+              {
+                "id": "action-7-2",
+                "type": "calculation",
+                "formula": "((pendapatanBersih || 0) / totalJumlahHadKifayah) * 100",
+                "variable": "peratusHadKifayah"
+              },
+              {
+                "id": "action-7-3",
+                "type": "set_variable",
+                "value": "completed",
+                "variable": "kifayahCalculationStatus"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-7-1",
+                "value": "",
+                "operator": "neq",
+                "variable": "noKadPengenalan"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#3b82f6",
+        "description": "BF-NAS-PRF-AS-QS-03: Proses pengiraan had kifayah asnaf menggunakan maklumat konfigurasi had kifayah dan maklumat yang telah diisi oleh pemohon/pendaftar",
+        "errorVariable": "kifayahCalculationError",
+        "outputVariable": "kifayahCalculationResult",
+        "backgroundColor": "#eff6ff"
+      },
+      "type": "business-rule",
+      "label": "BF-NAS-PRF-AS-QS-03 Analisa Data (Had Kifayah)",
+      "position": { "x": 2505, "y": -60 }
+    },
+    {
+      "id": "business-rule-1751871901000",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-04 Syor Status Keluarga Asnaf",
+        "shape": "rectangle",
+        "textColor": "#1e40af",
+        "ruleGroups": [
+          {
+            "id": "group-status-1",
+            "name": "Kategorikan Fakir (0%-49.9%)",
+            "actions": [
+              {
+                "id": "action-status-1-1",
+                "type": "set_variable",
+                "value": "Fakir",
+                "variable": "kategoriKeluargaAsna"
+              },
+              {
+                "id": "action-status-1-2",
+                "type": "set_variable",
+                "value": "Fakir",
+                "variable": "kategoriAsnafSyor"
+              },
+              {
+                "id": "action-status-1-3",
+                "type": "set_variable",
+                "value": "Fakir",
+                "variable": "statusKeluarga"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-status-1-1",
+                "value": 0,
+                "operator": "gte",
+                "variable": "peratusHadKifayah"
+              },
+              {
+                "id": "condition-status-1-2",
+                "value": 49.9,
+                "operator": "lte",
+                "variable": "peratusHadKifayah"
+              }
+            ]
+          },
+          {
+            "id": "group-status-2",
+            "name": "Kategorikan Miskin (50%-100%)",
+            "actions": [
+              {
+                "id": "action-status-2-1",
+                "type": "set_variable",
+                "value": "Miskin",
+                "variable": "kategoriKeluargaAsnaf"
+              },
+              {
+                "id": "action-status-2-2",
+                "type": "set_variable",
+                "value": "Miskin",
+                "variable": "kategoriAsnafSyor"
+              },
+              {
+                "id": "action-status-2-3",
+                "type": "set_variable",
+                "value": "Miskin",
+                "variable": "statusKeluarga"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-status-2-1",
+                "value": 50,
+                "operator": "gte",
+                "variable": "peratusHadKifayah"
+              },
+              {
+                "id": "condition-status-2-2",
+                "value": 100,
+                "operator": "lte",
+                "variable": "peratusHadKifayah"
+              }
+            ]
+          },
+          {
+            "id": "group-status-3",
+            "name": "Kategorikan Non-FM (>100%)",
+            "actions": [
+              {
+                "id": "action-status-3-1",
+                "type": "set_variable",
+                "value": "Non-FM",
+                "variable": "kategoriKeluargaAsnaf"
+              },
+              {
+                "id": "action-status-3-2",
+                "type": "set_variable",
+                "value": "Non-FM",
+                "variable": "kategoriAsnafSyor"
+              },
+              {
+                "id": "action-status-3-3",
+                "type": "set_variable",
+                "value": "Non-FM",
+                "variable": "statusKeluarga"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-status-3-1",
+                "value": 100,
+                "operator": "gt",
+                "variable": "peratusHadKifayah"
+              }
+            ]
+          },
+          {
+            "id": "group-status-4",
+            "name": "Check Muallaf Status",
+            "actions": [
+              {
+                "id": "action-status-4-1",
+                "type": "set_variable",
+                "value": "Muallaf",
+                "variable": "kategoriAsnafSyor"
+              },
+              {
+                "id": "action-status-4-2",
+                "type": "set_variable",
+                "value": "Muallaf",
+                "variable": "statusIndividu"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-status-4-1",
+                "value": "",
+                "operator": "neq",
+                "variable": "dateMasukislam"
+              },
+              {
+                "id": "condition-status-4-2",
+                "value": 5,
+                "operator": "lt",
+                "variable": "tempohMasukIslam"
+              }
+            ]
+          },
+          {
+            "id": "group-status-5",
+            "name": "Generate AI Recommendation",
+            "actions": [
+              {
+                "id": "action-status-5-1",
+                "type": "set_variable",
+                "value": "Generated",
+                "variable": "syorPengesahanStatus"
+              },
+              {
+                "id": "action-status-5-2",
+                "type": "set_variable",
+                "value": "${new Date().toISOString()}",
+                "variable": "tarikhPengesyoran"
+              },
+              {
+                "id": "action-status-5-3",
+                "type": "set_variable",
+                "value": "Berdasarkan analisis had kifayah, pemohon dikategorikan sebagai ${kategoriAsnafSyor} dengan peratus had kifayah ${peratusHadKifayah.toFixed(2)}%. Jumlah had kifayah keluarga: RM ${totalJumlahHadKifayah.toFixed(2)}.",
+                "variable": "syorPengesahan"
+              }
+            ],
+            "operator": "AND",
+            "conditions": [
+              {
+                "id": "condition-status-5-1",
+                "value": "completed",
+                "operator": "eq",
+                "variable": "kifayahCalculationStatus"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#3b82f6",
+        "description": "BF-NAS-PRF-AS-QS-04: Sistem akan mengesyorkan status keluarga asnaf hasil dari pengiraan had kifayah",
+        "errorVariable": "statusRecommendationError",
+        "outputVariable": "statusRecommendationResult",
+        "backgroundColor": "#eff6ff"
+      },
+      "type": "business-rule",
+      "label": "BF-NAS-PRF-AS-QS-04 Syor Status Keluarga Asnaf",
+      "position": { "x": 2505, "y": 195 }
+    },
+    {
+      "id": "html-1752109761532",
+      "data": {
+        "label": "Family Tree",
+        "shape": "rectangle",
+        "jsCode": "",
+        "cssCode": "",
+        "htmlCode": "<!-- Enter your HTML code here -->\n<div class=\"custom-html-content\">\n  <h2>Custom HTML Content</h2>\n  <p>This is a custom HTML node that can display rich content.</p>\n</div>",
+        "textColor": "#333333",
+        "autoRefresh": false,
+        "borderColor": "#dddddd",
+        "description": "Family Tree for Borang",
+        "inputVariables": [],
+        "backgroundColor": "#ffffff",
+        "outputVariables": [],
+        "allowVariableAccess": true
+      },
+      "type": "html",
+      "label": "Family Tree",
+      "position": { "x": 2535, "y": -435 }
+    },
+    {
+      "id": "rectangle-shape-1752110224921",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "rectangle",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "rectangle-shape",
+      "label": "",
+      "position": { "x": 375, "y": -570 }
+    },
+    {
+      "id": "text-annotation-1752110279700",
+      "data": {
+        "label": "NF-NAS-PRF-AS-PA",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Pernilaian Awal",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-PA",
+      "position": { "x": 810, "y": -555 }
+    },
+    {
+      "id": "rectangle-shape-1752110492897",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "rectangle",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "rectangle-shape",
+      "label": "",
+      "position": { "x": 1185, "y": -570 }
+    },
+    {
+      "id": "text-annotation-1752110562983",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-02",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Isi Borang Permohonan Online",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-QS-02",
+      "position": { "x": 1620, "y": -555 }
+    },
+    {
+      "id": "rectangle-shape-1752114739551",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 750,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "rectangle",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "rectangle-shape",
+      "label": "",
+      "position": { "x": 1995, "y": -570 }
+    },
+    {
+      "id": "api-1752114771983",
+      "data": {
+        "label": "API Call",
+        "shape": "rectangle",
+        "apiUrl": "",
+        "headers": "{ \"Content-Type\": \"application/json\" }",
+        "apiMethod": "GET",
+        "textColor": "#1e40af",
+        "borderColor": "#3b82f6",
+        "description": "External API call",
+        "requestBody": "",
+        "errorVariable": "apiError",
+        "outputVariable": "apiResponse",
+        "backgroundColor": "#eff6ff",
+        "continueOnError": false
+      },
+      "type": "api",
+      "label": "Called Family Tree",
+      "position": { "x": 2295, "y": -525 }
+    },
+    {
+      "id": "text-annotation-1752114833800",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Family Tree",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-FM",
+      "position": { "x": 2520, "y": -555 }
+    },
+    {
+      "id": "form-1753000000000",
+      "data": {
+        "label": "Carian Profil",
+        "formId": 4,
+        "formName": "Carian Profil",
+        "formUuid": "4e07fc8f-a160-478a-85fd-fa3364401545",
+        "description": "Skrin carian asnaf atau login",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [],
+        "assignmentType": "public",
+        "outputMappings": [
+          { "formField": "search_type", "processVariable": "carianSearchType" },
+          { "formField": "search_id", "processVariable": "carianSearchId" },
+          { "formField": "login_id", "processVariable": "carianLoginId" },
+          {
+            "formField": "login_password",
+            "processVariable": "carianLoginPassword"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "Carian Profil",
+      "position": { "x": 450, "y": -15 }
+    },
+    {
+      "id": "api-1753000000001",
+      "data": {
+        "label": "Submit Carian Profil API",
+        "apiUrl": "https://api.example.com/profiles/search",
+        "headers": "{ \"Content-Type\": \"application/json\" }",
+        "apiMethod": "POST",
+        "description": "Submit profile search or login credentials",
+        "requestBody": "{\n  \"searchType\": \"{carianSearchType}\",\n  \"searchId\": \"{carianSearchId}\",\n  \"loginId\": \"{carianLoginId}\",\n  \"password\": \"{carianLoginPassword}\"\n}",
+        "errorVariable": "carianProfilApiError",
+        "outputVariable": "carianProfilApiResponse",
+        "continueOnError": false
+      },
+      "type": "api",
+      "label": "Submit Carian Profil API",
+      "position": { "x": 450, "y": 180 }
+    },
+    {
+      "id": "script-1753000000002",
+      "data": {
+        "label": "Process Carian Profil Response",
+        "scriptCode": "// Process API response from profile search/login\nconst response = processVariables.carianProfilApiResponse;\n\nif (response && response.data) {\n  if (response.data.loginSuccess) {\n    processVariables.loginSuccess = true;\n    processVariables.profileData = response.data.profile;\n    processVariables.carianProfilStatus = 'login_successful';\n  } else if (response.data.profileFound) {\n    processVariables.profileFound = true;\n    processVariables.profileData = response.data.profile;\n    processVariables.carianProfilStatus = 'profile_found';\n  } else {\n    processVariables.profileFound = false;\n    processVariables.loginSuccess = false;\n    processVariables.carianProfilStatus = 'not_found';\n  }\n} else {\n  processVariables.carianProfilStatus = 'error';\n  processVariables.carianProfilScriptError = 'Invalid or empty API response';\n}",
+        "description": "Process the response from the Carian Profil API",
+        "errorVariable": "carianProfilScriptError",
+        "inputVariables": ["carianProfilApiResponse"],
+        "scriptLanguage": "javascript",
+        "continueOnError": false,
+        "outputVariables": [
+          {
+            "name": "profileFound",
+            "type": "boolean",
+            "description": "Indicates if a profile was found via search"
+          },
+          {
+            "name": "loginSuccess",
+            "type": "boolean",
+            "description": "Indicates if the asnaf login was successful"
+          },
+          {
+            "name": "profileData",
+            "type": "object",
+            "description": "The retrieved profile data"
+          },
+          {
+            "name": "carianProfilStatus",
+            "type": "string",
+            "description": "The status of the profile search/login action"
+          }
+        ]
+      },
+      "type": "script",
+      "label": "Process Carian Profil Response",
+      "position": { "x": 780, "y": 180 }
+    },
+    {
+      "id": "rectangle-shape-1752115136908",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "rectangle",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "rectangle-shape",
+      "label": "",
+      "position": { "x": 375, "y": -45 }
+    },
+    {
+      "id": "text-annotation-1752115184991",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Carian Profil",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-QS-01",
+      "position": { "x": 810, "y": -30 }
+    },
+    {
+      "id": "gateway-1753100000000",
+      "data": {
+        "label": "Profil Wujud?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": true,
+                "operator": "eq",
+                "variable": "profileFound",
+                "valueType": "boolean",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": false,
+                "operator": "eq",
+                "variable": "profileFound",
+                "valueType": "boolean",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "form-1752471000000",
+        "description": "Check if profile exists in system",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Profil Wujud?",
+      "position": { "x": 1230, "y": 0 }
+    },
+    {
+      "id": "form-1753100000001",
+      "data": {
+        "label": "Pengesahan Kemaskini Profil",
+        "formId": 5,
+        "formName": "Pengesahan Kemaskini Profil",
+        "formUuid": "5e07fc8f-a160-478a-85fd-fa3364401546",
+        "description": "Borang pengesahan untuk kemaskini profil sedia ada",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          {
+            "formField": "nama_pemohon",
+            "processVariable": "profileData.nama"
+          },
+          {
+            "formField": "no_kad_pengenalan",
+            "processVariable": "profileData.noKadPengenalan"
+          },
+          {
+            "formField": "tarikh_lahir",
+            "processVariable": "profileData.tarikhLahir"
+          },
+          { "formField": "alamat", "processVariable": "profileData.alamat" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          {
+            "formField": "kemaskini_profil",
+            "processVariable": "kemaskiniProfil"
+          },
+          {
+            "formField": "sebab_kemaskini",
+            "processVariable": "sebabKemaskini"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "Pengesahan Kemaskini Profil",
+      "position": { "x": 1200, "y": 195 }
+    },
+    {
+      "id": "gateway-1753100000002",
+      "data": {
+        "label": "Perubahan Profil?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "ya",
+                "operator": "eq",
+                "variable": "kemaskiniProfil",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "tidak",
+                "operator": "eq",
+                "variable": "kemaskiniProfil",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "form-1752471000000",
+        "description": "Check if user wants to update profile",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Perubahan Profil?",
+      "position": { "x": 1440, "y": 60 }
+    },
+    {
+      "id": "subprocess-1753100000003",
+      "data": {
+        "label": "BF-NAS-PRF-AS-UP-02",
+        "shape": "rectangle",
+        "processId": "kemaskini-profil-process",
+        "textColor": "#134e4a",
+        "borderColor": "#14b8a6",
+        "description": "Sub Process: Kemaskini Profil",
+        "subprocessId": 3,
+        "inputMappings": [
+          {
+            "processVariable": "profileData",
+            "subprocessVariable": "profileData"
+          },
+          {
+            "processVariable": "sebabKemaskini",
+            "subprocessVariable": "sebabKemaskini"
+          }
+        ],
+        "outputMappings": [
+          {
+            "processVariable": "updatedProfileData",
+            "subprocessVariable": "profileData"
+          },
+          {
+            "processVariable": "profileUpdateStatus",
+            "subprocessVariable": "updateStatus"
+          }
+        ],
+        "subprocessName": "BF-NAS-PRF-AS-UP-02",
+        "backgroundColor": "#f0fdfa"
+      },
+      "type": "subprocess",
+      "label": "BF-NAS-PRF-AS-UP-02",
+      "position": { "x": 1635, "y": -30 }
+    },
+    {
+      "id": "subprocess-1752202751327",
+      "data": {
+        "label": "BF-NAS-BTN-PB",
+        "shape": "rectangle",
+        "textColor": "#134e4a",
+        "borderColor": "#14b8a6",
+        "description": "Sub Process: Bantuan",
+        "subprocessId": 4,
+        "subprocessName": "BF-NAS-BTN-PB",
+        "backgroundColor": "#f0fdfa"
+      },
+      "type": "subprocess",
+      "label": "BF-NAS-BTN-PB",
+      "position": { "x": 1635, "y": 180 }
+    },
+    {
+      "id": "notification-1753200000001",
+      "data": {
+        "label": "Terima Notifikasi",
+        "message": "Assalamualaikum {applicantName},\n\nPermohonan bantuan anda telah diterima dan sedang dalam proses semakan.\n\nNo Rujukan: {applicationId}\nTarikh Permohonan: {submissionDate}\nStatus: Dalam Proses\n\nAnda akan menerima notifikasi lanjut apabila terdapat kemaskini status permohonan.\n\nTerima kasih.",
+        "subject": "Permohonan Bantuan Diterima - {applicationId}",
+        "priority": "normal",
+        "template": "application_received",
+        "variables": [
+          "applicantName",
+          "applicationId",
+          "submissionDate",
+          "applicantEmail"
+        ],
+        "recipients": [
+          { "type": "variable", "value": "applicantEmail" },
+          { "type": "role", "value": "admin" }
+        ],
+        "attachments": [],
+        "description": "Send notification when application is received",
+        "sendImmediately": true,
+        "notificationType": "email"
+      },
+      "type": "notification",
+      "label": "Terima Notifikasi",
+      "position": { "x": 3180, "y": -435 }
+    },
+    {
+      "id": "gateway-status-check",
+      "data": {
+        "label": "Status",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-berjaya-fm-path",
+            "output": "Berjaya FM",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "approved",
+                "operator": "eq",
+                "variable": "applicationStatus",
+                "valueType": "string",
+                "logicalOperator": "and"
+              },
+              {
+                "id": "condition-2",
+                "value": "Fakir",
+                "operator": "eq",
+                "variable": "kategoriAsnafSyor",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-berjaya-miskin-path",
+            "output": "Berjaya Miskin",
+            "conditions": [
+              {
+                "id": "condition-3",
+                "value": "approved",
+                "operator": "eq",
+                "variable": "applicationStatus",
+                "valueType": "string",
+                "logicalOperator": "and"
+              },
+              {
+                "id": "condition-4",
+                "value": "Miskin",
+                "operator": "eq",
+                "variable": "kategoriAsnafSyor",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-berjaya-non-fm-path",
+            "output": "Berjaya Non-FM",
+            "conditions": [
+              {
+                "id": "condition-5",
+                "value": "approved",
+                "operator": "eq",
+                "variable": "applicationStatus",
+                "valueType": "string",
+                "logicalOperator": "and"
+              },
+              {
+                "id": "condition-6",
+                "value": "Non-FM",
+                "operator": "eq",
+                "variable": "kategoriAsnafSyor",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-gagal-path",
+            "output": "Gagal",
+            "conditions": [
+              {
+                "id": "condition-7",
+                "value": "rejected",
+                "operator": "eq",
+                "variable": "applicationStatus",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "notification-1753200000002",
+        "description": "Check application status and asnaf category for routing",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Status",
+      "position": { "x": 1470, "y": 615 }
+    },
+    {
+      "id": "form-pengesahan",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-05 Pengesahan",
+        "formId": 8,
+        "formName": "Borang Pengesahan",
+        "formUuid": "8e07fc8f-a160-478a-85fd-fa3364401549",
+        "description": "Form untuk pengesahan dokumen dan maklumat pemohon",
+        "assignedRoles": ["verifier", "admin"],
+        "assignedUsers": [],
+        "inputMappings": [
+          { "formField": "nama_pemohon", "processVariable": "applicantName" },
+          { "formField": "no_rujukan", "processVariable": "applicationId" },
+          { "formField": "kategori_asnaf", "processVariable": "kategoriAsnaf" },
+          {
+            "formField": "dokumen_berkaitan",
+            "processVariable": "dokumenBerkaitan"
+          },
+          { "formField": "urgency_level", "processVariable": "urgencyLevel" }
+        ],
+        "assignmentType": "role",
+        "outputMappings": [
+          {
+            "formField": "status_pengesahan",
+            "processVariable": "pengesahanStatus"
+          },
+          {
+            "formField": "catatan_pengesahan",
+            "processVariable": "catatanPengesahan"
+          },
+          {
+            "formField": "dokumen_tambahan_diperlukan",
+            "processVariable": "dokumenTambahanDiperlukan"
+          },
+          {
+            "formField": "jumlah_bantuan_dicadangkan",
+            "processVariable": "jumlahBantuanDicadangkan"
+          },
+          { "formField": "jenis_bantuan", "processVariable": "jenisBantuan" },
+          { "formField": "verified_by", "processVariable": "verifiedBy" },
+          {
+            "formField": "verification_date",
+            "processVariable": "verificationDate"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "BF-NAS-PRF-AS-QS-05 Pengesahan",
+      "position": { "x": 2505, "y": 705 }
+    },
+    {
+      "id": "api-pengesahan-submit",
+      "data": {
+        "label": "Submit Pengesahan API",
+        "apiUrl": "https://api.bantuan.gov.my/v1/verification/submit",
+        "headers": "{ \"Content-Type\": \"application/json\", \"Authorization\": \"Bearer {apiToken}\" }",
+        "apiMethod": "POST",
+        "description": "Submit verification results to central system",
+        "requestBody": "{\n  \"applicationId\": \"{applicationId}\",\n  \"verificationStatus\": \"{pengesahanStatus}\",\n  \"verificationNotes\": \"{catatanPengesahan}\",\n  \"additionalDocumentsRequired\": \"{dokumenTambahanDiperlukan}\",\n  \"recommendedAmount\": \"{jumlahBantuanDicadangkan}\",\n  \"assistanceType\": \"{jenisBantuan}\",\n  \"verifiedBy\": \"{verifiedBy}\",\n  \"verificationDate\": \"{verificationDate}\",\n  \"applicantCategory\": \"{kategoriAsnaf}\",\n  \"urgencyLevel\": \"{urgencyLevel}\"\n}",
+        "errorVariable": "pengesahanApiError",
+        "outputVariable": "pengesahanApiResponse",
+        "continueOnError": false
+      },
+      "type": "api",
+      "label": "Submit Pengesahan API",
+      "position": { "x": 2175, "y": 720 }
+    },
+    {
+      "id": "script-process-pengesahan",
+      "data": {
+        "label": "Process Pengesahan Response",
+        "scriptCode": "// Process the pengesahan (verification) response\nconst apiData = processVariables.pengesahanApiResponse;\n\nif (apiData && apiData.status === 'success') {\n  // Update application status based on verification\n  switch (processVariables.pengesahanStatus) {\n    case 'lulus':\n      processVariables.applicationStatus = 'approved';\n      processVariables.statusMessage = 'Permohonan telah diluluskan';\n      processVariables.nextAction = 'payment_processing';\n      break;\n    case 'ditolak':\n      processVariables.applicationStatus = 'rejected';\n      processVariables.statusMessage = 'Permohonan ditolak: ' + processVariables.catatanPengesahan;\n      processVariables.nextAction = 'send_rejection_notice';\n      break;\n    case 'dokumen_tambahan':\n      processVariables.applicationStatus = 'pending_documents';\n      processVariables.statusMessage = 'Dokumen tambahan diperlukan';\n      processVariables.nextAction = 'request_additional_documents';\n      break;\n    case 'semakan_lanjut':\n      processVariables.applicationStatus = 'under_review';\n      processVariables.statusMessage = 'Permohonan dalam semakan lanjut';\n      processVariables.nextAction = 'further_review';\n      break;\n    default:\n      processVariables.applicationStatus = 'pending';\n      processVariables.statusMessage = 'Status tidak diketahui';\n      processVariables.nextAction = 'manual_review';\n  }\n  \n  // Set verification completion flag\n  processVariables.verificationCompleted = true;\n  processVariables.verificationTimestamp = new Date().toISOString();\n  \n  // Calculate processing time\n  if (processVariables.submissionDate) {\n    const submitTime = new Date(processVariables.submissionDate);\n    const verifyTime = new Date();\n    const processingHours = Math.round((verifyTime - submitTime) / (1000 * 60 * 60));\n    processVariables.processingTimeHours = processingHours;\n  }\n  \n  // Set notification flags based on status\n  processVariables.sendApprovalNotification = processVariables.applicationStatus === 'approved';\n  processVariables.sendRejectionNotification = processVariables.applicationStatus === 'rejected';\n  processVariables.sendPendingNotification = processVariables.applicationStatus.includes('pending');\n  \n  // Set payment processing flag for approved applications\n  if (processVariables.applicationStatus === 'approved') {\n    processVariables.paymentReady = true;\n    processVariables.paymentAmount = processVariables.jumlahBantuanDicadangkan || 0;\n    processVariables.paymentMethod = processVariables.sebabTunai === 'ya' ? 'cash' : 'bank_transfer';\n  }\n  \n  console.log('Pengesahan processed successfully:', {\n    applicationStatus: processVariables.applicationStatus,\n    statusMessage: processVariables.statusMessage,\n    nextAction: processVariables.nextAction,\n    verificationCompleted: processVariables.verificationCompleted,\n    paymentReady: processVariables.paymentReady\n  });\n} else {\n  // Handle API error\n  processVariables.applicationStatus = 'verification_failed';\n  processVariables.statusMessage = 'Ralat semasa pengesahan';\n  processVariables.verificationCompleted = false;\n  processVariables.pengesahanError = apiData ? apiData.message : 'Unknown API error';\n  \n  console.error('Pengesahan API failed:', processVariables.pengesahanError);\n}",
+        "description": "Process verification results and determine next steps",
+        "errorVariable": "pengesahanScriptError",
+        "inputVariables": [
+          "pengesahanApiResponse",
+          "pengesahanStatus",
+          "catatanPengesahan",
+          "dokumenTambahanDiperlukan",
+          "jumlahBantuanDicadangkan",
+          "jenisBantuan",
+          "verifiedBy",
+          "verificationDate",
+          "submissionDate",
+          "sebabTunai"
+        ],
+        "scriptLanguage": "javascript",
+        "continueOnError": false,
+        "outputVariables": [
+          {
+            "name": "applicationStatus",
+            "type": "string",
+            "description": "Final application status after verification"
+          },
+          {
+            "name": "statusMessage",
+            "type": "string",
+            "description": "Human-readable status message"
+          },
+          {
+            "name": "nextAction",
+            "type": "string",
+            "description": "Next action to be taken"
+          },
+          {
+            "name": "verificationCompleted",
+            "type": "boolean",
+            "description": "Whether verification process is completed"
+          },
+          {
+            "name": "verificationTimestamp",
+            "type": "string",
+            "description": "Timestamp when verification was completed"
+          },
+          {
+            "name": "processingTimeHours",
+            "type": "number",
+            "description": "Total processing time in hours"
+          },
+          {
+            "name": "sendApprovalNotification",
+            "type": "boolean",
+            "description": "Whether to send approval notification"
+          },
+          {
+            "name": "sendRejectionNotification",
+            "type": "boolean",
+            "description": "Whether to send rejection notification"
+          },
+          {
+            "name": "sendPendingNotification",
+            "type": "boolean",
+            "description": "Whether to send pending status notification"
+          },
+          {
+            "name": "paymentReady",
+            "type": "boolean",
+            "description": "Whether payment processing is ready"
+          },
+          {
+            "name": "paymentAmount",
+            "type": "number",
+            "description": "Amount approved for payment"
+          },
+          {
+            "name": "paymentMethod",
+            "type": "string",
+            "description": "Payment method (cash/bank_transfer)"
+          }
+        ]
+      },
+      "type": "script",
+      "label": "Process Pengesahan Response",
+      "position": { "x": 2175, "y": 540 }
+    },
+    {
+      "id": "notification-1753200000002",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-06 Terima Notifikasi",
+        "shape": "rectangle",
+        "message": "Assalamualaikum {applicantName},\n\nStatus permohonan bantuan anda telah dikemaskini.\n\nNo Rujukan: {applicationId}\nStatus Terkini: {statusMessage}\nTarikh Kemaskini: {verificationTimestamp}\nDiluluskan oleh: {verifiedBy}\n\n{conditionalMessage}\n\nUntuk maklumat lanjut, sila hubungi pejabat kami.\n\nTerima kasih.",
+        "subject": "Kemaskini Status Permohonan - {applicationId}",
+        "priority": "high",
+        "template": "status_update",
+        "textColor": "#0284c7",
+        "variables": [
+          "applicantName",
+          "applicationId",
+          "statusMessage",
+          "verificationTimestamp",
+          "verifiedBy",
+          "conditionalMessage"
+        ],
+        "recipients": [{ "type": "variable", "value": "applicantEmail" }],
+        "attachments": [],
+        "borderColor": "#0ea5e9",
+        "description": "Send status update notification to applicant",
+        "backgroundColor": "#f0f9ff",
+        "sendImmediately": true,
+        "notificationType": "email",
+        "conditionalSending": {
+          "conditions": [
+            {
+              "value": true,
+              "operator": "eq",
+              "variable": "verificationCompleted",
+              "valueType": "boolean"
+            }
+          ]
+        }
+      },
+      "type": "notification",
+      "label": "Terima Notifikasi",
+      "position": { "x": 3195, "y": 615 }
+    },
+    {
+      "id": "swimlane-horizontal-1752207659712",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "swimlane-horizontal",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "swimlane-horizontal",
+      "label": "",
+      "position": { "x": 2940, "y": -570 }
+    },
+    {
+      "id": "text-annotation-1752207727571",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Terima Notifikasi",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-QS-06",
+      "position": { "x": 3360, "y": -540 }
+    },
+    {
+      "id": "text-annotation-1752207881502",
+      "data": {
+        "label": "BF-NAS-PRF-AS-QS-06",
+        "shape": "rectangle",
+        "width": 200,
+        "height": 80,
+        "zIndex": 1,
+        "isShape": true,
+        "shapeType": "text-annotation",
+        "textColor": "#92400e",
+        "borderColor": "#fbbf24",
+        "description": "Terima Notifikasi",
+        "backgroundColor": "#fffbeb"
+      },
+      "type": "text-annotation",
+      "label": "BF-NAS-PRF-AS-QS-06",
+      "position": { "x": 3375, "y": 525 }
+    },
+    {
+      "id": "swimlane-horizontal-1752207945135",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "zIndex": 0,
+        "isShape": true,
+        "shapeType": "swimlane-horizontal",
+        "textColor": "#374151",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "swimlane-horizontal",
+      "label": "",
+      "position": { "x": 2100, "y": 495 }
+    },
+    {
+      "id": "swimlane-horizontal-1752208028711",
+      "data": {
+        "label": "",
+        "shape": "rectangle",
+        "width": 650,
+        "height": 400,
+        "isShape": true,
+        "shapeType": "swimlane-horizontal",
+        "textColor": "#475569",
+        "borderColor": "#16a34a",
+        "description": "",
+        "backgroundColor": "#e8f5e9"
+      },
+      "type": "swimlane-horizontal",
+      "label": "",
+      "position": { "x": 2955, "y": 495 }
+    }
+  ],
+  "viewport": {
+    "x": -424.4299384069254,
+    "y": 160.3515779089071,
+    "zoom": 0.5618446897868647
+  }
+}
diff --git a/docs/json/process-builder/fullProcessSettings.json b/docs/json/process-builder/fullProcessSettings.json
new file mode 100644
index 0000000..ae1baaa
--- /dev/null
+++ b/docs/json/process-builder/fullProcessSettings.json
@@ -0,0 +1,1462 @@
+{
+  "processInfo": {
+    "id": "51979028-2779-490c-a237-bf552a2e6376",
+    "name": "Pendaftaran Profil",
+    "description": "",
+    "priority": "normal",
+    "category": "HR",
+    "owner": ""
+  },
+  "settings": {
+    "processType": "standard",
+    "maxExecutionTime": 60,
+    "autoTimeout": 24,
+    "allowParallel": false,
+    "enableErrorRecovery": true,
+    "sendNotifications": true
+  },
+  "dataSettings": {
+    "dataPersistence": "short_term",
+    "logVariableChanges": true,
+    "encryptSensitiveData": false,
+    "dataRetentionPolicy": ""
+  },
+  "permissions": {
+    "executionPermission": "authenticated",
+    "allowedRoles": "",
+    "modificationPermission": "managers",
+    "requireApproval": false,
+    "enableAuditTrail": true
+  },
+  "workflow": {
+    "nodes": [],
+    "edges": [
+      {
+        "id": "business-rule-1751871901000-notification-1753200000002-1752207615091",
+        "source": "business-rule-1751871901000",
+        "target": "notification-1753200000002",
+        "label": "",
+        "type": "smoothstep",
+        "animated": true,
+        "data": {}
+      },
+      {
+        "id": "business-rule-1751871901000-form-pengesahan-1752207621840",
+        "source": "business-rule-1751871901000",
+        "target": "form-pengesahan",
+        "label": "",
+        "type": "smoothstep",
+        "animated": true,
+        "data": {}
+      },
+      {
+        "id": "api-pengesahan-submit-form-pengesahan-1752208003574",
+        "source": "api-pengesahan-submit",
+        "target": "form-pengesahan",
+        "label": "",
+        "type": "smoothstep",
+        "animated": true,
+        "data": {}
+      },
+      {
+        "id": "script-process-pengesahan-api-pengesahan-submit-1752208004921",
+        "source": "script-process-pengesahan",
+        "target": "api-pengesahan-submit",
+        "label": "",
+        "type": "smoothstep",
+        "animated": true,
+        "data": {}
+      }
+    ]
+  },
+  "variables": [
+    {
+      "name": "text3",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Text field 3 from Section A"
+    },
+    {
+      "name": "text14",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Text field 14"
+    },
+    {
+      "name": "select1",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Select field 1 from Section A"
+    },
+    {
+      "name": "apiError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "API error from Submit Profile API"
+    },
+    {
+      "name": "apiToken",
+      "type": "string",
+      "scope": "global",
+      "value": "your-api-token-here",
+      "description": "API authentication token for external services"
+    },
+    {
+      "name": "namaBank",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Nama bank from Section B"
+    },
+    {
+      "name": "nextAction",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Next action to be taken in the process"
+    },
+    {
+      "name": "radio9Copy",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Radio field 9 copy"
+    },
+    {
+      "name": "sebabTunai",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Sebab tunai from Section B"
+    },
+    {
+      "name": "verifiedBy",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "User ID or name of person who verified documents"
+    },
+    {
+      "name": "apiResponse",
+      "type": "object",
+      "scope": "global",
+      "value": {
+        "data": {
+          "id": "APP-2024-001234",
+          "score": 85,
+          "status": "pending_verification",
+          "profileId": "PROF-567890",
+          "riskLevel": "low",
+          "documentCount": 3,
+          "submissionDate": "2024-01-15T10:30:00Z"
+        },
+        "status": "success",
+        "message": "Profile submitted successfully"
+      },
+      "description": "API response from Submit Profile API"
+    },
+    {
+      "name": "namaSekolah",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Nama sekolah from Section B"
+    },
+    {
+      "name": "noAkaunBank",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "No akaun bank from Section B"
+    },
+    {
+      "name": "profileData",
+      "type": "object",
+      "scope": "global",
+      "value": {
+        "nama": "Ahmad Bin Ali",
+        "alamat": "No 123, Jalan Merdeka, 50000 Kuala Lumpur",
+        "tarikhLahir": "1985-01-01",
+        "noKadPengenalan": "850101-01-1234"
+      },
+      "description": "The retrieved profile data"
+    },
+    {
+      "name": "radioBangsa",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Radio field for bangsa"
+    },
+    {
+      "name": "scriptError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error information from script execution"
+    },
+    {
+      "name": "errorMessage",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Error message from failed operations"
+    },
+    {
+      "name": "formJeniskp1",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Form field for jenis KP 1"
+    },
+    {
+      "name": "formJeniskp2",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Form field for jenis KP 2"
+    },
+    {
+      "name": "formJeniskp3",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Form field for jenis KP 3"
+    },
+    {
+      "name": "jenisBantuan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Type of assistance (tunai/barangan/perkhidmatan)"
+    },
+    {
+      "name": "loginSuccess",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Indicates if the asnaf login was successful"
+    },
+    {
+      "name": "okuAllowance",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "OKU (disabled person) allowance (RM 247.00)"
+    },
+    {
+      "name": "paymentReady",
+      "type": "boolean",
+      "scope": "global",
+      "value": true,
+      "description": "Whether payment processing is ready"
+    },
+    {
+      "name": "profileFound",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Indicates if a profile was found via search"
+    },
+    {
+      "name": "profileScore",
+      "type": "number",
+      "scope": "global",
+      "value": 85,
+      "description": "Profile score from initial API response"
+    },
+    {
+      "name": "radioJantina",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Radio field for jantina"
+    },
+    {
+      "name": "urgencyLevel",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Urgency level (high/medium/low)"
+    },
+    {
+      "name": "urgencyScore",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Calculated urgency score based on needs"
+    },
+    {
+      "name": "alamatSekolah",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Alamat sekolah from Section B"
+    },
+    {
+      "name": "applicantName",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Applicant's full name"
+    },
+    {
+      "name": "applicationId",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Unique application reference number"
+    },
+    {
+      "name": "carianLoginId",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Asnaf ID for login"
+    },
+    {
+      "name": "daerahSekolah",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Daerah sekolah from Section B"
+    },
+    {
+      "name": "dependentName",
+      "type": "string",
+      "scope": "global",
+      "value": "Siti Aminah Binti Ahmad",
+      "description": "Name of dependent"
+    },
+    {
+      "name": "dependentType",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Type of dependent (school_age_7_17, below_6, etc.)"
+    },
+    {
+      "name": "hasDependents",
+      "type": "boolean",
+      "scope": "global",
+      "value": true,
+      "description": "Whether applicant has dependents"
+    },
+    {
+      "name": "hasOtherNeeds",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has other needs"
+    },
+    {
+      "name": "householdType",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Type of household (married_with_dependents, single_with_dependents, etc.)"
+    },
+    {
+      "name": "kategoriAsnaf",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Category of asnaf (fakir_miskin/bukan_fakir_miskin)"
+    },
+    {
+      "name": "kifayahStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Status of Had Kifayah calculation (calculated, pending, error)"
+    },
+    {
+      "name": "negeriSekolah",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Negeri sekolah from Section B"
+    },
+    {
+      "name": "nextStepReady",
+      "type": "boolean",
+      "scope": "global",
+      "value": true,
+      "description": "Whether ready for next step in process"
+    },
+    {
+      "name": "nyatakanLain2",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Text field for nyatakan lain-lain"
+    },
+    {
+      "name": "paymentAmount",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Amount approved for payment (RM)"
+    },
+    {
+      "name": "paymentMethod",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Payment method (cash/bank_transfer)"
+    },
+    {
+      "name": "poskodSekolah",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Poskod sekolah from Section B"
+    },
+    {
+      "name": "statusMessage",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Human-readable status message"
+    },
+    {
+      "name": "applicantEmail",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Applicant's email address for notifications"
+    },
+    {
+      "name": "caraPembayaran",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Cara pembayaran from Section B"
+    },
+    {
+      "name": "carianSearchId",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "IC or Foreign ID used for profile search"
+    },
+    {
+      "name": "dateMasukislam",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date field for masuk Islam"
+    },
+    {
+      "name": "dependentCount",
+      "type": "number",
+      "scope": "global",
+      "value": 1,
+      "description": "Number of dependents"
+    },
+    {
+      "name": "hasBankingInfo",
+      "type": "boolean",
+      "scope": "global",
+      "value": true,
+      "description": "Whether banking information is provided"
+    },
+    {
+      "name": "namaTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Nama tanggungan from Section B"
+    },
+    {
+      "name": "riskAssessment",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Risk assessment result from verification"
+    },
+    {
+      "name": "sebabKemaskini",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Reason for updating profile"
+    },
+    {
+      "name": "statusIndividu",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Individual status (e.g., Muallaf)"
+    },
+    {
+      "name": "statusKeluarga",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Family status based on had kifayah calculation"
+    },
+    {
+      "name": "submissionDate",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date when application was submitted"
+    },
+    {
+      "name": "syorPengesahan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "AI-generated recommendation summary"
+    },
+    {
+      "name": "catatanTambahan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Catatan tambahan berkaitan permohonan"
+    },
+    {
+      "name": "hasDisasterNeed",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has disaster-related needs"
+    },
+    {
+      "name": "hasHomelessness",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant is homeless"
+    },
+    {
+      "name": "kemaskiniProfil",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "User's decision on whether to update profile (ya/tidak)"
+    },
+    {
+      "name": "lihatFamilyTree",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "User's choice whether to view family tree (ya/tidak)"
+    },
+    {
+      "name": "noKadPengenalan",
+      "type": "string",
+      "scope": "global",
+      "value": "850101-01-1234",
+      "description": "No Kad Pengenalan"
+    },
+    {
+      "name": "pengesahanError",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "General error message from pengesahan process"
+    },
+    {
+      "name": "penilaianAwalId",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Generated ID for the initial assessment"
+    },
+    {
+      "name": "radioPendidikan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Radio field for pendidikan"
+    },
+    {
+      "name": "rejectionReason",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Reason for rejection if documents incomplete"
+    },
+    {
+      "name": "textWarganegara",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Text field for warganegara"
+    },
+    {
+      "name": "totalHadKifayah",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Total calculated Had Kifayah amount"
+    },
+    {
+      "name": "bangsaTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Bangsa tanggungan from Section B"
+    },
+    {
+      "name": "carianSearchType",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Type of search for Carian Profil (e.g., 'ic_search', 'login')"
+    },
+    {
+      "name": "dokumenBerkaitan",
+      "type": "array",
+      "scope": "global",
+      "value": null,
+      "description": "Upload dokumen yang berkaitan"
+    },
+    {
+      "name": "eligibilityScore",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Eligibility score from verification API"
+    },
+    {
+      "name": "hasNoUrgentNeeds",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has no urgent needs"
+    },
+    {
+      "name": "hubunganKeluarga",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Hubungan keluarga from Section B"
+    },
+    {
+      "name": "pendapatanBersih",
+      "type": "number",
+      "scope": "global",
+      "value": 1000,
+      "description": "Net family income"
+    },
+    {
+      "name": "pengesahanStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Verification status (lulus/ditolak/dokumen_tambahan/semakan_lanjut)"
+    },
+    {
+      "name": "readyForDecision",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether ready for decision gateway"
+    },
+    {
+      "name": "tempohMasukIslam",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Duration since converting to Islam (in years)"
+    },
+    {
+      "name": "verificationDate",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date when verification was completed"
+    },
+    {
+      "name": "applicationStatus",
+      "type": "string",
+      "scope": "global",
+      "value": "pending",
+      "description": "Current application status (pending/approved/rejected/under_review)"
+    },
+    {
+      "name": "baseKifayahAmount",
+      "type": "decimal",
+      "scope": "global",
+      "value": null,
+      "description": "Base Had Kifayah amount for head of household (RM 1,215.00)"
+    },
+    {
+      "name": "catatanPengesahan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Verification notes from officer"
+    },
+    {
+      "name": "documentsComplete",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether all documents are complete"
+    },
+    {
+      "name": "documentsRequired",
+      "type": "boolean",
+      "scope": "global",
+      "value": true,
+      "description": "Whether documents verification is required"
+    },
+    {
+      "name": "hasFamilyConflict",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has family conflict"
+    },
+    {
+      "name": "hasUtilityArrears",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has utility arrears"
+    },
+    {
+      "name": "jantinaTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Jantina tanggungan from Section B"
+    },
+    {
+      "name": "kategoriAsnafSyor",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Recommended asnaf category"
+    },
+    {
+      "name": "keperluanMendesak",
+      "type": "array",
+      "scope": "global",
+      "value": null,
+      "description": "Apakah keperluan tuan/puan mendesak sekarang ini?"
+    },
+    {
+      "name": "komitmenKosTinggi",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Adakah tuan/puan mempunyai komitmen dan pembiayaan melibatkan kos yang tinggi?"
+    },
+    {
+      "name": "namaPemegangAkaun",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Nama pemegang akaun from Section B"
+    },
+    {
+      "name": "notificationError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from notification sending process"
+    },
+    {
+      "name": "peratusHadKifayah",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Percentage of had kifayah (income/total had kifayah * 100)"
+    },
+    {
+      "name": "tarikhPengesyoran",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date of recommendation generation"
+    },
+    {
+      "name": "verificationError",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Error message from verification processing"
+    },
+    {
+      "name": "verificationLevel",
+      "type": "string",
+      "scope": "global",
+      "value": "enhanced",
+      "description": "Level of verification required (standard/enhanced)"
+    },
+    {
+      "name": "verificationNotes",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Notes from document verification process"
+    },
+    {
+      "name": "carianProfilStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "The status of the profile search/login action"
+    },
+    {
+      "name": "childcareAllowance",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Childcare allowance for 12 years and below (RM 330.00)"
+    },
+    {
+      "name": "conditionalMessage",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Conditional message based on application status"
+    },
+    {
+      "name": "dateMasukislamCopy",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date field for masuk Islam copy"
+    },
+    {
+      "name": "dependentAllowance",
+      "type": "decimal",
+      "scope": "global",
+      "value": null,
+      "description": "Allowance per dependent (RM 408.00 for school age 7-17)"
+    },
+    {
+      "name": "jenisKadTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Jenis kad tanggungan from Section B"
+    },
+    {
+      "name": "pengesahanApiError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "API error from verification submission"
+    },
+    {
+      "name": "penilaianAwalError",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Error message from penilaian awal processing"
+    },
+    {
+      "name": "updatedProfileData",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Updated profile data after changes"
+    },
+    {
+      "name": "verificationStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Status of document verification process"
+    },
+    {
+      "name": "canProceedToKifayah",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether process can proceed to kifayah analysis"
+    },
+    {
+      "name": "carianLoginPassword",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Password for Asnaf login"
+    },
+    {
+      "name": "hasDeathRelatedNeed",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has death-related needs"
+    },
+    {
+      "name": "noTelefonTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "No telefon tanggungan from Section B"
+    },
+    {
+      "name": "penilaianAwalStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Status of initial assessment submission"
+    },
+    {
+      "name": "processingTimeHours",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Total processing time in hours"
+    },
+    {
+      "name": "profileUpdateStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Status of profile update process"
+    },
+    {
+      "name": "spouseKifayahAmount",
+      "type": "decimal",
+      "scope": "global",
+      "value": null,
+      "description": "Had Kifayah amount for spouse (RM 780.00)"
+    },
+    {
+      "name": "bangsaLainTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Bangsa lain tanggungan from Section B"
+    },
+    {
+      "name": "bersekolahTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Bersekolah tanggungan from Section B"
+    },
+    {
+      "name": "carianProfilApiError",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Error from Carian Profil API"
+    },
+    {
+      "name": "hasUploadedDocuments",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether documents were uploaded"
+    },
+    {
+      "name": "hasUrgentMedicalNeed",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether applicant has urgent medical needs"
+    },
+    {
+      "name": "hubunganLainNyatakan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Hubungan lain nyatakan from Section B"
+    },
+    {
+      "name": "kifayahAnalysisError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from kifayah analysis API call"
+    },
+    {
+      "name": "readyForPersonalInfo",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether ready for personal info form"
+    },
+    {
+      "name": "syorPengesahanStatus",
+      "type": "string",
+      "scope": "global",
+      "value": "pending",
+      "description": "Status of AI recommendation generation"
+    },
+    {
+      "name": "verificationApiError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from document verification API call"
+    },
+    {
+      "name": "bilanganDewasaBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 1,
+      "description": "Number of working adults (18 years and above)"
+    },
+    {
+      "name": "bilanganTanggunganIPT",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Number of dependents studying in higher education institutions"
+    },
+    {
+      "name": "categoryKetuaKeluarga",
+      "type": "string",
+      "scope": "global",
+      "value": "ketua_keluarga",
+      "description": "Category for head of family"
+    },
+    {
+      "name": "hasHighCostCommitment",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether applicant has high cost commitments"
+    },
+    {
+      "name": "kategoriKeluargaAsnaf",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Family asnaf category (Fakir/Miskin/Non-FM)"
+    },
+    {
+      "name": "keperluanLainNyatakan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Keperluan lain yang dinyatakan oleh pemohon"
+    },
+    {
+      "name": "kifayahAnalysisResult",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Result from kifayah eligibility analysis API"
+    },
+    {
+      "name": "pengesahanApiResponse",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "API response from verification submission"
+    },
+    {
+      "name": "pengesahanScriptError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Script error from pengesahan processing"
+    },
+    {
+      "name": "penilaianAwalApiError",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Error from the Penilaian Awal API"
+    },
+    {
+      "name": "tarikhLahirTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tarikh lahir tanggungan from Section B"
+    },
+    {
+      "name": "tempatLahirTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tempat lahir tanggungan from Section B"
+    },
+    {
+      "name": "totalJumlahHadKifayah",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total family had kifayah amount"
+    },
+    {
+      "name": "verificationCompleted",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether verification process is completed"
+    },
+    {
+      "name": "verificationProcessed",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether verification processing is complete"
+    },
+    {
+      "name": "verificationTimestamp",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Timestamp when verification was completed"
+    },
+    {
+      "name": "warganegaraTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Warganegara tanggungan from Section B"
+    },
+    {
+      "name": "kifayahCalculationDate",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Date and time when Had Kifayah was calculated"
+    },
+    {
+      "name": "noPengenalanTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "No pengenalan tanggungan from Section B"
+    },
+    {
+      "name": "statusKahwinTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Status kahwin tanggungan from Section B"
+    },
+    {
+      "name": "tinggalBersamaKeluarga",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tinggal bersama keluarga from Section B"
+    },
+    {
+      "name": "bilanganTanggungan7to17",
+      "type": "number",
+      "scope": "global",
+      "value": 2,
+      "description": "Number of dependents aged 7-17 years"
+    },
+    {
+      "name": "carianProfilApiResponse",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Response from Carian Profil API"
+    },
+    {
+      "name": "carianProfilScriptError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from Carian Profil script execution"
+    },
+    {
+      "name": "chronicIllnessAllowance",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Chronic illness allowance (RM 243.00)"
+    },
+    {
+      "name": "dependentEducationLevel",
+      "type": "array",
+      "scope": "global",
+      "value": ["smk"],
+      "description": "Dependent highest education from Section B"
+    },
+    {
+      "name": "hadKifayahDewasaBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 412,
+      "description": "Had kifayah amount per working adult (RM 412.00)"
+    },
+    {
+      "name": "hadKifayahTanggunganIPT",
+      "type": "number",
+      "scope": "global",
+      "value": 613,
+      "description": "Had kifayah amount per dependent in higher education (RM 613.00)"
+    },
+    {
+      "name": "kifayahCalculationError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from Had Kifayah calculation"
+    },
+    {
+      "name": "profileSubmissionStatus",
+      "type": "string",
+      "scope": "global",
+      "value": "success",
+      "description": "Status of profile submission"
+    },
+    {
+      "name": "selectStatusperkahwinan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Select field for status perkahwinan"
+    },
+    {
+      "name": "sendPendingNotification",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether to send pending status notification"
+    },
+    {
+      "name": "tempatMenetapTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tempat menetap tanggungan from Section B"
+    },
+    {
+      "name": "verificationApiResponse",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Response from document verification API"
+    },
+    {
+      "name": "verificationCompletedAt",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Timestamp when verification was completed"
+    },
+    {
+      "name": "verificationScriptError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from verification response processing script"
+    },
+    {
+      "name": "baseKifayahKetuaKeluarga",
+      "type": "number",
+      "scope": "global",
+      "value": 1215,
+      "description": "Base had kifayah amount for head of family (RM 1,215.00)"
+    },
+    {
+      "name": "jumlahBantuanDicadangkan",
+      "type": "number",
+      "scope": "global",
+      "value": null,
+      "description": "Recommended assistance amount (RM)"
+    },
+    {
+      "name": "kifayahCalculationResult",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Result from Had Kifayah business rule calculation"
+    },
+    {
+      "name": "kifayahCalculationStatus",
+      "type": "string",
+      "scope": "global",
+      "value": "pending",
+      "description": "Status of had kifayah calculation"
+    },
+    {
+      "name": "kifayahNotificationError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from sending Had Kifayah notification"
+    },
+    {
+      "name": "pendidikanLainTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Pendidikan lain tanggungan from Section B"
+    },
+    {
+      "name": "penilaianAwalApiResponse",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Response from the Penilaian Awal API"
+    },
+    {
+      "name": "penilaianAwalScriptError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error from Penilaian Awal script execution"
+    },
+    {
+      "name": "sendApprovalNotification",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether to send approval notification"
+    },
+    {
+      "name": "tarikhMulaKfamTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tarikh mula KFAM tanggungan from Section B"
+    },
+    {
+      "name": "dokumenTambahanDiperlukan",
+      "type": "array",
+      "scope": "global",
+      "value": null,
+      "description": "List of additional documents required"
+    },
+    {
+      "name": "hadKifayahTanggungan7to17",
+      "type": "number",
+      "scope": "global",
+      "value": 408,
+      "description": "Had kifayah amount per dependent aged 7-17 years (RM 408.00)"
+    },
+    {
+      "name": "sendRejectionNotification",
+      "type": "boolean",
+      "scope": "global",
+      "value": false,
+      "description": "Whether to send rejection notification"
+    },
+    {
+      "name": "statusRecommendationError",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Error information from status recommendation"
+    },
+    {
+      "name": "bilanganDewasaTidakBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 1,
+      "description": "Number of non-working adults (18 years and above)"
+    },
+    {
+      "name": "bilanganTanggungan6KeBawah",
+      "type": "number",
+      "scope": "global",
+      "value": 1,
+      "description": "Number of dependents aged 6 years and below"
+    },
+    {
+      "name": "dependentDocumentsComplete",
+      "type": "boolean",
+      "scope": "global",
+      "value": null,
+      "description": "Whether dependent documents are complete"
+    },
+    {
+      "name": "documentVerificationResult",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Result from document verification form (lengkap/tidak_lengkap)"
+    },
+    {
+      "name": "statusRecommendationResult",
+      "type": "object",
+      "scope": "global",
+      "value": null,
+      "description": "Result of status recommendation process"
+    },
+    {
+      "name": "tarikhMasukIslamTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Tarikh masuk Islam tanggungan from Section B"
+    },
+    {
+      "name": "dependentVerificationStatus",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Dependent verification status"
+    },
+    {
+      "name": "hadKifayahDewasaTidakBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 167,
+      "description": "Had kifayah amount per non-working adult (RM 167.00)"
+    },
+    {
+      "name": "hadKifayahTanggungan6KeBawah",
+      "type": "number",
+      "scope": "global",
+      "value": 175,
+      "description": "Had kifayah amount per dependent aged 6 years and below (RM 175.00)"
+    },
+    {
+      "name": "totalHadKifayahDewasaBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total had kifayah for working adults"
+    },
+    {
+      "name": "totalHadKifayahTanggunganIPT",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total had kifayah for dependents in higher education"
+    },
+    {
+      "name": "pendidikanTertinggiTanggungan",
+      "type": "string",
+      "scope": "global",
+      "value": null,
+      "description": "Pendidikan tertinggi tanggungan from Section B"
+    },
+    {
+      "name": "totalHadKifayahTanggungan7to17",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total had kifayah for dependents aged 7-17 years"
+    },
+    {
+      "name": "totalHadKifayahDewasaTidakBekerja",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total had kifayah for non-working adults"
+    },
+    {
+      "name": "totalHadKifayahTanggungan6KeBawah",
+      "type": "number",
+      "scope": "global",
+      "value": 0,
+      "description": "Total had kifayah for dependents aged 6 years and below"
+    }
+  ],
+  "metadata": {
+    "nodeCount": 0,
+    "edgeCount": 4,
+    "variableCount": 195,
+    "exportedAt": "2025-07-11T04:28:56.583Z"
+  }
+}
diff --git a/docs/json/process-builder/processDefinition.json b/docs/json/process-builder/processDefinition.json
index b77aded..f755507 100644
--- a/docs/json/process-builder/processDefinition.json
+++ b/docs/json/process-builder/processDefinition.json
@@ -66,28 +66,6 @@
       "sourceHandle": "api-1751871528249-right",
       "targetHandle": "script-1751871635000-left"
     },
-    {
-      "id": "script-1751871635000-api-1752114771983-1752114797295",
-      "data": {},
-      "type": "smoothstep",
-      "label": "",
-      "source": "script-1751871635000",
-      "target": "api-1752114771983",
-      "animated": true,
-      "sourceHandle": "script-1751871635000-right",
-      "targetHandle": "api-1752114771983-left"
-    },
-    {
-      "id": "api-1752114771983-html-1752109761532-1752114821740",
-      "data": {},
-      "type": "smoothstep",
-      "label": "",
-      "source": "api-1752114771983",
-      "target": "html-1752109761532",
-      "animated": true,
-      "sourceHandle": "api-1752114771983-right",
-      "targetHandle": "html-1752109761532-left"
-    },
     {
       "id": "start-1751870920411-form-1753000000000-1752115210580",
       "data": {},
@@ -120,15 +98,299 @@
       "animated": true,
       "sourceHandle": "api-1753000000001-right",
       "targetHandle": "script-1753000000002-left"
+    },
+    {
+      "id": "script-1753000000002-gateway-1753100000000-1752202680793",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-1753000000002",
+      "target": "gateway-1753100000000",
+      "animated": true,
+      "sourceHandle": "script-1753000000002-right",
+      "targetHandle": "gateway-1753100000000-left"
+    },
+    {
+      "id": "gateway-1753100000000-form-1751870928350-1752202820616",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-1753100000000",
+      "target": "form-1751870928350",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000000-right",
+      "targetHandle": "form-1751870928350-left"
+    },
+    {
+      "id": "form-1753100000001-gateway-1753100000002-1752202841767",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-1753100000001",
+      "target": "gateway-1753100000002",
+      "animated": true,
+      "sourceHandle": "form-1753100000001-right",
+      "targetHandle": "gateway-1753100000002-left"
+    },
+    {
+      "id": "gateway-1753100000002-subprocess-1753100000003-1752202973206",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-1753100000002",
+      "target": "subprocess-1753100000003",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000002-right",
+      "targetHandle": "subprocess-1753100000003-left"
+    },
+    {
+      "id": "gateway-1753100000000-form-1753100000001-1752203198190",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-1753100000000",
+      "target": "form-1753100000001",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000000-right",
+      "targetHandle": "form-1753100000001-top"
+    },
+    {
+      "id": "script-1751871635000-form-family-tree-choice-1752204006162",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "script-1751871635000",
+      "target": "form-family-tree-choice",
+      "animated": true,
+      "sourceHandle": "script-1751871635000-right",
+      "targetHandle": "form-family-tree-choice-left"
+    },
+    {
+      "id": "form-family-tree-choice-gateway-family-tree-choice-1752204014461",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-family-tree-choice",
+      "target": "gateway-family-tree-choice",
+      "animated": true,
+      "sourceHandle": "form-family-tree-choice-bottom",
+      "targetHandle": "gateway-family-tree-choice-left"
+    },
+    {
+      "id": "gateway-family-tree-choice-api-1752114771983-1752204050925",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-family-tree-choice",
+      "target": "api-1752114771983",
+      "animated": true,
+      "sourceHandle": "gateway-family-tree-choice-right",
+      "targetHandle": "api-1752114771983-left"
+    },
+    {
+      "id": "api-1752114771983-html-1752109761532-1752204167660",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "api-1752114771983",
+      "target": "html-1752109761532",
+      "animated": true,
+      "sourceHandle": "api-1752114771983-bottom",
+      "targetHandle": "html-1752109761532-left"
+    },
+    {
+      "id": "gateway-family-tree-choice-form-kategori-asnaf-1752204312974",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-family-tree-choice",
+      "target": "form-kategori-asnaf",
+      "animated": true,
+      "sourceHandle": "gateway-family-tree-choice-right",
+      "targetHandle": "form-kategori-asnaf-top"
+    },
+    {
+      "id": "form-kategori-asnaf-gateway-fakir-miskin-choice-1752204332412",
+      "data": {},
+      "type": "smoothstep",
+      "label": "",
+      "source": "form-kategori-asnaf",
+      "target": "gateway-fakir-miskin-choice",
+      "animated": true,
+      "sourceHandle": "form-kategori-asnaf-bottom",
+      "targetHandle": "gateway-fakir-miskin-choice-left"
+    },
+    {
+      "id": "gateway-1753100000002-subprocess-1752202751327-1752204374213",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Tidak",
+      "source": "gateway-1753100000002",
+      "target": "subprocess-1752202751327",
+      "animated": true,
+      "sourceHandle": "gateway-1753100000002-right",
+      "targetHandle": "subprocess-1752202751327-left"
+    },
+    {
+      "id": "gateway-fakir-miskin-choice-business-rule-1751871900000-1752204422657",
+      "data": {},
+      "type": "smoothstep",
+      "label": "Ya",
+      "source": "gateway-fakir-miskin-choice",
+      "target": "business-rule-1751871900000",
+      "animated": true,
+      "sourceHandle": "gateway-fakir-miskin-choice-right",
+      "targetHandle": "business-rule-1751871900000-left"
     }
   ],
   "nodes": [
+    {
+      "id": "gateway-family-tree-choice",
+      "data": {
+        "label": "Lihat Family Tree?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "ya",
+                "operator": "eq",
+                "variable": "lihatFamilyTree",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "tidak",
+                "operator": "eq",
+                "variable": "lihatFamilyTree",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "gateway-fakir-miskin-choice",
+        "description": "Choose whether to view family tree",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Lihat Family Tree?",
+      "position": { "x": 2070, "y": -345 }
+    },
+    {
+      "id": "form-family-tree-choice",
+      "data": {
+        "label": "Pilihan Family Tree",
+        "formId": 6,
+        "formName": "Pilihan Family Tree",
+        "formUuid": "6e07fc8f-a160-478a-85fd-fa3364401547",
+        "description": "Form untuk memilih sama ada mahu lihat family tree atau tidak",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          { "formField": "nama_pemohon", "processVariable": "applicantName" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          {
+            "formField": "lihat_family_tree",
+            "processVariable": "lihatFamilyTree"
+          }
+        ],
+        "fieldConditions": []
+      },
+      "type": "form",
+      "label": "Pilihan Family Tree",
+      "position": { "x": 2040, "y": -540 }
+    },
+    {
+      "id": "gateway-fakir-miskin-choice",
+      "data": {
+        "label": "Fakir Miskin?",
+        "shape": "diamond",
+        "textColor": "#333333",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "fakir_miskin",
+                "operator": "eq",
+                "variable": "kategoriAsnaf",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "bukan_fakir_miskin",
+                "operator": "eq",
+                "variable": "kategoriAsnaf",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "business-rule-1751871900000",
+        "description": "Determine if applicant is Fakir Miskin",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Fakir Miskin?",
+      "position": { "x": 2085, "y": 210 }
+    },
+    {
+      "id": "form-kategori-asnaf",
+      "data": {
+        "label": "Pilihan Kategori Asnaf",
+        "formId": 7,
+        "formName": "Pilihan Kategori Asnaf",
+        "formUuid": "7e07fc8f-a160-478a-85fd-fa3364401548",
+        "description": "Form untuk memilih kategori asnaf",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          { "formField": "nama_pemohon", "processVariable": "applicantName" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          { "formField": "kategori_asnaf", "processVariable": "kategoriAsnaf" }
+        ],
+        "fieldConditions": []
+      },
+      "type": "form",
+      "label": "Pilihan Kategori Asnaf",
+      "position": { "x": 2055, "y": -30 }
+    },
     {
       "id": "start-1751870920411",
       "data": { "label": "Start", "description": "Process start point" },
       "type": "start",
       "label": "Start",
-      "position": { "x": 120, "y": -495 }
+      "position": { "x": -75, "y": -510 }
     },
     {
       "id": "form-1752471000000",
@@ -170,7 +432,7 @@
       },
       "type": "form",
       "label": "Penilaian Awal",
-      "position": { "x": 450, "y": -525 }
+      "position": { "x": 435, "y": -540 }
     },
     {
       "id": "api-1752471000010",
@@ -187,7 +449,7 @@
       },
       "type": "api",
       "label": "Submit Penilaian Awal API",
-      "position": { "x": 450, "y": -345 }
+      "position": { "x": 435, "y": -345 }
     },
     {
       "id": "script-1752471000020",
@@ -434,7 +696,7 @@
       },
       "type": "form",
       "label": "Borang Maklumat Peribadi",
-      "position": { "x": 1275, "y": -525 }
+      "position": { "x": 1260, "y": -540 }
     },
     {
       "id": "api-1751871528249",
@@ -451,7 +713,7 @@
       },
       "type": "api",
       "label": "Submit Profile API",
-      "position": { "x": 1275, "y": -345 }
+      "position": { "x": 1260, "y": -345 }
     },
     {
       "id": "script-1751871635000",
@@ -572,7 +834,7 @@
       },
       "type": "form",
       "label": "Borang Semak Dokumen",
-      "position": { "x": 885, "y": 675 }
+      "position": { "x": 825, "y": 945 }
     },
     {
       "id": "api-1751871750000",
@@ -589,7 +851,7 @@
       },
       "type": "api",
       "label": "Submit Document Verification API",
-      "position": { "x": 1050, "y": 510 }
+      "position": { "x": 1170, "y": 810 }
     },
     {
       "id": "script-1751871770000",
@@ -667,12 +929,14 @@
       },
       "type": "script",
       "label": "Process Verification Response",
-      "position": { "x": 630, "y": 525 }
+      "position": { "x": 540, "y": 780 }
     },
     {
       "id": "gateway-1751871800000",
       "data": {
         "label": "Lengkap?",
+        "shape": "diamond",
+        "textColor": "#333333",
         "conditions": [
           {
             "id": "condition-group-ya-path",
@@ -703,18 +967,22 @@
             ]
           }
         ],
+        "borderColor": "#6b7280",
         "defaultPath": "notification-1751872000000",
         "description": "Check if documents are complete",
-        "gatewayType": "exclusive"
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
       },
       "type": "gateway",
       "label": "Lengkap?",
-      "position": { "x": 1350, "y": 315 }
+      "position": { "x": 1935, "y": 510 }
     },
     {
       "id": "business-rule-1751871900000",
       "data": {
         "label": "Analisis Had Kifayah",
+        "shape": "rectangle",
+        "textColor": "#1e40af",
         "ruleGroups": [
           {
             "id": "group-1",
@@ -828,13 +1096,15 @@
             ]
           }
         ],
+        "borderColor": "#3b82f6",
         "description": "Calculate Had Kifayah based on household composition and income",
         "errorVariable": "kifayahCalculationError",
-        "outputVariable": "kifayahCalculationResult"
+        "outputVariable": "kifayahCalculationResult",
+        "backgroundColor": "#eff6ff"
       },
       "type": "business-rule",
       "label": "Analisis Had Kifayah",
-      "position": { "x": 1665, "y": 120 }
+      "position": { "x": 2445, "y": -45 }
     },
     {
       "id": "notification-1751871950000",
@@ -851,7 +1121,7 @@
       },
       "type": "notification",
       "label": "Hantar Keputusan Had Kifayah",
-      "position": { "x": 1890, "y": 30 }
+      "position": { "x": 2730, "y": 690 }
     },
     {
       "id": "notification-1751872000000",
@@ -868,7 +1138,7 @@
       },
       "type": "notification",
       "label": "Terima Notifikasi",
-      "position": { "x": 1485, "y": 360 }
+      "position": { "x": 1455, "y": 915 }
     },
     {
       "id": "end-1751872100000",
@@ -878,7 +1148,7 @@
       },
       "type": "end",
       "label": "End",
-      "position": { "x": 1935, "y": 390 }
+      "position": { "x": 1710, "y": 930 }
     },
     {
       "id": "html-1752109761532",
@@ -899,7 +1169,7 @@
       },
       "type": "html",
       "label": "Family Tree",
-      "position": { "x": 2385, "y": -360 }
+      "position": { "x": 2535, "y": -435 }
     },
     {
       "id": "rectangle-shape-1752110224921",
@@ -978,7 +1248,7 @@
       "data": {
         "label": "",
         "shape": "rectangle",
-        "width": 650,
+        "width": 750,
         "height": 400,
         "isShape": true,
         "shapeType": "rectangle",
@@ -1010,7 +1280,7 @@
       },
       "type": "api",
       "label": "Called Family Tree",
-      "position": { "x": 2070, "y": -345 }
+      "position": { "x": 2295, "y": -525 }
     },
     {
       "id": "text-annotation-1752114833800",
@@ -1028,7 +1298,7 @@
       },
       "type": "text-annotation",
       "label": "BF-NAS-PRF-AS-FM",
-      "position": { "x": 2430, "y": -555 }
+      "position": { "x": 2520, "y": -555 }
     },
     {
       "id": "form-1753000000000",
@@ -1148,11 +1418,200 @@
       "type": "text-annotation",
       "label": "BF-NAS-PRF-AS-QS-01",
       "position": { "x": 810, "y": -30 }
+    },
+    {
+      "id": "gateway-1753100000000",
+      "data": {
+        "label": "Profil Wujud?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": true,
+                "operator": "eq",
+                "variable": "profileFound",
+                "valueType": "boolean",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": false,
+                "operator": "eq",
+                "variable": "profileFound",
+                "valueType": "boolean",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "form-1752471000000",
+        "description": "Check if profile exists in system",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Profil Wujud?",
+      "position": { "x": 1230, "y": 0 }
+    },
+    {
+      "id": "form-1753100000001",
+      "data": {
+        "label": "Pengesahan Kemaskini Profil",
+        "formId": 5,
+        "formName": "Pengesahan Kemaskini Profil",
+        "formUuid": "5e07fc8f-a160-478a-85fd-fa3364401546",
+        "description": "Borang pengesahan untuk kemaskini profil sedia ada",
+        "assignedRoles": [],
+        "assignedUsers": [],
+        "inputMappings": [
+          {
+            "formField": "nama_pemohon",
+            "processVariable": "profileData.nama"
+          },
+          {
+            "formField": "no_kad_pengenalan",
+            "processVariable": "profileData.noKadPengenalan"
+          },
+          {
+            "formField": "tarikh_lahir",
+            "processVariable": "profileData.tarikhLahir"
+          },
+          { "formField": "alamat", "processVariable": "profileData.alamat" }
+        ],
+        "assignmentType": "public",
+        "outputMappings": [
+          {
+            "formField": "kemaskini_profil",
+            "processVariable": "kemaskiniProfil"
+          },
+          {
+            "formField": "sebab_kemaskini",
+            "processVariable": "sebabKemaskini"
+          }
+        ],
+        "fieldConditions": [],
+        "assignmentVariable": "",
+        "assignmentVariableType": "user_id"
+      },
+      "type": "form",
+      "label": "Pengesahan Kemaskini Profil",
+      "position": { "x": 1200, "y": 195 }
+    },
+    {
+      "id": "gateway-1753100000002",
+      "data": {
+        "label": "Perubahan Profil?",
+        "shape": "diamond",
+        "textColor": "#374151",
+        "conditions": [
+          {
+            "id": "condition-group-ya-path",
+            "output": "Ya",
+            "conditions": [
+              {
+                "id": "condition-1",
+                "value": "ya",
+                "operator": "eq",
+                "variable": "kemaskiniProfil",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          },
+          {
+            "id": "condition-group-tidak-path",
+            "output": "Tidak",
+            "conditions": [
+              {
+                "id": "condition-2",
+                "value": "tidak",
+                "operator": "eq",
+                "variable": "kemaskiniProfil",
+                "valueType": "string",
+                "logicalOperator": "and"
+              }
+            ]
+          }
+        ],
+        "borderColor": "#6b7280",
+        "defaultPath": "form-1752471000000",
+        "description": "Check if user wants to update profile",
+        "gatewayType": "exclusive",
+        "backgroundColor": "#f9fafb"
+      },
+      "type": "gateway",
+      "label": "Perubahan Profil?",
+      "position": { "x": 1440, "y": 60 }
+    },
+    {
+      "id": "subprocess-1753100000003",
+      "data": {
+        "label": "BF-NAS-PRF-AS-UP-02",
+        "shape": "rectangle",
+        "processId": "kemaskini-profil-process",
+        "textColor": "#134e4a",
+        "borderColor": "#14b8a6",
+        "description": "Sub Process: Kemaskini Profil",
+        "subprocessId": 3,
+        "inputMappings": [
+          {
+            "processVariable": "profileData",
+            "subprocessVariable": "profileData"
+          },
+          {
+            "processVariable": "sebabKemaskini",
+            "subprocessVariable": "sebabKemaskini"
+          }
+        ],
+        "outputMappings": [
+          {
+            "processVariable": "updatedProfileData",
+            "subprocessVariable": "profileData"
+          },
+          {
+            "processVariable": "profileUpdateStatus",
+            "subprocessVariable": "updateStatus"
+          }
+        ],
+        "subprocessName": "BF-NAS-PRF-AS-UP-02",
+        "backgroundColor": "#f0fdfa"
+      },
+      "type": "subprocess",
+      "label": "BF-NAS-PRF-AS-UP-02",
+      "position": { "x": 1635, "y": -30 }
+    },
+    {
+      "id": "subprocess-1752202751327",
+      "data": {
+        "label": "BF-NAS-BTN-PB",
+        "shape": "rectangle",
+        "textColor": "#134e4a",
+        "borderColor": "#14b8a6",
+        "description": "Sub Process: Bantuan",
+        "subprocessId": 4,
+        "subprocessName": "BF-NAS-BTN-PB",
+        "backgroundColor": "#f0fdfa"
+      },
+      "type": "subprocess",
+      "label": "BF-NAS-BTN-PB",
+      "position": { "x": 1635, "y": 180 }
     }
   ],
   "viewport": {
-    "x": -104.1414298310864,
-    "y": 273.7689874210555,
-    "zoom": 0.402665859661672
+    "x": -818.4067095426772,
+    "y": 210.4283305655609,
+    "zoom": 0.5930425475009586
   }
 }
diff --git a/docs/json/process-builder/processVariables.json b/docs/json/process-builder/processVariables.json
index b007680..e398400 100644
--- a/docs/json/process-builder/processVariables.json
+++ b/docs/json/process-builder/processVariables.json
@@ -3,22 +3,22 @@
     "name": "text3",
     "type": "string",
     "scope": "global",
-    "value": "Ahmad Bin Ali",
-    "description": "Applicant name from Section A"
+    "value": null,
+    "description": "Text field 3 from Section A"
   },
   "text14": {
     "name": "text14",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Other education specification from Section A"
+    "value": null,
+    "description": "Text field 14"
   },
   "select1": {
     "name": "select1",
     "type": "string",
     "scope": "global",
-    "value": "jeniskp_1",
-    "description": "ID type selection from Section A"
+    "value": null,
+    "description": "Select field 1 from Section A"
   },
   "apiError": {
     "name": "apiError",
@@ -38,22 +38,22 @@
     "name": "namaBank",
     "type": "string",
     "scope": "global",
-    "value": "Maybank",
-    "description": "Bank name from Section B"
+    "value": null,
+    "description": "Nama bank from Section B"
   },
   "radio9Copy": {
     "name": "radio9Copy",
     "type": "string",
     "scope": "global",
-    "value": "tidak",
-    "description": "Currently studying status from Section A"
+    "value": null,
+    "description": "Radio field 9 copy"
   },
   "sebabTunai": {
     "name": "sebabTunai",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Cash payment reason from Section B"
+    "value": null,
+    "description": "Sebab tunai from Section B"
   },
   "verifiedBy": {
     "name": "verifiedBy",
@@ -85,29 +85,34 @@
     "name": "namaSekolah",
     "type": "string",
     "scope": "global",
-    "value": "SMK Taman Desa",
-    "description": "Dependent school name from Section B"
+    "value": null,
+    "description": "Nama sekolah from Section B"
   },
   "noAkaunBank": {
     "name": "noAkaunBank",
     "type": "string",
     "scope": "global",
-    "value": "123456789012",
-    "description": "Bank account number from Section B"
+    "value": null,
+    "description": "No akaun bank from Section B"
   },
   "profileData": {
     "name": "profileData",
     "type": "object",
     "scope": "global",
-    "value": null,
-    "description": "Data of the profile found"
+    "value": {
+      "nama": "Ahmad Bin Ali",
+      "alamat": "No 123, Jalan Merdeka, 50000 Kuala Lumpur",
+      "tarikhLahir": "1985-01-01",
+      "noKadPengenalan": "850101-01-1234"
+    },
+    "description": "The retrieved profile data"
   },
   "radioBangsa": {
     "name": "radioBangsa",
     "type": "string",
     "scope": "global",
-    "value": "melayu",
-    "description": "Race from Section A"
+    "value": null,
+    "description": "Radio field for bangsa"
   },
   "scriptError": {
     "name": "scriptError",
@@ -127,29 +132,29 @@
     "name": "formJeniskp1",
     "type": "string",
     "scope": "global",
-    "value": "123456789012",
-    "description": "MyKad/MyKid number from Section A"
+    "value": null,
+    "description": "Form field for jenis KP 1"
   },
   "formJeniskp2": {
     "name": "formJeniskp2",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Passport/Police/Military ID number from Section A"
+    "value": null,
+    "description": "Form field for jenis KP 2"
   },
   "formJeniskp3": {
     "name": "formJeniskp3",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Birth certificate number from Section A"
+    "value": null,
+    "description": "Form field for jenis KP 3"
   },
   "loginSuccess": {
     "name": "loginSuccess",
     "type": "boolean",
     "scope": "global",
-    "value": null,
-    "description": "Flag indicating successful login"
+    "value": false,
+    "description": "Indicates if the asnaf login was successful"
   },
   "okuAllowance": {
     "name": "okuAllowance",
@@ -169,8 +174,8 @@
     "name": "profileFound",
     "type": "boolean",
     "scope": "global",
-    "value": null,
-    "description": "Flag indicating if a profile was found"
+    "value": false,
+    "description": "Indicates if a profile was found via search"
   },
   "profileScore": {
     "name": "profileScore",
@@ -183,8 +188,8 @@
     "name": "radioJantina",
     "type": "string",
     "scope": "global",
-    "value": "lelaki",
-    "description": "Gender from Section A"
+    "value": null,
+    "description": "Radio field for jantina"
   },
   "urgencyLevel": {
     "name": "urgencyLevel",
@@ -197,15 +202,15 @@
     "name": "urgencyScore",
     "type": "number",
     "scope": "global",
-    "value": null,
+    "value": 0,
     "description": "Calculated urgency score based on needs"
   },
   "alamatSekolah": {
     "name": "alamatSekolah",
     "type": "string",
     "scope": "global",
-    "value": "Jalan Desa Utama, Taman Desa, 58100 Kuala Lumpur",
-    "description": "Dependent school address from Section B"
+    "value": null,
+    "description": "Alamat sekolah from Section B"
   },
   "applicantName": {
     "name": "applicantName",
@@ -232,8 +237,8 @@
     "name": "daerahSekolah",
     "type": "string",
     "scope": "global",
-    "value": "Kuala Lumpur",
-    "description": "Dependent school district from Section B"
+    "value": null,
+    "description": "Daerah sekolah from Section B"
   },
   "dependentName": {
     "name": "dependentName",
@@ -260,7 +265,7 @@
     "name": "hasOtherNeeds",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has other needs"
   },
   "householdType": {
@@ -270,6 +275,13 @@
     "value": null,
     "description": "Type of household (married_with_dependents, single_with_dependents, etc.)"
   },
+  "kategoriAsnaf": {
+    "name": "kategoriAsnaf",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Category of asnaf (fakir_miskin/bukan_fakir_miskin)"
+  },
   "kifayahStatus": {
     "name": "kifayahStatus",
     "type": "string",
@@ -281,8 +293,8 @@
     "name": "negeriSekolah",
     "type": "string",
     "scope": "global",
-    "value": "Wilayah Persekutuan",
-    "description": "Dependent school state from Section B"
+    "value": null,
+    "description": "Negeri sekolah from Section B"
   },
   "nextStepReady": {
     "name": "nextStepReady",
@@ -295,15 +307,15 @@
     "name": "nyatakanLain2",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Other race specification from Section A"
+    "value": null,
+    "description": "Text field for nyatakan lain-lain"
   },
   "poskodSekolah": {
     "name": "poskodSekolah",
     "type": "string",
     "scope": "global",
-    "value": "58100",
-    "description": "Dependent school postcode from Section B"
+    "value": null,
+    "description": "Poskod sekolah from Section B"
   },
   "applicantEmail": {
     "name": "applicantEmail",
@@ -314,10 +326,10 @@
   },
   "caraPembayaran": {
     "name": "caraPembayaran",
-    "type": "array",
+    "type": "string",
     "scope": "global",
-    "value": ["akaun"],
-    "description": "Payment method from Section B"
+    "value": null,
+    "description": "Cara pembayaran from Section B"
   },
   "carianSearchId": {
     "name": "carianSearchId",
@@ -330,8 +342,8 @@
     "name": "dateMasukislam",
     "type": "string",
     "scope": "global",
-    "value": "2020-05-15",
-    "description": "Islam conversion date from Section A"
+    "value": null,
+    "description": "Date field for masuk Islam"
   },
   "dependentCount": {
     "name": "dependentCount",
@@ -351,8 +363,8 @@
     "name": "namaTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "Siti Aminah Binti Ahmad",
-    "description": "Dependent name from Section B"
+    "value": null,
+    "description": "Nama tanggungan from Section B"
   },
   "riskAssessment": {
     "name": "riskAssessment",
@@ -361,6 +373,34 @@
     "value": null,
     "description": "Risk assessment result from verification"
   },
+  "sebabKemaskini": {
+    "name": "sebabKemaskini",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Reason for updating profile"
+  },
+  "statusIndividu": {
+    "name": "statusIndividu",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Individual status (e.g., Muallaf)"
+  },
+  "statusKeluarga": {
+    "name": "statusKeluarga",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Family status based on had kifayah calculation"
+  },
+  "syorPengesahan": {
+    "name": "syorPengesahan",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "AI-generated recommendation summary"
+  },
   "catatanTambahan": {
     "name": "catatanTambahan",
     "type": "string",
@@ -372,16 +412,37 @@
     "name": "hasDisasterNeed",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has disaster-related needs"
   },
   "hasHomelessness": {
     "name": "hasHomelessness",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant is homeless"
   },
+  "kemaskiniProfil": {
+    "name": "kemaskiniProfil",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "User's decision on whether to update profile (ya/tidak)"
+  },
+  "lihatFamilyTree": {
+    "name": "lihatFamilyTree",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "User's choice whether to view family tree (ya/tidak)"
+  },
+  "noKadPengenalan": {
+    "name": "noKadPengenalan",
+    "type": "string",
+    "scope": "global",
+    "value": "850101-01-1234",
+    "description": "No Kad Pengenalan"
+  },
   "penilaianAwalId": {
     "name": "penilaianAwalId",
     "type": "string",
@@ -393,8 +454,8 @@
     "name": "radioPendidikan",
     "type": "string",
     "scope": "global",
-    "value": "ijazah",
-    "description": "Highest education level from Section A"
+    "value": null,
+    "description": "Radio field for pendidikan"
   },
   "rejectionReason": {
     "name": "rejectionReason",
@@ -407,8 +468,8 @@
     "name": "textWarganegara",
     "type": "string",
     "scope": "global",
-    "value": "Malaysia",
-    "description": "Nationality from Section A"
+    "value": null,
+    "description": "Text field for warganegara"
   },
   "totalHadKifayah": {
     "name": "totalHadKifayah",
@@ -421,8 +482,8 @@
     "name": "bangsaTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "melayu",
-    "description": "Dependent race from Section B"
+    "value": null,
+    "description": "Bangsa tanggungan from Section B"
   },
   "carianSearchType": {
     "name": "carianSearchType",
@@ -449,15 +510,22 @@
     "name": "hasNoUrgentNeeds",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has no urgent needs"
   },
   "hubunganKeluarga": {
     "name": "hubunganKeluarga",
-    "type": "array",
+    "type": "string",
     "scope": "global",
-    "value": ["anak"],
-    "description": "Relationship with applicant from Section B"
+    "value": null,
+    "description": "Hubungan keluarga from Section B"
+  },
+  "pendapatanBersih": {
+    "name": "pendapatanBersih",
+    "type": "number",
+    "scope": "global",
+    "value": 1000,
+    "description": "Net family income"
   },
   "readyForDecision": {
     "name": "readyForDecision",
@@ -466,12 +534,19 @@
     "value": null,
     "description": "Whether ready for decision gateway"
   },
+  "tempohMasukIslam": {
+    "name": "tempohMasukIslam",
+    "type": "number",
+    "scope": "global",
+    "value": null,
+    "description": "Duration since converting to Islam (in years)"
+  },
   "verificationDate": {
     "name": "verificationDate",
     "type": "string",
     "scope": "global",
     "value": null,
-    "description": "Date when verification was performed"
+    "description": "Date when verification was completed"
   },
   "baseKifayahAmount": {
     "name": "baseKifayahAmount",
@@ -498,22 +573,29 @@
     "name": "hasFamilyConflict",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has family conflict"
   },
   "hasUtilityArrears": {
     "name": "hasUtilityArrears",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has utility arrears"
   },
   "jantinaTanggungan": {
     "name": "jantinaTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "perempuan",
-    "description": "Dependent gender from Section B"
+    "value": null,
+    "description": "Jantina tanggungan from Section B"
+  },
+  "kategoriAsnafSyor": {
+    "name": "kategoriAsnafSyor",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Recommended asnaf category"
   },
   "keperluanMendesak": {
     "name": "keperluanMendesak",
@@ -533,8 +615,8 @@
     "name": "namaPemegangAkaun",
     "type": "string",
     "scope": "global",
-    "value": "Ahmad Bin Ali",
-    "description": "Bank account holder name from Section B"
+    "value": null,
+    "description": "Nama pemegang akaun from Section B"
   },
   "notificationError": {
     "name": "notificationError",
@@ -543,6 +625,20 @@
     "value": null,
     "description": "Error from notification sending process"
   },
+  "peratusHadKifayah": {
+    "name": "peratusHadKifayah",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Percentage of had kifayah (income/total had kifayah * 100)"
+  },
+  "tarikhPengesyoran": {
+    "name": "tarikhPengesyoran",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Date of recommendation generation"
+  },
   "verificationError": {
     "name": "verificationError",
     "type": "string",
@@ -569,7 +665,7 @@
     "type": "string",
     "scope": "global",
     "value": null,
-    "description": "Status of the Carian Profil step (e.g., 'found', 'not_found', 'login_success')"
+    "description": "The status of the profile search/login action"
   },
   "childcareAllowance": {
     "name": "childcareAllowance",
@@ -582,8 +678,8 @@
     "name": "dateMasukislamCopy",
     "type": "string",
     "scope": "global",
-    "value": "2020-06-01",
-    "description": "KFAM start date from Section A"
+    "value": null,
+    "description": "Date field for masuk Islam copy"
   },
   "dependentAllowance": {
     "name": "dependentAllowance",
@@ -596,8 +692,8 @@
     "name": "jenisKadTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "mykad",
-    "description": "Dependent ID type from Section B"
+    "value": null,
+    "description": "Jenis kad tanggungan from Section B"
   },
   "penilaianAwalError": {
     "name": "penilaianAwalError",
@@ -606,6 +702,13 @@
     "value": null,
     "description": "Error message from penilaian awal processing"
   },
+  "updatedProfileData": {
+    "name": "updatedProfileData",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "Updated profile data after changes"
+  },
   "verificationStatus": {
     "name": "verificationStatus",
     "type": "string",
@@ -625,21 +728,21 @@
     "type": "string",
     "scope": "global",
     "value": null,
-    "description": "Password for asnaf login"
+    "description": "Password for Asnaf login"
   },
   "hasDeathRelatedNeed": {
     "name": "hasDeathRelatedNeed",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has death-related needs"
   },
   "noTelefonTanggungan": {
     "name": "noTelefonTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "03-12345678",
-    "description": "Dependent phone number from Section B"
+    "value": null,
+    "description": "No telefon tanggungan from Section B"
   },
   "penilaianAwalStatus": {
     "name": "penilaianAwalStatus",
@@ -648,6 +751,13 @@
     "value": null,
     "description": "Status of initial assessment submission"
   },
+  "profileUpdateStatus": {
+    "name": "profileUpdateStatus",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Status of profile update process"
+  },
   "spouseKifayahAmount": {
     "name": "spouseKifayahAmount",
     "type": "decimal",
@@ -659,43 +769,43 @@
     "name": "bangsaLainTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Dependent other race specification from Section B"
+    "value": null,
+    "description": "Bangsa lain tanggungan from Section B"
   },
   "bersekolahTanggungan": {
     "name": "bersekolahTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "ya",
-    "description": "Dependent currently studying from Section B"
+    "value": null,
+    "description": "Bersekolah tanggungan from Section B"
   },
   "carianProfilApiError": {
     "name": "carianProfilApiError",
-    "type": "object",
+    "type": "string",
     "scope": "global",
     "value": null,
-    "description": "Error from Carian Profil API call"
+    "description": "Error from Carian Profil API"
   },
   "hasUploadedDocuments": {
     "name": "hasUploadedDocuments",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether documents were uploaded"
   },
   "hasUrgentMedicalNeed": {
     "name": "hasUrgentMedicalNeed",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether applicant has urgent medical needs"
   },
   "hubunganLainNyatakan": {
     "name": "hubunganLainNyatakan",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Other relationship specification from Section B"
+    "value": null,
+    "description": "Hubungan lain nyatakan from Section B"
   },
   "kifayahAnalysisError": {
     "name": "kifayahAnalysisError",
@@ -708,9 +818,16 @@
     "name": "readyForPersonalInfo",
     "type": "boolean",
     "scope": "global",
-    "value": null,
+    "value": false,
     "description": "Whether ready for personal info form"
   },
+  "syorPengesahanStatus": {
+    "name": "syorPengesahanStatus",
+    "type": "string",
+    "scope": "global",
+    "value": "pending",
+    "description": "Status of AI recommendation generation"
+  },
   "verificationApiError": {
     "name": "verificationApiError",
     "type": "object",
@@ -718,6 +835,27 @@
     "value": null,
     "description": "Error from document verification API call"
   },
+  "bilanganDewasaBekerja": {
+    "name": "bilanganDewasaBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 1,
+    "description": "Number of working adults (18 years and above)"
+  },
+  "bilanganTanggunganIPT": {
+    "name": "bilanganTanggunganIPT",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Number of dependents studying in higher education institutions"
+  },
+  "categoryKetuaKeluarga": {
+    "name": "categoryKetuaKeluarga",
+    "type": "string",
+    "scope": "global",
+    "value": "ketua_keluarga",
+    "description": "Category for head of family"
+  },
   "hasHighCostCommitment": {
     "name": "hasHighCostCommitment",
     "type": "boolean",
@@ -725,6 +863,13 @@
     "value": null,
     "description": "Whether applicant has high cost commitments"
   },
+  "kategoriKeluargaAsnaf": {
+    "name": "kategoriKeluargaAsnaf",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Family asnaf category (Fakir/Miskin/Non-FM)"
+  },
   "keperluanLainNyatakan": {
     "name": "keperluanLainNyatakan",
     "type": "string",
@@ -741,24 +886,31 @@
   },
   "penilaianAwalApiError": {
     "name": "penilaianAwalApiError",
-    "type": "object",
+    "type": "string",
     "scope": "global",
     "value": null,
-    "description": "API error from Submit Penilaian Awal API"
+    "description": "Error from the Penilaian Awal API"
   },
   "tarikhLahirTanggungan": {
     "name": "tarikhLahirTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "2010-03-15",
-    "description": "Dependent birth date from Section B"
+    "value": null,
+    "description": "Tarikh lahir tanggungan from Section B"
   },
   "tempatLahirTanggungan": {
     "name": "tempatLahirTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "Hospital Kuala Lumpur",
-    "description": "Dependent birth place from Section B"
+    "value": null,
+    "description": "Tempat lahir tanggungan from Section B"
+  },
+  "totalJumlahHadKifayah": {
+    "name": "totalJumlahHadKifayah",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total family had kifayah amount"
   },
   "verificationProcessed": {
     "name": "verificationProcessed",
@@ -771,8 +923,8 @@
     "name": "warganegaraTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "Malaysia",
-    "description": "Dependent nationality from Section B"
+    "value": null,
+    "description": "Warganegara tanggungan from Section B"
   },
   "kifayahCalculationDate": {
     "name": "kifayahCalculationDate",
@@ -785,29 +937,36 @@
     "name": "noPengenalanTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "123456789013",
-    "description": "Dependent ID number from Section B"
+    "value": null,
+    "description": "No pengenalan tanggungan from Section B"
   },
   "statusKahwinTanggungan": {
     "name": "statusKahwinTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "bujang",
-    "description": "Dependent marital status from Section B"
+    "value": null,
+    "description": "Status kahwin tanggungan from Section B"
   },
   "tinggalBersamaKeluarga": {
     "name": "tinggalBersamaKeluarga",
     "type": "string",
     "scope": "global",
-    "value": "ya",
-    "description": "Dependent lives with family from Section B"
+    "value": null,
+    "description": "Tinggal bersama keluarga from Section B"
+  },
+  "bilanganTanggungan7to17": {
+    "name": "bilanganTanggungan7to17",
+    "type": "number",
+    "scope": "global",
+    "value": 2,
+    "description": "Number of dependents aged 7-17 years"
   },
   "carianProfilApiResponse": {
     "name": "carianProfilApiResponse",
     "type": "object",
     "scope": "global",
     "value": null,
-    "description": "API response from Carian Profil submission"
+    "description": "Response from Carian Profil API"
   },
   "carianProfilScriptError": {
     "name": "carianProfilScriptError",
@@ -823,6 +982,27 @@
     "value": null,
     "description": "Chronic illness allowance (RM 243.00)"
   },
+  "dependentEducationLevel": {
+    "name": "dependentEducationLevel",
+    "type": "array",
+    "scope": "global",
+    "value": ["smk"],
+    "description": "Dependent highest education from Section B"
+  },
+  "hadKifayahDewasaBekerja": {
+    "name": "hadKifayahDewasaBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 412,
+    "description": "Had kifayah amount per working adult (RM 412.00)"
+  },
+  "hadKifayahTanggunganIPT": {
+    "name": "hadKifayahTanggunganIPT",
+    "type": "number",
+    "scope": "global",
+    "value": 613,
+    "description": "Had kifayah amount per dependent in higher education (RM 613.00)"
+  },
   "kifayahCalculationError": {
     "name": "kifayahCalculationError",
     "type": "object",
@@ -841,15 +1021,15 @@
     "name": "selectStatusperkahwinan",
     "type": "string",
     "scope": "global",
-    "value": "berkahwin",
-    "description": "Marital status from Section A"
+    "value": null,
+    "description": "Select field for status perkahwinan"
   },
   "tempatMenetapTanggungan": {
     "name": "tempatMenetapTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "13 Tahun",
-    "description": "Dependent residence duration in Selangor from Section B"
+    "value": null,
+    "description": "Tempat menetap tanggungan from Section B"
   },
   "verificationApiResponse": {
     "name": "verificationApiResponse",
@@ -872,6 +1052,13 @@
     "value": null,
     "description": "Error from verification response processing script"
   },
+  "baseKifayahKetuaKeluarga": {
+    "name": "baseKifayahKetuaKeluarga",
+    "type": "number",
+    "scope": "global",
+    "value": 1215,
+    "description": "Base had kifayah amount for head of family (RM 1,215.00)"
+  },
   "kifayahCalculationResult": {
     "name": "kifayahCalculationResult",
     "type": "object",
@@ -879,6 +1066,13 @@
     "value": null,
     "description": "Result from Had Kifayah business rule calculation"
   },
+  "kifayahCalculationStatus": {
+    "name": "kifayahCalculationStatus",
+    "type": "string",
+    "scope": "global",
+    "value": "pending",
+    "description": "Status of had kifayah calculation"
+  },
   "kifayahNotificationError": {
     "name": "kifayahNotificationError",
     "type": "object",
@@ -890,15 +1084,15 @@
     "name": "pendidikanLainTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Dependent other education specification from Section B"
+    "value": null,
+    "description": "Pendidikan lain tanggungan from Section B"
   },
   "penilaianAwalApiResponse": {
     "name": "penilaianAwalApiResponse",
     "type": "object",
     "scope": "global",
     "value": null,
-    "description": "API response from Submit Penilaian Awal API"
+    "description": "Response from the Penilaian Awal API"
   },
   "penilaianAwalScriptError": {
     "name": "penilaianAwalScriptError",
@@ -911,8 +1105,36 @@
     "name": "tarikhMulaKfamTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Dependent KFAM start date from Section B"
+    "value": null,
+    "description": "Tarikh mula KFAM tanggungan from Section B"
+  },
+  "hadKifayahTanggungan7to17": {
+    "name": "hadKifayahTanggungan7to17",
+    "type": "number",
+    "scope": "global",
+    "value": 408,
+    "description": "Had kifayah amount per dependent aged 7-17 years (RM 408.00)"
+  },
+  "statusRecommendationError": {
+    "name": "statusRecommendationError",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "Error information from status recommendation"
+  },
+  "bilanganDewasaTidakBekerja": {
+    "name": "bilanganDewasaTidakBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 1,
+    "description": "Number of non-working adults (18 years and above)"
+  },
+  "bilanganTanggungan6KeBawah": {
+    "name": "bilanganTanggungan6KeBawah",
+    "type": "number",
+    "scope": "global",
+    "value": 1,
+    "description": "Number of dependents aged 6 years and below"
   },
   "dependentDocumentsComplete": {
     "name": "dependentDocumentsComplete",
@@ -928,12 +1150,19 @@
     "value": null,
     "description": "Result from document verification form (lengkap/tidak_lengkap)"
   },
+  "statusRecommendationResult": {
+    "name": "statusRecommendationResult",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "Result of status recommendation process"
+  },
   "tarikhMasukIslamTanggungan": {
     "name": "tarikhMasukIslamTanggungan",
     "type": "string",
     "scope": "global",
-    "value": "",
-    "description": "Dependent Islam conversion date from Section B"
+    "value": null,
+    "description": "Tarikh masuk Islam tanggungan from Section B"
   },
   "dependentVerificationStatus": {
     "name": "dependentVerificationStatus",
@@ -942,11 +1171,235 @@
     "value": null,
     "description": "Dependent verification status"
   },
+  "hadKifayahDewasaTidakBekerja": {
+    "name": "hadKifayahDewasaTidakBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 167,
+    "description": "Had kifayah amount per non-working adult (RM 167.00)"
+  },
+  "hadKifayahTanggungan6KeBawah": {
+    "name": "hadKifayahTanggungan6KeBawah",
+    "type": "number",
+    "scope": "global",
+    "value": 175,
+    "description": "Had kifayah amount per dependent aged 6 years and below (RM 175.00)"
+  },
+  "totalHadKifayahDewasaBekerja": {
+    "name": "totalHadKifayahDewasaBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total had kifayah for working adults"
+  },
+  "totalHadKifayahTanggunganIPT": {
+    "name": "totalHadKifayahTanggunganIPT",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total had kifayah for dependents in higher education"
+  },
   "pendidikanTertinggiTanggungan": {
     "name": "pendidikanTertinggiTanggungan",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Pendidikan tertinggi tanggungan from Section B"
+  },
+  "totalHadKifayahTanggungan7to17": {
+    "name": "totalHadKifayahTanggungan7to17",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total had kifayah for dependents aged 7-17 years"
+  },
+  "totalHadKifayahDewasaTidakBekerja": {
+    "name": "totalHadKifayahDewasaTidakBekerja",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total had kifayah for non-working adults"
+  },
+  "totalHadKifayahTanggungan6KeBawah": {
+    "name": "totalHadKifayahTanggungan6KeBawah",
+    "type": "number",
+    "scope": "global",
+    "value": 0,
+    "description": "Total had kifayah for dependents aged 6 years and below"
+  },
+  "pengesahanStatus": {
+    "name": "pengesahanStatus",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Verification status (lulus/ditolak/dokumen_tambahan/semakan_lanjut)"
+  },
+  "catatanPengesahan": {
+    "name": "catatanPengesahan",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Verification notes from officer"
+  },
+  "dokumenTambahanDiperlukan": {
+    "name": "dokumenTambahanDiperlukan",
     "type": "array",
     "scope": "global",
-    "value": ["smk"],
-    "description": "Dependent highest education from Section B"
+    "value": null,
+    "description": "List of additional documents required"
+  },
+  "jumlahBantuanDicadangkan": {
+    "name": "jumlahBantuanDicadangkan",
+    "type": "number",
+    "scope": "global",
+    "value": null,
+    "description": "Recommended assistance amount (RM)"
+  },
+  "jenisBantuan": {
+    "name": "jenisBantuan",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Type of assistance (tunai/barangan/perkhidmatan)"
+  },
+  "applicationStatus": {
+    "name": "applicationStatus",
+    "type": "string",
+    "scope": "global",
+    "value": "pending",
+    "description": "Current application status (pending/approved/rejected/under_review)"
+  },
+  "statusMessage": {
+    "name": "statusMessage",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Human-readable status message"
+  },
+  "nextAction": {
+    "name": "nextAction",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Next action to be taken in the process"
+  },
+  "verificationCompleted": {
+    "name": "verificationCompleted",
+    "type": "boolean",
+    "scope": "global",
+    "value": false,
+    "description": "Whether verification process is completed"
+  },
+  "verificationTimestamp": {
+    "name": "verificationTimestamp",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Timestamp when verification was completed"
+  },
+  "processingTimeHours": {
+    "name": "processingTimeHours",
+    "type": "number",
+    "scope": "global",
+    "value": null,
+    "description": "Total processing time in hours"
+  },
+  "sendApprovalNotification": {
+    "name": "sendApprovalNotification",
+    "type": "boolean",
+    "scope": "global",
+    "value": false,
+    "description": "Whether to send approval notification"
+  },
+  "sendRejectionNotification": {
+    "name": "sendRejectionNotification",
+    "type": "boolean",
+    "scope": "global",
+    "value": false,
+    "description": "Whether to send rejection notification"
+  },
+  "sendPendingNotification": {
+    "name": "sendPendingNotification",
+    "type": "boolean",
+    "scope": "global",
+    "value": false,
+    "description": "Whether to send pending status notification"
+  },
+  "paymentAmount": {
+    "name": "paymentAmount",
+    "type": "number",
+    "scope": "global",
+    "value": null,
+    "description": "Amount approved for payment (RM)"
+  },
+  "paymentMethod": {
+    "name": "paymentMethod",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Payment method (cash/bank_transfer)"
+  },
+  "applicantEmail": {
+    "name": "applicantEmail",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Applicant's email address for notifications"
+  },
+  "applicantName": {
+    "name": "applicantName",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Applicant's full name"
+  },
+  "applicationId": {
+    "name": "applicationId",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Unique application reference number"
+  },
+  "submissionDate": {
+    "name": "submissionDate",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Date when application was submitted"
+  },
+  "conditionalMessage": {
+    "name": "conditionalMessage",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "Conditional message based on application status"
+  },
+  "pengesahanApiResponse": {
+    "name": "pengesahanApiResponse",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "API response from verification submission"
+  },
+  "pengesahanApiError": {
+    "name": "pengesahanApiError",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "API error from verification submission"
+  },
+  "pengesahanScriptError": {
+    "name": "pengesahanScriptError",
+    "type": "object",
+    "scope": "global",
+    "value": null,
+    "description": "Script error from pengesahan processing"
+  },
+  "pengesahanError": {
+    "name": "pengesahanError",
+    "type": "string",
+    "scope": "global",
+    "value": null,
+    "description": "General error message from pengesahan process"
   }
 }
diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue
index 0d394f1..d640044 100644
--- a/pages/process-builder/index.vue
+++ b/pages/process-builder/index.vue
@@ -319,12 +319,18 @@ const hasCurrentProcess = computed(() => {
 const canvasNodes = computed(() => {
   if (!processStore.currentProcess) return [];
   // Return a deep copy to ensure proper reactivity for nested objects like data
-  return processStore.currentProcess.nodes.map(node => ({ 
-    ...node, 
-    data: { ...node.data },
-    // Ensure labels are synchronized both ways
-    label: node.label || node.data?.label || node.type
-  }));
+  return processStore.currentProcess.nodes.map(node => {
+    const isShape = node.data?.isShape || false;
+    const style = isShape ? { zIndex: node.data.zIndex ?? 0 } : {};
+
+    return {
+      ...node,
+      style: { ...(node.style || {}), ...style },
+      data: { ...node.data },
+      // Ensure labels are synchronized both ways
+      label: node.label || node.data?.label || node.type
+    };
+  });
 });
 
 const canvasEdges = computed(() => {
@@ -716,9 +722,14 @@ const updateNodeInStore = async () => {
     
     // Force canvas update directly for immediate feedback
     if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+      // Include z-index in style if this is a shape
+      const isShape = newData?.isShape || false;
+      const style = isShape ? { zIndex: newData.zIndex ?? 0 } : {};
+      
       processFlowCanvas.value.updateNode(nodeId, {
         label: newLabel,
-        data: newData
+        data: newData,
+        style: style
       });
     }
     
@@ -750,6 +761,9 @@ const refreshSelectedNodeFromStore = () => {
 // Special handler for shape size updates to force reactivity
 const updateShapeSize = async () => {
   if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+    // Get the z-index before updating
+    const zIndex = selectedNodeData.value.data.zIndex || 0;
+    
     // Force update the node in store with new size
     updateNodeInStore();
     
@@ -757,8 +771,21 @@ const updateShapeSize = async () => {
     await nextTick();
     if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
       processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
-        data: { ...selectedNodeData.value.data }
+        data: { ...selectedNodeData.value.data },
+        style: { zIndex }
       });
+      
+      // Also directly manipulate DOM for immediate feedback
+      const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+      if (nodeElement) {
+        nodeElement.style.zIndex = zIndex;
+        
+        // Also update custom-node if it exists
+        const customNode = nodeElement.querySelector('.custom-node');
+        if (customNode) {
+          customNode.style.zIndex = zIndex;
+        }
+      }
     }
   }
 };
@@ -927,7 +954,7 @@ const onEdgesChange = (changes, currentEdges) => {
           source: edge.source,
           target: edge.target,
           label: edge.label || '',
-          type: edge.type || 'smoothstep',
+          type: edge.type || 'custom',
           animated: edge.animated !== undefined ? edge.animated : true,
           data: edge.data || {},
           sourceHandle: edge.sourceHandle,
@@ -1292,6 +1319,42 @@ const onAddComponent = async (component) => {
       }
     };
     
+    // If this is a shape node, set an initial z-index
+    if (component.data?.isShape) {
+      // Find the highest z-index among existing shapes
+      let highestZ = 0;
+      if (processStore.currentProcess && processStore.currentProcess.nodes) {
+        processStore.currentProcess.nodes.forEach(node => {
+          if (node.data?.isShape) {
+            const nodeZ = parseInt(node.data.zIndex || 0, 10);
+            highestZ = Math.max(highestZ, nodeZ);
+          }
+        });
+      }
+      
+      // Set new shape's z-index to be on top of existing shapes
+      // Add 10 to ensure it's clearly above other shapes
+      const newZ = highestZ + 10;
+      newNode.data.zIndex = newZ;
+      
+      // Add style with z-index
+      newNode.style = { zIndex: newZ };
+      
+      // After the node is added, directly manipulate the DOM to ensure z-index is applied
+      setTimeout(() => {
+        const nodeElement = document.querySelector(`[data-id="${newNode.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.zIndex = newZ;
+          
+          // Also update custom-node if it exists
+          const customNode = nodeElement.querySelector('.custom-node');
+          if (customNode) {
+            customNode.style.zIndex = newZ;
+          }
+        }
+      }, 100);
+    }
+    
     // Add the node to the process store
     await processStore.addNode(newNode);
     
@@ -1430,7 +1493,7 @@ const applyProcessTemplate = async (template) => {
       const newEdge = {
         ...edge,
         id: edge.id, // Keep original ID
-        type: edge.type || 'smoothstep',
+        type: edge.type || 'custom',
         animated: edge.animated !== undefined ? edge.animated : true
       };
       
@@ -1825,6 +1888,199 @@ const canShowNodeActions = computed(() => {
     selectedNodeData.value.type !== 'end'
   );
 });
+
+const nodeZIndex = computed({
+  get: () => {
+    return selectedNodeData.value?.data?.isShape ? selectedNodeData.value.data.zIndex || 0 : 0;
+  },
+  set: (value) => {
+    if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+      const z = parseInt(value, 10);
+      const newZ = isNaN(z) ? 0 : z;
+      selectedNodeData.value.data.zIndex = newZ;
+      updateNodeInStore();
+      
+      // Force update the node style in the canvas
+      if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+        processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
+          style: { zIndex: newZ }
+        });
+        
+        // Also directly manipulate DOM for immediate feedback
+        nextTick(() => {
+          const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+          if (nodeElement) {
+            nodeElement.style.zIndex = newZ;
+            
+            // Also update custom-node if it exists
+            const customNode = nodeElement.querySelector('.custom-node');
+            if (customNode) {
+              customNode.style.zIndex = newZ;
+            }
+          }
+        });
+      }
+    }
+  }
+});
+
+// Add functions to bring forward and send backward shapes
+const bringForward = () => {
+  if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+    // Increment z-index by 1
+    const currentZ = parseInt(selectedNodeData.value.data.zIndex || 0, 10);
+    const newZ = currentZ + 1;
+    selectedNodeData.value.data.zIndex = newZ;
+    
+    // Update in store
+    updateNodeInStore();
+    
+    // Force update the node style in the canvas
+    if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+      processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
+        style: { zIndex: newZ }
+      });
+      
+      // Also directly manipulate DOM for immediate feedback
+      nextTick(() => {
+        const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.zIndex = newZ;
+          
+          // Also update custom-node if it exists
+          const customNode = nodeElement.querySelector('.custom-node');
+          if (customNode) {
+            customNode.style.zIndex = newZ;
+          }
+        }
+      });
+    }
+  }
+};
+
+const sendBackward = () => {
+  if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+    // Decrement z-index by 1, but not below 0
+    const currentZ = parseInt(selectedNodeData.value.data.zIndex || 0, 10);
+    const newZ = Math.max(0, currentZ - 1);
+    selectedNodeData.value.data.zIndex = newZ;
+    
+    // Update in store
+    updateNodeInStore();
+    
+    // Force update the node style in the canvas
+    if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+      processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
+        style: { zIndex: newZ }
+      });
+      
+      // Also directly manipulate DOM for immediate feedback
+      nextTick(() => {
+        const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.zIndex = newZ;
+          
+          // Also update custom-node if it exists
+          const customNode = nodeElement.querySelector('.custom-node');
+          if (customNode) {
+            customNode.style.zIndex = newZ;
+          }
+        }
+      });
+    }
+  }
+};
+
+const bringToFront = () => {
+  if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+    // Find the highest z-index in the current shapes
+    let highestZ = 0;
+    if (processStore.currentProcess && processStore.currentProcess.nodes) {
+      processStore.currentProcess.nodes.forEach(node => {
+        if (node.data?.isShape) {
+          const nodeZ = parseInt(node.data.zIndex || 0, 10);
+          highestZ = Math.max(highestZ, nodeZ);
+        }
+      });
+    }
+    
+    // Set to higher than the highest found (add 10 to ensure it's clearly on top)
+    const newZ = highestZ + 10;
+    selectedNodeData.value.data.zIndex = newZ;
+    
+    // Update in store
+    updateNodeInStore();
+    
+    // Force update the node style in the canvas
+    if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+      processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
+        style: { zIndex: newZ }
+      });
+      
+      // Also directly manipulate DOM for immediate feedback
+      nextTick(() => {
+        const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.zIndex = newZ;
+          
+          // Also update custom-node if it exists
+          const customNode = nodeElement.querySelector('.custom-node');
+          if (customNode) {
+            customNode.style.zIndex = newZ;
+          }
+        }
+      });
+    }
+  }
+};
+
+const sendToBack = () => {
+  if (selectedNodeData.value && selectedNodeData.value.data?.isShape) {
+    // Find the lowest z-index in the current shapes
+    let lowestZ = Number.MAX_SAFE_INTEGER;
+    if (processStore.currentProcess && processStore.currentProcess.nodes) {
+      processStore.currentProcess.nodes.forEach(node => {
+        if (node.data?.isShape && node.id !== selectedNodeData.value.id) {
+          const nodeZ = parseInt(node.data.zIndex || 0, 10);
+          lowestZ = Math.min(lowestZ, nodeZ);
+        }
+      });
+    }
+    
+    // If no other shapes were found, set to 0
+    if (lowestZ === Number.MAX_SAFE_INTEGER) {
+      lowestZ = 0;
+    }
+    
+    // Set to lower than the lowest found (subtract 10 to ensure it's clearly below)
+    const newZ = Math.max(0, lowestZ - 10);
+    selectedNodeData.value.data.zIndex = newZ;
+    
+    // Update in store
+    updateNodeInStore();
+    
+    // Force update the node style in the canvas
+    if (processFlowCanvas.value && processFlowCanvas.value.updateNode) {
+      processFlowCanvas.value.updateNode(selectedNodeData.value.id, {
+        style: { zIndex: newZ }
+      });
+      
+      // Also directly manipulate DOM for immediate feedback
+      nextTick(() => {
+        const nodeElement = document.querySelector(`[data-id="${selectedNodeData.value.id}"]`);
+        if (nodeElement) {
+          nodeElement.style.zIndex = newZ;
+          
+          // Also update custom-node if it exists
+          const customNode = nodeElement.querySelector('.custom-node');
+          if (customNode) {
+            customNode.style.zIndex = newZ;
+          }
+        }
+      });
+    }
+  }
+};
 </script>
 
 <template>
@@ -2130,33 +2386,92 @@ const canShowNodeActions = computed(() => {
                     </div>
                   </div>
 
-                  <!-- Size Controls for Shapes -->
-                  <div v-if="selectedNodeData.data?.isShape" class="space-y-3">
-                    <div class="grid grid-cols-2 gap-3">
-                      <div>
-                        <label class="block text-xs font-medium text-gray-600 mb-1">Width</label>
-                        <input
-                          v-model.number="selectedNodeData.data.width"
-                          type="number"
-                          min="50"
-                          max="2000"
-                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          @input="updateShapeSize"
-                        />
+                                      <!-- Size Controls for Shapes -->
+                    <div v-if="selectedNodeData.data?.isShape" class="space-y-4">
+                      <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
+                        <Icon name="material-symbols:straighten" class="w-4 h-4 mr-2" />
+                        Size
+                      </h4>
+                      
+                      <div class="grid grid-cols-2 gap-3">
+                        <div>
+                          <label class="block text-xs font-medium text-gray-600 mb-1">Width</label>
+                          <input
+                            v-model.number="selectedNodeData.data.width"
+                            type="number"
+                            min="50"
+                            max="2000"
+                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            @input="updateShapeSize"
+                          />
+                        </div>
+                        <div>
+                          <label class="block text-xs font-medium text-gray-600 mb-1">Height</label>
+                          <input
+                            v-model.number="selectedNodeData.data.height"
+                            type="number"
+                            min="50"
+                            max="2000"
+                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            @input="updateShapeSize"
+                          />
+                        </div>
                       </div>
-                      <div>
-                        <label class="block text-xs font-medium text-gray-600 mb-1">Height</label>
-                        <input
-                          v-model.number="selectedNodeData.data.height"
-                          type="number"
-                          min="50"
-                          max="2000"
-                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          @input="updateShapeSize"
-                        />
+                      
+                      <!-- Z-Index control with heading -->
+                      <div class="mt-6 pt-4 border-t border-gray-100">
+                        <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
+                          <Icon name="material-symbols:layers" class="w-4 h-4 mr-2" />
+                          Layer Position
+                        </h4>
+                        
+                        <div class="mb-3">
+                          <label class="block text-xs font-medium text-gray-600 mb-1">Stack Order (Z-Index)</label>
+                          <input
+                            v-model.number="nodeZIndex"
+                            type="number"
+                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            placeholder="0"
+                          />
+                          <div class="flex justify-center space-x-2 mt-2">
+                            <button 
+                              @click="sendToBack" 
+                              title="Send to Back" 
+                              class="p-2 bg-gray-100 hover:bg-gray-200 rounded border border-gray-300"
+                            >
+                              <Icon name="material-symbols:vertical-align-bottom" class="w-4 h-4 text-gray-600" />
+                            </button>
+                            <button 
+                              @click="sendBackward" 
+                              title="Send Backward" 
+                              class="p-2 bg-gray-100 hover:bg-gray-200 rounded border border-gray-300"
+                            >
+                              <Icon name="material-symbols:arrow-downward" class="w-4 h-4 text-gray-600" />
+                            </button>
+                            <button 
+                              @click="bringForward" 
+                              title="Bring Forward" 
+                              class="p-2 bg-gray-100 hover:bg-gray-200 rounded border border-gray-300"
+                            >
+                              <Icon name="material-symbols:arrow-upward" class="w-4 h-4 text-gray-600" />
+                            </button>
+                            <button 
+                              @click="bringToFront" 
+                              title="Bring to Front" 
+                              class="p-2 bg-gray-100 hover:bg-gray-200 rounded border border-gray-300"
+                            >
+                              <Icon name="material-symbols:vertical-align-top" class="w-4 h-4 text-gray-600" />
+                            </button>
+                          </div>
+                        </div>
+                        
+                        <div class="bg-blue-50 p-2 rounded-md">
+                          <p class="text-xs text-blue-700">
+                            <strong>Tip:</strong> Use these controls to arrange the stacking order of shapes. Higher values appear on top of other shapes.
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
                 </div>
               </div>
 
@@ -2274,7 +2589,7 @@ const canShowNodeActions = computed(() => {
                 <div v-if="selectedNodeData.type === 'gateway'">
                   <p class="text-xs text-gray-600 mb-3">Define decision conditions and workflow paths.</p>
                   <RsButton @click="showGatewayConfigModal = true" variant="primary" class="w-full">
-                    <Icon name="material-symbols:call_split" class="w-4 h-4 mr-2" />
+                    <Icon name="material-symbols:call-split" class="w-4 h-4 mr-2" />
                     Configure Decision Paths
                   </RsButton>
                 </div>
@@ -3258,12 +3573,10 @@ const canShowNodeActions = computed(() => {
   justify-content: center;
   text-align: center;
   user-select: none;
-  z-index: -10 !important; /* Always behind process nodes */
 }
 
 :deep(.shape-node.selected) {
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
-  z-index: -8 !important; /* Higher z-index when selected, but still behind process nodes */
 }
 
 /* Ensure process nodes always stay above shapes, even during drag operations */
@@ -3320,11 +3633,9 @@ const canShowNodeActions = computed(() => {
 /* Ensure custom nodes (process nodes) maintain proper layering */
 :deep(.custom-node:not(.shape-node)) {
   position: relative;
-  z-index: 10 !important;
 }
 
 :deep(.custom-node:not(.shape-node).selected) {
-  z-index: 15 !important;
 }
 
 /* Ensure edges/connection lines stay above shapes */