FORM BUILDER SYSTEM NOTES
=======================

1. Core Components
-----------------
- el(): Base function for creating DOM elements with chaining capabilities
- _ff: Form factory object for creating different types of form inputs
- addLine(): Function to add form elements to a container
- addRow(): Function to create complex form rows with multiple inputs

2. Form Factory (_ff) Methods
---------------------------
a) select()
   - Creates a dropdown select input
   - Features:
     * Bootstrap styling
     * Select2 integration
     * Readonly option
     * Default "Pilih Data" option
     * Dynamic options from data array
     * Value setting capability

b) num()
   - Creates a numeric input field
   - Features:
     * Right-aligned text
     * Currency formatting
     * Thousand separator
     * Readonly option
     * Automatic number formatting on keyup

c) text()
   - Creates a standard text input
   - Features:
     * Left-aligned text
     * Placeholder text
     * Readonly option
     * Value setting capability

3. Element Builder (el) Key Features
---------------------------------
- Chaining methods for element manipulation
- DOM element creation and modification
- Style manipulation
- Event handling
- Child element management
- Attribute setting
- Class management

4. Usage Example
--------------
```javascript
// Creating a form row
let formConfig = [
    {
        type: 'num',
        name: 'amount',
        readonly: false,
        val: '0'
    },
    {
        type: 'select',
        name: 'account',
        data: accountList,
        val: selectedAccount
    },
    {
        type: 'text',
        name: 'description',
        val: ''
    }
];

// Adding form elements
formConfig.forEach(config => {
    addLine(container, config.type, config);
});
```

5. Key Benefits
--------------
- Modular and reusable form components
- Consistent styling and behavior
- Easy to extend with new input types
- Simplified DOM manipulation
- Clean and maintainable code structure

6. Dependencies
--------------
- jQuery (for Select2 integration)
- Bootstrap (for styling)
- Custom formatting functions (formatRupiah, etc.)

7. Best Practices
----------------
- Always provide proper configuration objects
- Handle readonly states appropriately
- Include proper validation
- Use consistent naming conventions
- Implement proper error handling
- Consider mobile responsiveness

8. Common Use Cases
------------------
- Dynamic form generation
- Data entry forms
- Search forms
- Filter forms
- Configuration forms
- Multi-step forms

9. Extension Points
------------------
- New input types can be added to _ff
- Custom validation can be added
- Additional styling options
- New event handlers
- Custom formatting functions

10. Performance Considerations
----------------------------
- Minimize DOM operations
- Use event delegation where appropriate
- Cache DOM selections
- Optimize event handlers
- Consider lazy loading for large forms