diff --git a/assets/js/bootstrap/bootstrap.autocomplete.js b/assets/js/bootstrap/bootstrap.autocomplete.js
index 6c8114f..60fb6e4 100644
--- a/assets/js/bootstrap/bootstrap.autocomplete.js
+++ b/assets/js/bootstrap/bootstrap.autocomplete.js
@@ -1,40 +1,8 @@
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var BaseResolver = (function () {
-    function BaseResolver(options) {
+var AjaxResolver = class {
+    constructor(options) {
         this._settings = $.extend(true, {}, this.getDefaults(), options);
     }
-    BaseResolver.prototype.getDefaults = function () {
-        return {};
-    };
-    BaseResolver.prototype.getResults = function (limit, start, end) {
-        return this.results;
-    };
-    BaseResolver.prototype.search = function (q, cbk) {
-        cbk(this.getResults());
-    };
-    return BaseResolver;
-}());
-
-var AjaxResolver = (function (_super) {
-    __extends(AjaxResolver, _super);
-    function AjaxResolver(options) {
-        return _super.call(this, options) || this;
-    }
-    AjaxResolver.prototype.getDefaults = function () {
+    getDefaults() {
         return {
             url: '',
             method: 'post',
@@ -43,42 +11,42 @@ var AjaxResolver = (function (_super) {
             timeout: 0,
             requestThrottling: 500
         };
-    };
-    AjaxResolver.prototype.search = function (q, cbk) {
-        var _this = this;
-        if (this.jqXHR != null) {
-            this.jqXHR.abort();
-        }
+    }
+    search(q, cbk) {
+        if (this.jqXHR != null) this.jqXHR.abort();
+
         var data = {};
         data[this._settings.queryKey] = q;
-        if (this._settings.param.length > 0) $.extend(data, FoniaJS.RequestParam(this._settings.param));
-        if (this.requestTID) {
-            window.clearTimeout(this.requestTID);
+        if (this._settings.param.length > 0) {
+            $.extend(data, FoniaJS.RequestParam(this._settings.param));
         }
-        this.requestTID = window.setTimeout(function () {
-            _this.jqXHR = $.ajax(_this._settings.url, {
-                method: _this._settings.method,
+
+        if (this.requestTID) window.clearTimeout(this.requestTID);
+
+        this.requestTID = window.setTimeout(() => {
+            this.jqXHR = $.ajax(this._settings.url, {
+                method: this._settings.method,
                 data: data,
-                timeout: _this._settings.timeout
+                timeout: this._settings.timeout
             });
-            _this.jqXHR.done(function (result) {
-                //gnips: result in object
-                cbk((undefined !== result.autodata) ? result.autodata : result);
+
+            this.jqXHR.done(result => {
+                cbk(result.autodata !== undefined ? result.autodata : result);
             });
-            _this.jqXHR.fail(function (err) {
-                var _a;
-                (_a = _this._settings) === null || _a === void 0 ? void 0 : _a.fail(err);
+
+            this.jqXHR.fail(err => {
+                this._settings.fail?.(err);
             });
-            _this.jqXHR.always(function () {
-                _this.jqXHR = null;
+
+            this.jqXHR.always(() => {
+                this.jqXHR = null;
             });
         }, this._settings.requestThrottling);
-    };
-    return AjaxResolver;
-}(BaseResolver));
+    }
+};
 
-var DropdownV5 = (function () {
-    function DropdownV5(e, formatItemCbk, autoSelect, noResultsText) {
+var DropdownV5 = class {
+    constructor(e, formatItemCbk, autoSelect, noResultsText) {
         this.initialized = false;
         this.shown = false;
         this.items = [];
@@ -88,195 +56,160 @@ var DropdownV5 = (function () {
         this.autoSelect = autoSelect;
         this.noResultsText = noResultsText;
     }
-    DropdownV5.prototype.getElPos = function () {
-        var pos = $.extend({}, this._$el.position(), {
-            height: this._$el[0].offsetHeight
-        });
-        return pos;
-    };
-    DropdownV5.prototype.init = function () {
-        var _this = this;
+
+    getElPos() {
+        return $.extend({}, this._$el.position(), { height: this._$el[0].offsetHeight });
+    }
+
+    init() {
         var pos = this.getElPos();
-        var fontsize = _this._$el.css('font-size');
-        this._dd = $('<div />');
-        this._dd.addClass('bootstrap-autocomplete dropdown-menu');
-        this._dd.insertAfter(this._$el);
-        this._dd.css({ top: pos.top + this._$el.outerHeight(), left: pos.left, width: this._$el.outerWidth(), 'font-size': fontsize });
-        this._dd.on('click', '.dropdown-item', function (evt) {
+        var fontsize = this._$el.css('font-size');
+        
+        this._dd = $('<div />')
+            .addClass('bootstrap-autocomplete dropdown-menu')
+            .insertAfter(this._$el)
+            .css({
+                top: pos.top + this._$el.outerHeight(),
+                left: pos.left,
+                width: this._$el.outerWidth(),
+                'font-size': fontsize
+            });
+
+        this._dd.on('click', '.dropdown-item', evt => {
             var item = $(evt.currentTarget).data('item');
-            _this.itemSelectedLaunchEvent(item);
+            this.itemSelectedLaunchEvent(item);
             evt.preventDefault();
         });
-        this._dd.on('keyup', function (evt) {
-            if (_this.shown) {
-                switch (evt.which) {
-                    case 27:
-                        _this.hide();
-                        _this._$el.focus();
-                        break;
-                }
+
+        this._dd.on('keyup', evt => {
+            if (this.shown && evt.which === 27) {
+                this.hide();
+                this._$el.focus();
                 return false;
             }
         });
-        this._dd.on('mouseenter', function (evt) {
-            _this.ddMouseover = true;
-        });
-        this._dd.on('mouseleave', function (evt) {
-            _this.ddMouseover = false;
-        });
-        this._dd.on('mouseenter', '.dropdown-item', function (evt) {
-            if (_this.haveResults) {
+
+        this._dd.on('mouseenter', () => { this.ddMouseover = true; });
+        this._dd.on('mouseleave', () => { this.ddMouseover = false; });
+
+        this._dd.on('mouseenter', '.dropdown-item', evt => {
+            if (this.haveResults) {
                 $(evt.currentTarget).closest('div').find('.dropdown-item.active').removeClass('active');
                 $(evt.currentTarget).addClass('active');
-                _this.mouseover = true;
+                this.mouseover = true;
             }
         });
-        this._dd.on('mouseleave', '.dropdown-item', function (evt) {
-            _this.mouseover = false;
-        });
+
+        this._dd.on('mouseleave', '.dropdown-item', () => { this.mouseover = false; });
         this.initialized = true;
-    };
-    DropdownV5.prototype.checkInitialized = function () {
-        if (!this.initialized) {
-            this.init();
+    }
+
+    checkInitialized() {
+        if (!this.initialized) this.init();
+    }
+
+    get isMouseOver() { return this.mouseover; }
+    get isDdMouseOver() { return this.ddMouseover; }
+    get haveResults() { return this.items.length > 0; }
+
+    focusNextItem(reversed) {
+        if (!this.haveResults) return;
+        var currElem = this._dd.find('.dropdown-item.active');
+        var nextElem = reversed ? currElem.prev() : currElem.next();
+        
+        if (nextElem.length === 0) {
+            nextElem = reversed ? this._dd.find('.dropdown-item').last() : this._dd.find('.dropdown-item').first();
         }
-    };
-    Object.defineProperty(DropdownV5.prototype, "isMouseOver", {
-        get: function () {
-            return this.mouseover;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropdownV5.prototype, "isDdMouseOver", {
-        get: function () {
-            return this.ddMouseover;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropdownV5.prototype, "haveResults", {
-        get: function () {
-            return (this.items.length > 0);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DropdownV5.prototype.focusNextItem = function (reversed) {
-        if (this.haveResults) {
-            var currElem = this._dd.find('.dropdown-item.active');
-            var nextElem = reversed ? currElem.prev() : currElem.next();
-            if (nextElem.length === 0) {
-                nextElem = reversed ? this._dd.find('.dropdown-item').last() : this._dd.find('.dropdown-item').first();
-            }
-            currElem.removeClass('active');
-            nextElem.addClass('active');
-            this.scrollTo(nextElem);
-        }
-    };
-    DropdownV5.prototype.focusPreviousItem = function () {
-        this.focusNextItem(true);
-    };
-    DropdownV5.prototype.selectFocusItem = function () {
-        this._dd.find('.dropdown-item.active').trigger('click');
-    };
-    Object.defineProperty(DropdownV5.prototype, "isItemFocused", {
-        get: function () {
-            if (this._dd && this.isShown() && (this._dd.find('.dropdown-item.active').length > 0)) {
-                return true;
-            }
-            return false;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DropdownV5.prototype.show = function () {
+        currElem.removeClass('active');
+        nextElem.addClass('active');
+        this.scrollTo(nextElem);
+    }
+
+    focusPreviousItem() { this.focusNextItem(true); }
+    selectFocusItem() { this._dd.find('.dropdown-item.active').trigger('click'); }
+
+    get isItemFocused() {
+        return !!(this._dd && this.isShown() && this._dd.find('.dropdown-item.active').length > 0);
+    }
+
+    show() {
         if (!this.shown) {
             this._dd.addClass('show');
             this.shown = true;
             this._$el.trigger('autocomplete.dd.shown');
         }
-    };
-    DropdownV5.prototype.isShown = function () {
-        return this.shown;
-    };
-    DropdownV5.prototype.hide = function () {
+    }
+
+    isShown() { return this.shown; }
+
+    hide() {
         if (this.shown) {
             this._dd.removeClass('show');
             this.shown = false;
             this._$el.trigger('autocomplete.dd.hidden');
         }
-    };
-    DropdownV5.prototype.updateItems = function (items, searchText) {
+    }
+
+    updateItems(items, searchText) {
         this.items = items;
         this.searchText = searchText;
         this.refreshItemList();
-    };
-    DropdownV5.prototype.showMatchedText = function (text, qry) {
+    }
+
+    showMatchedText(text, qry) {
         var startIndex = text.toLowerCase().indexOf(qry.toLowerCase());
         if (startIndex > -1) {
             var endIndex = startIndex + qry.length;
-            return text.slice(0, startIndex) + '<b>'
-                + text.slice(startIndex, endIndex) + '</b>'
-                + text.slice(endIndex);
+            return text.slice(0, startIndex) + '<b>' + text.slice(startIndex, endIndex) + '</b>' + text.slice(endIndex);
         }
         return text;
-    };
-    DropdownV5.prototype.refreshItemList = function () {
-        var _this = this;
+    }
+
+    refreshItemList() {
         this.checkInitialized();
         this._dd.empty();
         var liList = [];
+
         if (this.items.length > 0) {
-            this.items.forEach(function (item) {
-                var itemFormatted = _this.formatItem(item);
-                if (typeof itemFormatted === 'string') {
-                    itemFormatted = { text: itemFormatted };
-                }
-                var itemText;
-                var itemHtml;
-                itemText = _this.showMatchedText(itemFormatted.text, _this.searchText);
-                if (itemFormatted.html !== undefined) {
-                    itemHtml = itemFormatted.html;
-                } else {
-                    itemHtml = itemText;
-                }
-                var disabledItem = itemFormatted.disabled;
-                var li = $('<a >');
-                li.addClass('dropdown-item')
-                    //css bisa dimasukkan ke style default + cursor select
-                    //.css({ 'overflow': 'hidden', 'text-overflow': 'ellipsis' })
+            this.items.forEach(item => {
+                var itemFormatted = this.formatItem(item);
+                if (typeof itemFormatted === 'string') itemFormatted = { text: itemFormatted };
+
+                var itemText = this.showMatchedText(itemFormatted.text, this.searchText);
+                var itemHtml = itemFormatted.html !== undefined ? itemFormatted.html : itemText;
+
+                var li = $('<a />')
+                    .addClass('dropdown-item')
                     .html(itemHtml)
                     .data('item', item);
-                if (disabledItem) {
-                    li.addClass('disabled');
-                }
+
+                if (itemFormatted.disabled) li.addClass('disabled');
                 liList.push(li);
             });
             this._dd.append(liList);
             this.show();
+        } else if (this.noResultsText !== '') {
+            var li = $('<a />').addClass('dropdown-item disabled').html(this.noResultsText);
+            liList.push(li);
+            this._dd.append(liList);
+            this.show();
+        } else {
+            this.hide();
         }
-        else {
-            if (this.noResultsText === '') {
-                this.hide();
-            }
-            else {
-                var li = $('<a >');
-                li.addClass('dropdown-item disabled')
-                    .html(this.noResultsText);
-                liList.push(li);
-                this._dd.append(liList);
-                this.show();
-            }
-        }
-    };
-    DropdownV5.prototype.itemSelectedLaunchEvent = function (item) {
+    }
+
+    itemSelectedLaunchEvent(item) {
         this._$el.trigger('autocomplete.select', item);
-    };
-    DropdownV5.prototype.scrollTo = function (el) {
-        var _he = this._dd.height(), _to = this._dd.scrollTop(), _ito = el.position().top, _ihe = el.outerHeight(),
+    }
+
+    scrollTo(el) {
+        var _he = this._dd.height(),
+            _to = this._dd.scrollTop(),
+            _ito = el.position().top,
+            _ihe = el.outerHeight(),
             _nto = _to, _wra = false;
-        if (_ito < 0){
+
+        if (_ito < 0) {
             _wra = el.is(':first-child');
             _nto = _wra ? 0 : _to - _he / 2;
         } else if (_ito > _he - _ihe) {
@@ -284,12 +217,11 @@ var DropdownV5 = (function () {
             _nto = _wra ? (_ito + _ihe - _he) : _to + _he / 2;
         }
         this._dd.scrollTop(_nto);
-    };
-    return DropdownV5;
-}());
+    }
+};
 
-var AutoComplete = (function () {
-    function AutoComplete(element, options) {
+var AutoComplete = class {
+    constructor(element, options) {
         this._selectedItem = null;
         this._defaultValue = null;
         this._defaultText = null;
@@ -302,235 +234,189 @@ var AutoComplete = (function () {
             autoSelect: true,
             noResultsText: 'Pencarian Tidak Ketemu',
             preventEnter: false,
-            events: {
-                typed: null,
-                searchPre: null,
-                search: null,
-                searchPost: null,
-                select: null,
-                focus: null,
-            },
-            //gnips: adding callback, keyfunc and breakvalue
-            selectFunc: function(){},
-            keyFunc: function(){},
+            events: { typed: null, searchPre: null, search: null, searchPost: null, select: null, focus: null },
+            selectFunc: () => {},
+            keyFunc: () => {},
+            breakFocus: false,
             breakValue: []
         };
         this._el = element;
         this._$el = $(this._el);
         this.manageInlineDataAttributes();
+        
         if (typeof options === 'object') {
             this._settings = $.extend(true, {}, this.getSettings(), options);
         }
         this.init();
     }
-    AutoComplete.prototype.manageInlineDataAttributes = function () {
+
+    manageInlineDataAttributes() {
         var s = this.getSettings();
-        if (this._$el.data('url')) {
-            s.resolverSettings.url = this._$el.data('url');
-        }
-        if (this._$el.data('default-value')) {
-            this._defaultValue = this._$el.data('default-value');
-        }
-        if (this._$el.data('default-text')) {
-            this._defaultText = this._$el.data('default-text');
-        }
-        if (this._$el.data('noresults-text') !== undefined) {
-            s.noResultsText = this._$el.data('noresults-text');
-        }
-    };
-    AutoComplete.prototype.getSettings = function () {
-        return this._settings;
-    };
-    AutoComplete.prototype.init = function () {
+        if (this._$el.data('url')) s.resolverSettings.url = this._$el.data('url');
+        if (this._$el.data('default-value')) this._defaultValue = this._$el.data('default-value');
+        if (this._$el.data('default-text')) this._defaultText = this._$el.data('default-text');
+        if (this._$el.data('noresults-text') !== undefined) s.noResultsText = this._$el.data('noresults-text');
+    }
+
+    getSettings() { return this._settings; }
+
+    init() {
         this.bindDefaultEventListeners();
         if (this._settings.resolver === 'ajax') {
             this.resolver = new AjaxResolver(this._settings.resolverSettings);
         }
         this._dd = new DropdownV5(this._$el, this._settings.formatResult, this._settings.autoSelect, this._settings.noResultsText);
-    };
-    AutoComplete.prototype.bindDefaultEventListeners = function () {
-        var _this = this;
-        this._$el.on('keydown', function (evt) {
-            //gnips: check breakValue and call keydown function
-            (('' == _this._$el.val() || ((_this._settings.breakValue.length > 0) && (_this._settings.breakValue.indexOf(_this._$el.val()) != -1))) && _this._settings.keyFunc(evt.which, _this._$el.val()));
+    }
+
+    bindDefaultEventListeners() {
+        this._$el.on('keydown', evt => {
+            var val = this._$el.val();
+            if ((val === '' || (this._settings.breakValue.length > 0 && this._settings.breakValue.indexOf(val) !== -1))) {
+                this._settings.keyFunc(evt.which, val);
+            }
+
             switch (evt.which) {
                 case 9:
-                    if (_this._dd.isItemFocused) {
-                        _this._dd.selectFocusItem();
+                    if (!this._settings.breakFocus) {
+                        if (this._dd.isItemFocused) this._dd.selectFocusItem();
+                        this._dd.hide();
                     }
-                    _this._dd.hide();
                     break;
                 case 13:
-                    if (_this._dd.isItemFocused) {
-                        _this._dd.selectFocusItem();
-                    }
-                    _this._dd.hide();
-                    if (_this._settings.preventEnter) {
-                        evt.preventDefault();
-                    }
+                    if (this._dd.isItemFocused) this._dd.selectFocusItem();
+                    this._dd.hide();
+                    if (this._settings.preventEnter) evt.preventDefault();
                     break;
                 case 40:
-                    _this._dd.focusNextItem();
+                    this._dd.focusNextItem();
                     break;
                 case 38:
-                    _this._dd.focusPreviousItem();
+                    this._dd.focusPreviousItem();
                     break;
             }
         });
-        this._$el.on('keyup', function (evt) {
+
+        this._$el.on('keyup', evt => {
             switch (evt.which) {
-                case 16:
-                case 17:
-                case 18:
-                case 39:
-                case 37:
-                case 36:
-                case 35:
+                case 16: case 17: case 18: case 39: case 37: case 36: case 35: case 40: case 38:
                     break;
-                case 13:
-                    _this._dd.hide();
-                    break;
-                case 27:
-                    _this._dd.hide();
-                    break;
-                case 40:
-                    break;
-                case 38:
+                case 13: case 27:
+                    this._dd.hide();
                     break;
                 default:
-                    _this._selectedItem = null;
-                    var newValue = _this._$el.val();
-                    _this.handlerTyped(newValue);
+                    this._selectedItem = null;
+                    this.handlerTyped(this._$el.val());
             }
         });
-        this._$el.on('blur', function (evt) {
-            if (!_this._dd.isMouseOver && _this._dd.isDdMouseOver && _this._dd.isShown()) {
-                setTimeout(function () { _this._$el.focus(); });
-                _this._$el.focus();
-            }
-            else if (!_this._dd.isMouseOver) {
-                _this._dd.hide();
+
+        this._$el.on('blur', () => {
+            if (this._settings.breakFocus) return;
+            if (!this._dd.isMouseOver && this._dd.isDdMouseOver && this._dd.isShown()) {
+                setTimeout(() => { this._$el.focus(); });
+                this._$el.focus();
+            } else if (!this._dd.isMouseOver) {
+                this._dd.hide();
             }
         });
-        this._$el.on('autocomplete.select', function (evt, item) {
-            _this._selectedItem = item;
-            _this.itemSelectedDefaultHandler(item);
+
+        this._$el.on('autocomplete.select', (evt, item) => {
+            this._selectedItem = item;
+            this.itemSelectedDefaultHandler(item);
         });
-        this._$el.on('paste', function (evt) {
-            setTimeout(function () {
-                _this._$el.trigger('keyup', evt);
-            }, 0);
+
+        this._$el.on('paste', evt => {
+            setTimeout(() => { this._$el.trigger('keyup', evt); }, 0);
         });
-    };
-    AutoComplete.prototype.handlerTyped = function (newValue) {
+    }
+
+    handlerTyped(newValue) {
         if (this._settings.events.typed !== null) {
             newValue = this._settings.events.typed(newValue, this._$el);
-            if (!newValue) {
-                return;
-            }
+            if (!newValue) return;
         }
         if (newValue.length >= this._settings.minLength) {
             this._searchText = newValue;
             this.handlerPreSearch();
-        }
-        else {
+        } else {
             this._dd.hide();
         }
-    };
-    AutoComplete.prototype.handlerPreSearch = function () {
+    }
+
+    handlerPreSearch() {
         if (this._settings.events.searchPre !== null) {
             var newValue = this._settings.events.searchPre(this._searchText, this._$el);
-            if (!newValue)
-                return;
+            if (!newValue) return;
             this._searchText = newValue;
         }
         this.handlerDoSearch();
-    };
-    AutoComplete.prototype.handlerDoSearch = function () {
-        var _this = this;
+    }
+
+    handlerDoSearch() {
         if (this._settings.events.search !== null) {
-            this._settings.events.search(this._searchText, function (results) {
-                _this.postSearchCallback(results);
+            this._settings.events.search(this._searchText, results => {
+                this.postSearchCallback(results);
             }, this._$el);
+        } else if (this.resolver) {
+            this.resolver.search(this._searchText, results => {
+                this.postSearchCallback(results);
+            });
         }
-        else {
-            if (this.resolver) {
-                this.resolver.search(this._searchText, function (results) {
-                    _this.postSearchCallback(results);
-                });
-            }
-        }
-    };
-    AutoComplete.prototype.postSearchCallback = function (results) {
+    }
+
+    postSearchCallback(results) {
         if (this._settings.events.searchPost) {
             results = this._settings.events.searchPost(results, this._$el);
-            if ((typeof results === 'boolean') && !results)
-                return;
+            if (typeof results === 'boolean' && !results) return;
         }
         this.handlerStartShow(results);
-    };
-    AutoComplete.prototype.handlerStartShow = function (results) {
-        //gnips: adding auto select when barcode result of 1 item only
-        if (1 == results.length && 1 == (void 0 !== results[0].bc ? results[0].bc : 0)) {
-            this._$el.trigger('autocomplete.select', results[0]),
+    }
+
+    handlerStartShow(results) {
+        var bcVal = results[0]?.bc ?? 0;
+        if (results.length === 1 && bcVal === 1) {
+            this._$el.trigger('autocomplete.select', results[0]);
             this._dd.hide();
-        } else this._dd.updateItems(results, this._searchText);
-    };
-    AutoComplete.prototype.itemSelectedDefaultHandler = function (item) {
+        } else {
+            this._dd.updateItems(results, this._searchText);
+        }
+    }
+
+    itemSelectedDefaultHandler(item) {
         if (item != null) {
             var itemFormatted = this._settings.formatResult(item);
-            if (typeof itemFormatted === 'string') {
-                itemFormatted = { text: itemFormatted };
-            }
+            if (typeof itemFormatted === 'string') itemFormatted = { text: itemFormatted };
             this._$el.val(itemFormatted.text);
-        }
-        else {
+        } else {
             this._$el.val('');
         }
         this._selectedItem = item;
-        //gnips: callback with selected item
         this._settings.selectFunc(item);
         this._dd.hide();
-    };
-    AutoComplete.prototype.defaultFormatResult = function (item) {
-        if (typeof item === 'string') {
-            return { text: item };
-        }
-        else if (item.text) {
-            return item;
-        }
-        else {
-            return { text: item.toString() };
-        }
-    };
-    AutoComplete.prototype.manageAPI = function (APICmd, params) {
-        if (APICmd === 'set') {
-            this.itemSelectedDefaultHandler(params);
-        }
-        else if (APICmd === 'clear') {
-            this.itemSelectedDefaultHandler(null);
-        }
-        else if (APICmd === 'show') {
-            this._$el.trigger('keyup');
-        }
-        else if (APICmd === 'updateResolver') {
-            this.resolver = new AjaxResolver(params);
-        }
-    };
-    AutoComplete.NAME = 'autoComplete';
-    return AutoComplete;
-}());
+    }
 
-(function ($, window, document) {
-    $.fn[AutoComplete.NAME] = function (optionsOrAPI, optionalParams) {
-        return this.each(function () {
-            var pluginClass;
-            pluginClass = $(this).data(AutoComplete.NAME);
-            if (!pluginClass) {
-                pluginClass = new AutoComplete(this, optionsOrAPI);
-                $(this).data(AutoComplete.NAME, pluginClass);
-            }
-            pluginClass.manageAPI(optionsOrAPI, optionalParams);
-        });
-    };
-})(jQuery, window, document);
+    defaultFormatResult(item) {
+        if (typeof item === 'string') return { text: item };
+        if (item.text) return item;
+        return { text: item.toString() };
+    }
+
+    manageAPI(APICmd, params) {
+        if (APICmd === 'set') this.itemSelectedDefaultHandler(params);
+        else if (APICmd === 'clear') this.itemSelectedDefaultHandler(null);
+        else if (APICmd === 'show') this._$el.trigger('keyup');
+        else if (APICmd === 'updateResolver') this.resolver = new AjaxResolver(params);
+    }
+};
+AutoComplete.NAME = 'autoComplete';
+
+// jQuery plugin wrapper
+$.fn[AutoComplete.NAME] = function (optionsOrAPI, optionalParams) {
+    return this.each(function () {
+        var pluginClass = $(this).data(AutoComplete.NAME);
+        if (!pluginClass) {
+            pluginClass = new AutoComplete(this, optionsOrAPI);
+            $(this).data(AutoComplete.NAME, pluginClass);
+        }
+        pluginClass.manageAPI(optionsOrAPI, optionalParams);
+    });
+};
diff --git a/assets/js/fonia3.js b/assets/js/fonia3.js
index 43992de..f8b199b 100644
--- a/assets/js/fonia3.js
+++ b/assets/js/fonia3.js
@@ -4,7 +4,7 @@
     Desc.         : JS - Fonia Custom Class v3
     Created By    : Siau Pheng (siaupheng@3fonia.com).
     Created Date  : June 19th, 2009.
-    Last Modified : September 28th, 2026.
+    Last Modified : November 1st, 2026.
 
     (c) 3FONIA Software; WWW.3FONIA.COM.
 
@@ -12,195 +12,226 @@
 
 'use strict';
 
+// Helper for invoking dynamic object functions safely
+const _executeFuncByName = (functionName, ...args) => {
+    if (!functionName) return;
+    const parts = functionName.split('.');
+    const fn = parts.reduce((curr, key) => (curr && curr[key]), window);
+    if (typeof fn === 'function') {
+        const parCon = parts.slice(0, -1).reduce((curr, key) => (curr && curr[key]), window) || window;
+        return fn.apply(parCon, args);
+    }
+    console.warn(`Fungsi ${functionName} tidak ada!`);
+    return null;
+};
+
 var FoniaJS = {
-    version: "3.1.2",
+    version: "3.2.0",
     APP_ID: 0,
     APP_SID: "",
     WEB_HOST: "",
     WEB_FULLPATH: "",
     WEB_MOBILE: 0,
     AUTH_LEVEL: 9,
-    User: {ID:null, UID:0, GID:0, Level:0},
-    phpversion: "",
+    User: { ID: null, UID: 0, GID: 0, Level: 0 },
     locales: [],
     deflocal: "",
-    _debug: (jQuery.inArray(location.hostname, ["localhost","127.0.0.1"]) !== -1) ? true : false,
+    _debug: ["localhost", "127.0.0.1"].includes(location.hostname),
 
-    setConfig: function(key, skey) {
-        var _hasil, _adata = null;
-        if (typeof(key) === 'string' && key !== '') {
-            _hasil = $.base64.decode(key);
-            _adata = _hasil.split(";");
-            this.APP_ID = _adata[0];
-            this.APP_SID = _adata[1];
-            this.WEB_HOST = _adata[2];
-            this.WEB_FULLPATH = _adata[3];
-            this.WEB_MOBILE = _adata[4];
-            this.AUTH_LEVEL = parseInt(_adata[5]);
-            this.phpversion = '';
+    setConfig(key, skey) {
+        if (typeof key === 'string' && key !== '') {
+            const data = $.base64.decode(key).split(";");
+            this.APP_ID = data[0];
+            this.APP_SID = data[1];
+            this.WEB_HOST = data[2];
+            this.WEB_FULLPATH = data[3];
+            this.WEB_MOBILE = data[4];
+            this.AUTH_LEVEL = parseInt(data[5], 10);
         }
-        if (typeof(skey) === 'string' && skey !== '') {
-            _hasil = $.base64.decode(skey);
-            _adata = _hasil.split(";");
-            this.User.ID = _adata[0];
-            this.User.UID = parseInt(_adata[1]);
-            this.User.GID = parseInt(_adata[2]);
-            this.User.Level = parseInt(_adata[3]);
+        if (typeof skey === 'string' && skey !== '') {
+            const sdata = $.base64.decode(skey).split(";");
+            this.User.ID = sdata[0];
+            this.User.UID = parseInt(sdata[1], 10);
+            this.User.GID = parseInt(sdata[2], 10);
+            this.User.Level = parseInt(sdata[3], 10);
         }
     },
-    user_level: function(l) {
-        if (this.User.Level <= (l ?? 9)) return true;
-        return false;
+
+    user_level(l = 9) {
+        return this.User.Level <= l;
     },
-    user_level_not: function(l) {
-        if (this.User.Level !== (l ?? 9)) return true;
-        return false;
+
+    user_level_not(l = 9) {
+        return this.User.Level !== l;
     },
-    callMenu: function(p, q) {
-        var apar = ["p=" + p];
-        if (q !== null) apar.push("q=" + q);
+
+    callMenu(p, q) {
+        const sendParam = [`p=${p}`];
+        if (q !== null) sendParam.push(`q=${q}`);
+
         new Request({
             url: "auth/menu",
-            sendParam: apar,
+            sendParam,
             onSuccess: (apop) => {
-                if (apop.login == false) {
+                if (apop.login === false) {
                     this.showErrorLocale("Fonia.sess_expire");
                     setTimeout(() => { self.location = self.location.href; }, 1600);
                     return false;
                 }
-                if (apop.php === "" || !window[apop.func]) {
+                if (!apop.php || !window[apop.func]) {
                     this.showErrorLocale("Fonia.page404");
                     return false;
                 }
                 window[apop.func]['PHP'] = apop.php;
                 window[apop.func]['KODE'] = apop.kode;
-                if (apop.iswindow === true) {
-                    if (IndexJS.index) IndexJS.index();
-                    new Request({
-                        url: apop.php + '/index',
-                        onSuccess: (ajson) => {
+                const isWin = apop.iswindow === true;
+                if (isWin && IndexJS.index) IndexJS.index();
+                new Request({
+                    url: `${apop.php}/index`,
+                    onSuccess: (ajson) => {
+                        if (isWin) {
                             this.showWindow(apop.kode, apop.title, ajson.html, apop.width, apop.button, () => {
-                                if (typeof window[apop.func]['index'] === 'function') window[apop.func]['index'](q);
+                                _executeFuncByName(`${apop.func}.index`, q);
                             });
-                        }
-                    }).send();
-                } else {
-                    $("#pageToolbarBot").html(this.genToolButton(apop.button));
-                    new Request({
-                        url: apop.php + '/index',
-                        onSuccess: (ajson) => {
+                        } else {
+                            $("#pageToolbarBot").html(this.genToolButton(apop.button));
                             $('#pageContent').html(ajson.html);
-                            if (typeof window[apop.func]['index'] === 'function') window[apop.func]['index'](q);
+                            _executeFuncByName(`${apop.func}.index`, q);
                         }
-                    }).send();
-                }
+                    }
+                }).send();
             }
         }).send();
     },
 
-    loadMenu: function() {
-        $('.mlink').click((e) => {
-            var sbar = $(e.currentTarget).closest('#sidebarMain');
-            var linkid = $(e.currentTarget).attr('id').replace('Link','');
+    loadMenu() {
+        $('.mlink').on('click', (e) => {
+            const sbar = $(e.currentTarget).closest('#sidebarMain');
+            const linkid = e.currentTarget.id.replace('Link', '');
             FoniaJS.callMenu(linkid);
-            if (sbar.length > 0) { sbar.modal('toggle'); }
+            if (sbar.length) sbar.modal('toggle');
         });
-        $('.slink').click((e) => {
-            var ddown = $(e.currentTarget).closest('.dropdown-menu');
-            if (ddown.length > 0) { ddown.dropdown('toggle'); }
+        $('.slink').on('click', (e) => {
+            const ddown = $(e.currentTarget).closest('.dropdown-menu');
+            if (ddown.length) ddown.dropdown('toggle');
+        });
+        $('#HomeLink').on('click', () => {
+            this.closeAllWindows();
+            if (IndexJS.index) IndexJS.index();
+        });
+        $('#ExitLink').on('click', () => {
+            new Request({
+                url: "auth/logout",
+                onFailure: () => { self.location = self.location.href; },
+                onSuccess: (respon) => {
+                    self.location = (respon && respon.nexthost !== '/') ? respon.nexthost : self.location.href;
+                }
+            }).send();
         });
-        if ($('#HomeLink').length){
-            $('#HomeLink').click(() => {
-                this.closeAllWindows();
-                if (IndexJS.index) IndexJS.index();
-            });
-        }
-        if ($('#ExitLink').length) {
-            $('#ExitLink').click(() => {
-                new Request({
-                    url: "auth/logout",
-                    onFailure: () => {
-                        self.location = self.location.href;
-                    },
-                    onSuccess: (respon) => {
-                        var _nurl = self.location.href;
-                        if (typeof respon !== 'undefined' && respon.nexthost !== '/') _nurl = respon.nexthost;
-                        self.location = _nurl;
-                    }
-                }).send();
-            });
-        }
     },
-    showInfo: function(message, wtime) {
-        var _tmpto = $('<div class="toast align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="'+(wtime?wtime:3000)+'"><div class="d-flex"><div class="toast-body me-2">'+message+'</div><button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div></div>').appendTo('#div-toast');
-        _tmpto.on('hidden.bs.toast', (e) => {
-            $(e.currentTarget).remove();
-        });
-        (new bootstrap.Toast(_tmpto)).show();
+
+    _showToast(message, bgClass, wtime = 3000) {
+        const $toast = $(`
+            <div class="toast align-items-center text-white ${bgClass} border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="${wtime}">
+                <div class="d-flex">
+                    <div class="toast-body me-2">${message}</div>
+                    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+        `).appendTo('#div-toast');
+        $toast.on('hidden.bs.toast', (e) => $(e.currentTarget).remove());
+        (new bootstrap.Toast($toast)).show();
     },
-    showError: function(message, wtime) {
-        var _tmpto = $('<div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="'+(wtime?wtime:3000)+'"><div class="d-flex"><div class="toast-body me-2">'+message+'</div><button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div></div>').appendTo('#div-toast');
-        _tmpto.on('hidden.bs.toast', (e) => {
-            $(e.currentTarget).remove();
-        });
-        (new bootstrap.Toast(_tmpto)).show();
+
+    showInfo(message, wtime) {
+        this._showToast(message, 'bg-info', wtime);
     },
-    showInfoLocale: function(tobj, wtime) {
+
+    showError(message, wtime) {
+        this._showToast(message, 'bg-danger', wtime);
+    },
+
+    showInfoLocale(tobj, wtime) {
         this.showInfo(this.locale(tobj), wtime);
     },
-    showErrorLocale: function(tobj, wtime) {
+
+    showErrorLocale(tobj, wtime) {
         this.showError(this.locale(tobj), wtime);
     },
-    showAuth: function(fungcall, ocall, tmsg, bnotsuper, buserover) {
-        var _breq = (ocall == null) ? false : true;
-        var _bsuper = (bnotsuper == null) ? true : !bnotsuper;
-        var _buover = (buserover == null) ? false : buserover;
-        var _tsid = parseInt(Math.random() * 99999999);
-        var _ceksuper = null;
-        var _isi = new String('<div class="row mb-1" id="Auth_SP1"><div class="col-sm-6 col-lg-5 col-form-label">Username</div><div class="col-sm-6 col-lg-7"><input type="text" class="form-control" id="UID" name="UID" value="'+((_bsuper===false)?this.User.ID:'')+'" required="true"></div></div><div class="row mb-1" id="Auth_SP2"><div class="col-sm-6 col-lg-5 col-form-label">Password</div><div class="col-sm-6 col-lg-7"><input type="password" class="form-control" id="PWD" name="PWD" value="" required="true"></div></div><div class="row mb-1 d-none" id="Auth_SP3"><div class="col-12 text-center"><p>'+this.locale("Fonia.auth_wait_msg")+'</p></div></div><hr class="my-2"><div class="row mt-1"><div class="col-4"><button type="button" class="btn btn-outline-primary shadow-none" id="butSReq">Request</button></div><div class="col-8 text-end"><button type="button" class="btn btn-danger me-2" id="butSBatal" data-bs-dismiss="modal">Batal</button><button type="button" class="btn btn-success" id="butSOK">OK</button></div></div>');
-        this.winSAuth = this.showWindow('SAuth', ((this.AUTH_LEVEL < 9 && _bsuper == true) ? this.locale("Fonia.auth_super") : this.locale("Fonia.auth_user")), _isi, 200, '', () => {
-            $('#butSOK').click(() => {
+
+    showAuth(fungcall, ocall, tmsg, bnotsuper, buserover) {
+        const _breq = ocall !== null;
+        const _bsuper = bnotsuper == null ? true : !bnotsuper;
+        const _buover = buserover ?? false;
+        const _tsid = Math.floor(Math.random() * 99999999);
+        let _ceksuper = null;
+        const _isi = `
+            <div class="row mb-1" id="Auth_SP1">
+                <div class="col-sm-6 col-lg-5 col-form-label">Username</div>
+                <div class="col-sm-6 col-lg-7">
+                    <input type="text" class="form-control" id="UID" name="UID" value="${!_bsuper ? this.User.ID : ''}" required="true">
+                </div>
+            </div>
+            <div class="row mb-1" id="Auth_SP2">
+                <div class="col-sm-6 col-lg-5 col-form-label">Password</div>
+                <div class="col-sm-6 col-lg-7">
+                    <input type="password" class="form-control" id="PWD" name="PWD" value="" required="true">
+                </div>
+            </div>
+            <div class="row mb-1 d-none" id="Auth_SP3">
+                <div class="col-12 text-center"><p>${this.locale("Fonia.auth_wait_msg")}</p></div>
+            </div>
+            <hr class="my-2">
+            <div class="row mt-1">
+                <div class="col-4">
+                    <button type="button" class="btn btn-outline-primary shadow-none" id="butSReq">Request</button>
+                </div>
+                <div class="col-8 text-end">
+                    <button type="button" class="btn btn-danger me-2" id="butSBatal" data-bs-dismiss="modal">Batal</button>
+                    <button type="button" class="btn btn-success" id="butSOK">OK</button>
+                </div>
+            </div>`;
+        const authTitle = (this.AUTH_LEVEL < 9 && _bsuper) ? this.locale("Fonia.auth_super") : this.locale("Fonia.auth_user");
+
+        this.winSAuth = this.showWindow('SAuth', authTitle, _isi, 'sm', '', () => {
+            $('#butSOK').on('click', () => {
                 $('#butSOK').prop('disabled', true);
                 new Request({
                     url: "auth/supervisi",
-                    sendParam: ["data=super-check", "UID", "PWD", "SUPER=" + _bsuper, "UOVER=" + _buover],
+                    sendParam: ["data=super-check", "UID", "PWD", `SUPER=${_bsuper}`, `UOVER=${_buover}`],
                     onSuccess: (adata) => {
-                        if (adata.status == 1) {
-                            fungcall();
-                        } else {
-                            this.showError(adata.pesan);
-                        }
+                        if (adata.status === 1) fungcall();
+                        else this.showError(adata.pesan);
                         this.closeWindow(this.winSAuth);
                     }
                 }).send();
             });
-            $('#butSBatal').click(() => {
+            $('#butSBatal').on('click', () => {
                 if (_ceksuper) {
                     clearInterval(_ceksuper);
                     new Request({
                         url: "auth/supervisi",
-                        sendParam: ["data=super-cancel", "KODE=" + ocall.KODE, "REQ_SID=" + this.APP_SID, "REQ=" + _tsid]
+                        sendParam: ["data=super-cancel", `KODE=${ocall.KODE}`, `REQ_SID=${this.APP_SID}`, `REQ=${_tsid}`]
                     }).send();
                 }
             });
-            $('#butSReq').click(() => {
-                if (_breq == false) return false;
-                $('#Auth_SP1').addClass('d-none');
-                $('#Auth_SP2').addClass('d-none');
+            $('#butSReq').on('click', () => {
+                if (!_breq) return false;
+                $('#Auth_SP1, #Auth_SP2').addClass('d-none');
                 $('#Auth_SP3').removeClass('d-none');
                 $('#butSOK').prop('disabled', true);
                 new Request({
                     url: "auth/supervisi",
-                    sendParam: ["data=super-request", "KODE=" + ocall.KODE, "REQ_SID=" + this.APP_SID, "REQ=" + _tsid, "MSG=" + tmsg]
+                    sendParam: ["data=super-request", `KODE=${ocall.KODE}`, `REQ_SID=${this.APP_SID}`, `REQ=${_tsid}`, `MSG=${tmsg}`]
                 }).send();
-                var _cobalagi = 5;
+                let _cobalagi = 5;
                 _ceksuper = setInterval(() => {
-                    $('#butSBatal').html(this.locale("Fonia.cancel") + " (" + _cobalagi + ")");
+                    $('#butSBatal').html(`${this.locale("Fonia.cancel")} (${_cobalagi})`);
                     if (_cobalagi === 0) {
                         clearInterval(_ceksuper);
                         new Request({
                             url: "auth/supervisi",
-                            sendParam: ["data=super-cancel", "KODE=" + ocall.KODE, "REQ_SID=" + this.APP_SID, "REQ=" + _tsid]
+                            sendParam: ["data=super-cancel", `KODE=${ocall.KODE}`, `REQ_SID=${this.APP_SID}`, `REQ=${_tsid}`]
                         }).send();
                         this.closeWindow(this.winSAuth);
                         this.showErrorLocale("Fonia.auth_fail");
@@ -208,7 +239,7 @@ var FoniaJS = {
                     }
                     new Request({
                         url: "auth/supervisi",
-                        sendParam: ["data=request-check", "KODE=" + ocall.KODE, "REQ_SID=" + this.APP_SID, "REQ=" + _tsid],
+                        sendParam: ["data=request-check", `KODE=${ocall.KODE}`, `REQ_SID=${this.APP_SID}`, `REQ=${_tsid}`],
                         onSuccess: (adata) => {
                             if (adata.status === 1) {
                                 clearInterval(_ceksuper);
@@ -222,192 +253,151 @@ var FoniaJS = {
                     }).send();
                 }, 3000);
             });
-            $('#UID').keyup((e) => {
-                if (-1!==$.inArray(e.which, [13,9])) {
-                    if (e.currentTarget.value !== '') $('#PWD').focus();
-                }
+            $('#UID').on('keyup', (e) => {
+                if ([13, 9].includes(e.which) && e.currentTarget.value !== '') $('#PWD').focus();
             });
-            $('#PWD').keyup((e) => {
-                if (e.currentTarget.value === '') return false;
-                if (13 == e.which) $('#butSOK').trigger('click');
+            $('#PWD').on('keyup', (e) => {
+                if (e.currentTarget.value !== '' && e.which === 13) $('#butSOK').trigger('click');
             });
-            if (_bsuper === false) {
-                FoniaJS.setFocus("#PWD");
+            FoniaJS.setFocus(_bsuper === false ? "#PWD" : "#UID");
+        });
+    },
+
+    genWinToolBut(menu) {
+        if (!menu || typeof menu !== 'object') {
+            if (this._debug && menu) console.log('menu not object' + menu);
+            return '';
+        }
+        let ma = ' me-sm-2';
+        let smenu = '<div class="col-12 col-md-auto px-0 text-center text-sm-start">';
+        $(menu).each((i, atom) => {
+            if (Object.keys(atom).length === 0) {
+                smenu += '</div><div class="col-12 col-sm-auto px-0 text-center text-sm-end">';
+                ma = ' ms-sm-2';
             } else {
-                FoniaJS.setFocus("#UID");
+                if (atom.i === 'butTutup' || atom.i === 'butBatal') {
+                    atom.v = atom.i === 'butTutup' ? 'Tutup' : 'Batal';
+                    atom.c = 'danger';
+                    atom.d = '';
+                }
+                const xt = atom?.d !== undefined ? ' data-bs-dismiss="modal"' : '';
+                smenu += `<button type="button" class="btn btn-${atom?.c ?? 'info'} mb-2 mb-sm-0${ma} col-10 col-sm-auto" id="${atom.i}"${xt}>${atom.v}</button>`;
             }
         });
+        return smenu + '</div>';
     },
-    genWinToolBut: function(menu) {
-        if (!menu) return '';
-        var smenu = '';
-        if (typeof menu === 'object'){
-            var ma = ' me-sm-2'; smenu = '<div class="col-12 col-md-auto px-0 text-center text-sm-start">';
-            $(menu).each((i, atom) => {
-                if (Object.keys(atom).length === 0) {
-                    smenu += '</div><div class="col-12 col-sm-auto px-0 text-center text-sm-end">';
-                    ma = ' ms-sm-2';
-                } else {
-                    if (atom.i == 'butTutup') { atom.v='Tutup', atom.c='danger', atom.d='' };
-                    if (atom.i == 'butBatal') { atom.v='Batal', atom.c='danger', atom.d='' };
-                    var _xt = (typeof atom?.d !== 'undefined') ? ' data-bs-dismiss="modal"' : '';
-                    smenu += '<button type="button" class="btn btn-'+(atom?.c ?? 'info')+' mb-2 mb-sm-0'+ma+' col-10 col-sm-auto" id="'+atom.i+'"'+_xt+'>' + atom.v + '</button>';
-                }
-            });
-            smenu += '</div>';
-            return smenu;
-        } else {
-            if (this._debug) console.log('menu not object'+menu);
+
+    genToolButton(menu) {
+        if (!menu || typeof menu !== 'object') {
+            if (this._debug && menu) console.log('menu not object' + menu);
+            return '';
         }
-        return smenu;
-    },
-    genToolButton: function(menu) {
-        if (!menu) return '';
-        var smenu = '';
-        if (typeof menu === 'object'){
-            var ma = ' me-sm-2'; smenu = '<div class="row mt-2 my-sm-2 justify-content-sm-between"><div class="col-sm-6 text-center text-sm-start">';
-            $(menu).each((i, atom) => {
-                if (Object.keys(atom).length === 0) {
-                    smenu += '</div><div class="col-sm-6 text-center text-sm-end">';
-                    ma = ' ms-sm-2';
-                } else {
-                    if (atom.i == 'butTutup') { atom.v='Tutup', atom.c='danger', atom.d='' };
-                    if (atom.i == 'butBatal') { atom.v='Batal', atom.c='danger', atom.d='' };
-                    smenu += '<button type="button" class="btn btn-'+(atom?.c ?? 'info')+' mb-2 mb-sm-0'+ma+' col-10 col-sm-3" id="'+atom.i+'">' + atom.v + '</button>';
+        let ma = ' me-sm-2';
+        let smenu = '<div class="row mt-2 my-sm-2 justify-content-sm-between"><div class="col-sm-6 text-center text-sm-start">';
+        $(menu).each((i, atom) => {
+            if (Object.keys(atom).length === 0) {
+                smenu += '</div><div class="col-sm-6 text-center text-sm-end">';
+                ma = ' ms-sm-2';
+            } else {
+                if (atom.i === 'butTutup' || atom.i === 'butBatal') {
+                    atom.v = atom.i === 'butTutup' ? 'Tutup' : 'Batal';
+                    atom.c = 'danger';
+                    atom.d = '';
                 }
-            });
-            smenu += '</div></div>';
-            return smenu;
-        } else {
-            if (this._debug) console.log('menu not object'+menu);
-        }
-        return smenu;
+                smenu += `<button type="button" class="btn btn-${atom?.c ?? 'info'} mb-2 mb-sm-0${ma} col-10 col-sm-3" id="${atom.i}">${atom.v}</button>`;
+            }
+        });
+        return smenu + '</div></div>';
     },
-    FormDecorated: function() {
+
+    FormDecorated() {
+        const cleanInputVal = (val) => {
+            let res = val.replace(/[^0-9.-]/g, '');
+            if (res.indexOf('-') > 0) res = res.charAt(0) + res.slice(1).replace(/-/g, '');
+            const parts = res.split('.');
+            return parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : res;
+        };
+
         $('input.form-control[class*=integer], input.form-control[class*=angka]').each((i, el) => {
             const elm = $(el);
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('keypress keyup paste', (e) => {
+            if (elm.attr('o3')) return;
+            elm.attr('o3', '1').on('keypress keyup paste', (e) => {
                 elm.val(elm.val().replace(/[^\d].+/, ""));
-                if ((e.which < 48 || e.which > 57)) e.preventDefault();
+                if (e.which < 48 || e.which > 57) e.preventDefault();
             });
         });
-        $('input.form-control[class*=double]').each((i, el) => {
+
+        $('input.form-control[class*=double], input.form-control[type=number]').each((i, el) => {
             const elm = $(el);
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('keypress keyup input', (e) => {
+            if (elm.attr('o3')) return;
+            elm.attr('o3', '1').on('keypress keyup input', (e) => {
                 if (e.type === 'keypress') {
-                    if ((e.which != 45 || elm.val().indexOf('-') != -1) && (e.which != 46 || elm.val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) e.preventDefault();
+                    if ((e.which !== 45 || elm.val().includes('-')) && (e.which !== 46 || elm.val().includes('.')) && (e.which < 48 || e.which > 57)) {
+                        e.preventDefault();
+                    }
                 } else {
-                    var _val = elm.val().replace(/[^0-9.-]/g, '');
-                    if (_val.indexOf('-') > 0) _val = _val.charAt(0) + _val.slice(1).replace(/-/g, '');
-                    var _parts = _val.split('.');
-                    if (_parts.length > 2) _val = _parts[0] + '.' + _parts.slice(1).join('');
-                    elm.val(_val);
-                }
-            });
-            elm.on('blur', () => elm.val( FoniaJS.FloatToStr(elm.val(), 2) ));
-            elm.on('focus', (e) => {
-                elm.val( FoniaJS.StrToFloat(elm.val()) );
-                elm.select();
-                e.preventDefault();
-            });
-        });
-        $('input.form-control[type=number]').each((i, el) => {
-            const elm = $(el);
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('keypress keyup input', (e) => {
-                if (e.type === 'keypress') {
-                    if ((e.which != 45 || elm.val().indexOf('-') != -1) && (e.which != 46 || elm.val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) e.preventDefault();
-                } else {
-                    var _val = elm.val().replace(/[^0-9.-]/g, '');
-                    if (_val.indexOf('-') > 0) _val = _val.charAt(0) + _val.slice(1).replace(/-/g, '');
-                    var _parts = _val.split('.');
-                    if (_parts.length > 2) _val = _parts[0] + '.' + _parts.slice(1).join('');
-                    elm.val(_val);
+                    elm.val(cleanInputVal(elm.val()));
                 }
             });
+
+            if (elm.hasClass('double')) {
+                elm.on('blur', () => elm.val(FoniaJS.FloatToStr(elm.val(), 2)))
+                   .on('focus', (e) => {
+                       elm.val(FoniaJS.StrToFloat(elm.val()));
+                       elm.select();
+                       e.preventDefault();
+                   });
+            }
         });
+
         $('input.form-control, textarea.form-control, select.form-select').each((i, el) => {
             const elm = $(el);
-            const okyup = elm.attr('okyup') ?? '';
-            const oblur = elm.attr('oblur') ?? '';
-            const ochan = elm.attr('ochan') ?? '';
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('keyup blur change', (e) => {
-                if (e.type === 'keyup' && okyup) {
-                    var fnc = okyup.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                        window[fnc[0]][fnc[1]]();
-                    } else console.warn('fungsi '+okyup+' tidak ada !');
-                }
-                if (e.type === 'blur' && oblur) {
-                    var fnc = oblur.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                        window[fnc[0]][fnc[1]]();
-                    } else console.warn('fungsi '+oblur+' tidak ada !');
-                }
-                if (e.type === 'change' && ochan) {
-                    var fnc = ochan.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                        window[fnc[0]][fnc[1]]();
-                    } else console.warn('fungsi '+ochan+' tidak ada !');
-                }
+            if (elm.attr('o3')) return;
+            elm.attr('o3', '1').on('keyup blur change', (e) => {
+                const fnAttr = elm.attr(`o${e.type === 'keyup' ? 'kyup' : e.type === 'blur' ? 'blur' : 'chan'}`);
+                if (fnAttr) _executeFuncByName(fnAttr);
+
                 e.preventDefault();
             });
         });
+
         $('input.form-check-input[type=radio]').each((i, el) => {
             const elm = $(el);
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('click', () => {
-                const oclic = elm.attr('ochan') ?? '';
-                const elp = $('#'+elm.attr('name'));
-                if (elp && elm.is(':checked')) elp.val(elm.val());
-                if (oclic) {
-                    var fnc = oclic.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                        window[fnc[0]][fnc[1]]();
-                    } else console.warn('fungsi '+oclic+' tidak ada !');
-                }
+            if (elm.attr('o3')) return;
+            elm.attr('o3', '1').on('click', () => {
+                const oclic = elm.attr('ochan');
+                const elp = $('#' + elm.attr('name'));
+                if (elp.length && elm.is(':checked')) elp.val(elm.val());
+                if (oclic) _executeFuncByName(oclic);
             });
         });
+
         $('input.form-check-input[type=checkbox]').each((i, el) => {
             const elm = $(el);
-            if ((elm.attr('o3') ?? '') !== '') return;
-            elm.attr('o3', '1');
-            elm.on('change', () => {
+            if (elm.attr('o3')) return;
+            elm.attr('o3', '1').on('change', () => {
                 const odata = JSON.parse(elm.attr('odata') ?? '[]');
-                const ochan = elm.attr('ochan') ?? '';
+                const ochan = elm.attr('ochan');
                 if (odata.length > 0) elm.val(elm.is(':checked') ? odata[0] : odata[1]);
-                if (ochan) {
-                    var fnc = ochan.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                        window[fnc[0]][fnc[1]]();
-                    } else console.warn('fungsi '+ochan+' tidak ada !');
-                }
+                if (ochan) _executeFuncByName(ochan);
             });
         });
-        $('input[class*=error][type=hidden]').each((i, el) => {
-            const elm = $(el);
-            this.showError(elm.val());
-        });
+
+        $('input[class*=error][type=hidden]').each((i, el) => this.showError($(el).val()));
+
         $('.option-tags').each((i, el) => {
             const elm = $(el);
-            if (typeof jQuery.fn.select2 !== 'function') return;
-            var _opts = {tags: false, dropdownAutoWidth: true, width: 'auto', theme: 'bootstrap-5', language: 'id'};
-            var _dmodal = elm.closest('div.modal');
+            if (typeof $.fn.select2 !== 'function') return;
+            const _opts = { tags: false, dropdownAutoWidth: true, width: 'auto', theme: 'bootstrap-5', language: 'id' };
+            const _dmodal = elm.closest('div.modal');
             if (_dmodal.length) _opts.dropdownParent = _dmodal;
-            var _sel2 = elm.select2(_opts);
+            elm.select2(_opts);
             if (elm.prop('required')) elm.removeAttr('required');
-            //_sel2.on('select2:close', (e) =>{ $(e.target).valid(); });
         });
+
         $('[data-toggle="tooltip"]').tooltip();
-        if('function' == typeof jQuery.fn.datepicker){
+
+        if (typeof $.fn.datepicker === 'function') {
             $('.input-group.date').datepicker({
                 format: 'dd-mm-yyyy',
                 weekStart: 1,
@@ -417,246 +407,215 @@ var FoniaJS = {
                 enableOnReadonly: false
             });
         }
-        if ('function' == typeof autosize) autosize($('textarea'));
+        if (typeof autosize === 'function') autosize($('textarea'));
     },
-    RequestParam: function(aparam) {
-        var _cblist = {};
-        var _ohasil = {};
-        $('tbody input[id*="cbox"][type="checkbox"]:checked').map((i, b) => {
+
+    RequestParam(aparam) {
+        const _cblist = {};
+        const _ohasil = {};
+
+        $('tbody input[id*="cbox"][type="checkbox"]:checked').each((i, b) => {
             const arr = b.id.split('_');
             if (!_cblist[arr[0]]) _cblist[arr[0]] = [];
             _cblist[arr[0]].push(arr[2]);
         });
+
         $.each(_cblist, (i, b) => {
-            _ohasil['List_CB_' + i] = b.join();
+            _ohasil[`List_CB_${i}`] = b.join();
         });
-        if (typeof aparam === 'object') {
-            aparam.map(_par => {
-                if (typeof _par !== "string") this.return;
-                var _key = _par, _val = "";
+
+        if (Array.isArray(aparam)) {
+            aparam.forEach(_par => {
+                if (typeof _par !== "string") return;
                 const _ind = _par.indexOf('=');
                 if (_ind !== -1) {
-                    _key = _par.slice(0, _ind);
-                    _val = _par.slice(_ind + 1);
-                } else {
-                    if ($('#'+_par).length) {
-                        _val = $('#'+_par).val();
-                        if (typeof _val === 'undefined') {
-                            _val = ($('#'+_par).is('.integer, .number, .double')) ? 0 : '';
-                        } else {
-                            _val = ($('#'+_par).is('.integer, .number, .double')) ? this.StrToFloat(_val) : encodeURIComponent(_val);
-                        }
+                    _ohasil[_par.slice(0, _ind)] = _par.slice(_ind + 1);
+                } else if ($(`#${_par}`).length) {
+                    const $elem = $(`#${_par}`);
+                    let _val = $elem.val();
+                    const isNum = $elem.is('.integer, .number, .double');
+
+                    if (_val === undefined) {
+                        _val = isNum ? 0 : '';
+                    } else {
+                        _val = isNum ? this.StrToFloat(_val) : encodeURIComponent(_val);
                     }
+                    _ohasil[_par] = _val;
                 }
-                _ohasil[_key] = _val;
             });
         }
-        _ohasil['SID'] = parseInt(Math.random() * 99999999);
+        _ohasil['SID'] = Math.floor(Math.random() * 99999999);
         return _ohasil;
     },
-    StrToFloat: function(str_val) {
-        var nstr = str_val + "";
-        var hasil = "";
-        var fkali = 1;
-        if (nstr.slice(0, 4) == "Rp.") {
-            nstr = nstr.slice(4);
-        }
-        for (var i = 0; i < nstr.length; i++) {
-            if ((parseFloat(nstr.charAt(i))) || (nstr.charAt(i) == "0") || (nstr.charAt(i) == ".")) {
-                hasil += nstr.charAt(i);
-            } else {
-                if ((nstr.charAt(i) == "(") || (nstr.charAt(i) == ")") || (nstr.charAt(i) == "-")) {
-                    fkali = -1;
-                    hasil += "";
-                } else {
-                    if (nstr.charAt(i) == ",") {
-                        hasil += "";
-                    }
-                }
-            }
-        }
-        if (!hasil.indexOf(".") > 0) {
-            hasil += ".00";
-        }
-        return parseFloat(hasil) * fkali;
+
+    StrToFloat(str_val) {
+        if (!str_val) return 0;
+        const pref = /[()-]/.test(str_val) ? '-' : '';
+        return parseFloat(pref + String(str_val).replace(/[(),-]/g, ''));
     },
-    FloatToStr: function(nangka, ndesi) {
-        var nstr = nangka + "";
-        ndesi = (ndesi == null) ? 0 : ndesi;
-        nstr = (Math.round(nstr.replace(/\,/g, "") * Math.pow(10, ndesi)) / Math.pow(10, ndesi)) + "";
-        var x = nstr.split(".");
-        if (!x[0]) {
-            x[0] = "0";
-        }
-        if (!x[1]) {
-            x[1] = "";
-        }
-        var x1 = x[0];
-        if (x1.length > 3) {
-            var rgx = /(\d+)(\d{3})/;
-            while (rgx.test(x1)) {
-                x1 = x1.replace(rgx, "$1" + "," + "$2");
-            }
-        }
-        var x2 = x[1];
-        if (x2.length < ndesi) {
-            var g = x2;
-            for (var i = x2.length + 1; i <= ndesi; i++) {
-                g += "0";
-            }
-            x2 = g;
-        }
-        x2 = "." + x2;
-        if (ndesi == 0) {
-            x2 = "";
-        }
-        return x1 + x2;
+
+    FloatToStr(nangka, ndesi = 2) {
+        const num = nangka ? Number(nangka) : 0;
+        return new Intl.NumberFormat('en-US', {
+            minimumFractionDigits: ndesi,
+            maximumFractionDigits: ndesi
+        }).format(num);
     },
-    formatBytes: function(bytes, deci) {
+
+    formatBytes(bytes, deci = 0) {
         if (bytes === 0) return '0 Bytes';
-        const dm = deci ?? 0;
         const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        return parseFloat((bytes / Math.pow(1024, i)).toFixed(dm)) + ' ' + sizes[i];
+        return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(deci))} ${sizes[i]}`;
     },
-    showConfirm: function(str_judul, str_isi, func_callback, conf_tipe) {
-        var _cfunc = (typeof func_callback == "function") ? func_callback : () => {};
-        var _ctipe = (conf_tipe == null) ? 'modal-warning' : 'modal-'+conf_tipe;
-        var _btipe = (conf_tipe == null) ? 'btn-warning' : 'btn-'+conf_tipe;
-        var _wtxt = 
-            '<div class="modal fade" id="winAPPConf" tabindex="-1" role="dialog" data-bs-keyboard="false" data-bs-show="false" data-bs-backdrop="false" aria-labelledby="winAPPConfLabel" aria-hidden="true">'+
-            '<div class="modal-dialog modal-dialog-centered '+_ctipe+' modal-400" role="document">'+
-            '<div class="modal-content">'+
-            '<div class="modal-header"><h5 class="modal-title" id="winAPPConfLabel">'+str_judul+'</h5><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>'+
-            '<div class="modal-body text-center text-break mh-100">'+str_isi+'</div>'+
-            '<div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button><button type="button" class="btn '+_btipe+' ms-2" id="winConfirmY">Ya</button></div>'+
-            '</div></div></div>';
+
+    showConfirm(str_judul, str_isi, func_callback, conf_tipe) {
+        const _cfunc = typeof func_callback === "function" ? func_callback : () => {};
+        const _ctipe = conf_tipe == null ? 'modal-warning' : `modal-${conf_tipe}`;
+        const _btipe = conf_tipe == null ? 'btn-warning' : `btn-${conf_tipe}`;
+
+        const _wtxt = `
+            <div class="modal fade" id="winAPPConf" tabindex="-1" role="dialog" data-bs-keyboard="false" data-bs-show="false" data-bs-backdrop="false" aria-labelledby="winAPPConfLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered ${_ctipe} modal-400" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="winAPPConfLabel">${str_judul}</h5>
+                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body text-center text-break mh-100">${str_isi}</div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
+                            <button type="button" class="btn ${_btipe} ms-2" id="winConfirmY">Ya</button>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
+
         if ($('#winAPPConf').length) $('#winAPPConf').modal('dispose').remove();
-        $(_wtxt).on('shown.bs.modal', (e) => {
-            $('#winConfirmY').focus();
-            $('#winConfirmY').click((e) => {
+
+        $(_wtxt).on('shown.bs.modal', () => {
+            $('#winConfirmY').focus().on('click', () => {
                 _cfunc();
                 $('#winAPPConf').modal('hide');
             });
         }).modal('show');
     },
-    showWindow: function(id_wind, s_judul, s_isi, i_width, s_toolb, f_onload, f_offload, b_scroll) {
-        var t_width = '', t_toolb = '', t_scroll = (typeof b_scroll == 'boolean' && b_scroll == false) ? '' : 'modal-dialog-scrollable';
-        var f_oncall = (typeof f_onload == "function") ? f_onload : function(){};
-        var f_offcall = (typeof f_offload == "function") ? f_offload : function(){};
-        if (typeof i_width == 'string') { t_width = 'modal-'+i_width; } else
-        if (i_width <= 300) { t_width = 'modal-sm'; } else
-        if (i_width <= 400) { t_width = 'modal-400'; } else
-        if (i_width <= 500) { t_width = 'modal-500'; } else
-        if (i_width <= 800) { t_width = 'modal-lg'; } else
-        if (i_width <= 1200) { t_width = 'modal-xl'; } else
-        if (i_width > 1200) { t_width = 'modal-fs'; }
-        if (typeof s_toolb !== 'undefined' && s_toolb !== '' && s_toolb !== null) {
-            t_toolb = '<div class="modal-footer justify-content-sm-between">';
-            t_toolb += this.genWinToolBut(s_toolb);
-            t_toolb += '</div>';
+
+    showWindow(id_wind, s_judul, s_isi, i_width, s_toolb, f_onload, f_offload, b_scroll) {
+        let t_width = '';
+        const t_scroll = b_scroll === false ? '' : 'modal-dialog-scrollable';
+        const f_oncall = typeof f_onload === "function" ? f_onload : () => {};
+        const f_offcall = typeof f_offload === "function" ? f_offload : () => {};
+
+        if (typeof i_width === 'string') t_width = `modal-${i_width}`;
+        else if (i_width <= 300) t_width = 'modal-sm';
+        else if (i_width <= 400) t_width = 'modal-400';
+        else if (i_width <= 500) t_width = 'modal-500';
+        else if (i_width <= 800) t_width = 'modal-lg';
+        else if (i_width <= 1200) t_width = 'modal-xl';
+        else t_width = 'modal-fs';
+
+        let t_toolb = '';
+        if (s_toolb) {
+            t_toolb = `<div class="modal-footer justify-content-sm-between">${this.genWinToolBut(s_toolb)}</div>`;
         }
-        var _wtxt = 
-            '<div class="modal fade" id="win'+id_wind+'" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static" aria-labelledby="win'+id_wind+'Label" aria-hidden="true">'+
-            '<div class="modal-dialog modal-dialog-centered '+t_scroll+' '+t_width+'">'+
-            '<div class="modal-content">'+
-            '<div class="modal-header"><h5 class="modal-title" id="win'+id_wind+'Label">'+s_judul+'</h5><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>'+
-            '<div class="modal-body">'+s_isi+'</div>'+ t_toolb +
-            '</div></div></div>';
-        if ($('#win'+id_wind).length) $('#win'+id_wind).modal('dispose').remove();
-        $(_wtxt).on('shown.bs.modal', (e) => {
+
+        const _wtxt = `
+            <div class="modal fade" id="win${id_wind}" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static" aria-labelledby="win${id_wind}Label" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered ${t_scroll} ${t_width}">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="win${id_wind}Label">${s_judul}</h5>
+                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">${s_isi}</div>
+                        ${t_toolb}
+                    </div>
+                </div>
+            </div>`;
+
+        if ($(`#win${id_wind}`).length) $(`#win${id_wind}`).modal('dispose').remove();
+
+        $(_wtxt).on('shown.bs.modal', () => {
             f_oncall();
             FoniaJS.FormDecorated();
         }).on('hidden.bs.modal', (e) => {
             f_offcall();
             $(e.currentTarget).remove();
         }).modal('show');
-        return '#win'+id_wind;
+
+        return `#win${id_wind}`;
     },
-    closeWindow: function(elWin) {
+
+    closeWindow(elWin) {
         if ($(elWin).length) $(elWin).modal('hide');
     },
-    closeAllWindows: function() {
+
+    closeAllWindows() {
         $(".modal").each((i, el) => {
-            if ($(el).hasClass('show')) $(el).modal('toggle');
-            if ($(el).attr('id')!=='sidebarMain') $(el).modal('dispose').remove();
+            const $el = $(el);
+            if ($el.hasClass('show')) $el.modal('toggle');
+            if ($el.attr('id') !== 'sidebarMain') $el.modal('dispose').remove();
         });
-        $(".fon-autotext", ".fon-autopos").each((i, el) => {
-            $(el).remove();
-        });
-        if ($("#dataPrint").length) {
-            $("#dataPrint").empty();
-        }
+        $(".fon-autotext, .fon-autopos").remove();
+        if ($("#dataPrint").length) $("#dataPrint").empty();
     },
-    setFocus: function(obj) {
+
+    setFocus(obj) {
         $(obj).select().focus();
     },
-    lPad: function(n, width, z) {
-        z = z || "0";
-        n = n + "";
-        return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+
+    lPad(n, width, z = "0") {
+        return String(n).padStart(width, z);
     },
-    setCookie: function(cname, cvalue, exdays) {
-        var d = new Date();
+
+    setCookie(cname, cvalue, exdays) {
+        const d = new Date();
         d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
-        var expires = "expires="+d.toUTCString();
-        document.cookie = 'f' + this.APP_ID + '_' + cname + "=" + cvalue + ";" + expires + ";path=/";
+        document.cookie = `f${this.APP_ID}_${cname}=${cvalue};expires=${d.toUTCString()};path=/`;
     },
-    getCookie: function(cname) {
-        var name = 'f' + this.APP_ID + '_' + cname + "=";
-        var ca = document.cookie.split(';');
-        for (var i = 0; i < ca.length; i++) {
-            var c = ca[i];
-            while (c.charAt(0) == ' ') {
-                c = c.substring(1);
-            }
-            if (c.indexOf(name) == 0) {
-                return c.substring(name.length, c.length);
-            }
+
+    getCookie(cname) {
+        const name = `f${this.APP_ID}_${cname}=`;
+        const ca = document.cookie.split(';');
+        for (let c of ca) {
+            c = c.trim();
+            if (c.indexOf(name) === 0) return c.substring(name.length);
         }
         return "";
     },
-    locale: function(key, oset){
+
+    locale(key, oset) {
         if (typeof oset === "object") {
             this.locales[key] = oset;
-            if (this.deflocal == '') this.deflocal = key;
+            if (this.deflocal === '') this.deflocal = key;
         } else {
             if (!this.locales[this.deflocal]) return "";
-            return key.split('.').reduce(function (cur, key) {
-                return cur[key];
-            }, this.locales[this.deflocal]);
+            return key.split('.').reduce((cur, k) => cur?.[k], this.locales[this.deflocal]);
         }
     },
-    AutoComplete: function(elm, turl, aparam, func_comp, func_key){
-        var objComp = {};
-        objComp = {
+
+    AutoComplete(elm, turl, aparam, options) {
+        let objComp = {
             preventEnter: true,
             resolverSettings: {
                 url: turl,
-                param: (typeof aparam === 'object') ? aparam : []
+                param: Array.isArray(aparam) || typeof aparam === 'object' ? aparam : []
             }
         };
-        if ('object' === typeof func_comp){
-            objComp = $.extend(true, {}, objComp, func_comp);
-        } else {//compatible
-            if ('function' === typeof func_key) objComp.keyFunc = func_key;
-            if ('function' === typeof func_comp) objComp.selectFunc = func_comp;
-        }
-        $(elm).nextAll('div.bootstrap-autocomplete').remove();
-        $(elm).off();
-        //fixed hidden on modal
-        var _dbody = $(elm).closest('div.modal-body');
-        var _dcont = $(elm).closest('div.modal-content');
-        if (_dbody.length) $(_dbody).css('overflow', 'visible');
-        if (_dcont.length) $(_dcont).css('overflow', 'visible');
+        if (typeof options === 'object') objComp = $.extend(true, {}, objComp, options);
+        
+        $(elm).off().nextAll('div.bootstrap-autocomplete').remove();
+        $(elm).closest('div.modal-body, div.modal-content').css('overflow', 'visible');
         new AutoComplete(elm, objComp);
     },
-    getAppID: function() {
+
+    getAppID() {
         return this.APP_ID;
     }
 };
 
-class _Request {
+class Request {
     options = {
         url: '',
         sendParam: [],
@@ -664,7 +623,7 @@ class _Request {
         onFailure: () => {},
         data: null,
         dataType: 'json'
-    }
+    };
 
     constructor(options) {
         $.extend(this.options, options);
@@ -672,7 +631,7 @@ class _Request {
 
     send() {
         if (!this.options.url) {
-            console.log(this.options.sendParam + ", cek url php!");
+            console.log(`${this.options.sendParam}, cek url php!`);
             return false;
         }
         this.options.data = $.extend(this.options.data, FoniaJS.RequestParam(this.options.sendParam));
@@ -680,26 +639,26 @@ class _Request {
             type: 'POST',
             url: this.options.url,
             data: this.options.data,
-            success: (typeof this.options.onSuccess === "function") ? this.options.onSuccess : () => {},
-            error: (typeof this.options.onFailure === "function") ? this.options.onFailure : () => {},
-            complete: FoniaJS.FormDecorated,
+            success: typeof this.options.onSuccess === "function" ? this.options.onSuccess : () => {},
+            error: typeof this.options.onFailure === "function" ? this.options.onFailure : () => {},
+            complete: FoniaJS.FormDecorated(),
             dataType: this.options.dataType
         });
         return this;
     }
-};
+}
 
-class _Request_JSONF extends _Request {
+class Request_JSF extends Request {
     constructor(options) {
         const _options = Object.assign({}, options);
         _options.onSuccess = (data) => {
-            if (data.length > 0) {
-                $(data).each((i, ini) => {
-                    if (ini.type == "table" && $(ini.id)) this.make_table(ini);
-                    if (ini.type == "form" && $(ini.id)) this.make_form(ini);
-                    if (ini.type == "option" && $(ini.id)) this.make_option(ini);
-                    if (ini.type == "html" && $(ini.id)) this.make_html(ini);
-                    if (ini.type == "msg") this.show_msg(ini);
+            if (data?.length > 0) {
+                data.forEach((ini) => {
+                    if (ini.type === "table" && $(ini.id)) this.make_table(ini);
+                    if (ini.type === "form" && $(ini.id)) this.make_form(ini);
+                    if (ini.type === "option" && $(ini.id)) this.make_option(ini);
+                    if (ini.type === "html" && $(ini.id)) this.make_html(ini);
+                    if (ini.type === "msg") this.show_msg(ini);
                 });
             }
             if (typeof options.onSuccess === "function") options.onSuccess(data);
@@ -707,34 +666,33 @@ class _Request_JSONF extends _Request {
         super(_options);
     }
 
-    show_msg (ini) {
-        var wtime = parseInt(ini.wait);
-        if (ini.mode == "error") {
-            FoniaJS.showError(ini.value, wtime);
-        } else {
-            FoniaJS.showInfo(ini.value, wtime);
-        }
+    show_msg(ini) {
+        const wtime = parseInt(ini.wait, 10);
+        if (ini.mode === "error") FoniaJS.showError(ini.value, wtime);
+        else FoniaJS.showInfo(ini.value, wtime);
     }
-    make_html (ini) {
-        $('#'+ini.id).html(ini.value);
+
+    make_html(ini) {
+        $(`#${ini.id}`).html(ini.value);
     }
-    make_form (ini) {
-        var formIni = $('#'+ini.id);
+
+    make_form(ini) {
+        const formIni = $(`#${ini.id}`);
         formIni.val(ini.value);
-        if (ini.css) {
-            formIni.prop('disabled', ini.css=='disabled');
-        }
+        if (ini.css) formIni.prop('disabled', ini.css === 'disabled');
     }
-    make_option (ini) {
-        var optIni = $('#'+ini.id);
-        if (!optIni) return;
+
+    make_option(ini) {
+        const optIni = $(`#${ini.id}`);
+        if (!optIni.length) return;
+
         if (ini.avalue) {
             optIni.empty();
-            var o_group = 0;
-            $(ini.avalue).each((n, i) => {
+            let o_group = 0;
+            ini.avalue.forEach((i) => {
                 if (i.optgroup) {
                     if (0 < o_group++) optIni.append('</optgroup>');
-                    optIni.append('<optgroup label="'+i.optgroup+'">');
+                    optIni.append(`<optgroup label="${i.optgroup}">`);
                     return;
                 }
                 optIni.append($('<option>', {
@@ -743,104 +701,129 @@ class _Request_JSONF extends _Request {
             });
             if (o_group > 0) optIni.append('</optgroup>');
         }
-        if (ini.value) {
-            optIni.val(ini.value);
-        }
+        if (ini.value) optIni.val(ini.value);
         optIni.trigger('change');
     }
-    make_table (ini) {
-        var divData = $('#'+ini.id).empty();
-        var strHead = '<thead><tr>', iCol = 0, sClass = '', aSortCol = [], aTombol = [];
+
+    make_table(ini) {
+        const divData = $(`#${ini.id}`).empty();
+        let strHead = '<thead><tr>', iCol = 0, aSortCol = [], aTombol = [];
+
         $(ini.header).each((key, val) => {
-            if (val.o == ini.config.sort_col) iCol = key;
-            strHead += '<th data-class-name="'+val.f+'">'+val.c+'</th>';
-            aSortCol.push((val.s ? { 'orderDataType': val.s } : null));
+            if (val.o === ini.config.sort_col) iCol = key;
+            strHead += `<th data-class-name="${val.f}">${val.c}</th>`;
+            aSortCol.push(val.s ? { 'orderDataType': val.s } : null);
         });
+
+        let ChkField = '';
         if (ini.option.length > 0) {
-            var strAksi = 'Aksi', ChkField = '';
+            let strAksi = 'Aksi';
             $(ini.option).each((key, val) => {
-                if (val.type == 'checkbox'){
-                    strAksi = '<input class="form-check-input" type="checkbox" id="'+ini.id+'_cbhead_'+val.field+'" value="'+val.avalue[1]+'">';
+                if (val.type === 'checkbox') {
+                    strAksi = `<input class="form-check-input" type="checkbox" id="${ini.id}_cbhead_${val.field}" value="${val.avalue[1]}">`;
                     ChkField = val.field;
                 }
-                if ($.inArray(val.type,['button','button-dt'])!==-1) aTombol[val.icon] = [val.label, (val.type=='button'?0:1)];
+                if (['button', 'button-dt'].includes(val.type)) {
+                    aTombol[val.icon] = [val.label, val.type === 'button' ? 0 : 1];
+                }
             });
-            strHead += '<th data-class-name="c">'+strAksi+'</th>';
+            strHead += `<th data-class-name="c">${strAksi}</th>`;
         } else {
             strHead += '<th data-class-name="hid">&nbsp;</th>';
         }
-        aSortCol.push({'orderable': false});
+        aSortCol.push({ 'orderable': false });
         strHead += '</tr></thead>';
 
-        var strFoot = '';
+        let strFoot = '';
         if (ini.footer) {
             strFoot = '<tfoot><tr>';
             $(ini.footer).each((key, val) => {
-                strFoot += '<th class="'+ini.header[key].f+'">'+val.c+'</th>';
+                strFoot += `<th class="${ini.header[key].f}">${val.c}</th>`;
             });
             strFoot += '<th>&nbsp;</th></tr></tfoot>';
         }
 
-        var sClass = '';
-        if (ini.config.css) sClass += ' '+ini.config.css;
+        let sClass = ini.config.css ? ` ${ini.config.css}` : '';
         if (ini.config.func_select) sClass += ' table-select';
-        var strTab = '<table id="'+ini.id+'Tabel" class="table table-striped table-bordered table-hover'+sClass+'">';
+        const strTab = `<table id="${ini.id}Tabel" class="table table-striped table-bordered table-hover${sClass}">`;
 
-        var strBody = '<tbody>';
+        let strBody = '<tbody>';
         $(ini.content).each((key, val) => {
             strBody += '<tr>';
-            $(val).each((keyi, vali) => {
-                if (keyi == 0) return;
-                strBody += '<td>' + vali + '</td>';
+            val.forEach((vali, keyi) => {
+                if (keyi === 0) return;
+                strBody += `<td>${vali}</td>`;
             });
-            var _tbtn1 = "", _tbtn2 = "";
-            if (val[0].rowcss) {
-                _tbtn1 += '<span class="rowcss '+val[0].rowcss+'"></span>';
-            }
+
+            let _tbtn1 = "", _tbtn2 = "";
+            if (val[0].rowcss) _tbtn1 += `<span class="rowcss ${val[0].rowcss}"></span>`;
+
             if (ini.option.length > 0) {
                 if (val[0].button.length > 0) {
-                    $(val[0].button).each((keyb, valb) => {
-                        var _link = (aTombol[valb[0]][1]==1) ? 'fon-tabel-dt' : valb[0];
-                        var _cssa = (valb[1]=='') ? '' : ' text-'+valb[1];
-                        var _cssb = (valb[1]=='') ? ' normal' : ' btn-'+valb[1];
+                    val[0].button.forEach((valb) => {
+                        const _link = aTombol[valb[0]][1] === 1 ? 'fon-tabel-dt' : valb[0];
+                        const _cssa = valb[1] === '' ? '' : ` text-${valb[1]}`;
+                        const _cssb = valb[1] === '' ? ' normal' : ` btn-${valb[1]}`;
                         if (ini.config.txtbutton === true) {
-                            _tbtn1 += '<button class="btn tbl-rowbtn d-none d-lg-inline-block '+_link+_cssb+' me-2'+(val[0].button.length>1?' mb-2':'')+'" type="button">'+aTombol[valb[0]][0]+'</button>';
-                            _tbtn2 += '<a class="table-icon d-lg-none '+_link+_cssa+'" tabindex="-1" title="'+aTombol[valb[0]][0]+'"><i class="bi-'+valb[0]+'"></i></a>';
+                            _tbtn1 += `<button class="btn tbl-rowbtn d-none d-lg-inline-block ${_link}${_cssb} me-2${val[0].button.length > 1 ? ' mb-2' : ''}" type="button">${aTombol[valb[0]][0]}</button>`;
+                            _tbtn2 += `<a class="table-icon d-lg-none ${_link}${_cssa}" tabindex="-1" title="${aTombol[valb[0]][0]}"><i class="bi-${valb[0]}"></i></a>`;
                         } else {
-                            _tbtn2 += '<a class="table-icon '+_link+_cssa+'" title="'+aTombol[valb[0]][0]+'"><i class="bi-'+valb[0]+'"></i></a>';
+                            _tbtn2 += `<a class="table-icon ${_link}${_cssa}" title="${aTombol[valb[0]][0]}"><i class="bi-${valb[0]}"></i></a>`;
                         }
-                    })
+                    });
                 }
                 if (val[0].checkbox) {
-                    _tbtn1 += '<div><input class="form-check-input" type="checkbox" id="'+ChkField+'_cbox_'+val[0].checkbox.field+'" value="'+val[0].checkbox.value+'"></div>';
+                    _tbtn1 += `<div><input class="form-check-input" type="checkbox" id="${ChkField}_cbox_${val[0].checkbox.field}" value="${val[0].checkbox.value}"></div>`;
                 }
             }
-            strBody += '<td class="'+(ini.config.txtbutton===true?'':'text-nowrap')+'">'+_tbtn1+_tbtn2+'</td></tr>';
+            strBody += `<td class="${ini.config.txtbutton === true ? '' : 'text-nowrap'}">${_tbtn1}${_tbtn2}</td></tr>`;
         });
         strBody += '</tbody>';
 
-        $(divData).append(strTab + strHead + strBody + strFoot + '</table>');
-        var opsi = { responsive: true, columnDefs: [{responsivePriority:1,targets:0},{responsivePriority:2,targets:1},{responsivePriority:0,targets:-1}], lengthMenu: [], dom: '<"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-lg-auto"<"toolbar">><"col-sm-3 col-lg-auto ms-lg-auto"l><"col-sm-9 col-lg-auto"p>>', autoWidth: false, processing: true, searching: false, columns: aSortCol, order: [[iCol, (ini.config.sort_dir=='A'?'asc':'desc')]], pageLength: ini.config.row_count, stateSave: true, stateSaveCallback: function(sett,data){localStorage.setItem(ini.id,JSON.stringify(data));}, stateLoadCallback: function(sett){try{var data=JSON.parse(localStorage.getItem(ini.id))??{};data.length=ini.config.row_count;return data;}catch(e){console.log(e)}} };
-        /** start live db **/
-        if (ini.config.live){
-            $(this.options.data).map((key, val) => {
-                if (key === 'SID') val = parseInt(Math.random() * 99999999);
-                // fixed bug for duplicate saving
-                if (key === 'mode_detail') val = 'live-data';
-                //if ((''+val).indexOf('%') != -1) val = decodeURIComponent(val);
+        $(divData).append(`${strTab}${strHead}${strBody}${strFoot}</table>`);
+
+        const opsi = {
+            responsive: true,
+            columnDefs: [{ responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: 1 }, { responsivePriority: 0, targets: -1 }],
+            lengthMenu: [],
+            dom: '<"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-lg-auto"<"toolbar">><"col-sm-3 col-lg-auto ms-lg-auto"l><"col-sm-9 col-lg-auto"p>>',
+            autoWidth: false,
+            processing: true,
+            searching: false,
+            columns: aSortCol,
+            order: [[iCol, ini.config.sort_dir === 'A' ? 'asc' : 'desc']],
+            pageLength: ini.config.row_count,
+            stateSave: true,
+            stateSaveCallback: (sett, data) => localStorage.setItem(ini.id, JSON.stringify(data)),
+            stateLoadCallback: () => {
+                try {
+                    const data = JSON.parse(localStorage.getItem(ini.id)) ?? {};
+                    data.length = ini.config.row_count;
+                    return data;
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        };
+
+        if (ini.config.live) {
+            $.each(this.options.data, (key, val) => {
+                if (key === 'SID') this.options.data[key] = Math.floor(Math.random() * 99999999);
+                if (key === 'mode_detail') this.options.data[key] = 'live-data';
             });
+
             opsi.serverSide = true;
             opsi.ajax = {
                 url: this.options.url,
                 type: 'POST',
                 data: this.options.data,
                 dataFilter: (data) => {
-                    var json = {}, jsono = {'draw':0,'recordsTotal':0,'recordsFiltered':0,'data':[]};
+                    let jsono = { 'draw': 0, 'recordsTotal': 0, 'recordsFiltered': 0, 'data': [] };
                     try {
-                        json = JSON.parse(data);
-                        if (!jQuery.isEmptyObject(json) && json.length > 0){
-                            $(json).each((i, lini) => {
-                                if (lini.type == 'table-live' && lini.id == ini.id) {
+                        const json = JSON.parse(data);
+                        if (!$.isEmptyObject(json) && json.length > 0) {
+                            json.forEach((lini) => {
+                                if (lini.type === 'table-live' && lini.id === ini.id) {
                                     jsono.draw = lini.config.draw;
                                     jsono.recordsTotal = lini.config.recordsTotal;
                                     jsono.recordsFiltered = lini.config.recordsFiltered;
@@ -848,311 +831,243 @@ class _Request_JSONF extends _Request {
                                 }
                             });
                         }
-                    } catch (e){
+                    } catch (e) {
                         console.log(e);
                     }
 
-                    $(jsono.data).map((key, val) => {
-                        var optval = val[0]; jsono.data[key].shift();
-                        var _tbtn1 = "", _tbtn2 = "";
-                        if (optval.rowcss) {
-                            _tbtn1 += '<span class="rowcss '+optval.rowcss+'"></span>';
-                        }
+                    jsono.data.forEach((val, key) => {
+                        const optval = val[0];
+                        jsono.data[key].shift();
+                        let _tbtn1 = "", _tbtn2 = "";
+
+                        if (optval.rowcss) _tbtn1 += `<span class="rowcss ${optval.rowcss}"></span>`;
                         if (ini.option.length > 0) {
                             if (optval.button.length > 0) {
-                                $(optval.button).map((keyb, valb) => {
-                                    var _link = (aTombol[valb[0]][1]==1) ? 'fon-tabel-dt' : valb[0];
-                                    var _cssa = (valb[1]=='') ? '' : ' text-'+valb[1];
-                                    var _cssb = (valb[1]=='') ? ' normal' : ' btn-'+valb[1];
+                                optval.button.forEach((valb) => {
+                                    const _link = aTombol[valb[0]][1] === 1 ? 'fon-tabel-dt' : valb[0];
+                                    const _cssa = valb[1] === '' ? '' : ` text-${valb[1]}`;
+                                    const _cssb = valb[1] === '' ? ' normal' : ` btn-${valb[1]}`;
                                     if (ini.config.txtbutton === true) {
-                                        _tbtn1 += '<button class="btn tbl-rowbtn d-none d-lg-inline-block '+_link+_cssb+' me-2'+(optval.button.length>1?' mb-2':'')+'" type="button">'+aTombol[valb[0]][0]+'</button>';
-                                        _tbtn2 += '<a class="table-icon d-lg-none '+_link+_cssa+'" tabindex="-1" title="'+aTombol[valb[0]][0]+'"><i class="bi-'+valb[0]+'"></i></a>';
+                                        _tbtn1 += `<button class="btn tbl-rowbtn d-none d-lg-inline-block ${_link}${_cssb} me-2${optval.button.length > 1 ? ' mb-2' : ''}" type="button">${aTombol[valb[0]][0]}</button>`;
+                                        _tbtn2 += `<a class="table-icon d-lg-none ${_link}${_cssa}" tabindex="-1" title="${aTombol[valb[0]][0]}"><i class="bi-${valb[0]}"></i></a>`;
                                     } else {
-                                        _tbtn2 += '<a class="table-icon '+_link+_cssa+'" title="'+aTombol[valb[0]][0]+'"><i class="bi-'+valb[0]+'"></i></a>';
+                                        _tbtn2 += `<a class="table-icon ${_link}${_cssa}" title="${aTombol[valb[0]][0]}"><i class="bi-${valb[0]}"></i></a>`;
                                     }
-                                })
+                                });
                             }
                             if (optval.checkbox) {
-                                _tbtn1 += '<div><input class="form-check-input" type="checkbox" id="'+ChkField+'_cbox_'+optval.checkbox.field+'" value="'+optval.checkbox.value+'"></div>';
+                                _tbtn1 += `<div><input class="form-check-input" type="checkbox" id="${ChkField}_cbox_${optval.checkbox.field}" value="${optval.checkbox.value}"></div>`;
                             }
                         }
-                        jsono.data[key].push(_tbtn1+_tbtn2);
+                        jsono.data[key].push(_tbtn1 + _tbtn2);
                     });
                     return JSON.stringify(jsono);
                 }
             };
         }
-        /** end live db **/
-        if (ini.option.length > 0) opsi.columnDefs.push({responsivePriority:3,targets:-1}, {orderable:false,targets:-1});
-        if (ini.navi.no_navi == true) opsi.paging = false;
 
-        if (ini.config.scrollbar == true) {
+        if (ini.option.length > 0) opsi.columnDefs.push({ responsivePriority: 3, targets: -1 }, { orderable: false, targets: -1 });
+        if (ini.navi.no_navi === true) opsi.paging = false;
+
+        if (ini.config.scrollbar === true) {
             opsi.scrollY = ini.config.scroll_height;
             opsi.deferRender = true;
             opsi.scroller = { loadingIndicator: true };
         }
 
-        var _navibar = '';
+        let _navibar = '';
         if (ini.navi.button) {
-            var _dis = '', _bcss = 'btn-info';
-            if (ini.config.nobutton === true){
-                _dis = ' disabled=true';
-                _bcss = 'btn-secondary';
-            }
+            const _dis = ini.config.nobutton === true ? ' disabled=true' : '';
+            const _bcss = ini.config.nobutton === true ? 'btn-secondary' : 'btn-info';
             _navibar += '<div class="row"><div class="col">';
-            $(ini.navi.button).map((key, val) => {
-                _navibar += '<button type="button" class="btn rounded-pill '+_bcss+' me-2 navi-btn-'+key+'"'+_dis+'>'+val.label+'</button>';
+            ini.navi.button.forEach((val, key) => {
+                _navibar += `<button type="button" class="btn rounded-pill ${_bcss} me-2 navi-btn-${key}"${_dis}>${val.label}</button>`;
             });
             _navibar += '</div></div>';
         }
-        opsi.initComplete = function(settings,json){
+
+        opsi.initComplete = () => {
             if (ini.navi.button) {
-                $('#'+ini.id+'Tabel_wrapper div.toolbar').html(_navibar);
-                // apply navi button
-                if (ini.navi.button.length > 0){
-                    $(ini.navi.button).map((key, val) => {
-                        $('#'+ini.id+'Tabel_wrapper div.toolbar button[class*=navi-btn-'+key+']').on('click', (e) => {
+                $(`#${ini.id}Tabel_wrapper div.toolbar`).html(_navibar);
+                if (ini.navi.button.length > 0) {
+                    ini.navi.button.forEach((val, key) => {
+                        $(`#${ini.id}Tabel_wrapper div.toolbar button[class*=navi-btn-${key}]`).on('click', (e) => {
                             e.preventDefault();
-                            var fnc = val.func.split('.');
-                            if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                                window[fnc[0]][fnc[1]]();
-                            } else console.warn('fungsi '+val.func+' tidak ada !');
+                            _executeFuncByName(val.func);
                         });
                     });
                 }
             }
-        }
-        opsi.drawCallback = function(settings){
-            // apply rowcss to tr/row
-            $('#'+ini.id+'Tabel tbody td:last-child:has(span.rowcss)').map((i, el) => {
-                var span = $(el).find('span').attr('class').replace('rowcss ','');
+        };
+
+        opsi.drawCallback = () => {
+            $(`#${ini.id}Tabel tbody td:last-child:has(span.rowcss)`).each((i, el) => {
+                const span = $(el).find('span').attr('class').replace('rowcss ', '');
                 $(el).parent().addClass(span);
             });
-            // create hover title for awr class td
-            $('#'+ini.id+'Tabel tbody td[class*="awr"]').map((i, el) => {
-                $(el).attr('title', $(el).html().replace(/<br\s*[\/]?>/gi,'\n').replace(/(<([^>]+)>)/gi,''));
+
+            $(`#${ini.id}Tabel tbody td[class*="awr"]`).each((i, el) => {
+                const $el = $(el);
+                $el.attr('title', $el.html().replace(/<br\s*[\/]?>/gi, '\n').replace(/(<([^>]+)>)/gi, ''));
             });
-            // generate pagelength option
-            var api = this.api(), menudiv = $('select[name="'+ini.id+'Tabel_length"]');
-            var record = api.page.info().recordsTotal ?? 0, _lmenu = [];
-            $([10,25,50,100]).map((key, val) => {
-                if (val > record && 10 < val) return false;
-                _lmenu.push(val);
+
+            const api = this.api();
+            const menudiv = $(`select[name="${ini.id}Tabel_length"]`);
+            const record = api.page.info().recordsTotal ?? 0;
+            const _lmenu = [];
+
+            [10, 25, 50, 100].forEach((val) => {
+                if (val <= record || val === 10) _lmenu.push(val);
             });
-            if (10 < record && $.inArray(record, [25,50,100]) == -1){
+
+            if (10 < record && !([25, 50, 100].includes(record))) {
                 _lmenu.push(record);
             }
-            var _select = menudiv.val() ?? 10;
+
+            const _select = menudiv.val() ?? 10;
             menudiv.empty();
-            $(_lmenu).map((key, val) => {
-                $('<option/>', {'value':val, 'text':val}).appendTo(menudiv);
+            _lmenu.forEach((val) => {
+                $('<option/>', { 'value': val, 'text': val }).appendTo(menudiv);
             });
             menudiv.val(_select);
-            // apply select function
-            if (ini.config.func_select){
-                $('#'+ini.id+'Tabel tbody').on('click', 'tr', (e) => {
-                    var elm = $(e.currentTarget);
-                    if ((elm.attr('o3') ?? '') !== '') return;
+
+            if (ini.config.func_select) {
+                $(`#${ini.id}Tabel tbody`).off('click', 'tr').on('click', 'tr', (e) => {
+                    const elm = $(e.currentTarget);
+                    if (elm.attr('o3')) return;
                     elm.attr('o3', '1');
-                    var dta = otabel.row(elm).data();
-                    var fnc = ini.config.func_select.split('.');
-                    if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta); }
-                    else console.warn('fungsi '+ini.config.func_select+' tidak ada !');
+                    _executeFuncByName(ini.config.func_select, otabel.row(elm).data());
                 });
             }
-            // apply option of record / row
-            if (ini.option.length > 0){
-                $('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').off('change');
-                $('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').off('change');
-                $('#'+ini.id+'Tabel tbody').off('click');
-                $(ini.option).map((key, val) => {
-                    if (val.type == 'checkbox'){
-                        $('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').on('change', (e) => {
-                            var _etarg = $(e.currentTarget);
-                            var _chek = _etarg.is(':checked');
+
+            if (ini.option.length > 0) {
+                $(`#${ini.id}Tabel thead input[type=checkbox][id*=_cbhead_]`).off('change');
+                $(`#${ini.id}Tabel tbody input[type=checkbox][id*=_cbox_]`).off('change');
+                $(`#${ini.id}Tabel tbody`).off('click');
+
+                ini.option.forEach((val) => {
+                    if (val.type === 'checkbox') {
+                        $(`#${ini.id}Tabel thead input[type=checkbox][id*=_cbhead_]`).on('change', (e) => {
+                            const _etarg = $(e.currentTarget);
+                            const _chek = _etarg.is(':checked');
                             _etarg.val(_chek ? val.avalue[0] : val.avalue[1]);
-                            $('#'+ini.id+'Tabel tbody input[type=checkbox][id*='+val.field+'_cbox_]').each((i, el) => {
-                                var _el = $(el);
-                                _el.prop('checked', _chek);
-                                _el.val(_el.is(':checked') ? val.avalue[0] : val.avalue[1]);
+                            $(`#${ini.id}Tabel tbody input[type=checkbox][id*=${val.field}_cbox_]`).each((i, el) => {
+                                const _el = $(el);
+                                _el.prop('checked', _chek).val(_chek ? val.avalue[0] : val.avalue[1]);
                             });
                         });
-                        $('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').on('change', (e) => {
-                            var _ctarg = $(e.currentTarget);
-                            _ctarg.val(_ctarg.val() == val.avalue[1] ? val.avalue[0] : val.avalue[1]);
-                            _ctarg.prop('checked', _ctarg.val() == val.avalue[0]);
+                        $(`#${ini.id}Tabel tbody input[type=checkbox][id*=_cbox_]`).on('change', (e) => {
+                            const _ctarg = $(e.currentTarget);
+                            const isZero = _ctarg.val() === val.avalue[1];
+                            _ctarg.val(isZero ? val.avalue[0] : val.avalue[1]).prop('checked', isZero);
                         });
-                    } else if (val.type == 'button'){
-                        $('#'+ini.id+'Tabel tbody').on('click', '.'+val.icon, (e) => {
-                            var dta = otabel.row($(e.currentTarget.closest('tr'))).data();
-                            var fnc = val.func.split('.');
-                            if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta, e.currentTarget); }
-                            else if (typeof window[fnc[0]] === 'function') { window[fnc[0]](dta, e.currentTarget); }
-                            else console.warn('fungsi '+val.func+' tidak ada !');
+                    } else if (val.type === 'button') {
+                        $(`#${ini.id}Tabel tbody`).on('click', `.${val.icon}`, (e) => {
+                            const dta = otabel.row($(e.currentTarget).closest('tr')).data();
+                            _executeFuncByName(val.func, dta, e.currentTarget);
                         });
-                    } else if (val.type == 'button-dt'){
-                        $('#'+ini.id+'Tabel tbody').on('click', '.fon-tabel-dt', (e) => {
-                            var tr = $(e.currentTarget).closest('tr');
-                            var row = otabel.row(tr);
-                            if (row.child.isShown()){
+                    } else if (val.type === 'button-dt') {
+                        $(`#${ini.id}Tabel tbody`).on('click', '.fon-tabel-dt', (e) => {
+                            const tr = $(e.currentTarget).closest('tr');
+                            const row = otabel.row(tr);
+                            if (row.child.isShown()) {
                                 row.child.hide();
                                 tr.removeClass('shown');
-                            }else{
-                                if (otabel.row('.shown').length){
+                            } else {
+                                if (otabel.row('.shown').length) {
                                     $('.fon-tabel-dt', otabel.row('.shown').node()).click();
                                 }
-                                var _dt_id = $('<div id="TD_Fonia_' + parseInt(Math.random() * 99999999) + '" class="fon-tabel-child" />');
+                                const _dt_id = $(`<div id="TD_Fonia_${Math.floor(Math.random() * 99999999)}" class="fon-tabel-child" />`);
                                 row.child(_dt_id).show();
                                 tr.addClass('shown');
-                                var fnc = val.func.split('.');
-                                if (typeof window[fnc[0]][fnc[1]] === 'function'){
-                                    window[fnc[0]][fnc[1]](row.data(), _dt_id);
-                                } else console.warn('fungsi '+val.func+' tidak ada !');
+                                _executeFuncByName(val.func, row.data(), _dt_id);
                             }
                         });
                     }
                 });
             }
-            $('#'+ini.id+'Tabel tbody').on('click', 'td.dtr-control', (e) => {
-                var tr = $(e.currentTarget).closest('tr');
-                var row = otabel.row(tr);
-                if (row.child.isShown()){
+
+            $(`#${ini.id}Tabel tbody`).on('click', 'td.dtr-control', (e) => {
+                const tr = $(e.currentTarget).closest('tr');
+                const row = otabel.row(tr);
+                if (row.child.isShown()) {
                     row.child.hide();
                     tr.removeClass('dt-hasChild parent');
-                }else{
-                    var ind = 0;
-                    var tampil = '<ul class="list-unstyled">';
-                    api.columns().every(function(){
-                        var kol = this.header();
-                        if (kol.className.indexOf('dtr-hidden') != -1){
-                            tampil += '<li class="py-1"><span class="d-inline-block" style="min-width:100px;">' + kol.textContent + '</span><span class="text-break">' + row.data()[ind] + '</span></li>';
+                } else {
+                    let ind = 0;
+                    let tampil = '<ul class="list-unstyled">';
+                    api.columns().every(function() {
+                        const kol = this.header();
+                        if (kol.className.includes('dtr-hidden')) {
+                            tampil += `<li class="py-1"><span class="d-inline-block" style="min-width:100px;">${kol.textContent}</span><span class="text-break">${row.data()[ind]}</span></li>`;
                         }
                         ind++;
-                    })
+                    });
                     tampil += '</ul>';
                     row.child(tampil).show();
                     tr.addClass('dt-hasChild parent');
                 }
             });
-        }
-        var otabel = $('#'+ini.id+'Tabel').DataTable(opsi);
+        };
+
+        const otabel = $(`#${ini.id}Tabel`).DataTable(opsi);
     }
-};
-
-var Request = function (options) {
-    return new _Request(options);
-};
-
-/*
-Request.JSON = function (options) {
-    const _options = Object.assign({}, options, { 'dataType': 'json' });
-    return new _Request(_options);
-};
-
-Request.TEXT = function (options) {
-    const _options = Object.assign({}, options, { 'dataType': 'text' });
-    return new _Request(_options);
-};
-*/
-
-Request.JSONF = function(options){
-    return new _Request_JSONF(options);
 }
 
+//const Request = (options) => new _Request(options);
+//RequestF = (options) => new _Request_JSONF(options);
+
+// jQuery Validator setup
 if (jQuery.validator) {
     jQuery.validator.setDefaults({
         ignore: ':hidden, [readonly=readonly]',
-        submitHandler: function(){
-            return;
-        },
-        invalidHandler: function(){
-            FoniaJS.showError('Mohon lengkapi semua field yang berwarna merah !')
-        },
-        highlight: function highlight(element) {
-            $(element).addClass('is-invalid').removeClass('is-valid');
-        },
-        unhighlight: function unhighlight(element) {
-            $(element).addClass('is-valid').removeClass('is-invalid');
-        },
-        errorPlacement: function(error, element){
-            return;
-        }
+        submitHandler: () => {},
+        invalidHandler: () => FoniaJS.showError('Mohon lengkapi semua field yang berwarna merah !'),
+        highlight: (element) => $(element).addClass('is-invalid').removeClass('is-valid'),
+        unhighlight: (element) => $(element).addClass('is-valid').removeClass('is-invalid'),
+        errorPlacement: () => {}
     });
 
-    jQuery.validator.addMethod('double_id', function(value, el, param) {
-        return this.optional(el) || FoniaJS.StrToFloat(value) >= param;
-    }, 'Nilai lebih dari Nol');
-    jQuery.validator.addMethod('filesize', function(value, el, param) {
-         return this.optional(el) || (el.files[0].size <= param);
-    }, 'Ukuran file tidak diizinkan');
-    jQuery.validator.addMethod('notEqual', function(value, el, param) {
-        return this.optional(el) || value != param;
-    }, 'Ganti pilihan yang lain');
+    jQuery.validator.addMethod('double_id', (value, el, param) => this.optional(el) || FoniaJS.StrToFloat(value) >= param, 'Nilai lebih dari Nol');
+    jQuery.validator.addMethod('filesize', (value, el, param) => this.optional(el) || el.files[0].size <= param, 'Ukuran file tidak diizinkan');
+    jQuery.validator.addMethod('notEqual', (value, el, param) => this.optional(el) || value != param, 'Ganti pilihan yang lain');
 }
 
+// DataTables extension overrides
 if (jQuery.fn.dataTable) {
-    jQuery.fn.dataTable.ext.order['val-emptylast'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var _val = $(td).html();
-            return (_val=='') ? Number.MAX_SAFE_INTEGER : 0;
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-zerolast'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var _val = $(td).html();
-            return (_val==0) ? Number.MAX_SAFE_INTEGER : _val;
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-fnumber'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return val.replace( /[\,]/g, "" );
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-jam'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return moment(val, "HH:mm:ss").format("X");
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-tgl'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return moment(val, "DD-MM-YYYY").format("X");
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-tgljam'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return moment(val, "DD-MM-YYYY HH:mm:ss").format("X");
-        });
-    }
-    jQuery.fn.dataTable.ext.order['val-tgljams'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return moment(val, "DD.MM.YY HH:mm:ss").format("X");
-        });
-    }
-    jQuery.fn.dataTable.ext.order['dom-checkbox'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            return $('input', td).prop('checked') ? '1' : '0';
-        });
-    }
-    jQuery.fn.dataTable.ext.order['dom-select-zerolast'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var _val = $('select', td).val();
-            return (_val==0) ? Number.MAX_SAFE_INTEGER : _val;
-        });
-    }
-    jQuery.fn.dataTable.ext.order['dom-nomen'] = function( settings, col ){
-        return this.api().column( col, {order:'index'} ).nodes().map( function( td, i ){
-            var val = $(td).text().trim();
-            return val.replace('X.XX', '0.00');
-        });
-    }
-    jQuery.extend(jQuery.fn.dataTable.ext.classes, {
-        sLengthSelect: "form-select text-center",
-    });
+    const dtOrder = jQuery.fn.dataTable.ext.order;
+    dtOrder['val-emptylast'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $(td).html() === '' ? Number.MAX_SAFE_INTEGER : 0);
+    };
+    dtOrder['val-zerolast'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $(td).html() == 0 ? Number.MAX_SAFE_INTEGER : $(td).html());
+    };
+    dtOrder['val-fnumber'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $(td).text().trim().replace(/,/g, ""));
+    };
+    dtOrder['val-jam'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => moment($(td).text().trim(), "HH:mm:ss").format("X"));
+    };
+    dtOrder['val-tgl'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => moment($(td).text().trim(), "DD-MM-YYYY").format("X"));
+    };
+    dtOrder['val-tgljam'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => moment($(td).text().trim(), "DD-MM-YYYY HH:mm:ss").format("X"));
+    };
+    dtOrder['val-tgljams'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => moment($(td).text().trim(), "DD.MM.YY HH:mm:ss").format("X"));
+    };
+    dtOrder['dom-checkbox'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $('input', td).prop('checked') ? '1' : '0');
+    };
+    dtOrder['dom-select-zerolast'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $('select', td).val() == 0 ? Number.MAX_SAFE_INTEGER : $('select', td).val());
+    };
+    dtOrder['dom-nomen'] = function(settings, col) {
+        return this.api().column(col, { order: 'index' }).nodes().map((td) => $(td).text().trim().replace('X.XX', '0.00'));
+    };
+
+    jQuery.extend(jQuery.fn.dataTable.ext.classes, { sLengthSelect: "form-select text-center" });
     jQuery.extend(jQuery.fn.dataTable.defaults.oLanguage, {
         "oAria": {
             "sSortAscending": ": aktifkan urutan kolom keatas",
diff --git a/assets/js/pole-display.js b/assets/js/pole-display.js
index aa7f372..2f7ba96 100644
--- a/assets/js/pole-display.js
+++ b/assets/js/pole-display.js
@@ -4,90 +4,86 @@
     Desc.         : JS Class Tampil Data di Pole Display POS
     Created By    : Siau Pheng (siaupheng@3fonia.com).
     Created Date  : October 12th, 2025.
+    Last Modified : November 1st, 2026.
 
     (c) 3FONIA Software; WWW.3FONIA.COM.
 
 *******************************************************************/
 
-var PoleDisplay = function(port, options){
-    var _cd_port = '';
-    var _cd_pole = '';
-    var _options = {
-       rx: { start: '\x02', end: '\x0D', width: null },
-       baudRate: 9600,
-       dataBits: 8,
-       stopBits: 1,
-       parity: 'NONE',
-       flowControl: 'NONE'
-    };
+class PoleDisplay {
+    constructor(port, options = {}) {
+        this.port = port;
+        this.pole = '';
+        this.options = Object.assign({
+            rx: { start: '\x02', end: '\x0D', width: null },
+            baudRate: 9600,
+            dataBits: 8,
+            stopBits: 1,
+            parity: 'NONE',
+            flowControl: 'NONE'
+        }, options);
+    }
 
-    this.construct = function (port, options){
-        $.extend(_options, options);
-        _cd_port = port;
-    };
+    Open() {
+        if (this.pole) return;
 
-    this.Open = function (){
-        if (_cd_pole === '') {
-            qz.serial.openPort(_cd_port, _options).then(() => {
-                _cd_pole = _cd_port;
-                this.cd_Error(_cd_port+' opened');
-            }).then(() => {
-                qz.serial.sendData(_cd_pole, {type:'HEX',data:'x1Bx40'}, _options).catch(this.cd_Error);
-            }).catch(this.cd_Error);
-        }
-    };
+        qz.serial.openPort(this.port, this.options)
+            .then(() => {
+                this.pole = this.port;
+                this.cd_Error(`${this.port} opened`);
+                return qz.serial.sendData(this.pole, { type: 'HEX', data: 'x1Bx40' }, this.options);
+            })
+            .catch(this.cd_Error);
+    }
 
-    this.Close = function (){
-        qz.serial.closePort(_cd_port).then(() => {
-            _cd_pole = '';
-            this.cd_Error(_cd_port+' closed');
-        }).catch(this.cd_Error);
-    };
+    Close() {
+        if (!this.pole) return;
 
-    this.Send = function (txt){
-        if (_cd_pole === '') return false;
-        var ascii_to_hexa = function(str) {
-            var arr1 = [];
-            for (var n = 0, l = str.length; n < l; n++) {
-                var hex = Number(str.charCodeAt(n)).toString(16);
-                if (hex.length==1) hex = '0' + hex;
-                arr1.push(hex.toUpperCase());
-            }
-            return 'x' + arr1.join('x');
-        };
-        var _txt = txt;
+        qz.serial.closePort(this.port)
+            .then(() => {
+                this.pole = '';
+                this.cd_Error(`${this.port} closed`);
+            })
+            .catch(this.cd_Error);
+    }
+
+    Send(txt) {
+        if (!this.pole) return false;
+
+        // Convert string to ASCII hex format
+        const asciiToHex = str => 
+            Array.from(str, char => char.charCodeAt(0).toString(16).padStart(2, '0').toUpperCase())
+                 .join('x');
+
+        let textToSend = txt;
         if (Array.isArray(txt)) {
-            _txt = '';
-            txt.forEach((ele) => {
-                _txt += this.cd_Text(ele['t'], ele['a']);
-            });
+            textToSend = txt.map(ele => this.cd_Text(ele.t, ele.a)).join('');
         }
-        qz.serial.sendData(_cd_pole, {type:'HEX',data:'x10C'+ascii_to_hexa(_txt)}, _options).catch(this.cd_Error);
-    };
 
-    this.cd_Text = function (text, align){
+        const hexData = `x10C${asciiToHex(textToSend)}`;
+        qz.serial.sendData(this.pole, { type: 'HEX', data: hexData }, this.options)
+          .catch(this.cd_Error);
+    }
+
+    cd_Text(text, align = 'L') {
         const totWidth = 20;
-        const txtLength = text.length;
-        if (txtLength >= totWidth) {
-            return text.substring(0, totWidth);
-        }
-        const padding = totWidth - txtLength;
-        var lPadding = 0;
-        var rPadding = padding;
-        if (align === null) align = 'L';
-        if (align == 'C'){
+        if (text.length >= totWidth) return text.substring(0, totWidth);
+
+        const padding = totWidth - text.length;
+        let lPadding = 0, rPadding = padding;
+
+        if (align === 'C') {
             lPadding = Math.floor(padding / 2);
             rPadding = Math.ceil(padding / 2);
-        } else if (align == 'R'){
+        } else if (align === 'R') {
             lPadding = padding;
             rPadding = 0;
         }
-        return " ".repeat(lPadding) + text + " ".repeat(rPadding);
-    };
 
-    this.cd_Error = function (err){
+        return ' '.repeat(lPadding) + text + ' '.repeat(rPadding);
+    }
+
+    cd_Error(err) {
         console.error(err);
-    };
-
-    this.construct(port, options);
-};
+    }
+}
diff --git a/src/App/Auth.php b/src/App/Auth.php
index 2eb6215..7490250 100644
--- a/src/App/Auth.php
+++ b/src/App/Auth.php
@@ -5,7 +5,7 @@
     Module        : /App/Auth.php
     Created By    : Siau Pheng (siaupheng@3fonia.com).
     Created Date  : March 16th, 2008.
-    Last Modified : October 21st, 2026.
+    Last Modified : October 31st, 2026.
 
     (c) 3FONIA Software; WWW.3FONIA.COM.
 
@@ -86,8 +86,8 @@ final class Auth {
     public function user_log(): void {
         $_user_id = $this->session->get('WEB_USER')['UserID'] ?? 0;
         if ($_user_id === 0) return;
-        $a_hasil = $this->db->fetchRow('SELECT * FROM app_logs WHERE UserID=? ORDER BY Last_Date DESC LIMIT 1', [$_user_id])->getData();
-        if (count($a_hasil) > 0) {
+        $a_hasil = $this->db->fetchRow('SELECT * FROM app_logs WHERE UserID=? ORDER BY Last_Date DESC LIMIT 1', [$_user_id]);
+        if ($a_hasil) {
             $this->db->update('app_operator', [ 'Last_IP' => $a_hasil['Last_IP'], 'Last_Date' => $a_hasil['Last_Date'] ], 'UserID=?', [$_user_id]);
         }
         $this->db->runQuery('INSERT IGNORE INTO app_logs SELECT UserID,Token,IP,DateStamp FROM app_token WHERE Token=?', [$this->session->get('APP_TOKEN')]);