# Corrad ProcessMaker User Guide

## Table of Contents

1. [Introduction](#introduction)
2. [Getting Started](#getting-started)
3. [Form Builder](#form-builder)
   - [3.1 Accessing Form Builder](#31-accessing-form-builder)
   - [3.2 Form Builder Interface](#32-form-builder-interface)
   - [3.3 Form Components](#33-form-components)
   - [3.4 Creating Your First Form](#34-creating-your-first-form)
   - [3.5 Form Builder Features](#35-form-builder-features)
4. [Form Management](#form-management)
   - [4.1 Accessing Form Management](#41-accessing-form-management)
   - [4.2 Managing Forms](#42-managing-forms)
   - [4.3 Form Templates](#43-form-templates)
   - [4.4 Form History](#44-form-history)
5. [Process Builder](#process-builder)
   - [5.1 Accessing Process Builder](#51-accessing-process-builder)
   - [5.2 Process Builder Interface](#52-process-builder-interface)
   - [5.3 Process Components](#53-process-components)
   - [5.4 Creating Your First Process](#54-creating-your-first-process)
   - [5.5 Process Builder Features](#55-process-builder-features)
6. [Process Management](#process-management)
   - [6.1 Accessing Process Management](#61-accessing-process-management)
   - [6.2 Process Dashboard](#62-process-dashboard)
   - [6.3 Managing Processes](#63-managing-processes)
   - [6.4 Process Analytics](#64-process-analytics)
   - [6.5 Case Management](#65-case-management)
7. [FAQ](#faq)

---

## Introduction

**Corrad ProcessMaker is a Business Process Management (BPM) platform designed for creating, automating, and managing complex business workflows.** This is NOT a low-code application builder - it's a specialized tool for designing and executing business processes with visual workflow design, form integration, and process automation capabilities.

### What is Business Process Management?

Business Process Management focuses on:
- **Process Design**: Creating visual workflows that represent business logic
- **Process Automation**: Automating repetitive tasks and decision points
- **Process Monitoring**: Tracking process execution and performance
- **Process Optimization**: Identifying bottlenecks and improving efficiency

### Key Differences from Low-Code Platforms

| Business Process Maker | Low-Code Builder |
|----------------------|------------------|
| Focuses on workflow design and process automation | Focuses on application development |
| Uses BPMN (Business Process Model and Notation) standards | Uses application development patterns |
| Emphasizes process flow, decision points, and task assignment | Emphasizes UI components and data management |
| Designed for business analysts and process designers | Designed for developers and citizen developers |
| Optimized for process monitoring and analytics | Optimized for rapid application development |

### Core Capabilities

**Process Design & Automation**
- Visual workflow designer with BPMN-compliant components
- Decision points and conditional routing
- Task assignment and user role management
- Process variables and data flow management

**Form Integration**
- Dynamic form creation for data collection
- Form-to-process integration for task completion
- Conditional form logic and validation
- Multi-step form workflows

**Process Execution & Monitoring**
- Real-time process execution tracking
- Task queue management and assignment
- Process performance analytics
- Exception handling and error management

**Business Integration**
- API integration for external system connectivity
- Business rule engine for complex decision logic
- Notification system for process updates
- Audit trail and compliance tracking

This guide provides step-by-step instructions for using the system's core BPM features to design, implement, and manage business processes effectively.

## Getting Started

**No installation is required.** The system is a web-based application accessible through your browser.

### System Access
1. Open your web browser
2. Navigate to the application URL
3. Enter your username and password
4. Click "Login" to access the system

### First Steps
- **Dashboard**: Start here to get an overview of your system
- **Form Builder**: Create data collection forms
- **Process Builder**: Design business workflows
- **Execution**: Run and monitor processes

---

## Form Builder

### 3.1 Accessing Form Builder

**Step-by-Step Instructions:**
1. From the main menu, click **"Form Builder"**
2. Click **"Create New Form"** button
3. Enter a form name in the header field
4. You're now ready to build your form

### 3.2 Form Builder Interface

**Interface Layout:**
- **Left Panel**: Component library with all available form components
- **Center Canvas**: Drag-and-drop area where you build your form
- **Right Panel**: Component settings and configuration panel
- **Top Header**: Form name, save button, and preview toggle

**Navigation:**
- Use the search bar in the component library to find specific components
- Click components to add them to your form
- Drag components to reposition them on the canvas

### 3.3 Form Components

#### Text Inputs Category

**Text Field**
- **How to Add**: Drag "Text Field" from the Text Inputs category
- **Configuration**: 
  - Click the component to open settings
  - Set label, placeholder, and help text
  - Configure validation rules (required, min/max length)
- **Use Case**: Names, titles, short descriptions
- **Zakat Scenario**: 
  - **When to Use**: Collecting applicant's full name, IC number, or address
  - **Example**: "Nama Penuh Pemohon" field for Zakat Asnaf application
  - **Configuration**: Set as required field with validation for Malaysian IC format

**Text Area**
- **How to Add**: Drag "Text Area" from the Text Inputs category
- **Configuration**:
  - Set label and placeholder text
  - Configure rows and character limits
  - Enable rich text formatting if needed
- **Use Case**: Descriptions, comments, long-form content
- **Zakat Scenario**:
  - **When to Use**: Collecting detailed reasons for Zakat application
  - **Example**: "Sebab Permohonan Zakat" field for explaining financial hardship
  - **Configuration**: Set minimum 50 characters, maximum 500 characters

**Number Field**
- **How to Add**: Drag "Number Field" from the Text Inputs category
- **Configuration**:
  - Set minimum and maximum values
  - Configure decimal places and step increments
  - Add validation rules
- **Use Case**: Quantities, amounts, scores
- **Zakat Scenario**:
  - **When to Use**: Collecting monthly income, number of dependents, or property values
  - **Example**: "Pendapatan Bulanan (RM)" field for income assessment
  - **Configuration**: Set minimum 0, maximum 50,000, 2 decimal places

**Email Field**
- **How to Add**: Drag "Email Field" from the Text Inputs category
- **Configuration**:
  - Set label and placeholder
  - Email validation is automatic
- **Use Case**: Contact information, user registration
- **Zakat Scenario**:
  - **When to Use**: Collecting applicant's email for notifications
  - **Example**: "Emel Pemohon" field for Zakat application updates
  - **Configuration**: Set as optional field with email format validation

**Password Field**
- **How to Add**: Drag "Password Field" from the Text Inputs category
- **Configuration**:
  - Set label and placeholder
  - Configure password strength requirements
- **Use Case**: User authentication, account creation
- **Zakat Scenario**:
  - **When to Use**: Creating secure login for Zakat portal
  - **Example**: "Kata Laluan" field for applicant account creation
  - **Configuration**: Set minimum 8 characters with strength indicator

**URL Field**
- **How to Add**: Drag "URL Field" from the Text Inputs category
- **Configuration**:
  - Set label and placeholder
  - URL validation is automatic
- **Use Case**: Links, references, social media profiles
- **Zakat Scenario**:
  - **When to Use**: Collecting social media profiles for verification
  - **Example**: "Profil Facebook" field for additional contact verification
  - **Configuration**: Set as optional field with URL validation

**Phone Field**
- **How to Add**: Drag "Phone Field" from the Text Inputs category
- **Configuration**:
  - Set label and placeholder
  - Configure phone number format
- **Use Case**: Contact information, customer details
- **Zakat Scenario**:
  - **When to Use**: Collecting applicant's contact number
  - **Example**: "Nombor Telefon" field for Zakat application contact
  - **Configuration**: Set Malaysian phone format (01X-XXXXXXX)

**Masked Input**
- **How to Add**: Drag "Masked Input" from the Text Inputs category
- **Configuration**:
  - Set custom mask pattern (e.g., ###-###-####)
  - Configure placeholder and help text
- **Use Case**: Credit cards, social security numbers, postal codes
- **Zakat Scenario**:
  - **When to Use**: Collecting IC number with proper formatting
  - **Example**: "Nombor IC" field with format 000000-00-0000
  - **Configuration**: Set mask pattern ###-###-#### for IC format

**Hidden Field**
- **How to Add**: Drag "Hidden Field" from the Text Inputs category
- **Configuration**:
  - Set default value
  - Note: This field is not visible to users
- **Use Case**: Default values, system data, calculations
- **Zakat Scenario**:
  - **When to Use**: Storing application date or system-generated values
  - **Example**: "Tarikh Permohonan" field automatically set to current date
  - **Configuration**: Set default value to current date/time

#### Selection & Toggle Category

**Select Dropdown**
- **How to Add**: Drag "Select Dropdown" from the Selection & Toggle category
- **Configuration**:
  - Click component to open settings
  - Add options in the "Options" section
  - Set placeholder text
  - Configure validation
- **Use Case**: Categories, status options, country selection
- **Zakat Scenario**:
  - **When to Use**: Selecting Zakat category or state of residence
  - **Example**: "Kategori Zakat" dropdown with options: Asnaf, Fakir, Miskin, etc.
  - **Configuration**: Add options: Asnaf, Fakir, Miskin, Amil, Muallaf, Riqab, Gharimin, Fisabilillah

**Checkbox Group**
- **How to Add**: Drag "Checkbox Group" from the Selection & Toggle category
- **Configuration**:
  - Add multiple options in the settings
  - Set label and help text
  - Configure minimum/maximum selections
- **Use Case**: Interests, skills, preferences
- **Zakat Scenario**:
  - **When to Use**: Selecting multiple sources of income or types of assistance needed
  - **Example**: "Sumber Pendapatan" checkbox group
  - **Configuration**: Options: Gaji Tetap, Kerja Sampingan, Perniagaan, Sewa, Lain-lain

**Radio Group**
- **How to Add**: Drag "Radio Group" from the Selection & Toggle category
- **Configuration**:
  - Add mutually exclusive options
  - Set label and help text
  - Configure validation
- **Use Case**: Gender, yes/no questions, priority levels
- **Zakat Scenario**:
  - **When to Use**: Selecting marital status or employment status
  - **Example**: "Status Perkahwinan" radio group
  - **Configuration**: Options: Bujang, Berkahwin, Bercerai, Janda/Duda

**Switch Toggle**
- **How to Add**: Drag "Switch Toggle" from the Selection & Toggle category
- **Configuration**:
  - Set label and help text
  - Configure default state (on/off)
- **Use Case**: Settings, feature enablement, consent
- **Zakat Scenario**:
  - **When to Use**: Consent for data sharing or agreement to terms
  - **Example**: "Persetujuan Terma dan Syarat" toggle
  - **Configuration**: Set default to off, required for form submission

#### Date & Pickers Category

**Date Picker**
- **How to Add**: Drag "Date Picker" from the Date & Pickers category
- **Configuration**:
  - Set label and help text
  - Configure date range limits
  - Set default date if needed
- **Use Case**: Birth dates, appointment scheduling, deadlines
- **Zakat Scenario**:
  - **When to Use**: Collecting birth date or application submission date
  - **Example**: "Tarikh Lahir" field for age verification
  - **Configuration**: Set maximum date to current date, minimum date to 1900

**Time Picker**
- **How to Add**: Drag "Time Picker" from the Date & Pickers category
- **Configuration**:
  - Set label and help text
  - Choose 12 or 24-hour format
  - Set time intervals
- **Use Case**: Meeting times, business hours, schedules
- **Zakat Scenario**:
  - **When to Use**: Scheduling Zakat interview appointments
  - **Example**: "Masa Temuduga" field for interview scheduling
  - **Configuration**: Set 24-hour format, intervals of 30 minutes

**Date & Time**
- **How to Add**: Drag "Date & Time" from the Date & Pickers category
- **Configuration**:
  - Set label and help text
  - Configure date and time limits
- **Use Case**: Event scheduling, deadline tracking
- **Zakat Scenario**:
  - **When to Use**: Scheduling Zakat verification appointments
  - **Example**: "Tarikh dan Masa Temuduga" field for home visits
  - **Configuration**: Set minimum date to current date, business hours only

**Range Slider**
- **How to Add**: Drag "Range Slider" from the Date & Pickers category
- **Configuration**:
  - Set minimum and maximum values
  - Configure step increments
  - Set default value
- **Use Case**: Ratings, preferences, quantity selection
- **Zakat Scenario**:
  - **When to Use**: Indicating monthly household income range
  - **Example**: "Julat Pendapatan Bulanan (RM)" slider
  - **Configuration**: Set range 0-10,000 RM, step 500 RM

**Color Picker**
- **How to Add**: Drag "Color Picker" from the Date & Pickers category
- **Configuration**:
  - Set label and help text
  - Configure default color
- **Use Case**: Design preferences, theme selection
- **Zakat Scenario**:
  - **When to Use**: Selecting preferred notification colors
  - **Example**: "Warna Notifikasi Pilihan" for personalized alerts
  - **Configuration**: Set default to blue (#3B82F6)

#### Advanced & Upload Category

**File Upload**
- **How to Add**: Drag "File Upload" from the Advanced & Upload category
- **Configuration**:
  - Set accepted file types
  - Configure file size limits
  - Set maximum number of files
- **Use Case**: Documents, images, attachments
- **Zakat Scenario**:
  - **When to Use**: Uploading supporting documents for Zakat application
  - **Example**: "Dokumen Sokongan" field for IC, payslips, bank statements
  - **Configuration**: Accept PDF, JPG, PNG files, max 5MB per file, max 10 files

**Image Preview**
- **How to Add**: Drag "Image Preview" from the Advanced & Upload category
- **Configuration**:
  - Set image URL or upload image
  - Configure caption and alt text
  - Enable/disable zoom capability
- **Use Case**: Product images, profile pictures, documentation
- **Zakat Scenario**:
  - **When to Use**: Displaying Zakat calculation examples or guidelines
  - **Example**: "Contoh Pengiraan Zakat" image with calculation breakdown
  - **Configuration**: Show zoom capability, add caption explaining calculation

**Repeating Group**
- **How to Add**: Drag "Repeating Group" from the Advanced & Upload category
- **Configuration**:
  - Set group label and help text
  - Configure minimum and maximum items
  - Add fields within the group
- **Use Case**: Family members, work experience, education history
- **Zakat Scenario**:
  - **When to Use**: Collecting information about family members/dependents
  - **Example**: "Maklumat Ahli Keluarga" group for dependent details
  - **Configuration**: Min 1, max 10 family members, fields: Name, IC, Age, Relationship

**Dynamic List**
- **How to Add**: Drag "Dynamic List" from the Advanced & Upload category
- **Configuration**:
  - Set label and placeholder text
  - Configure item type (text, number, etc.)
  - Enable search, sorting, and bulk operations
- **Use Case**: Skills, interests, inventory items
- **Zakat Scenario**:
  - **When to Use**: Listing monthly expenses or sources of income
  - **Example**: "Senarai Perbelanjaan Bulanan" for expense tracking
  - **Configuration**: Text items, enable search, allow duplicates, max 20 items

**Data Table**
- **How to Add**: Drag "Data Table" from the Advanced & Upload category
- **Configuration**:
  - Define table columns and their types
  - Set validation rules for each column
  - Configure edit and delete permissions
- **Use Case**: Employee records, inventory, financial data
- **Zakat Scenario**:
  - **When to Use**: Tracking monthly income and expenses in tabular format
  - **Example**: "Jadual Pendapatan dan Perbelanjaan" table
  - **Configuration**: Columns: Month, Income (RM), Expenses (RM), Balance (RM), Remarks

**OTP Input**
- **How to Add**: Drag "OTP Input" from the Advanced & Upload category
- **Configuration**:
  - Set number of digits (typically 6)
  - Configure validation
- **Use Case**: Two-factor authentication, verification codes
- **Zakat Scenario**:
  - **When to Use**: SMS verification for Zakat application submission
  - **Example**: "Kod Pengesahan SMS" field for application verification
  - **Configuration**: 6 digits, auto-focus, required validation

**File Dropzone**
- **How to Add**: Drag "File Dropzone" from the Advanced & Upload category
- **Configuration**:
  - Set accepted file types and size limits
  - Configure drag-and-drop text
  - Set maximum number of files
- **Use Case**: Bulk file uploads, document management
- **Zakat Scenario**:
  - **When to Use**: Bulk upload of multiple supporting documents
  - **Example**: "Seret Dokumen ke Sini" dropzone for multiple file uploads
  - **Configuration**: Accept PDF, JPG files, max 10MB total, drag-and-drop interface

**Button**
- **How to Add**: Drag "Button" from the Advanced & Upload category
- **Configuration**:
  - Set button text and type (submit, reset, button)
  - Choose button style and size
  - Configure custom actions if needed
- **Use Case**: Submit, reset, custom actions
- **Zakat Scenario**:
  - **When to Use**: Form submission or calculation triggers
  - **Example**: "Hantar Permohonan Zakat" submit button
  - **Configuration**: Primary style, large size, submit type

### 3.4 Creating Your First Form

**Step-by-Step Instructions:**

1. **Start Form Builder**
   - Navigate to Form Builder
   - Click "Create New Form"
   - Enter a descriptive form name

2. **Add Basic Components**
   - Drag a "Text Field" for the name
   - Drag an "Email Field" for contact information
   - Drag a "Select Dropdown" for category selection

3. **Configure Components**
   - Click each component to open settings
   - Set appropriate labels and placeholders
   - Add validation rules where needed

4. **Add Advanced Components**
   - Drag a "File Upload" for attachments
   - Drag a "Text Area" for comments
   - Add a "Button" for form submission

5. **Test Your Form**
   - Click "Preview" to test the form
   - Fill out the form as an end user would
   - Verify all functionality works correctly

6. **Save Your Form**
   - Click "Save" button
   - Enter a descriptive name
   - Add a description for future reference

### 3.5 Form Builder Features

**Drag & Drop Interface**
- **How to Use**: Click and drag components from the left panel to the canvas
- **Repositioning**: Drag components on the canvas to move them
- **Resizing**: Use the resize handles to adjust component size

**Component Configuration**
- **How to Access**: Click any component on the canvas
- **Settings Panel**: Opens on the right side
- **Configuration Options**: Labels, validation, conditional logic, styling

**Preview Mode**
- **How to Access**: Click "Preview" button in the header
- **Testing**: Fill out the form as an end user
- **Exit Preview**: Click "Edit" to return to builder mode

**Save & Version Control**
- **Save**: Click "Save" button regularly
- **History**: Access form history to view previous versions
- **Restore**: Click on any previous version to restore it

---

## Form Management

### 4.1 Accessing Form Management

**Step-by-Step Instructions:**
1. Navigate to **Form Builder**
2. Click the dropdown menu (three dots) in the header
3. Select **"Manage Forms"**
4. Or use the breadcrumb navigation

### 4.2 Managing Forms

**Form List View**
- **View All Forms**: See all your forms in a table format
- **Information Displayed**: Name, description, component count, creation date, last updated
- **Sorting**: Click column headers to sort by different criteria

**Search & Filter**
- **Search Bar**: Type to search forms by name or description
- **Filters**: Use status and date filters to narrow results
- **Clear Filters**: Click "Clear Filters" to reset search

**Form Actions**
- **Edit**: Click "Edit" to open form in Form Builder
- **Preview**: Click "Preview" to test form functionality
- **Duplicate**: Click "Duplicate" to create a copy
- **Delete**: Click "Delete" and confirm to remove form
- **Export**: Click "Export" to download form configuration

### 4.3 Form Templates

**Accessing Templates**
- **Step 1**: In Form Builder, click the dropdown menu
- **Step 2**: Select "Templates"
- **Step 3**: Browse available templates

**Using Templates**
- **Step 1**: Select a template that matches your needs
- **Step 2**: Click "Use Template"
- **Step 3**: Customize the form for your specific requirements
- **Step 4**: Save with a new name

**Creating Templates**
- **Step 1**: Design a form you want to reuse
- **Step 2**: Click "Save as Template"
- **Step 3**: Enter template name and description
- **Step 4**: Template is now available for reuse

### 4.4 Form History

**Accessing History**
- **Step 1**: In Form Management, find your form
- **Step 2**: Click "History" button
- **Step 3**: View version history

**Version Management**
- **View Changes**: Click on any version to see what changed
- **Compare Versions**: Select two versions to compare differences
- **Restore Version**: Click "Restore" to go back to a previous version
- **Change Tracking**: See who made changes and when

---

## Process Builder

### 5.1 Accessing Process Builder

**Step-by-Step Instructions:**
1. From the main menu, click **"Process Builder"**
2. Click **"Create New Process"** button
3. Enter a process name and description
4. Click "Create" to start building

### 5.2 Process Builder Interface

**Interface Layout:**
- **Left Panel**: Component library with process components
- **Center Canvas**: Visual workflow design area
- **Right Panel**: Component configuration and properties
- **Top Toolbar**: Save, publish, and navigation controls

**Navigation:**
- **Zoom**: Use mouse wheel or zoom controls
- **Pan**: Click and drag on empty canvas areas
- **Select**: Click components to select and configure them

### 5.3 Process Components

#### Core Components

**Start Point**
- **How to Add**: Drag "Start Point" from the Core Components category
- **Configuration**: 
  - Set process name and description
  - Configure trigger conditions if needed
- **Visual**: Green circle with "Start" label
- **Use Case**: Process entry point, trigger events
- **Zakat Scenario**:
  - **When to Use**: Beginning of Zakat application process
  - **Example**: "Permohonan Zakat Asnaf" process start
  - **Configuration**: Trigger when user submits Zakat application form

**End Point**
- **How to Add**: Drag "End Point" from the Core Components category
- **Configuration**:
  - Set completion conditions
  - Configure final actions
- **Visual**: Red circle with "End" label
- **Use Case**: Process completion, final states
- **Zakat Scenario**:
  - **When to Use**: Completion of Zakat approval or rejection process
  - **Example**: "Permohonan Diluluskan" or "Permohonan Ditolak" end points
  - **Configuration**: Send final notification to applicant

**Form Task**
- **How to Add**: Drag "Form Task" from the Core Components category
- **Configuration**:
  - Click component to open settings
  - Select a form from the dropdown
  - Assign to users or roles
  - Set task description and instructions
- **Visual**: Rectangle with form icon
- **Use Case**: Data collection, user input, approvals
- **Zakat Scenario**:
  - **When to Use**: Zakat application form submission or verification forms
  - **Example**: "Borang Permohonan Zakat Asnaf" form task
  - **Configuration**: Assign to Zakat officers, set deadline for completion

**API Call**
- **How to Add**: Drag "API Call" from the Core Components category
- **Configuration**:
  - Set HTTP method (GET, POST, PUT, DELETE)
  - Enter API URL
  - Configure request headers and body
  - Set output variable name
  - Configure error handling
- **Visual**: Rectangle with API icon
- **Use Case**: Integrate with external systems, fetch data
- **Zakat Scenario**:
  - **When to Use**: Verify applicant's IC with JPN or check bank account details
  - **Example**: "Pengesahan IC dengan JPN" API call
  - **Configuration**: POST request to JPN API, validate IC number authenticity

**Decision Point**
- **How to Add**: Drag "Decision Point" from the Core Components category
- **Configuration**:
  - Click component to open settings
  - Add conditions for different paths
  - Set default path for fallback
  - Configure condition logic (AND/OR)
- **Visual**: Diamond shape with decision icon
- **Use Case**: Conditional routing, approval workflows
- **Zakat Scenario**:
  - **When to Use**: Determine if applicant qualifies for Zakat based on income
  - **Example**: "Pendapatan < Had Kifayah?" decision point
  - **Configuration**: If monthly income < RM2,208 (Had Kifayah), proceed to approval; else reject

**Notification**
- **How to Add**: Drag "Notification" from the Core Components category
- **Configuration**:
  - Set notification type (info, warning, error)
  - Choose recipient type (user, role, email)
  - Enter subject and message
  - Configure delivery options (in-app, email, SMS)
- **Visual**: Rectangle with notification icon
- **Use Case**: Status updates, reminders, alerts
- **Zakat Scenario**:
  - **When to Use**: Notify applicant about application status or request additional documents
  - **Example**: "Notifikasi Status Permohonan" notification
  - **Configuration**: Send SMS and email to applicant with application status update

**Business Rule**
- **How to Add**: Drag "Business Rule" from the Core Components category
- **Configuration**:
  - Create rule groups with conditions
  - Set actions for each rule
  - Configure rule priority
- **Visual**: Rectangle with rule icon
- **Use Case**: Data validation, calculations, decision logic
- **Zakat Scenario**:
  - **When to Use**: Calculate Zakat eligibility based on multiple criteria
  - **Example**: "Pengiraan Kelayakan Zakat" business rule
  - **Configuration**: Rule 1: Income < Had Kifayah, Rule 2: No luxury assets, Rule 3: Malaysian citizen

**Script Task**
- **How to Add**: Drag "Script Task" from the Core Components category
- **Configuration**:
  - Enter JavaScript code
  - Set input and output variables
  - Configure error handling
- **Visual**: Rectangle with code icon
- **Use Case**: Data manipulation, calculations, custom logic
- **Zakat Scenario**:
  - **When to Use**: Calculate monthly expenses or determine Zakat amount
  - **Example**: "Pengiraan Perbelanjaan Bulanan" script task
  - **Configuration**: Sum all monthly expenses, calculate average, determine eligibility

**HTML Content**
- **How to Add**: Drag "HTML Content" from the Core Components category
- **Configuration**:
  - Enter HTML code
  - Add CSS styling if needed
  - Configure JavaScript for interactivity
- **Visual**: Rectangle with HTML icon
- **Use Case**: Rich content, embedded applications, custom UI
- **Zakat Scenario**:
  - **When to Use**: Display Zakat calculation results or guidelines
  - **Example**: "Keputusan Pengiraan Zakat" HTML content
  - **Configuration**: Display formatted calculation results with charts and explanations

**Sub Process**
- **How to Add**: Drag "Sub Process" from the Core Components category
- **Configuration**:
  - Select another process from the dropdown
  - Configure data mapping between processes
  - Set sub-process parameters
- **Visual**: Rectangle with sub-process icon
- **Use Case**: Modular process design, reusable workflows
- **Zakat Scenario**:
  - **When to Use**: Separate verification process for complex applications
  - **Example**: "Proses Pengesahan Dokumen" sub-process
  - **Configuration**: Call document verification process with applicant data

#### Design Elements

**Horizontal Swimlane**
- **How to Add**: Drag "Horizontal Swimlane" from the Design Elements category
- **Configuration**:
  - Set lane name and description
  - Assign roles or departments
  - Configure visual styling
- **Use Case**: Department separation, role-based organization
- **Zakat Scenario**:
  - **When to Use**: Separate different departments in Zakat processing
  - **Example**: "Bahagian Permohonan" and "Bahagian Pengesahan" swimlanes
  - **Configuration**: Assign application officers and verification officers to respective lanes

**Vertical Swimlane**
- **How to Add**: Drag "Vertical Swimlane" from the Design Elements category
- **Configuration**:
  - Set lane name and description
  - Configure time-based organization
  - Set visual styling
- **Use Case**: Time-based organization, sequential steps
- **Zakat Scenario**:
  - **When to Use**: Organize process by time periods
  - **Example**: "Minggu 1", "Minggu 2", "Minggu 3" time-based lanes
  - **Configuration**: Track application processing time across weeks

**Text Annotation**
- **How to Add**: Drag "Text Annotation" from the Design Elements category
- **Configuration**:
  - Enter explanatory text
  - Position the annotation
  - Configure text styling
- **Use Case**: Documentation, instructions, notes
- **Zakat Scenario**:
  - **When to Use**: Add explanatory notes to process steps
  - **Example**: "Nota: Had Kifayah = RM2,208 (2024)" annotation
  - **Configuration**: Position near decision point, use smaller font for notes

### 5.4 Creating Your First Process

**Step-by-Step Instructions:**

1. **Start Process Builder**
   - Navigate to Process Builder
   - Click "Create New Process"
   - Enter process name and description

2. **Add Start Point**
   - Drag "Start Point" to the canvas
   - Position it at the top of your workflow

3. **Add Form Task**
   - Drag "Form Task" below the start point
   - Click the component to configure
   - Select a form from the dropdown
   - Assign to appropriate users or roles

4. **Add Decision Point**
   - Drag "Decision Point" after the form task
   - Configure conditions (e.g., approval status)
   - Set paths for different outcomes

5. **Add End Points**
   - Drag "End Point" for each decision path
   - Configure completion actions

6. **Connect Components**
   - Click and drag from component edges to create connections
   - Ensure all paths lead to end points

7. **Test Your Process**
   - Click "Preview" to test the workflow
   - Verify all connections and conditions

8. **Save and Publish**
   - Click "Save" to save your process
   - Click "Publish" to make it available for execution

### 5.5 Process Builder Features

**Visual Canvas**
- **How to Use**: Drag components from left panel to canvas
- **Connections**: Click and drag from component edges to create flow
- **Resizing**: Use handles to resize components
- **Repositioning**: Drag components to move them

**Component Configuration**
- **How to Access**: Click any component on the canvas
- **Settings Panel**: Opens on the right side
- **Configuration Options**: Properties, labels, behavior, connections

**Variable Management**
- **How to Access**: Click "Variables" tab in the right panel
- **Add Variables**: Click "Add Variable" and configure
- **Variable Types**: Text, number, date, boolean, array
- **Default Values**: Set initial values for variables

**Conditional Logic**
- **How to Create**: Use Decision Point components
- **Condition Builder**: Click "Add Condition" in decision settings
- **Logic Operators**: Use AND/OR for complex conditions
- **Default Path**: Set fallback path for unmatched conditions

**Form Integration**
- **How to Connect**: Use Form Task components
- **Form Selection**: Choose from your saved forms
- **User Assignment**: Assign to specific users or roles
- **Data Mapping**: Configure how form data flows through the process

**API Integration**
- **How to Configure**: Use API Call components
- **HTTP Methods**: GET, POST, PUT, DELETE
- **Request Configuration**: URL, headers, body
- **Response Handling**: Set output variables and error handling

**Save & Version Control**
- **Save**: Click "Save" button regularly
- **History**: Access process history to view previous versions
- **Publish**: Click "Publish" to make process available for execution

---

## Process Management

### 6.1 Accessing Process Management

**Step-by-Step Instructions:**
1. Navigate to **Process Builder**
2. Click **"Manage Processes"** in the header
3. Or use the dashboard overview

### 6.2 Process Dashboard

**Overview Metrics**
- **Total Processes**: Number of all processes in the system
- **Published vs Draft**: Count of published and draft processes
- **Active Cases**: Currently running process instances
- **Performance Metrics**: Completion rates and average times

**Performance Analytics**
- **Completion Rates**: Percentage of successful process completions
- **Average Times**: Time taken to complete processes
- **Success Rates**: Overall process success metrics
- **Bottleneck Analysis**: Identify slow or problematic steps

**Recent Activity**
- **Latest Changes**: Recent process modifications
- **Recent Executions**: Latest process instances
- **User Activity**: Most active users and their actions

**Quick Actions**
- **Create New Process**: Start building a new workflow
- **View Active Cases**: Monitor currently running processes
- **Access Analytics**: View detailed performance reports

### 6.3 Managing Processes

**Process List View**
- **Search & Filter**: Find processes by name, status, or category
- **Status Tracking**: Draft, published, archived, deleted
- **Category Organization**: HR, Finance, IT, Operations, etc.
- **Sort Options**: By name, creation date, last modified

**Process Actions**
- **Edit**: Click "Edit" to open process in Process Builder
- **Duplicate**: Click "Duplicate" to create a copy
- **Publish**: Click "Publish" to make process available for execution
- **Archive**: Click "Archive" to move process to archived status
- **Delete**: Click "Delete" and confirm to remove process
- **Export**: Click "Export" to download process definition

**Process Templates**
- **Template Library**: Browse pre-built process templates
- **Template Categories**: Common business processes
- **Custom Templates**: Save your processes as templates
- **Template Import**: Import templates from other sources

**Process History**
- **Version Control**: Track all process changes
- **Change Log**: Who made changes and when
- **Version Comparison**: Compare different versions
- **Rollback**: Restore previous versions if needed

### 6.4 Process Analytics

**Execution Metrics**
- **Number of Cases**: Total process instances created
- **Completion Rates**: Percentage of completed cases
- **Average Time**: Time taken to complete processes
- **Success Rates**: Percentage of successful completions

**Performance Data**
- **Bottleneck Analysis**: Identify slow steps in processes
- **User Performance**: Track user task completion rates
- **Process Efficiency**: Measure process optimization opportunities
- **Resource Utilization**: Monitor system and user resources

**User Activity**
- **Most Active Users**: Users with highest task completion rates
- **Task Completion Rates**: Individual user performance metrics
- **User Workload**: Distribution of tasks across users
- **Performance Trends**: Track user performance over time

**Trend Analysis**
- **Process Usage**: Track which processes are used most
- **Time Trends**: Analyze process usage over time
- **Seasonal Patterns**: Identify recurring patterns
- **Growth Metrics**: Track system adoption and usage

### 6.5 Case Management

**Active Cases**
- **View Running Cases**: See currently active process instances
- **Case Details**: Individual case information and progress
- **Case Status**: Track current status of each case
- **Case Timeline**: View chronological case events

**Case Actions**
- **Assign Tasks**: Reassign tasks to different users
- **Suspend Cases**: Pause process execution temporarily
- **Resume Cases**: Restart suspended processes
- **Cancel Cases**: Terminate process execution

**Task Management**
- **Pending Tasks**: View tasks waiting for user action
- **Task Assignment**: Assign tasks to specific users
- **Task Notifications**: Alert users about new or overdue tasks
- **Task History**: Track task completion and performance

**Case Monitoring**
- **Real-time Updates**: Live status updates for active cases
- **Progress Tracking**: Monitor case progression through steps
- **Exception Handling**: Identify and handle process exceptions
- **Performance Monitoring**: Track case completion times

---

## FAQ

**Q: How do I implement approval workflows with multiple approvers in a hierarchical structure?**

A: Use Decision Point components to create approval chains. Configure each decision point with conditions based on approval amounts or roles. For Zakat scenarios, you might have: Level 1 (RM1,000-RM5,000) → Officer approval, Level 2 (RM5,001-RM10,000) → Supervisor approval, Level 3 (RM10,001+) → Manager approval. Use Business Rule components to determine approval levels based on application amounts.

**Q: How can I pass user-specific data to dynamically generated forms in subsequent process steps?**

A: Use Process Variables to store user data from initial forms and pass them to subsequent Form Task components. Configure the form to pre-populate fields using the stored variables. For example, in a Zakat application: Store applicant details in variables during initial submission, then use those variables to pre-fill verification forms for officers.

**Q: How do I implement conditional form fields that appear based on previous user selections?**

A: Use the Conditional Logic feature in Form Builder. Select any component, go to the Conditional Logic section, and configure conditions. For Zakat applications: If user selects "Berpencen" in employment status, show "Jumlah Pencen" field; if "Bekerja Sendiri", show "Pendapatan Perniagaan" field.

**Q: How can I integrate external systems (like JPN for IC verification) into my processes?**

A: Use API Call components in Process Builder. Configure the API endpoint, authentication, request/response handling, and error management. For Zakat scenarios: Create API calls to JPN for IC verification, bank systems for account validation, or government databases for income verification.

**Q: How do I implement parallel processing where multiple tasks can be completed simultaneously?**

A: Use multiple Form Task components connected to the same Decision Point. Configure each task to be assigned to different users or roles. For Zakat processing: Simultaneously assign document verification to one officer, income verification to another, and home visit scheduling to a third officer.

**Q: How can I implement dynamic task assignment based on workload or expertise?**

A: Use Business Rule components to determine task assignment logic. Configure rules based on user availability, expertise, or current workload. For Zakat scenarios: Assign complex cases to senior officers, simple cases to junior officers, or route based on applicant location.

**Q: How do I handle process exceptions and create alternative paths when standard procedures fail?**

A: Use Decision Point components with error handling conditions. Configure API Call components with "Continue on Error" options and create alternative paths. For Zakat applications: If IC verification fails, route to manual verification; if income verification fails, request additional documents.

**Q: How can I implement time-based escalations for overdue tasks?**

A: Use Notification components with time-based triggers. Configure escalation rules in Business Rule components. For Zakat processing: If verification task is not completed within 3 days, automatically escalate to supervisor and send reminder notifications.

**Q: How do I implement data validation across multiple process steps?**

A: Use Business Rule components at each critical decision point. Configure validation rules that check data consistency across steps. For Zakat applications: Validate that income declared in initial form matches supporting documents in verification step.

**Q: How can I implement audit trails and compliance tracking for sensitive processes?**

A: Use the built-in audit logging features. Configure process variables to track all changes and decisions. For Zakat processing: Log all approval decisions, document uploads, verification results, and final outcomes for compliance reporting.

**Q: How do I implement role-based access control for different process stages?**

A: Configure user roles and permissions in the system settings. Assign specific roles to Form Task components. For Zakat workflows: Assign application submission to public users, verification to officers, approval to supervisors, and final review to managers.

**Q: How can I implement process analytics and performance monitoring for continuous improvement?**

A: Use the Process Analytics dashboard to track key metrics. Monitor completion times, bottleneck identification, and user performance. For Zakat processing: Track average processing time, approval rates, rejection reasons, and officer productivity for process optimization.