Initial Commit

The initial public commit of MVGL website code.

resources/assets/core/js/components/blockui.js

@@ -0,0 +1,177 @@
+"use strict";
+
+// Class definition
+var KTBlockUI = function(element, options) {
+    //////////////////////////////
+    // ** Private variables  ** //
+    //////////////////////////////
+    var the = this;
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default options
+    var defaultOptions = {
+        zIndex: false,
+        overlayClass: '',
+        overflow: 'hidden',
+        message: '<span class="spinner-border text-primary"></span>'
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('blockui') ) {
+            the = KTUtil.data(element).get('blockui');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.element = element;
+        the.overlayElement = null;
+        the.blocked = false;
+        the.positionChanged = false;
+        the.overflowChanged = false;
+
+        // Bind Instance
+        KTUtil.data(the.element).set('blockui', the);
+    }
+
+    var _block = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.blockui.block', the) === false ) {
+            return;
+        }
+
+        var isPage = (the.element.tagName === 'BODY');
+       
+        var position = KTUtil.css(the.element, 'position');
+        var overflow = KTUtil.css(the.element, 'overflow');
+        var zIndex = isPage ? 10000 : 1;
+
+        if (the.options.zIndex > 0) {
+            zIndex = the.options.zIndex;
+        } else {
+            if (KTUtil.css(the.element, 'z-index') != 'auto') {
+                zIndex = KTUtil.css(the.element, 'z-index');
+            }
+        }
+
+        the.element.classList.add('blockui');
+
+        if (position === "absolute" || position === "relative" || position === "fixed") {
+            KTUtil.css(the.element, 'position', 'relative');
+            the.positionChanged = true;
+        }
+
+        if (the.options.overflow === 'hidden' && overflow === 'visible') {           
+            KTUtil.css(the.element, 'overflow', 'hidden');
+            the.overflowChanged = true;
+        }
+
+        the.overlayElement = document.createElement('DIV');    
+        the.overlayElement.setAttribute('class', 'blockui-overlay ' + the.options.overlayClass);
+        
+        the.overlayElement.innerHTML = the.options.message;
+
+        KTUtil.css(the.overlayElement, 'z-index', zIndex);
+
+        the.element.append(the.overlayElement);
+        the.blocked = true;
+
+        KTEventHandler.trigger(the.element, 'kt.blockui.after.blocked', the) === false
+    }
+
+    var _release = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.blockui.release', the) === false ) {
+            return;
+        }
+
+        the.element.classList.add('blockui');
+        
+        if (the.positionChanged) {
+            KTUtil.css(the.element, 'position', '');
+        }
+
+        if (the.overflowChanged) {
+            KTUtil.css(the.element, 'overflow', '');
+        }
+
+        if (the.overlayElement) {
+            KTUtil.remove(the.overlayElement);
+        }        
+
+        the.blocked = false;
+
+        KTEventHandler.trigger(the.element, 'kt.blockui.released', the);
+    }
+
+    var _isBlocked = function() {
+        return the.blocked;
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('blockui');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.block = function() {
+        _block();
+    }
+
+    the.release = function() {
+        _release();
+    }
+
+    the.isBlocked = function() {
+        return _isBlocked();
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTBlockUI.getInstance = function(element) {
+    if (element !== null && KTUtil.data(element).has('blockui')) {
+        return KTUtil.data(element).get('blockui');
+    } else {
+        return null;
+    }
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTBlockUI;
+}

resources/assets/core/js/components/cookie.js

@@ -0,0 +1,62 @@
+"use strict";
+// DOCS: https://javascript.info/cookie
+
+// Class definition
+var KTCookie = function() {
+    return {
+        // returns the cookie with the given name,
+        // or undefined if not found
+        get: function(name) {
+            var matches = document.cookie.match(new RegExp(
+                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+            ));
+
+            return matches ? decodeURIComponent(matches[1]) : null;
+        },
+
+        // Please note that a cookie value is encoded,
+        // so getCookie uses a built-in decodeURIComponent function to decode it.
+        set: function(name, value, options) {
+            if ( typeof options === "undefined" || options === null ) {
+                options = {};
+            }
+
+            options = Object.assign({}, {
+                path: '/'
+            }, options);
+
+            if ( options.expires instanceof Date ) {
+                options.expires = options.expires.toUTCString();
+            }
+
+            var updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
+
+            for ( var optionKey in options ) {
+                if ( options.hasOwnProperty(optionKey) === false ) {
+                    continue;
+                }
+
+                updatedCookie += "; " + optionKey;
+                var optionValue = options[optionKey];
+
+                if ( optionValue !== true ) {
+                    updatedCookie += "=" + optionValue;
+                }
+            }
+
+            document.cookie = updatedCookie;
+        },
+
+        // To remove a cookie, we can call it with a negative expiration date:
+        remove: function(name) {
+            this.set(name, "", {
+                'max-age': -1
+            });
+        }
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTCookie;
+}

resources/assets/core/js/components/dialer.js

@@ -0,0 +1,297 @@
+"use strict";
+
+// Class definition
+var KTDialer = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if (!element) {
+        return;
+    }
+
+    // Default options
+    var defaultOptions = {
+        min: null,
+        max: null,
+        step: 1,
+        decimals: 0,
+        prefix: "",
+        suffix: ""
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    // Constructor
+    var _construct = function() {
+        if ( KTUtil.data(element).has('dialer') === true ) {
+            the = KTUtil.data(element).get('dialer');
+        } else {
+            _init();
+        }
+    }
+
+    // Initialize
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+
+        // Elements
+        the.element = element;
+        the.incElement = the.element.querySelector('[data-kt-dialer-control="increase"]');
+        the.decElement = the.element.querySelector('[data-kt-dialer-control="decrease"]');
+        the.inputElement = the.element.querySelector('input[type]'); 
+        
+        // Set Values
+        if (_getOption('decimals')) {
+            the.options.decimals = parseInt(_getOption('decimals'));
+        }
+        
+        if (_getOption('prefix')) {
+            the.options.prefix = _getOption('prefix');
+        }
+        
+        if (_getOption('suffix')) {
+            the.options.suffix = _getOption('suffix');
+        }
+        
+        if (_getOption('step')) {
+            the.options.step = parseFloat(_getOption('step'));
+        }
+
+        if (_getOption('min')) {
+            the.options.min = parseFloat(_getOption('min'));
+        }
+
+        if (_getOption('max')) {
+            the.options.max = parseFloat(_getOption('max'));
+        }
+
+        the.value = parseFloat(the.inputElement.value.replace(/[^\d.]/g, ''));  
+
+        _setValue();
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('dialer', the);
+    }
+
+    // Handlers
+    var _handlers = function() {
+        KTUtil.addEvent(the.incElement, 'click', function(e) {
+            e.preventDefault();
+        
+            _increase();
+        });
+
+        KTUtil.addEvent(the.decElement, 'click', function(e) {
+            e.preventDefault();
+
+            _decrease();
+        });
+
+        KTUtil.addEvent(the.inputElement, 'input', function(e) {
+            e.preventDefault();
+
+            _setValue();
+        });
+    }
+
+    // Event handlers
+    var _increase = function() {
+        // Trigger "after.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.increase', the);
+
+        the.inputElement.value = the.value + the.options.step;
+        _setValue();
+
+        // Trigger "before.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.increased', the);
+
+        return the;
+    }
+
+    var _decrease = function() {
+        // Trigger "after.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.decrease', the);
+
+        the.inputElement.value = the.value - the.options.step;      
+
+        _setValue();
+
+        // Trigger "before.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.decreased', the);
+
+        return the;
+    }
+
+    // Set Input Value
+    var _setValue = function(value) {
+        // Trigger "after.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.change', the);
+
+        if (value !== undefined) {
+            the.value = value;
+        } else {
+            the.value = _parse(the.inputElement.value); 
+        }        
+        
+        if (the.options.min !== null && the.value < the.options.min) {
+            the.value = the.options.min;
+        }
+
+        if (the.options.max !== null && the.value > the.options.max) {
+            the.value = the.options.max;
+        }
+
+        the.inputElement.value = _format(the.value);
+
+        // Trigger input change event
+        the.inputElement.dispatchEvent(new Event('change'));
+
+        // Trigger "after.dialer" event
+        KTEventHandler.trigger(the.element, 'kt.dialer.changed', the);
+    }
+
+    var _parse = function(val) {
+        val = val
+            .replace(/[^0-9.-]/g, '')       // remove chars except number, hyphen, point. 
+            .replace(/(\..*)\./g, '$1')     // remove multiple points.
+            .replace(/(?!^)-/g, '')         // remove middle hyphen.
+            .replace(/^0+(\d)/gm, '$1');    // remove multiple leading zeros. <-- I added this.
+
+        val = parseFloat(val);
+
+        if (isNaN(val)) {
+            val = 0;
+        } 
+
+        return val;
+    }
+
+    // Format
+    var _format = function(val){
+        return the.options.prefix + parseFloat(val).toFixed(the.options.decimals) + the.options.suffix;              
+    }
+
+    // Get option
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-dialer-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-dialer-' + name);
+            var value = attr;            
+
+            return value;
+        } else {
+            return null;
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('dialer');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.setMinValue = function(value) {
+        the.options.min = value;
+    }
+
+    the.setMaxValue = function(value) {
+        the.options.max = value;
+    }
+
+    the.setValue = function(value) {
+        _setValue(value);
+    }
+
+    the.getValue = function() {
+        return the.inputElement.value;
+    }    
+
+    the.update = function() {
+        _setValue();
+    }
+
+    the.increase = function() {
+        return _increase();
+    }
+
+    the.decrease = function() {
+        return _decrease();
+    }
+
+    the.getElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTDialer.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('dialer') ) {
+        return KTUtil.data(element).get('dialer');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTDialer.createInstances = function(selector = '[data-kt-dialer="true"]') {
+    // Get instances
+    var elements = document.body.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            // Initialize instances
+            new KTDialer(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTDialer.init = function() {
+    KTDialer.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTDialer.init);
+} else {
+    KTDialer.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTDialer;
+}

resources/assets/core/js/components/drawer.js

@@ -0,0 +1,460 @@
+"use strict";
+
+// Class definition
+var KTDrawer = function(element, options) {
+    //////////////////////////////
+    // ** Private variables  ** //
+    //////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default options
+    var defaultOptions = {
+        overlay: true,
+        direction: 'end',
+        baseClass: 'drawer',
+        overlayClass: 'drawer-overlay'
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('drawer') ) {
+            the = KTUtil.data(element).get('drawer');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('drawer');
+        the.element = element;
+        the.overlayElement = null;
+        the.name = the.element.getAttribute('data-kt-drawer-name');
+        the.shown = false;
+        the.lastWidth;
+        the.toggleElement = null;
+
+        // Set initialized
+        the.element.setAttribute('data-kt-drawer', 'true');
+
+        // Event Handlers
+        _handlers();
+
+        // Update Instance
+        _update();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('drawer', the);
+    }
+
+    var _handlers = function() {
+        var togglers = _getOption('toggle');
+        var closers = _getOption('close');
+
+        if ( togglers !== null && togglers.length > 0 ) {
+            KTUtil.on(body, togglers, 'click', function(e) {
+                e.preventDefault();
+
+                the.toggleElement = this;
+                _toggle();
+            });
+        }
+
+        if ( closers !== null && closers.length > 0 ) {
+            KTUtil.on(body, closers, 'click', function(e) {
+                e.preventDefault();
+
+                the.closeElement = this;
+                _hide();
+            });
+        }
+    }
+
+    var _toggle = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.drawer.toggle', the) === false ) {
+            return;
+        }
+
+        if ( the.shown === true ) {
+            _hide();
+        } else {
+            _show();
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.drawer.toggled', the);
+    }
+
+    var _hide = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.drawer.hide', the) === false ) {
+            return;
+        }
+
+        the.shown = false;
+
+        _deleteOverlay();
+
+        body.removeAttribute('data-kt-drawer-' + the.name, 'on');
+        body.removeAttribute('data-kt-drawer');
+
+        KTUtil.removeClass(the.element, the.options.baseClass + '-on');
+
+        if ( the.toggleElement !== null ) {
+            KTUtil.removeClass(the.toggleElement, 'active');
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.drawer.after.hidden', the) === false
+    }
+
+    var _show = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.drawer.show', the) === false ) {
+            return;
+        }
+
+        the.shown = true;
+
+        _createOverlay();
+        body.setAttribute('data-kt-drawer-' + the.name, 'on');
+        body.setAttribute('data-kt-drawer', 'on');
+
+        KTUtil.addClass(the.element, the.options.baseClass + '-on');
+
+        if ( the.toggleElement !== null ) {
+            KTUtil.addClass(the.toggleElement, 'active');
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.drawer.shown', the);
+    }
+
+    var _update = function() {
+        var width = _getWidth();
+        var direction = _getOption('direction');
+
+        var top = _getOption('top');
+        var bottom = _getOption('bottom');
+        var start = _getOption('start');
+        var end = _getOption('end');
+
+        // Reset state
+        if ( KTUtil.hasClass(the.element, the.options.baseClass + '-on') === true && String(body.getAttribute('data-kt-drawer-' + the.name + '-')) === 'on' ) {
+            the.shown = true;
+        } else {
+            the.shown = false;
+        }       
+
+        // Activate/deactivate
+        if ( _getOption('activate') === true ) {
+            KTUtil.addClass(the.element, the.options.baseClass);
+            KTUtil.addClass(the.element, the.options.baseClass + '-' + direction);
+            
+            KTUtil.css(the.element, 'width', width, true);
+            the.lastWidth = width;
+
+            if (top) {
+                KTUtil.css(the.element, 'top', top);
+            }
+
+            if (bottom) {
+                KTUtil.css(the.element, 'bottom', bottom);
+            }
+
+            if (start) {
+                if (KTUtil.isRTL()) {
+                    KTUtil.css(the.element, 'right', start);
+                } else {
+                    KTUtil.css(the.element, 'left', start);
+                }
+            }
+
+            if (end) {
+                if (KTUtil.isRTL()) {
+                    KTUtil.css(the.element, 'left', end);
+                } else {
+                    KTUtil.css(the.element, 'right', end);
+                }
+            }
+        } else {
+            KTUtil.removeClass(the.element, the.options.baseClass);
+            KTUtil.removeClass(the.element, the.options.baseClass + '-' + direction);
+
+            KTUtil.css(the.element, 'width', '');
+
+            if (top) {
+                KTUtil.css(the.element, 'top', '');
+            }
+
+            if (bottom) {
+                KTUtil.css(the.element, 'bottom', '');
+            }
+
+            if (start) {
+                if (KTUtil.isRTL()) {
+                    KTUtil.css(the.element, 'right', '');
+                } else {
+                    KTUtil.css(the.element, 'left', '');
+                }
+            }
+
+            if (end) {
+                if (KTUtil.isRTL()) {
+                    KTUtil.css(the.element, 'left', '');
+                } else {
+                    KTUtil.css(the.element, 'right', '');
+                }
+            }
+
+            _hide();
+        }
+    }
+
+    var _createOverlay = function() {
+        if ( _getOption('overlay') === true ) {
+            the.overlayElement = document.createElement('DIV');
+
+            KTUtil.css(the.overlayElement, 'z-index', KTUtil.css(the.element, 'z-index') - 1); // update
+
+            body.append(the.overlayElement);
+
+            KTUtil.addClass(the.overlayElement, _getOption('overlay-class'));
+
+            KTUtil.addEvent(the.overlayElement, 'click', function(e) {
+                e.preventDefault();
+                _hide();
+            });
+        }
+    }
+
+    var _deleteOverlay = function() {
+        if ( the.overlayElement !== null ) {
+            KTUtil.remove(the.overlayElement);
+        }
+    }
+
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-drawer-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-drawer-' + name);
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    var _getWidth = function() {
+        var width = _getOption('width');
+
+        if ( width === 'auto') {
+            width = KTUtil.css(the.element, 'width');
+        }
+
+        return width;
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('drawer');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.toggle = function() {
+        return _toggle();
+    }
+
+    the.show = function() {
+        return _show();
+    }
+
+    the.hide = function() {
+        return _hide();
+    }
+
+    the.isShown = function() {
+        return the.shown;
+    }
+
+    the.update = function() {
+        _update();
+    }
+
+    the.goElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTDrawer.getInstance = function(element) {
+    if (element !== null && KTUtil.data(element).has('drawer')) {
+        return KTUtil.data(element).get('drawer');
+    } else {
+        return null;
+    }
+}
+
+// Hide all drawers and skip one if provided
+KTDrawer.hideAll = function(skip = null, selector = '[data-kt-drawer="true"]') {
+    var items = document.querySelectorAll(selector);
+
+    if (items && items.length > 0) {
+        for (var i = 0, len = items.length; i < len; i++) {
+            var item = items[i];
+            var drawer = KTDrawer.getInstance(item);
+
+            if (!drawer) {
+                continue;
+            }
+
+            if ( skip ) {
+                if ( item !== skip ) {
+                    drawer.hide();
+                }
+            } else {
+                drawer.hide();
+            }
+        }
+    }
+}
+
+// Update all drawers
+KTDrawer.updateAll = function(selector = '[data-kt-drawer="true"]') {
+    var items = document.querySelectorAll(selector);
+
+    if (items && items.length > 0) {
+        for (var i = 0, len = items.length; i < len; i++) {
+            var item = items[i];
+            var drawer = KTDrawer.getInstance(item);
+
+            if (drawer) {
+                drawer.update();;
+            }
+        }
+    }
+}
+
+// Create instances
+KTDrawer.createInstances = function(selector = '[data-kt-drawer="true"]') {
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Initialize Menus
+    var elements = body.querySelectorAll(selector);
+    var drawer;
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            drawer = new KTDrawer(elements[i]);
+        }
+    }
+}
+
+// Toggle instances
+KTDrawer.handleShow = function() {
+    // External drawer toggle handler
+    KTUtil.on(document.body,  '[data-kt-drawer-show="true"][data-kt-drawer-target]', 'click', function(e) {
+        var element = document.querySelector(this.getAttribute('data-kt-drawer-target'));
+
+        if (element) {
+            KTDrawer.getInstance(element).show();
+        } 
+    });
+}
+
+// Dismiss instances
+KTDrawer.handleDismiss = function() {
+    // External drawer toggle handler
+    KTUtil.on(document.body,  '[data-kt-drawer-dismiss="true"]', 'click', function(e) {
+        var element = this.closest('[data-kt-drawer="true"]');
+
+        if (element) {
+            var drawer = KTDrawer.getInstance(element);
+            if (drawer.isShown()) {
+                drawer.hide();
+            }
+        } 
+    });
+}
+
+// Window resize Handling
+window.addEventListener('resize', function() {
+    var timer;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    KTUtil.throttle(timer, function() {
+        // Locate and update drawer instances on window resize
+        var elements = body.querySelectorAll('[data-kt-drawer="true"]');
+
+        if ( elements && elements.length > 0 ) {
+            for (var i = 0, len = elements.length; i < len; i++) {
+                var drawer = KTDrawer.getInstance(elements[i]);
+                if (drawer) {
+                    drawer.update();
+                }
+            }
+        }
+    }, 200);
+});
+
+// Global initialization
+KTDrawer.init = function() {
+    KTDrawer.createInstances();
+    KTDrawer.handleShow();
+    KTDrawer.handleDismiss();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTDrawer.init);
+} else {
+    KTDrawer.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTDrawer;
+}

resources/assets/core/js/components/event-handler.js

@@ -0,0 +1,93 @@
+"use strict";
+
+// Class definition
+var KTEventHandler = function() {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var _handlers = {};
+
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+    var _triggerEvent = function(element, name, target, e) {
+        if ( KTUtil.data(element).has(name) === true ) {
+            var handlerId = KTUtil.data(element).get(name);
+
+            if ( _handlers[name] && _handlers[name][handlerId] ) {
+                var handler = _handlers[name][handlerId];
+
+                if ( handler.name === name ) {
+                    if ( handler.one == true ) {
+                        if ( handler.fired == false ) {
+                            _handlers[name][handlerId].fired = true;
+
+                            return handler.callback.call(this, target, e);
+                        }
+                    } else {
+                        return handler.callback.call(this, target, e);
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
+    var _addEvent = function(element, name, callback, one) {
+        var handlerId = KTUtil.getUniqueId('event');
+
+        KTUtil.data(element).set(name, handlerId);
+
+        if ( !_handlers[name] ) {
+            _handlers[name] = {};
+        }
+
+        _handlers[name][handlerId] = {
+            name: name,
+            callback: callback,
+            one: one,
+            fired: false
+        };
+    }
+
+    var _removeEvent = function(element, name) {
+        var handlerId = KTUtil.data(element).get(name);
+
+        if (_handlers[name] && _handlers[name][handlerId]) {
+            delete _handlers[name][handlerId];
+        }
+    }
+
+    ////////////////////////////
+    // ** Public Methods  ** //
+    ////////////////////////////
+    return {
+        trigger: function(element, name, target, e) {
+            return _triggerEvent(element, name, target, e);
+        },
+
+        on: function(element, name, handler) {
+            return _addEvent(element, name, handler);
+        },
+
+        one: function(element, name, handler) {
+            return _addEvent(element, name, handler, true);
+        },
+
+        off: function(element, name) {
+            return _removeEvent(element, name);
+        },
+
+        debug: function() {
+            for (var b in _handlers) {
+                if ( _handlers.hasOwnProperty(b) ) console.log(b);
+            }
+        }
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTEventHandler;
+}

resources/assets/core/js/components/feedback.js

@@ -0,0 +1,164 @@
+"use strict";
+
+// Class definition
+var KTFeedback = function(options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Default options
+    var defaultOptions = {
+        'width' : 100,
+        'placement' : 'top-center',
+        'content' : '',
+        'type': 'popup'
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        _init();
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('feedback');
+        the.element;
+        the.shown = false;
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('feedback', the);
+    }
+
+    var _handlers = function() {
+        KTUtil.addEvent(the.element, 'click', function(e) {
+            e.preventDefault();
+
+            _go();
+        });
+    }
+
+    var _show = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.feedback.show', the) === false ) {
+            return;
+        }
+
+        if ( the.options.type === 'popup') {
+            _showPopup();
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.feedback.shown', the);
+
+        return the;
+    }
+
+    var _hide = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.feedback.hide', the) === false ) {
+            return;
+        }
+
+        if ( the.options.type === 'popup') {
+            _hidePopup();
+        }
+
+        the.shown = false;
+
+        KTEventHandler.trigger(the.element, 'kt.feedback.hidden', the);
+
+        return the;
+    }
+
+    var _showPopup = function() {
+        the.element = document.createElement("DIV");
+
+        KTUtil.addClass(the.element, 'feedback feedback-popup');
+        KTUtil.setHTML(the.element, the.options.content);
+
+        if (the.options.placement == 'top-center') {
+            _setPopupTopCenterPosition();
+        }
+
+        body.appendChild(the.element);
+
+        KTUtil.addClass(the.element, 'feedback-shown');
+
+        the.shown = true;
+    }
+
+    var _setPopupTopCenterPosition = function() {
+        var width = KTUtil.getResponsiveValue(the.options.width);
+        var height = KTUtil.css(the.element, 'height');
+
+        KTUtil.addClass(the.element, 'feedback-top-center');
+
+        KTUtil.css(the.element, 'width', width);
+        KTUtil.css(the.element, 'left', '50%');
+        KTUtil.css(the.element, 'top', '-' + height);
+    }
+
+    var _hidePopup = function() {
+        the.element.remove();
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('feedback');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.show = function() {
+        return _show();
+    }
+
+    the.hide = function() {
+        return _hide();
+    }
+
+    the.isShown = function() {
+        return the.shown;
+    }
+
+    the.getElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTFeedback;
+}

resources/assets/core/js/components/image-input.js

@@ -0,0 +1,216 @@
+"use strict";
+
+// Class definition
+var KTImageInput = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        
+    };
+
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('image-input') === true ) {
+            the = KTUtil.data(element).get('image-input');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('image-input');
+
+        // Elements
+        the.element = element;
+        the.inputElement = KTUtil.find(element, 'input[type="file"]');
+        the.wrapperElement = KTUtil.find(element, '.image-input-wrapper');
+        the.cancelElement = KTUtil.find(element, '[data-kt-image-input-action="cancel"]');
+        the.removeElement = KTUtil.find(element, '[data-kt-image-input-action="remove"]');
+        the.hiddenElement = KTUtil.find(element, 'input[type="hidden"]');
+        the.src = KTUtil.css(the.wrapperElement, 'backgroundImage');
+
+        // Set initialized
+        the.element.setAttribute('data-kt-image-input', 'true');
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('image-input', the);
+    }
+
+    // Init Event Handlers
+    var _handlers = function() {
+        KTUtil.addEvent(the.inputElement, 'change', _change);
+        KTUtil.addEvent(the.cancelElement, 'click', _cancel);
+        KTUtil.addEvent(the.removeElement, 'click', _remove);
+    }
+
+    // Event Handlers
+    var _change = function(e) {
+        e.preventDefault();
+
+        if ( the.inputElement !== null && the.inputElement.files && the.inputElement.files[0] ) {
+            // Fire change event
+            if ( KTEventHandler.trigger(the.element, 'kt.imageinput.change', the) === false ) {
+                return;
+            }
+
+            var reader = new FileReader();
+
+            reader.onload = function(e) {
+                KTUtil.css(the.wrapperElement, 'background-image', 'url('+ e.target.result +')');
+            }
+
+            reader.readAsDataURL(the.inputElement.files[0]);
+
+            the.element.classList.add('image-input-changed');
+            the.element.classList.remove('image-input-empty');
+
+            // Fire removed event
+            KTEventHandler.trigger(the.element, 'kt.imageinput.changed', the);
+        }
+    }
+
+    var _cancel = function(e) {
+        e.preventDefault();
+
+        // Fire cancel event
+        if ( KTEventHandler.trigger(the.element, 'kt.imageinput.cancel', the) === false ) {
+            return;
+        }
+
+        the.element.classList.remove('image-input-changed');
+        the.element.classList.remove('image-input-empty');
+
+        if (the.src === 'none') {   
+            KTUtil.css(the.wrapperElement, 'background-image', '');
+            the.element.classList.add('image-input-empty');
+        } else {
+            KTUtil.css(the.wrapperElement, 'background-image', the.src);
+        }
+        
+        the.inputElement.value = "";
+
+        if ( the.hiddenElement !== null ) {
+            the.hiddenElement.value = "0";
+        }
+
+        // Fire canceled event
+        KTEventHandler.trigger(the.element, 'kt.imageinput.canceled', the);
+    }
+
+    var _remove = function(e) {
+        e.preventDefault();
+
+        // Fire remove event
+        if ( KTEventHandler.trigger(the.element, 'kt.imageinput.remove', the) === false ) {
+            return;
+        }
+
+        the.element.classList.remove('image-input-changed');
+        the.element.classList.add('image-input-empty');
+
+        KTUtil.css(the.wrapperElement, 'background-image', "none");
+        the.inputElement.value = "";
+
+        if ( the.hiddenElement !== null ) {
+            the.hiddenElement.value = "1";
+        }
+
+        // Fire removed event
+        KTEventHandler.trigger(the.element, 'kt.imageinput.removed', the);
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('image-input');
+    }
+
+    // Construct Class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.getInputElement = function() {
+        return the.inputElement;
+    }
+
+    the.goElement = function() {
+        return the.element;
+    }
+    
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTImageInput.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('image-input') ) {
+        return KTUtil.data(element).get('image-input');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTImageInput.createInstances = function(selector = '[data-kt-image-input]') {
+    // Initialize Menus
+    var elements = document.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            new KTImageInput(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTImageInput.init = function() {
+    KTImageInput.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTImageInput.init);
+} else {
+    KTImageInput.init();
+}
+
+// Webpack Support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTImageInput;
+}

resources/assets/core/js/components/password-meter.js

@@ -0,0 +1,258 @@
+"use strict";
+
+// Class definition
+var KTPasswordMeter = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if (!element) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        minLength: 8,
+        checkUppercase: true,        
+        checkLowercase: true,
+        checkDigit: true,
+        checkChar: true,
+        scoreHighlightClass: 'active'
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    // Constructor
+    var _construct = function() {
+        if ( KTUtil.data(element).has('password-meter') === true ) {
+            the = KTUtil.data(element).get('password-meter');
+        } else {
+            _init();
+        }
+    }
+
+    // Initialize
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.score = 0;
+        the.checkSteps = 5;
+
+        // Elements
+        the.element = element;
+        the.inputElement = the.element.querySelector('input[type]');
+        the.visibilityElement = the.element.querySelector('[data-kt-password-meter-control="visibility"]');
+        the.highlightElement = the.element.querySelector('[data-kt-password-meter-control="highlight"]'); 
+
+        // Set initialized
+        the.element.setAttribute('data-kt-password-meter', 'true');
+        
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('password-meter', the);
+    }
+
+    // Handlers
+    var _handlers = function() {
+        the.inputElement.addEventListener('input', function() {
+            _check();
+        });
+
+        if (the.visibilityElement) {
+            the.visibilityElement.addEventListener('click', function() {
+                _visibility();
+            });
+        }
+    }   
+
+    // Event handlers
+    var _check = function() {
+        var score = 0;
+        var checkScore = _getCheckScore();
+        
+        if (_checkLength() === true) {
+            score = score + checkScore;
+        }
+
+        if (the.options.checkUppercase === true && _checkLowercase() === true) {
+            score = score + checkScore;
+        }
+
+        if (the.options.checkLowercase === true && _checkUppercase() === true ) {
+            score = score + checkScore;
+        }
+
+        if (the.options.checkDigit === true && _checkDigit() === true ) {
+            score = score + checkScore;
+        }
+
+        if (the.options.checkChar === true && _checkChar() === true ) {
+            score = score + checkScore;
+        }
+
+        the.score = score;
+
+        _highlight();
+    }
+
+    var _checkLength = function() {
+        return the.inputElement.value.length >= the.options.minLength;  // 20 score
+    }
+
+    var _checkLowercase = function() {
+        return /[a-z]/.test(the.inputElement.value);  // 20 score
+    }
+
+    var _checkUppercase = function() {
+        return /[A-Z]/.test(the.inputElement.value);  // 20 score
+    }
+
+    var _checkDigit = function() {
+        return /[0-9]/.test(the.inputElement.value);  // 20 score
+    }
+
+    var _checkChar = function() {
+        return /[~`!#@$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(the.inputElement.value);  // 20 score
+    }    
+
+    var _getCheckScore = function() {
+        var count = 1;
+        
+        if (the.options.checkUppercase === true) {
+            count++;
+        }
+
+        if (the.options.checkLowercase === true) {
+            count++;
+        }
+
+        if (the.options.checkDigit === true) {
+            count++;
+        }
+
+        if (the.options.checkChar === true) {
+            count++;
+        }
+
+        the.checkSteps = count;
+
+        return 100 / the.checkSteps;
+    }
+    
+    var _highlight = function() {
+        var items = [].slice.call(the.highlightElement.querySelectorAll('div'));
+        var total = items.length;
+        var index = 0;
+        var checkScore = _getCheckScore();
+        var score = _getScore();
+
+        items.map(function (item) {
+            index++;
+
+            if ( (checkScore * index * (the.checkSteps / total)) <= score ) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }            
+        });
+    }
+
+    var _visibility = function() {
+        var visibleIcon = the.visibilityElement.querySelector('i:not(.d-none), .svg-icon:not(.d-none)');
+        var hiddenIcon = the.visibilityElement.querySelector('i.d-none, .svg-icon.d-none');
+        
+        if (the.inputElement.getAttribute('type').toLowerCase() === 'password' ) {
+            the.inputElement.setAttribute('type', 'text');
+        }  else {
+            the.inputElement.setAttribute('type', 'password');
+        }        
+
+        visibleIcon.classList.add('d-none');
+        hiddenIcon.classList.remove('d-none');
+
+        the.inputElement.focus();
+    }
+
+    var _reset = function() {
+        the.score = 0;
+
+        _highlight();
+    }
+
+    // Gets current password score
+    var _getScore = function() {
+       return the.score;
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('password-meter');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.check = function() {
+        return _check();
+    }
+
+    the.getScore = function() {
+        return _getScore();
+    }
+
+    the.reset = function() {
+        return _reset();
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+};
+
+// Static methods
+KTPasswordMeter.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('password-meter') ) {
+        return KTUtil.data(element).get('password-meter');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTPasswordMeter.createInstances = function(selector = '[data-kt-password-meter]') {
+    // Get instances
+    var elements = document.body.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            // Initialize instances
+            new KTPasswordMeter(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTPasswordMeter.init = function() {
+    KTPasswordMeter.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTPasswordMeter.init);
+} else {
+    KTPasswordMeter.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTPasswordMeter;
+}

resources/assets/core/js/components/scroll.js

@@ -0,0 +1,347 @@
+"use strict";
+
+// Class definition
+var KTScroll = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if (!element) {
+        return;
+    }
+
+    // Default options
+    var defaultOptions = {
+        saveState: true
+    };
+
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('scroll') ) {
+            the = KTUtil.data(element).get('scroll');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+
+        // Elements
+        the.element = element;        
+        the.id = the.element.getAttribute('id');
+
+        // Set initialized
+        the.element.setAttribute('data-kt-scroll', 'true');
+
+        // Update
+        _update();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('scroll', the);
+    }
+
+    var _setupHeight = function() {
+        var heightType = _getHeightType();
+        var height = _getHeight();
+
+        // Set height
+        if ( height !== null && height.length > 0 ) {
+            KTUtil.css(the.element, heightType, height);
+        } else {
+            KTUtil.css(the.element, heightType, '');
+        }
+    }
+
+    var _setupState = function () {
+        if ( _getOption('save-state') === true && typeof KTCookie !== 'undefined' && the.id ) {
+            if ( KTCookie.get(the.id + 'st') ) {
+                var pos = parseInt(KTCookie.get(the.id + 'st'));
+
+                if ( pos > 0 ) {
+                    the.element.scrollTop = pos;
+                }
+            }
+        }
+    }
+
+    var _setupScrollHandler = function() {
+        if ( _getOption('save-state') === true && typeof KTCookie !== 'undefined' && the.id ) {
+            the.element.addEventListener('scroll', _scrollHandler);
+        } else {
+            the.element.removeEventListener('scroll', _scrollHandler);
+        }
+    }
+
+    var _destroyScrollHandler = function() {
+        the.element.removeEventListener('scroll', _scrollHandler);
+    }
+
+    var _resetHeight = function() {
+        KTUtil.css(the.element, _getHeightType(), '');
+    }
+
+    var _scrollHandler = function () {
+        KTCookie.set(the.id + 'st', the.element.scrollTop);
+    }
+
+    var _update = function() {
+        // Activate/deactivate
+        if ( _getOption('activate') === true || the.element.hasAttribute('data-kt-scroll-activate') === false ) {
+            _setupHeight();
+            _setupStretchHeight();
+            _setupScrollHandler();
+            _setupState();
+        } else {
+            _resetHeight()
+            _destroyScrollHandler();
+        }        
+    }
+
+    var _setupStretchHeight = function() {
+        var stretch = _getOption('stretch');
+
+        // Stretch
+        if ( stretch !== null ) {
+            var elements = document.querySelectorAll(stretch);
+
+            if ( elements && elements.length == 2 ) {
+                var element1 = elements[0];
+                var element2 = elements[1];
+                var diff = _getElementHeight(element2) - _getElementHeight(element1);
+
+                if (diff > 0) {
+                    var height = parseInt(KTUtil.css(the.element, _getHeightType())) + diff;
+
+                    KTUtil.css(the.element, _getHeightType(), String(height) + 'px');
+                }
+            }
+        }
+    }
+
+    var _getHeight = function() {
+        var height = _getOption(_getHeightType());
+
+        if ( height instanceof Function ) {
+            return height.call();
+        } else if ( height !== null && typeof height === 'string' && height.toLowerCase() === 'auto' ) {
+            return _getAutoHeight();
+        } else {
+            return height;
+        }
+    }
+
+    var _getAutoHeight = function() {
+        var height = KTUtil.getViewPort().height;
+        var dependencies = _getOption('dependencies');
+        var wrappers = _getOption('wrappers');
+        var offset = _getOption('offset');
+
+        // Spacings
+        height = height - _getElementSpacing(the.element); 
+
+        // Height dependencies
+        if ( dependencies !== null ) {
+            var elements = document.querySelectorAll(dependencies);
+
+            if ( elements && elements.length > 0 ) {
+                for ( var i = 0, len = elements.length; i < len; i++ ) {
+                    if ( KTUtil.visible(elements[i]) === false ) {
+                        continue;
+                    }
+
+                    height = height - _getElementHeight(elements[i]);
+                }
+            }
+        }
+
+        // Wrappers
+        if ( wrappers !== null ) {
+            var elements = document.querySelectorAll(wrappers);
+            if ( elements && elements.length > 0 ) {
+                for ( var i = 0, len = elements.length; i < len; i++ ) {
+                    if ( KTUtil.visible(elements[i]) === false ) {
+                        continue;
+                    }
+
+                    height = height - _getElementSpacing(elements[i]);
+                }
+            }
+        }
+
+        // Custom offset
+        if ( offset !== null && typeof offset !== 'object') {
+            height = height - parseInt(offset);
+        }
+
+        return String(height) + 'px';
+    }
+
+    var _getElementHeight = function(element) {
+        var height = 0;
+
+        if (element !== null) {
+            height = height + parseInt(KTUtil.css(element, 'height'));
+            height = height + parseInt(KTUtil.css(element, 'margin-top'));
+            height = height + parseInt(KTUtil.css(element, 'margin-bottom'));
+
+            if (KTUtil.css(element, 'border-top')) {
+                height = height + parseInt(KTUtil.css(element, 'border-top'));
+            }
+
+            if (KTUtil.css(element, 'border-bottom')) {
+                height = height + parseInt(KTUtil.css(element, 'border-bottom'));
+            }
+        } 
+
+        return height;
+    }
+
+    var _getElementSpacing = function(element) {
+        var spacing = 0;
+
+        if (element !== null) {
+            spacing = spacing + parseInt(KTUtil.css(element, 'margin-top'));
+            spacing = spacing + parseInt(KTUtil.css(element, 'margin-bottom'));
+            spacing = spacing + parseInt(KTUtil.css(element, 'padding-top'));
+            spacing = spacing + parseInt(KTUtil.css(element, 'padding-bottom'));
+
+            if (KTUtil.css(element, 'border-top')) {
+                spacing = spacing + parseInt(KTUtil.css(element, 'border-top'));
+            }
+
+            if (KTUtil.css(element, 'border-bottom')) {
+                spacing = spacing + parseInt(KTUtil.css(element, 'border-bottom'));
+            }
+        } 
+
+        return spacing;
+    }
+
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-scroll-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-scroll-' + name);
+
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    var _getHeightType = function() {
+        if (_getOption('height')) {
+            return 'height';
+        } if (_getOption('min-height')) {
+            return 'min-height';
+        } if (_getOption('max-height')) {
+            return 'max-height';
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('scroll');
+    }
+
+    // Construct Class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    the.update = function() {
+        return _update();
+    }
+
+    the.getHeight = function() {
+        return _getHeight();
+    }
+
+    the.getElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+};
+
+// Static methods
+KTScroll.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('scroll') ) {
+        return KTUtil.data(element).get('scroll');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTScroll.createInstances = function(selector = '[data-kt-scroll="true"]') {
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Initialize Menus
+    var elements = body.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            new KTScroll(elements[i]);
+        }
+    }
+}
+
+// Window resize handling
+window.addEventListener('resize', function() {
+    var timer;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    KTUtil.throttle(timer, function() {
+        // Locate and update Offcanvas instances on window resize
+        var elements = body.querySelectorAll('[data-kt-scroll="true"]');
+
+        if ( elements && elements.length > 0 ) {
+            for (var i = 0, len = elements.length; i < len; i++) {
+                var scroll = KTScroll.getInstance(elements[i]);
+                if (scroll) {
+                    scroll.update();
+                }
+            }
+        }
+    }, 200);
+});
+
+// Global initialization
+KTScroll.init = function() {
+    KTScroll.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTScroll.init);
+} else {
+    KTScroll.init();
+}
+
+// Webpack Support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTScroll;
+}

resources/assets/core/js/components/scrolltop.js

@@ -0,0 +1,174 @@
+"use strict";
+
+// Class definition
+var KTScrolltop = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default options
+    var defaultOptions = {
+        offset: 300,
+        speed: 600
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if (KTUtil.data(element).has('scrolltop')) {
+            the = KTUtil.data(element).get('scrolltop');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('scrolltop');
+        the.element = element;
+
+        // Set initialized
+        the.element.setAttribute('data-kt-scrolltop', 'true');
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('scrolltop', the);
+    }
+
+    var _handlers = function() {
+        var timer;
+
+        window.addEventListener('scroll', function() {
+            KTUtil.throttle(timer, function() {
+                _scroll();
+            }, 200);
+        });
+
+        KTUtil.addEvent(the.element, 'click', function(e) {
+            e.preventDefault();
+
+            _go();
+        });
+    }
+
+    var _scroll = function() {
+        var offset = parseInt(_getOption('offset'));
+
+        var pos = KTUtil.getScrollTop(); // current vertical position
+
+        if ( pos > offset ) {
+            if ( body.hasAttribute('data-kt-scrolltop') === false ) {
+                body.setAttribute('data-kt-scrolltop', 'on');
+            }
+        } else {
+            if ( body.hasAttribute('data-kt-scrolltop') === true ) {
+                body.removeAttribute('data-kt-scrolltop');
+            }
+        }
+    }
+
+    var _go = function() {
+        var speed = parseInt(_getOption('speed'));
+
+        KTUtil.scrollTop(0, speed);
+    }
+
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-scrolltop-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-scrolltop-' + name);
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('scrolltop');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.go = function() {
+        return _go();
+    }
+
+    the.getElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+};
+
+// Static methods
+KTScrolltop.getInstance = function(element) {
+    if (element && KTUtil.data(element).has('scrolltop')) {
+        return KTUtil.data(element).get('scrolltop');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTScrolltop.createInstances = function(selector = '[data-kt-scrolltop="true"]') {
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Initialize Menus
+    var elements = body.querySelectorAll(selector);
+    var scrolltop;
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            scrolltop = new KTScrolltop(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTScrolltop.init = function() {
+    KTScrolltop.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTScrolltop.init);
+} else {
+    KTScrolltop.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTScrolltop;
+}

resources/assets/core/js/components/search.js

@@ -0,0 +1,439 @@
+"use strict";
+
+// Class definition
+var KTSearch = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if (!element) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        minLength: 2,  // Miniam text lenght to query search
+        keypress: true,  // Enable search on keypress 
+        enter: true,  // Enable search on enter key press
+        layout: 'menu',  // Use 'menu' or 'inline' layout options to display search results
+        responsive: null, // Pass integer value or bootstrap compatible breakpoint key(sm,md,lg,xl,xxl) to enable reponsive form mode for device width below the breakpoint value
+        showOnFocus: true // Always show menu on input focus
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    // Construct
+    var _construct = function() {
+        if ( KTUtil.data(element).has('search') === true ) {
+            the = KTUtil.data(element).get('search');
+        } else {
+            _init();
+        }
+    }
+
+    // Init
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.processing = false;
+
+        // Elements
+        the.element = element;               
+        the.contentElement = _getElement('content');     
+        the.formElement = _getElement('form');         
+        the.inputElement = _getElement('input');
+        the.spinnerElement = _getElement('spinner');
+        the.clearElement = _getElement('clear');
+        the.toggleElement = _getElement('toggle');   
+        the.submitElement = _getElement('submit');
+        the.toolbarElement = _getElement('toolbar');   
+
+        the.resultsElement = _getElement('results');
+        the.suggestionElement = _getElement('suggestion'); 
+        the.emptyElement = _getElement('empty'); 
+
+        // Set initialized
+        the.element.setAttribute('data-kt-search', 'true');
+        
+        // Layout
+        the.layout = _getOption('layout');
+        
+        // Menu
+        if ( the.layout === 'menu' ) {
+            the.menuObject = new KTMenu(the.contentElement);
+        } else {
+            the.menuObject = null;
+        }
+
+        // Update
+        _update();
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('search', the);
+    }
+
+    // Handlera
+    var _handlers = function() {
+        // Focus
+        the.inputElement.addEventListener('focus', _focus);
+
+        // Blur
+        the.inputElement.addEventListener('blur', _blur);
+
+        // Keypress
+        if ( _getOption('keypress') === true ) {
+            the.inputElement.addEventListener('input', _input);
+        }
+
+        // Submit
+        if ( the.submitElement ) {
+            the.submitElement.addEventListener('click', _search);
+        }
+
+        // Enter
+        if ( _getOption('enter') === true ) {
+            the.inputElement.addEventListener('keypress', _enter);
+        }
+
+        // Clear 
+        if ( the.clearElement ) {
+            the.clearElement.addEventListener('click', _clear);
+        }
+
+        // Menu
+        if ( the.menuObject ) {
+            // Toggle menu
+            if ( the.toggleElement ) {
+                the.toggleElement.addEventListener('click', _show);
+
+                the.menuObject.on('kt.menu.dropdown.show', function(item) {
+                    if (KTUtil.visible(the.toggleElement)) {
+                        the.toggleElement.classList.add('active');
+                        the.toggleElement.classList.add('show');
+                    } 
+                });
+    
+                the.menuObject.on('kt.menu.dropdown.hide', function(item) {
+                    if (KTUtil.visible(the.toggleElement)) {
+                        the.toggleElement.classList.remove('active');
+                        the.toggleElement.classList.remove('show');
+                    }
+                });
+            }            
+
+            the.menuObject.on('kt.menu.dropdown.shown', function() {
+                the.inputElement.focus();
+            });
+        } 
+
+        // Window resize handling
+        window.addEventListener('resize', function() {
+            var timer;
+
+            KTUtil.throttle(timer, function() {
+                _update();
+            }, 200);
+        });
+    }
+
+    // Focus
+    var _focus = function() {
+        the.element.classList.add('focus');
+
+        if ( _getOption('show-on-focus') === true || the.inputElement.value.length >= minLength ) {
+            _show();
+        }        
+    }
+
+    // Blur
+    var _blur = function() {        
+        the.element.classList.remove('focus');
+    }
+
+    // Enter 
+    var _enter = function(e) {
+        var key = e.charCode || e.keyCode || 0;
+
+        if (key == 13) {
+            e.preventDefault();
+
+            _search();
+        }
+    }
+
+    // Input
+    var _input = function() {
+        if ( _getOption('min-length') )  {
+            var minLength = parseInt(_getOption('min-length'));
+
+            if ( the.inputElement.value.length >= minLength ) {
+                _search();
+            } else if ( the.inputElement.value.length === 0 ) {
+                _clear();
+            }
+        }
+    }
+
+    // Search
+    var _search = function() {
+        if (the.processing === false) {
+            // Show search spinner
+            if (the.spinnerElement) {
+                the.spinnerElement.classList.remove("d-none");
+            }
+            
+            // Hide search clear button
+            if (the.clearElement) {
+                the.clearElement.classList.add("d-none");
+            }
+
+            // Hide search toolbar
+            if (the.toolbarElement && the.formElement.contains(the.toolbarElement)) {
+                the.toolbarElement.classList.add("d-none");
+            }
+
+            // Focus input
+            the.inputElement.focus();
+
+            the.processing = true;
+            KTEventHandler.trigger(the.element, 'kt.search.process', the);
+        }
+    }
+
+    // Complete
+    var _complete = function() {
+        if (the.spinnerElement) {
+            the.spinnerElement.classList.add("d-none");
+        }
+
+        // Show search toolbar
+        if (the.clearElement) {
+            the.clearElement.classList.remove("d-none");
+        }
+
+        if ( the.inputElement.value.length === 0 ) {
+            _clear();
+        }
+
+        // Focus input
+        the.inputElement.focus();
+
+        _show();
+
+        the.processing = false;
+    }
+
+    // Clear
+    var _clear = function() {
+        if ( KTEventHandler.trigger(the.element, 'kt.search.clear', the) === false )  {
+            return;
+        }
+
+        // Clear and focus input
+        the.inputElement.value = "";
+        the.inputElement.focus();
+
+        // Hide clear icon
+        if (the.clearElement) {
+            the.clearElement.classList.add("d-none");
+        }
+
+        // Show search toolbar
+        if (the.toolbarElement && the.formElement.contains(the.toolbarElement)) {
+            the.toolbarElement.classList.remove("d-none");
+        }
+
+        // Hide menu
+        if ( _getOption('show-on-focus') === false ) {
+            _hide();
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.search.cleared', the);
+    }
+
+    // Update
+    var _update = function() {
+        // Handle responsive form
+        if (the.layout === 'menu') {
+            var responsiveFormMode = _getResponsiveFormMode();
+
+            if ( responsiveFormMode === 'on' && the.contentElement.contains(the.formElement) === false ) {
+                the.contentElement.prepend(the.formElement);
+                the.formElement.classList.remove('d-none');                
+            } else if ( responsiveFormMode === 'off' && the.contentElement.contains(the.formElement) === true ) {
+                the.element.prepend(the.formElement);
+                the.formElement.classList.add('d-none');
+            }
+        }
+    }
+
+    // Show menu
+    var _show = function() {
+        if ( the.menuObject ) {
+            _update();
+
+            the.menuObject.show(the.element);
+        }
+    }
+
+    // Hide menu
+    var _hide = function() {
+        if ( the.menuObject ) {
+            _update();
+
+            the.menuObject.hide(the.element);
+        }
+    }
+
+    // Get option
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-search-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-search-' + name);
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    // Get element
+    var _getElement = function(name) {
+        return the.element.querySelector('[data-kt-search-element="' + name + '"]');
+    }
+
+    // Check if responsive form mode is enabled
+    var _getResponsiveFormMode = function() {
+        var responsive = _getOption('responsive');
+        var width = KTUtil.getViewPort().width;
+
+        if (!responsive) {
+            return null;
+        }
+
+        var breakpoint = KTUtil.getBreakpoint(responsive);
+
+        if (!breakpoint ) {
+            breakpoint = parseInt(responsive);
+        }
+
+        if (width < breakpoint) {
+            return "on";
+        } else {
+            return "off";
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('search');
+    }    
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.show = function() {
+        return _show();
+    }
+
+    the.hide = function() {
+        return _hide();
+    }
+
+    the.update = function() {
+        return _update();
+    }
+
+    the.search = function() {
+        return _search();
+    }
+
+    the.complete = function() {
+        return _complete();
+    }
+
+    the.clear = function() {
+        return _clear();
+    }
+
+    the.isProcessing = function() {
+        return the.processing;
+    }
+
+    the.getQuery = function() {
+        return the.inputElement.value;
+    }    
+
+    the.getMenu = function() {
+        return the.menuObject;
+    }
+
+    the.getFormElement = function() {
+        return the.formElement;
+    }
+
+    the.getInputElement = function() {
+        return the.inputElement;
+    }
+
+    the.getContentElement = function() {
+        return the.contentElement;
+    }
+
+    the.getElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+};
+
+// Static methods
+KTSearch.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('search') ) {
+        return KTUtil.data(element).get('search');
+    } else {
+        return null;
+    }
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTSearch;
+}

resources/assets/core/js/components/stepper.js

@@ -0,0 +1,334 @@
+"use strict";
+
+// Class definition
+var KTStepper = function(element, options) {
+    //////////////////////////////
+    // ** Private variables  ** //
+    //////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        startIndex: 1,
+        animation: false,
+        animationSpeed: '0.3s',
+        animationNextClass: 'animate__animated animate__slideInRight animate__fast',
+        animationPreviousClass: 'animate__animated animate__slideInLeft animate__fast'
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('stepper') === true ) {
+            the = KTUtil.data(element).get('stepper');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('stepper');
+
+        the.element = element;
+
+        // Set initialized
+        the.element.setAttribute('data-kt-stepper', 'true');
+
+        // Elements
+        the.steps = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"]');
+        the.btnNext = KTUtil.find(the.element, '[data-kt-stepper-action="next"]');
+        the.btnPrevious = KTUtil.find(the.element, '[data-kt-stepper-action="previous"]');
+        the.btnSubmit = KTUtil.find(the.element, '[data-kt-stepper-action="submit"]');
+
+        // Variables
+        the.totalStepsNumber = the.steps.length;
+        the.passedStepIndex = 0;
+        the.currentStepIndex = 1;
+        the.clickedStepIndex = 0;
+
+        // Set Current Step
+        if ( the.options.startIndex > 1 ) {
+            _goTo(the.options.startIndex);
+        }
+
+        // Event Handlers
+        KTUtil.addEvent(the.btnNext, 'click', function(e) {
+            e.preventDefault();
+
+            KTEventHandler.trigger(the.element, 'kt.stepper.next', the);
+        });
+
+        KTUtil.addEvent(the.btnPrevious, 'click', function(e) {
+            e.preventDefault();
+
+            KTEventHandler.trigger(the.element, 'kt.stepper.previous', the);
+        });
+
+        KTUtil.on(the.element, '[data-kt-stepper-action="step"]', 'click', function(e) {
+            e.preventDefault();
+
+            if ( the.steps && the.steps.length > 0 ) {
+                for (var i = 0, len = the.steps.length; i < len; i++) {
+                    if ( the.steps[i] === this ) {
+                        the.clickedStepIndex = i + 1;
+
+                        KTEventHandler.trigger(the.element, 'kt.stepper.click', the);
+
+                        return;
+                    }
+                }
+            }
+        });
+
+        // Bind Instance
+        KTUtil.data(the.element).set('stepper', the);
+    }
+
+    var _goTo = function(index) {
+        // Trigger "change" event
+        KTEventHandler.trigger(the.element, 'kt.stepper.change', the);
+
+        // Skip if this step is already shown
+        if ( index === the.currentStepIndex || index > the.totalStepsNumber || index < 0 ) {
+            return;
+        }
+
+        // Validate step number
+        index = parseInt(index);
+
+        // Set current step
+        the.passedStepIndex = the.currentStepIndex;
+        the.currentStepIndex = index;
+
+        // Refresh elements
+        _refreshUI();
+
+        // Trigger "changed" event
+        KTEventHandler.trigger(the.element, 'kt.stepper.changed', the);
+
+        return the;
+    }
+
+    var _goNext = function() {
+        return _goTo( _getNextStepIndex() );
+    }
+
+    var _goPrevious = function() {
+        return _goTo( _getPreviousStepIndex() );
+    }
+
+    var _goLast = function() {
+        return _goTo( _getLastStepIndex() );
+    }
+
+    var _goFirst = function() {
+        return _goTo( _getFirstStepIndex() );
+    }
+
+    var _refreshUI = function() {
+        var state = '';
+
+        if ( _isLastStep() ) {
+            state = 'last';
+        } else if ( _isFirstStep() ) {
+            state = 'first';
+        } else {
+            state = 'between';
+        }
+
+        // Set state class
+        KTUtil.removeClass(the.element, 'last');
+        KTUtil.removeClass(the.element, 'first');
+        KTUtil.removeClass(the.element, 'between');
+
+        KTUtil.addClass(the.element, state);
+
+        // Step Items
+        var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');
+
+        if ( elements && elements.length > 0 ) {
+            for (var i = 0, len = elements.length; i < len; i++) {
+                var element = elements[i];
+                var index = KTUtil.index(element) + 1;
+
+                KTUtil.removeClass(element, 'current');
+                KTUtil.removeClass(element, 'completed');
+                KTUtil.removeClass(element, 'pending');
+
+                if ( index == the.currentStepIndex ) {
+                    KTUtil.addClass(element, 'current');
+
+                    if ( the.options.animation !== false && element.getAttribute('data-kt-stepper-element') == 'content' ) {
+                        KTUtil.css(element, 'animationDuration', the.options.animationSpeed);
+
+                        var animation = _getStepDirection(the.passedStepIndex) === 'previous' ?  the.options.animationPreviousClass : the.options.animationNextClass;
+                        KTUtil.animateClass(element, animation);
+                    }
+                } else {
+                    if ( index < the.currentStepIndex ) {
+                        KTUtil.addClass(element, 'completed');
+                    } else {
+                        KTUtil.addClass(element, 'pending');
+                    }
+                }
+            }
+        }
+    }
+
+    var _isLastStep = function() {
+        return the.currentStepIndex === the.totalStepsNumber;
+    }
+
+    var _isFirstStep = function() {
+        return the.currentStepIndex === 1;
+    }
+
+    var _isBetweenStep = function() {
+        return _isLastStep() === false && _isFirstStep() === false;
+    }
+
+    var _getNextStepIndex = function() {
+        if ( the.totalStepsNumber >= ( the.currentStepIndex + 1 ) ) {
+            return the.currentStepIndex + 1;
+        } else {
+            return the.totalStepsNumber;
+        }
+    }
+
+    var _getPreviousStepIndex = function() {
+        if ( ( the.currentStepIndex - 1 ) > 1 ) {
+            return the.currentStepIndex - 1;
+        } else {
+            return 1;
+        }
+    }
+
+    var _getFirstStepIndex = function(){
+        return 1;
+    }
+
+    var _getLastStepIndex = function() {
+        return the.totalStepsNumber;
+    }
+
+    var _getTotalStepsNumber = function() {
+        return the.totalStepsNumber;
+    }
+
+    var _getStepDirection = function(index) {
+        if ( index > the.currentStepIndex ) {
+            return 'next';
+        } else {
+            return 'previous';
+        }
+    }
+
+    var _getStepContent = function(index) {
+        var content = KTUtil.findAll(the.element, '[data-kt-stepper-element="content"]');
+
+        if ( content[index-1] ) {
+            return content[index-1];
+        } else {
+            return false;
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('stepper');
+    }
+
+    // Construct Class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.getElement = function(index) {
+        return the.element;
+    }
+
+    the.goTo = function(index) {
+        return _goTo(index);
+    }
+
+    the.goPrevious = function() {
+        return _goPrevious();
+    }
+
+    the.goNext = function() {
+        return _goNext();
+    }
+
+    the.goFirst = function() {
+        return _goFirst();
+    }
+
+    the.goLast = function() {
+        return _goLast();
+    }
+
+    the.getCurrentStepIndex = function() {
+        return the.currentStepIndex;
+    }
+
+    the.getNextStepIndex = function() {
+        return the.nextStepIndex;
+    }
+
+    the.getPassedStepIndex = function() {
+        return the.passedStepIndex;
+    }
+
+    the.getClickedStepIndex = function() {
+        return the.clickedStepIndex;
+    }
+
+    the.getPreviousStepIndex = function() {
+        return the.PreviousStepIndex;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTStepper.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('stepper') ) {
+        return KTUtil.data(element).get('stepper');
+    } else {
+        return null;
+    }
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTStepper;
+}

resources/assets/core/js/components/sticky.js

@@ -0,0 +1,376 @@
+"use strict";
+
+// Class definition
+var KTSticky = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        offset: 200,
+        releaseOffset: 0,
+        reverse: false,
+        animation: true,
+        animationSpeed: '0.3s',
+        animationClass: 'animation-slide-in-down'
+    };
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('sticky') === true ) {
+            the = KTUtil.data(element).get('sticky');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        the.element = element;
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('sticky');
+        the.name = the.element.getAttribute('data-kt-sticky-name');
+        the.attributeName = 'data-kt-sticky-' + the.name;
+        the.eventTriggerState = true;
+        the.lastScrollTop = 0;
+        the.scrollHandler;
+
+        // Set initialized
+        the.element.setAttribute('data-kt-sticky', 'true');
+
+        // Event Handlers
+        window.addEventListener('scroll', _scroll);
+
+        // Initial Launch
+        _scroll();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('sticky', the);
+    }
+
+    var _scroll = function(e) {
+        var offset = _getOption('offset');
+        var releaseOffset = _getOption('release-offset');
+        var reverse = _getOption('reverse');
+        var st;
+        var attrName;
+        var diff;
+
+        // Exit if false
+        if ( offset === false ) {
+            return;
+        }
+
+        offset = parseInt(offset);
+        releaseOffset = releaseOffset ? parseInt(releaseOffset) : 0;
+        st = KTUtil.getScrollTop();
+        diff = document.documentElement.scrollHeight - window.innerHeight - KTUtil.getScrollTop();
+
+        if ( reverse === true ) {  // Release on reverse scroll mode
+            if ( st > offset && (releaseOffset === 0 || releaseOffset < diff)) {
+                if ( body.hasAttribute(the.attributeName) === false) {
+                    _enable();
+                    body.setAttribute(the.attributeName, 'on');
+                }
+
+                if ( the.eventTriggerState === true ) {
+                    KTEventHandler.trigger(the.element, 'kt.sticky.on', the);
+                    KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
+
+                    the.eventTriggerState = false;
+                }
+            } else { // Back scroll mode
+                if ( body.hasAttribute(the.attributeName) === true) {
+                    _disable();
+                    body.removeAttribute(the.attributeName);
+                }
+
+                if ( the.eventTriggerState === false ) {
+                    KTEventHandler.trigger(the.element, 'kt.sticky.off', the);
+                    KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
+                    the.eventTriggerState = true;
+                }
+            }
+
+            the.lastScrollTop = st;
+        } else { // Classic scroll mode
+            if ( st > offset && (releaseOffset === 0 || releaseOffset < diff)) {
+                if ( body.hasAttribute(the.attributeName) === false) {
+                    _enable();
+                    body.setAttribute(the.attributeName, 'on');
+                }
+
+                if ( the.eventTriggerState === true ) {
+                    KTEventHandler.trigger(the.element, 'kt.sticky.on', the);
+                    KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
+                    the.eventTriggerState = false;
+                }
+            } else { // back scroll mode
+                if ( body.hasAttribute(the.attributeName) === true ) {
+                    _disable();
+                    body.removeAttribute(the.attributeName);
+                }
+
+                if ( the.eventTriggerState === false ) {
+                    KTEventHandler.trigger(the.element, 'kt.sticky.off', the);
+                    KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
+                    the.eventTriggerState = true;
+                }
+            }
+        }
+
+        if (releaseOffset > 0) {
+            if ( diff < releaseOffset ) {
+                the.element.setAttribute('data-kt-sticky-released', 'true');
+            } else {
+                the.element.removeAttribute('data-kt-sticky-released');
+            }
+        }        
+    }
+
+    var _enable = function(update) {
+        var top = _getOption('top');
+        var left = _getOption('left');
+        var right = _getOption('right');
+        var width = _getOption('width');
+        var zindex = _getOption('zindex');
+        var dependencies = _getOption('dependencies');
+        var classes = _getOption('class');
+        var height = _calculateHeight();
+        
+        if ( update !== true && _getOption('animation') === true ) {
+            KTUtil.css(the.element, 'animationDuration', _getOption('animationSpeed'));
+            KTUtil.animateClass(the.element, 'animation ' + _getOption('animationClass'));
+        }
+
+        if ( classes !== null ) {
+            KTUtil.addClass(the.element, classes);
+        }
+
+        if ( zindex !== null ) {
+            KTUtil.css(the.element, 'z-index', zindex);
+            KTUtil.css(the.element, 'position', 'fixed');
+        }
+
+        if ( top !== null ) {
+            KTUtil.css(the.element, 'top', top);
+        }
+
+        if ( width !== null ) {
+            if (width['target']) {
+                var targetElement = document.querySelector(width['target']);
+                if (targetElement) {
+                    width = KTUtil.css(targetElement, 'width');
+                }
+            }
+
+            KTUtil.css(the.element, 'width', width);
+        }
+
+        if ( left !== null ) {
+            if ( String(left).toLowerCase() === 'auto' ) {
+                var offsetLeft = KTUtil.offset(the.element).left;
+
+                if ( offsetLeft > 0 ) {
+                    KTUtil.css(the.element, 'left', String(offsetLeft) + 'px');
+                }
+            } else {
+                KTUtil.css(the.element, 'left', left);
+            }
+        }
+
+        if ( right !== null ) {
+            KTUtil.css(the.element, 'right', right);
+        }        
+
+        // Height dependencies
+        if ( dependencies !== null ) {
+            var dependencyElements = document.querySelectorAll(dependencies);
+            
+            if ( dependencyElements && dependencyElements.length > 0 ) {
+                for ( var i = 0, len = dependencyElements.length; i < len; i++ ) {
+                    KTUtil.css(dependencyElements[i], 'padding-top', String(height) + 'px');
+                }
+            }
+        }
+    }
+
+    var _disable = function() {
+        KTUtil.css(the.element, 'top', '');
+        KTUtil.css(the.element, 'width', '');
+        KTUtil.css(the.element, 'left', '');
+        KTUtil.css(the.element, 'right', '');
+        KTUtil.css(the.element, 'z-index', '');
+        KTUtil.css(the.element, 'position', '');
+
+        var dependencies = _getOption('dependencies');
+        var classes = _getOption('class');
+
+        if ( classes !== null ) {
+            KTUtil.removeClass(the.element, classes);
+        }
+
+        // Height dependencies
+        if ( dependencies !== null ) {
+            var dependencyElements = document.querySelectorAll(dependencies);
+
+            if ( dependencyElements && dependencyElements.length > 0 ) {
+                for ( var i = 0, len = dependencyElements.length; i < len; i++ ) {
+                    KTUtil.css(dependencyElements[i], 'padding-top', '');
+                }
+            }
+        }
+    }
+
+    var _calculateHeight = function() {
+        var height = parseFloat(KTUtil.css(the.element, 'height'));
+
+        height = height + parseFloat(KTUtil.css(the.element, 'margin-top'));
+        height = height + parseFloat(KTUtil.css(the.element, 'margin-bottom'));
+        
+        if (KTUtil.css(element, 'border-top')) {
+            height = height + parseFloat(KTUtil.css(the.element, 'border-top'));
+        }
+
+        if (KTUtil.css(element, 'border-bottom')) {
+            height = height + parseFloat(KTUtil.css(the.element, 'border-bottom'));
+        }
+
+        return height;
+    }
+
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-sticky-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-sticky-' + name);
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    var _destroy = function() {
+        window.removeEventListener('scroll', _scroll);
+        KTUtil.data(the.element).remove('sticky');
+    }
+
+    // Construct Class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Methods
+    the.update = function() {
+        if ( body.hasAttribute(the.attributeName) === true ) {
+            _disable();
+            body.removeAttribute(the.attributeName);
+            _enable(true);
+            body.setAttribute(the.attributeName, 'on');
+        }
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTSticky.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('sticky') ) {
+        return KTUtil.data(element).get('sticky');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTSticky.createInstances = function(selector = '[data-kt-sticky="true"]') {
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Initialize Menus
+    var elements = body.querySelectorAll(selector);
+    var sticky;
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            sticky = new KTSticky(elements[i]);
+        }
+    }
+}
+
+// Window resize handler
+window.addEventListener('resize', function() {
+    var timer;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    KTUtil.throttle(timer, function() {
+        // Locate and update Offcanvas instances on window resize
+        var elements = body.querySelectorAll('[data-kt-sticky="true"]');
+
+        if ( elements && elements.length > 0 ) {
+            for (var i = 0, len = elements.length; i < len; i++) {
+                var sticky = KTSticky.getInstance(elements[i]);
+                if (sticky) {
+                    sticky.update();
+                }
+            }
+        }
+    }, 200);
+});
+
+// Global initialization
+KTSticky.init = function() {
+    KTSticky.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTSticky.init);
+} else {
+    KTSticky.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTSticky;
+}

resources/assets/core/js/components/swapper.js

@@ -0,0 +1,178 @@
+"use strict";
+
+// Class definition
+var KTSwapper = function(element, options) {
+    ////////////////////////////
+    // ** Private Variables  ** //
+    ////////////////////////////
+    var the = this;
+
+    if ( typeof element === "undefined" || element === null ) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        mode: 'append'
+    };
+
+    ////////////////////////////
+    // ** Private Methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('swapper') === true ) {
+            the = KTUtil.data(element).get('swapper');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        the.element = element;
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+
+        // Set initialized
+        the.element.setAttribute('data-kt-swapper', 'true');
+
+        // Initial update
+        _update();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('swapper', the);
+    }
+
+    var _update = function(e) {
+        var parentSelector = _getOption('parent');
+
+        var mode = _getOption('mode');
+        var parentElement = parentSelector ? document.querySelector(parentSelector) : null;
+       
+
+        if (parentElement && element.parentNode !== parentElement) {
+            if (mode === 'prepend') {
+                parentElement.prepend(element);
+            } else if (mode === 'append') {
+                parentElement.append(element);
+            }
+        }
+    }
+
+    var _getOption = function(name) {
+        if ( the.element.hasAttribute('data-kt-swapper-' + name) === true ) {
+            var attr = the.element.getAttribute('data-kt-swapper-' + name);
+            var value = KTUtil.getResponsiveValue(attr);
+
+            if ( value !== null && String(value) === 'true' ) {
+                value = true;
+            } else if ( value !== null && String(value) === 'false' ) {
+                value = false;
+            }
+
+            return value;
+        } else {
+            var optionName = KTUtil.snakeToCamel(name);
+
+            if ( the.options[optionName] ) {
+                return KTUtil.getResponsiveValue(the.options[optionName]);
+            } else {
+                return null;
+            }
+        }
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('swapper');
+    }
+
+    // Construct Class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Methods
+    the.update = function() {
+        _update();
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTSwapper.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('swapper') ) {
+        return KTUtil.data(element).get('swapper');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTSwapper.createInstances = function(selector = '[data-kt-swapper="true"]') {
+    // Initialize Menus
+    var elements = document.querySelectorAll(selector);
+    var swapper;
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            swapper = new KTSwapper(elements[i]);
+        }
+    }
+}
+
+// Window resize handler
+window.addEventListener('resize', function() {
+    var timer;
+
+    KTUtil.throttle(timer, function() {
+        // Locate and update Offcanvas instances on window resize
+        var elements = document.querySelectorAll('[data-kt-swapper="true"]');
+
+        if ( elements && elements.length > 0 ) {
+            for (var i = 0, len = elements.length; i < len; i++) {
+                var swapper = KTSwapper.getInstance(elements[i]);
+                if (swapper) {
+                    swapper.update();
+                }                
+            }
+        }
+    }, 200);
+});
+
+// Global initialization
+KTSwapper.init = function() {
+    KTSwapper.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTSwapper.init);
+} else {
+    KTSwapper.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTSwapper;
+}

resources/assets/core/js/components/toggle.js

@@ -0,0 +1,226 @@
+"use strict";
+
+// Class definition
+var KTToggle = function(element, options) {
+    ////////////////////////////
+    // ** Private variables  ** //
+    ////////////////////////////
+    var the = this;
+    var body = document.getElementsByTagName("BODY")[0];
+
+    if (!element) {
+        return;
+    }
+
+    // Default Options
+    var defaultOptions = {
+        saveState: true
+    };
+
+    ////////////////////////////
+    // ** Private methods  ** //
+    ////////////////////////////
+
+    var _construct = function() {
+        if ( KTUtil.data(element).has('toggle') === true ) {
+            the = KTUtil.data(element).get('toggle');
+        } else {
+            _init();
+        }
+    }
+
+    var _init = function() {
+        // Variables
+        the.options = KTUtil.deepExtend({}, defaultOptions, options);
+        the.uid = KTUtil.getUniqueId('toggle');
+
+        // Elements
+        the.element = element;
+
+        the.target = document.querySelector(the.element.getAttribute('data-kt-toggle-target')) ? document.querySelector(the.element.getAttribute('data-kt-toggle-target')) : the.element;
+        the.state = the.element.hasAttribute('data-kt-toggle-state') ? the.element.getAttribute('data-kt-toggle-state') : '';
+        the.mode = the.element.hasAttribute('data-kt-toggle-mode') ? the.element.getAttribute('data-kt-toggle-mode') : '';
+        the.attribute = 'data-kt-' + the.element.getAttribute('data-kt-toggle-name');
+
+        // Event Handlers
+        _handlers();
+
+        // Bind Instance
+        KTUtil.data(the.element).set('toggle', the);
+    }
+
+    var _handlers = function() {
+        KTUtil.addEvent(the.element, 'click', function(e) {
+            e.preventDefault();
+
+            if ( the.mode !== '' ) {
+                if ( the.mode === 'off' && _isEnabled() === false ) {
+                    _toggle();
+                } else if ( the.mode === 'on' && _isEnabled() === true ) {
+                    _toggle();
+                }
+            } else {
+                _toggle();
+            }
+        });
+    }
+
+    // Event handlers
+    var _toggle = function() {
+        // Trigger "after.toggle" event
+        KTEventHandler.trigger(the.element, 'kt.toggle.change', the);
+
+        if ( _isEnabled() ) {
+            _disable();
+        } else {
+            _enable();
+        }       
+
+        // Trigger "before.toggle" event
+        KTEventHandler.trigger(the.element, 'kt.toggle.changed', the);
+
+        return the;
+    }
+
+    var _enable = function() {
+        if ( _isEnabled() === true ) {
+            return;
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.toggle.enable', the);
+
+        the.target.setAttribute(the.attribute, 'on');
+
+        if (the.state.length > 0) {
+            the.element.classList.add(the.state);
+        }        
+
+        if ( typeof KTCookie !== 'undefined' && the.options.saveState === true ) {
+            KTCookie.set(the.attribute, 'on');
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.toggle.enabled', the);
+
+        return the;
+    }
+
+    var _disable = function() {
+        if ( _isEnabled() === false ) {
+            return;
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.toggle.disable', the);
+
+        the.target.removeAttribute(the.attribute);
+
+        if (the.state.length > 0) {
+            the.element.classList.remove(the.state);
+        } 
+
+        if ( typeof KTCookie !== 'undefined' && the.options.saveState === true ) {
+            KTCookie.remove(the.attribute);
+        }
+
+        KTEventHandler.trigger(the.element, 'kt.toggle.disabled', the);
+
+        return the;
+    }
+
+    var _isEnabled = function() {
+        return (String(the.target.getAttribute(the.attribute)).toLowerCase() === 'on');
+    }
+
+    var _destroy = function() {
+        KTUtil.data(the.element).remove('toggle');
+    }
+
+    // Construct class
+    _construct();
+
+    ///////////////////////
+    // ** Public API  ** //
+    ///////////////////////
+
+    // Plugin API
+    the.toggle = function() {
+        return _toggle();
+    }
+
+    the.enable = function() {
+        return _enable();
+    }
+
+    the.disable = function() {
+        return _disable();
+    }
+
+    the.isEnabled = function() {
+        return _isEnabled();
+    }
+
+    the.goElement = function() {
+        return the.element;
+    }
+
+    the.destroy = function() {
+        return _destroy();
+    }
+
+    // Event API
+    the.on = function(name, handler) {
+        return KTEventHandler.on(the.element, name, handler);
+    }
+
+    the.one = function(name, handler) {
+        return KTEventHandler.one(the.element, name, handler);
+    }
+
+    the.off = function(name) {
+        return KTEventHandler.off(the.element, name);
+    }
+
+    the.trigger = function(name, event) {
+        return KTEventHandler.trigger(the.element, name, event, the, event);
+    }
+};
+
+// Static methods
+KTToggle.getInstance = function(element) {
+    if ( element !== null && KTUtil.data(element).has('toggle') ) {
+        return KTUtil.data(element).get('toggle');
+    } else {
+        return null;
+    }
+}
+
+// Create instances
+KTToggle.createInstances = function(selector = '[data-kt-toggle]') {
+    var body = document.getElementsByTagName("BODY")[0];
+
+    // Get instances
+    var elements = body.querySelectorAll(selector);
+
+    if ( elements && elements.length > 0 ) {
+        for (var i = 0, len = elements.length; i < len; i++) {
+            // Initialize instances
+            new KTToggle(elements[i]);
+        }
+    }
+}
+
+// Global initialization
+KTToggle.init = function() {
+    KTToggle.createInstances();
+};
+
+// On document ready
+if (document.readyState === 'loading') {
+   document.addEventListener('DOMContentLoaded', KTToggle.init);
+} else {
+    KTToggle.init();
+}
+
+// Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTToggle;
+}

resources/assets/core/js/custom/account/api-keys/api-keys.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Class definition
+var KTAccountAPIKeys = function () {
+    // Private functions
+    var initLicenceCopy = function() {
+        KTUtil.each(document.querySelectorAll('#kt_api_keys_table [data-action="copy"]'), function(button) {
+            var tr = button.closest('tr');
+            var license = KTUtil.find(tr, '[data-bs-target="license"]');
+
+            var clipboard = new ClipboardJS(button, {
+                target: license,
+                text: function() {
+                    return license.innerHTML;
+                }                 
+            });
+        
+            clipboard.on('success', function(e) {
+                // Icons
+                var svgIcon = button.querySelector('.svg-icon');                
+                var checkIcon = button.querySelector('.bi.bi-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('bi');
+                checkIcon.classList.add('bi-check');
+                checkIcon.classList.add('fs-2x');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                svgIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    svgIcon.classList.remove('d-none');
+                    // Show check icon back
+                    button.removeChild(checkIcon);
+
+                    // Remove highlight
+                    license.classList.remove('text-success');
+                }, 3000);
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initLicenceCopy();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountAPIKeys.init();
+});

resources/assets/core/js/custom/account/orders/classic.js

@@ -0,0 +1,108 @@
+"use strict";
+
+// Class definition
+var KTDatatablesClassic = function () {
+    // Private functions
+
+    var initClassic = function () {
+
+        // Set date data order
+        const table = document.getElementById('kt_orders_classic');
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format('x');
+            dateRow[1].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        const datatable = $(table).DataTable({
+            "info": false,
+            'order': []
+        });
+
+        // Filter dropdown elements
+        const filterOrders = document.getElementById('kt_filter_orders');
+        const filterYear = document.getElementById('kt_filter_year');
+
+        // Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
+        filterOrders.addEventListener('change', function (e) {
+            datatable.column(3).search(e.target.value).draw();
+        });
+
+        // Filter by date --- official docs reference: https://momentjs.com/docs/
+        var minDate;
+        var maxDate;
+        filterYear.addEventListener('change', function (e) {
+            const value = e.target.value;
+            switch (value) {
+                case 'thisyear': {
+                    minDate = moment().startOf('year').format('x');
+                    maxDate = moment().endOf('year').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'thismonth': {
+                    minDate = moment().startOf('month').format('x');
+                    maxDate = moment().endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'lastmonth': {
+                    minDate = moment().subtract(1, 'months').startOf('month').format('x');
+                    maxDate = moment().subtract(1, 'months').endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+                case 'last90days': {
+                    minDate = moment().subtract(30, 'days').format('x');
+                    maxDate = moment().format('x');
+                    datatable.draw();
+                    break;
+                }
+                default: {
+                    minDate = moment().subtract(100, 'years').startOf('month').format('x');
+                    maxDate = moment().add(1, 'months').endOf('month').format('x');
+                    datatable.draw();
+                    break;
+                }
+            }
+        });
+        
+        // Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
+        $.fn.dataTable.ext.search.push(
+            function (settings, data, dataIndex) {
+                var min = minDate;
+                var max = maxDate;
+                var date = parseFloat(moment(data[1]).format('x')) || 0; // use data for the age column
+
+                if ((isNaN(min) && isNaN(max)) ||
+                    (isNaN(min) && date <= max) ||
+                    (min <= date && isNaN(max)) ||
+                    (min <= date && date <= max)) {
+                    return true;
+                }
+                return false;
+            }
+        );
+
+        // Search --- official docs reference: https://datatables.net/reference/api/search()
+        var filterSearch = document.getElementById('kt_filter_search');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initClassic();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTDatatablesClassic.init();
+});

resources/assets/core/js/custom/account/security/license-usage.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Class definition
+var KTAccountSecurityLicenseUsage = function () {
+    // Private functions
+    var initLicenceCopy = function() {
+        KTUtil.each(document.querySelectorAll('#kt_security_license_usage_table [data-action="copy"]'), function(button) {
+            var tr = button.closest('tr');
+            var license = KTUtil.find(tr, '[data-bs-target="license"]');
+
+            var clipboard = new ClipboardJS(button, {
+                target: license,
+                text: function() {
+                    return license.innerHTML;
+                }
+            });
+        
+            clipboard.on('success', function(e) {
+                // Icons
+                var svgIcon = button.querySelector('.svg-icon');                
+                var checkIcon = button.querySelector('.bi.bi-check');
+                
+                // exit if check icon is already shown
+                if (checkIcon) {
+                   return;  
+                }
+
+                // Create check icon
+                checkIcon = document.createElement('i');
+                checkIcon.classList.add('bi');
+                checkIcon.classList.add('bi-check');
+                checkIcon.classList.add('fs-2x');
+
+                // Append check icon
+                button.appendChild(checkIcon);
+
+                // Highlight target
+                license.classList.add('text-success');
+
+                // Hide copy icon
+                svgIcon.classList.add('d-none');
+
+                // Set 3 seconds timeout to hide the check icon and show copy icon back
+                setTimeout(function() {
+                    // Remove check icon
+                    svgIcon.classList.remove('d-none');
+                    // Show check icon back
+                    button.removeChild(checkIcon);
+
+                    // Remove highlight
+                    license.classList.remove('text-success');
+                }, 3000);
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initLicenceCopy();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSecurityLicenseUsage.init();
+});

resources/assets/core/js/custom/account/security/security-summary.js

@@ -0,0 +1,155 @@
+"use strict";
+
+// Class definition
+var KTAccountSecuritySummary = function () {
+    // Private functions
+    var initChart = function(tabSelector, chartSelector, data1, data2, initByDefault) {
+        var element = document.querySelector(chartSelector);
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        if (!element) {
+            return;
+        }
+ 
+        var options = {
+            series: [{
+                name: 'Net Profit',
+                data: data1
+            }, {
+                name: 'Revenue',
+                data: data2
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['35%'],
+                    borderRadius: 6
+                }
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-400'),
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-400'),
+                        fontSize: '12px'
+                    }
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + " thousands"
+                    }
+                }
+            },
+            colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-gray-200')],
+            grid: {
+                borderColor: KTUtil.getCssVariableValue('--bs-gray-200'),
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        var init = false;
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            setTimeout(function() {
+                chart.render();
+                init = true;
+            }, 500);
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })
+    } 
+
+    // Public methods
+    return {
+        init: function () {
+            initChart('#kt_security_summary_tab_hours_agents', '#kt_security_summary_chart_hours_agents', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 70, 90, 115, 95, 70, 84], true);
+            initChart('#kt_security_summary_tab_hours_clients', '#kt_security_summary_chart_hours_clients', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
+           
+            initChart('#kt_security_summary_tab_day', '#kt_security_summary_chart_day_agents', [50, 70, 80, 100, 90, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 60, 65, 80, 90, 100, 95, 70, 84], false);
+            initChart('#kt_security_summary_tab_day_clients', '#kt_security_summary_chart_day_clients', [50, 70, 100, 90, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 115, 80, 65, 80, 90, 115, 95, 70, 84], false);
+           
+            initChart('#kt_security_summary_tab_week', '#kt_security_summary_chart_week_agents', [50, 70, 75, 117, 80, 65, 80, 90, 115, 95, 50, 84], [50, 60, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
+            initChart('#kt_security_summary_tab_week_clients', '#kt_security_summary_chart_week_clients', [50, 70, 90, 117, 80, 65, 80, 90, 100, 80, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 100, 95, 70, 84], false);
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSecuritySummary.init();
+});

resources/assets/core/js/custom/account/settings/deactivate-account.js

@@ -0,0 +1,111 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsDeactivateAccount = function () {
+    // Private variables
+    var form;
+    var validation;
+    var submitButton;
+
+    // Private functions
+    var initValidation = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    deactivate: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please check the box to deactivate your account'
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    submitButton: new FormValidation.plugins.SubmitButton(),
+                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+    }
+
+    var handleForm = function () {
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Are you sure you would like to deactivate your account?",
+                        icon: "warning",
+                        buttonsStyling: false,
+                        showDenyButton: true,
+                        confirmButtonText: "Yes",
+                        denyButtonText: 'No',
+                        customClass: {
+                            confirmButton: "btn btn-light-primary",
+                            denyButton: "btn btn-danger"
+                        }
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            Swal.fire({
+                                text: 'Your account has been deactivated.', 
+                                icon: 'success',
+                                confirmButtonText: "Ok",
+                                buttonsStyling: false,
+                                customClass: {
+                                    confirmButton: "btn btn-light-primary"
+                                }
+                            })
+                        } else if (result.isDenied) {
+                            Swal.fire({
+                                text: 'Account not deactivated.', 
+                                icon: 'info',
+                                confirmButtonText: "Ok",
+                                buttonsStyling: false,
+                                customClass: {
+                                    confirmButton: "btn btn-light-primary"
+                                }
+                            })
+                        }
+                    });
+
+                } else {
+                    swal.fire({
+                        text: "Sorry, looks like there are some errors detected, please try again.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            form = document.querySelector('#kt_account_deactivate_form');
+            submitButton = document.querySelector('#kt_account_deactivate_account_submit');
+
+            initValidation();
+            handleForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsDeactivateAccount.init();
+});

resources/assets/core/js/custom/account/settings/overview.js

@@ -0,0 +1,21 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsOverview = function () {
+    // Private functions
+    var initSettings = function() {
+
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initSettings();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsOverview.init();
+});

resources/assets/core/js/custom/account/settings/profile-details.js

@@ -0,0 +1,150 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsProfileDetails = function () {
+    // Private variables
+    var form;
+    var submitButton;
+    var validation;
+
+    // Private functions
+    var initValidation = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validation = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    fname: {
+                        validators: {
+                            notEmpty: {
+                                message: 'First name is required'
+                            }
+                        }
+                    },
+                    lname: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Last name is required'
+                            }
+                        }
+                    },
+                    company: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Company name is required'
+                            }
+                        }
+                    },
+                    phone: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Contact phone number is required'
+                            }
+                        }
+                    },
+                    country: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a country'
+                            }
+                        }
+                    },
+                    timezone: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a timezone'
+                            }
+                        }
+                    },
+                    'communication[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select at least one communication method'
+                            }
+                        }
+                    },
+                    language: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select a language'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    submitButton: new FormValidation.plugins.SubmitButton(),
+                    //defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Select2 validation integration
+        $(form.querySelector('[name="country"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('country');
+        });
+
+        $(form.querySelector('[name="language"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('language');
+        });
+
+        $(form.querySelector('[name="timezone"]')).on('change', function() {
+            // Revalidate the color field when an option is chosen
+            validation.revalidateField('timezone');
+        });
+    }
+
+    var handleForm = function () {
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+
+                    swal.fire({
+                        text: "Thank you! You've updated your basic info",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-light-primary"
+                        }
+                    });
+
+                } else {
+                    swal.fire({
+                        text: "Sorry, looks like there are some errors detected, please try again.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            form = document.getElementById('kt_account_profile_details_form');
+            submitButton = form.querySelector('#kt_account_profile_details_submit');
+
+            initValidation();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsProfileDetails.init();
+});

resources/assets/core/js/custom/account/settings/signin-methods.js

@@ -0,0 +1,218 @@
+"use strict";
+
+// Class definition
+var KTAccountSettingsSigninMethods = function () {
+    // Private functions
+    var initSettings = function () {
+
+        // UI elements
+        var signInMainEl = document.getElementById('kt_signin_email');
+        var signInEditEl = document.getElementById('kt_signin_email_edit');
+        var passwordMainEl = document.getElementById('kt_signin_password');
+        var passwordEditEl = document.getElementById('kt_signin_password_edit');
+
+        // button elements
+        var signInChangeEmail = document.getElementById('kt_signin_email_button');
+        var signInCancelEmail = document.getElementById('kt_signin_cancel');
+        var passwordChange = document.getElementById('kt_signin_password_button');
+        var passwordCancel = document.getElementById('kt_password_cancel');
+
+        // toggle UI
+        signInChangeEmail.querySelector('button').addEventListener('click', function () {
+            toggleChangeEmail();
+        });
+
+        signInCancelEmail.addEventListener('click', function () {
+            toggleChangeEmail();
+        });
+
+        passwordChange.querySelector('button').addEventListener('click', function () {
+            toggleChangePassword();
+        });
+
+        passwordCancel.addEventListener('click', function () {
+            toggleChangePassword();
+        });
+
+        var toggleChangeEmail = function () {
+            signInMainEl.classList.toggle('d-none');
+            signInChangeEmail.classList.toggle('d-none');
+            signInEditEl.classList.toggle('d-none');
+        }
+
+        var toggleChangePassword = function () {
+            passwordMainEl.classList.toggle('d-none');
+            passwordChange.classList.toggle('d-none');
+            passwordEditEl.classList.toggle('d-none');
+        }
+    }
+
+    var handleChangeEmail = function (e) {
+        var validation;
+
+        // form elements
+        var signInForm = document.getElementById('kt_signin_change_email');
+
+        validation = FormValidation.formValidation(
+            signInForm,
+            {
+                fields: {
+                    emailaddress: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Email is required'
+                            },
+                            emailAddress: {
+                                message: 'The value is not a valid email address'
+                            }
+                        }
+                    },
+
+                    confirmemailpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Password is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: { //Learn more: https://formvalidation.io/guide/plugins
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row'
+                    })
+                }
+            }
+        );
+
+        signInForm.querySelector('#kt_signin_submit').addEventListener('click', function (e) {
+            e.preventDefault();
+            console.log('click');
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+                    swal.fire({
+                        text: "Sent password reset. Please check your email",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    }).then(function(){
+                        signInForm.reset();
+                        validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
+                    });
+                } else {
+                    swal.fire({
+                        text: "Sorry, looks like there are some errors detected, please try again.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    var handleChangePassword = function (e) {
+        var validation;
+
+        // form elements
+        var passwordForm = document.getElementById('kt_signin_change_password');
+
+        validation = FormValidation.formValidation(
+            passwordForm,
+            {
+                fields: {
+                    currentpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current Password is required'
+                            }
+                        }
+                    },
+
+                    newpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'New Password is required'
+                            }
+                        }
+                    },
+
+                    confirmpassword: {
+                        validators: {
+                            notEmpty: {
+                                message: 'Confirm Password is required'
+                            },
+                            identical: {
+                                compare: function() {
+                                    return passwordForm.querySelector('[name="newpassword"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: { //Learn more: https://formvalidation.io/guide/plugins
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row'
+                    })
+                }
+            }
+        );
+
+        passwordForm.querySelector('#kt_password_submit').addEventListener('click', function (e) {
+            e.preventDefault();
+            console.log('click');
+
+            validation.validate().then(function (status) {
+                if (status == 'Valid') {
+                    swal.fire({
+                        text: "Sent password reset. Please check your email",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    }).then(function(){
+                        passwordForm.reset();
+                        validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
+                    });
+                } else {
+                    swal.fire({
+                        text: "Sorry, looks like there are some errors detected, please try again.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn font-weight-bold btn-light-primary"
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initSettings();
+            handleChangeEmail();
+            handleChangePassword();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTAccountSettingsSigninMethods.init();
+});

resources/assets/core/js/custom/apps/calendar/calendar.js

@@ -0,0 +1,894 @@
+"use strict";
+
+// Class definition
+var KTAppCalendar = function () {
+    // Shared variables
+    // Calendar variables
+    var calendar;
+    var data = {
+        id: '',
+        eventName: '',
+        eventDescription: '',
+        eventLocation: '',
+        startDate: '',
+        endDate: '',
+        allDay: false
+    };
+    var popover;
+    var popoverState = false;
+
+    // Add event variables
+    var eventName;
+    var eventDescription;
+    var eventLocation;
+    var startDatepicker;
+    var startFlatpickr;
+    var endDatepicker;
+    var endFlatpickr;
+    var startTimepicker;
+    var startTimeFlatpickr;
+    var endTimepicker
+    var endTimeFlatpickr;
+    var modal;
+    var modalTitle;
+    var form;
+    var validator;
+    var addButton;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+
+    // View event variables
+    var viewEventName;
+    var viewAllDay;
+    var viewEventDescription;
+    var viewEventLocation;
+    var viewStartDate;
+    var viewEndDate;
+    var viewModal;
+    var viewEditButton;
+    var viewDeleteButton;
+
+
+    // Private functions
+    var initCalendarApp = function () {
+        // Define variables
+        var calendarEl = document.getElementById('kt_calendar_app');
+        var todayDate = moment().startOf('day');
+        var YM = todayDate.format('YYYY-MM');
+        var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
+        var TODAY = todayDate.format('YYYY-MM-DD');
+        var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
+
+        // Init calendar --- more info: https://fullcalendar.io/docs/initialize-globals
+        calendar = new FullCalendar.Calendar(calendarEl, {
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay'
+            },
+            initialDate: TODAY,
+            navLinks: true, // can click day/week names to navigate views
+            selectable: true,
+            selectMirror: true,
+
+            // Select dates action --- more info: https://fullcalendar.io/docs/select-callback
+            select: function (arg) {
+                hidePopovers();
+                formatArgs(arg);
+                handleNewEvent();
+            },
+
+            // Click event --- more info: https://fullcalendar.io/docs/eventClick
+            eventClick: function (arg) {
+                hidePopovers();
+
+                formatArgs({
+                    id: arg.event.id,
+                    title: arg.event.title,
+                    description: arg.event.extendedProps.description,
+                    location: arg.event.extendedProps.location,
+                    startStr: arg.event.startStr,
+                    endStr: arg.event.endStr,
+                    allDay: arg.event.allDay
+                });
+                handleViewEvent();
+            },
+
+            // MouseEnter event --- more info: https://fullcalendar.io/docs/eventMouseEnter
+            eventMouseEnter: function (arg) {
+                formatArgs({
+                    id: arg.event.id,
+                    title: arg.event.title,
+                    description: arg.event.extendedProps.description,
+                    location: arg.event.extendedProps.location,
+                    startStr: arg.event.startStr,
+                    endStr: arg.event.endStr,
+                    allDay: arg.event.allDay
+                });
+
+                // Show popover preview
+                initPopovers(arg.el);
+            },
+
+            editable: true,
+            dayMaxEvents: true, // allow "more" link when too many events
+            events: [
+                {
+                    id: uid(),
+                    title: 'All Day Event',
+                    start: YM + '-01',
+                    end: YM + '-02',
+                    description: 'Toto lorem ipsum dolor sit incid idunt ut',
+                    className: "fc-event-danger fc-event-solid-warning",
+                    location: 'Federation Square'
+                },
+                {
+                    id: uid(),
+                    title: 'Reporting',
+                    start: YM + '-14T13:30:00',
+                    description: 'Lorem ipsum dolor incid idunt ut labore',
+                    end: YM + '-14T14:30:00',
+                    className: "fc-event-success",
+                    location: 'Meeting Room 7.03'
+                },
+                {
+                    id: uid(),
+                    title: 'Company Trip',
+                    start: YM + '-02',
+                    description: 'Lorem ipsum dolor sit tempor incid',
+                    end: YM + '-03',
+                    className: "fc-event-primary",
+                    location: 'Seoul, Korea'
+
+                },
+                {
+                    id: uid(),
+                    title: 'ICT Expo 2021 - Product Release',
+                    start: YM + '-03',
+                    description: 'Lorem ipsum dolor sit tempor inci',
+                    end: YM + '-05',
+                    className: "fc-event-light fc-event-solid-primary",
+                    location: 'Melbourne Exhibition Hall'
+                },
+                {
+                    id: uid(),
+                    title: 'Dinner',
+                    start: YM + '-12',
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                    end: YM + '-13',
+                    location: 'Squire\'s Loft'
+                },
+                {
+                    id: uid(),
+                    title: 'Repeating Event',
+                    start: YM + '-09T16:00:00',
+                    end: YM + '-09T17:00:00',
+                    description: 'Lorem ipsum dolor sit ncididunt ut labore',
+                    className: "fc-event-danger",
+                    location: 'General Area'
+                },
+                {
+                    id: uid(),
+                    title: 'Repeating Event',
+                    description: 'Lorem ipsum dolor sit amet, labore',
+                    start: YM + '-16T16:00:00',
+                    end: YM + '-16T17:00:00',
+                    location: 'General Area'
+                },
+                {
+                    id: uid(),
+                    title: 'Conference',
+                    start: YESTERDAY,
+                    end: TOMORROW,
+                    description: 'Lorem ipsum dolor eius mod tempor labore',
+                    className: "fc-event-primary",
+                    location: 'Conference Hall A'
+                },
+                {
+                    id: uid(),
+                    title: 'Meeting',
+                    start: TODAY + 'T10:30:00',
+                    end: TODAY + 'T12:30:00',
+                    description: 'Lorem ipsum dolor eiu idunt ut labore',
+                    location: 'Meeting Room 11.06'
+                },
+                {
+                    id: uid(),
+                    title: 'Lunch',
+                    start: TODAY + 'T12:00:00',
+                    end: TODAY + 'T14:00:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, ut labore',
+                    location: 'Cafeteria'
+                },
+                {
+                    id: uid(),
+                    title: 'Meeting',
+                    start: TODAY + 'T14:30:00',
+                    end: TODAY + 'T15:30:00',
+                    className: "fc-event-warning",
+                    description: 'Lorem ipsum conse ctetur adipi scing',
+                    location: 'Meeting Room 11.10'
+                },
+                {
+                    id: uid(),
+                    title: 'Happy Hour',
+                    start: TODAY + 'T17:30:00',
+                    end: TODAY + 'T21:30:00',
+                    className: "fc-event-info",
+                    description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                    location: 'The English Pub'
+                },
+                {
+                    id: uid(),
+                    title: 'Dinner',
+                    start: TOMORROW + 'T18:00:00',
+                    end: TOMORROW + 'T21:00:00',
+                    className: "fc-event-solid-danger fc-event-light",
+                    description: 'Lorem ipsum dolor sit ctetur adipi scing',
+                    location: 'New York Steakhouse'
+                },
+                {
+                    id: uid(),
+                    title: 'Birthday Party',
+                    start: TOMORROW + 'T12:00:00',
+                    end: TOMORROW + 'T14:00:00',
+                    className: "fc-event-primary",
+                    description: 'Lorem ipsum dolor sit amet, scing',
+                    location: 'The English Pub'
+                },
+                {
+                    id: uid(),
+                    title: 'Site visit',
+                    start: YM + '-28',
+                    end: YM + '-29',
+                    className: "fc-event-solid-info fc-event-light",
+                    description: 'Lorem ipsum dolor sit amet, labore',
+                    location: '271, Spring Street'
+                }
+            ],
+
+            // Reset popovers when changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
+            datesSet: function(){
+                hidePopovers();
+            }
+        });
+
+        calendar.render();
+    }
+
+    // Initialize popovers --- more info: https://getbootstrap.com/docs/4.0/components/popovers/
+    const initPopovers = (element) => {
+        hidePopovers();
+
+        // Generate popover content
+        const startDate = data.allDay ? moment(data.startDate).format('Do MMM, YYYY') : moment(data.startDate).format('Do MMM, YYYY - h:mm a');
+        const endDate = data.allDay ? moment(data.endDate).format('Do MMM, YYYY') : moment(data.endDate).format('Do MMM, YYYY - h:mm a');
+        const popoverHtml = '<div class="fw-bolder mb-2">' + data.eventName + '</div><div class="fs-7"><span class="fw-bold">Start:</span> ' + startDate + '</div><div class="fs-7 mb-4"><span class="fw-bold">End:</span> ' + endDate + '</div><div id="kt_calendar_event_view_button" type="button" class="btn btn-sm btn-light-primary">View More</div>';
+
+        // Popover options
+        var options = {
+            container: 'body',
+            trigger: 'manual',
+            boundary: 'window',
+            placement: 'auto',
+            dismiss: true,
+            html: true,
+            title: 'Event Summary',
+            content: popoverHtml,
+        }
+
+        // Initialize popover
+        popover = KTApp.initBootstrapPopover(element, options);
+
+        // Show popover
+        popover.show();
+
+        // Update popover state
+        popoverState = true;
+
+        // Open view event modal
+        handleViewButton();
+    }
+
+    // Hide active popovers
+    const hidePopovers = () => {
+        if (popoverState) {
+            popover.dispose();
+            popoverState = false;
+        }
+    }
+
+    // Init validator
+    const initValidator = () => {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'calendar_event_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Event name is required'
+                            }
+                        }
+                    },
+                    'calendar_event_start_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Start date is required'
+                            }
+                        }
+                    },
+                    'calendar_event_end_date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'End date is required'
+                            }
+                        }
+                    }
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+    }
+
+    // Initialize datepickers --- more info: https://flatpickr.js.org/
+    const initDatepickers = () => {
+        startFlatpickr = flatpickr(startDatepicker, {
+            enableTime: false,
+            dateFormat: "Y-m-d",
+        });
+
+        endFlatpickr = flatpickr(endDatepicker, {
+            enableTime: false,
+            dateFormat: "Y-m-d",
+        });
+
+        startTimeFlatpickr = flatpickr(startTimepicker, {
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+
+        endTimeFlatpickr = flatpickr(endTimepicker, {
+            enableTime: true,
+            noCalendar: true,
+            dateFormat: "H:i",
+        });
+    }
+
+    // Handle add button
+    const handleAddButton = () => {
+        addButton.addEventListener('click', e => {
+            hidePopovers();
+
+            // Reset form data
+            data = {
+                id: '',
+                eventName: '',
+                eventDescription: '',
+                startDate: new Date(),
+                endDate: new Date(),
+                allDay: false
+            };
+            handleNewEvent();
+        });
+    }
+
+    // Handle add new event
+    const handleNewEvent = () => {
+        // Update modal title
+        modalTitle.innerText = "Add a New Event";
+
+        modal.show();
+
+        // Select datepicker wrapper elements
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+
+        // Handle all day toggle
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        allDayToggle.addEventListener('click', e => {
+            if (e.target.checked) {
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.add('d-none');
+                });
+            } else {
+                endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.remove('d-none');
+                });
+            }
+        });
+
+        populateForm(data);
+
+        // Handle submit form
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "New event added to calendar!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Detect if is all day event
+                                    let allDayEvent = false;
+                                    if (allDayToggle.checked) { allDayEvent = true; }
+                                    if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
+
+                                    // Merge date & time
+                                    var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
+                                    var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
+                                    if (!allDayEvent) {
+                                        const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
+                                        const endDate = startDate;
+                                        const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+                                        const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+
+                                        startDateTime = startDate + 'T' + startTime;
+                                        endDateTime = endDate + 'T' + endTime;
+                                    }
+
+                                    // Add new event to calendar
+                                    calendar.addEvent({
+                                        id: uid(),
+                                        title: eventName.value,
+                                        description: eventDescription.value,
+                                        location: eventLocation.value,
+                                        start: startDateTime,
+                                        end: endDateTime,
+                                        allDay: allDayEvent
+                                    });
+                                    calendar.render();
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Handle edit event
+    const handleEditEvent = () => {
+        // Update modal title
+        modalTitle.innerText = "Edit an Event";
+
+        modal.show();
+
+        // Select datepicker wrapper elements
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+
+        // Handle all day toggle
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        allDayToggle.addEventListener('click', e => {
+            if (e.target.checked) {
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.add('d-none');
+                });
+            } else {
+                endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+                datepickerWrappers.forEach(dw => {
+                    dw.classList.remove('d-none');
+                });
+            }
+        });
+
+        populateForm(data);
+
+        // Handle submit form
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable submit button whilst loading
+                        submitButton.disabled = true;
+
+                        // Simulate form submission
+                        setTimeout(function () {
+                            // Simulate form submission
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "New event added to calendar!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+
+                                    // Remove old event
+                                    calendar.getEventById(data.id).remove();
+
+                                    // Detect if is all day event
+                                    let allDayEvent = false;
+                                    if (allDayToggle.checked) { allDayEvent = true; }
+                                    if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
+
+                                    // Merge date & time
+                                    var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
+                                    var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
+                                    if (!allDayEvent) {
+                                        const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
+                                        const endDate = startDate;
+                                        const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+                                        const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
+
+                                        startDateTime = startDate + 'T' + startTime;
+                                        endDateTime = endDate + 'T' + endTime;
+                                    }
+
+                                    // Add new event to calendar
+                                    calendar.addEvent({
+                                        id: uid(),
+                                        title: eventName.value,
+                                        description: eventDescription.value,
+                                        location: eventLocation.value,
+                                        start: startDateTime,
+                                        end: endDateTime,
+                                        allDay: allDayEvent
+                                    });
+                                    calendar.render();
+
+                                    // Reset form for demo purposes only
+                                    form.reset();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning 
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Handle view event
+    const handleViewEvent = () => {
+        viewModal.show();
+
+        // Detect all day event
+        var eventNameMod;
+        var startDateMod;
+        var endDateMod;
+
+        // Generate labels
+        if (data.allDay) {
+            eventNameMod = 'All Day';
+            startDateMod = moment(data.startDate).format('Do MMM, YYYY');
+            endDateMod = moment(data.endDate).format('Do MMM, YYYY');
+        } else {
+            eventNameMod = '';
+            startDateMod = moment(data.startDate).format('Do MMM, YYYY - h:mm a');
+            endDateMod = moment(data.endDate).format('Do MMM, YYYY - h:mm a');
+        }
+
+        // Populate view data
+        viewEventName.innerText = data.eventName;
+        viewAllDay.innerText = eventNameMod;
+        viewEventDescription.innerText = data.eventDescription ? data.eventDescription : '--';
+        viewEventLocation.innerText = data.eventLocation ? data.eventLocation : '--';
+        viewStartDate.innerText = startDateMod;
+        viewEndDate.innerText = endDateMod;
+    }
+
+    // Handle delete event
+    const handleDeleteEvent = () => {
+        viewDeleteButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to delete this event?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    calendar.getEventById(data.id).remove();
+
+                    viewModal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your event was not deleted!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle edit button
+    const handleEditButton = () => {
+        viewEditButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            viewModal.hide();
+            handleEditEvent();
+        });
+    }
+
+    // Handle cancel button
+    const handleCancelButton = () => {
+        // Edit event modal cancel button
+        cancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle close button
+    const handleCloseButton = () => {
+        // Edit event modal close button
+        closeButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Handle view button
+    const handleViewButton = () => {
+        const viewButton = document.querySelector('#kt_calendar_event_view_button');
+        viewButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            hidePopovers();
+            handleViewEvent();
+        });
+    }
+
+    // Helper functions
+
+    // Reset form validator on modal close
+    const resetFormValidator = (element) => {
+        // Target modal hidden event --- For more info: https://getbootstrap.com/docs/5.0/components/modal/#events
+        element.addEventListener('hidden.bs.modal', e => {
+            if (validator) {
+                // Reset form validator. For more info: https://formvalidation.io/guide/api/reset-form
+                validator.resetForm(true);
+            }
+        });
+    }
+
+    // Populate form 
+    const populateForm = () => {
+        eventName.value = data.eventName ? data.eventName : '';
+        eventDescription.value = data.eventDescription ? data.eventDescription : '';
+        eventLocation.value = data.eventLocation ? data.eventLocation : '';
+        startFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+
+        // Handle null end dates
+        const endDate = data.endDate ? data.endDate : moment(data.startDate).format();
+        endFlatpickr.setDate(endDate, true, 'Y-m-d');
+
+        const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
+        const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
+        if (data.allDay) {
+            allDayToggle.checked = true;
+            datepickerWrappers.forEach(dw => {
+                dw.classList.add('d-none');
+            });
+        } else {
+            startTimeFlatpickr.setDate(data.startDate, true, 'Y-m-d H:i');
+            endTimeFlatpickr.setDate(data.endDate, true, 'Y-m-d H:i');
+            endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
+            allDayToggle.checked = false;
+            datepickerWrappers.forEach(dw => {
+                dw.classList.remove('d-none');
+            });
+        }
+    }
+
+    // Format FullCalendar reponses
+    const formatArgs = (res) => {
+        data.id = res.id;
+        data.eventName = res.title;
+        data.eventDescription = res.description;
+        data.eventLocation = res.location;
+        data.startDate = res.startStr;
+        data.endDate = res.endStr;
+        data.allDay = res.allDay;
+    }
+
+    // Generate unique IDs for events
+    const uid = () => {
+        return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            // Define variables
+            // Add event modal
+            const element = document.getElementById('kt_modal_add_event');
+            form = element.querySelector('#kt_modal_add_event_form');
+            eventName = form.querySelector('[name="calendar_event_name"]');
+            eventDescription = form.querySelector('[name="calendar_event_description"]');
+            eventLocation = form.querySelector('[name="calendar_event_location"]');
+            startDatepicker = form.querySelector('#kt_calendar_datepicker_start_date');
+            endDatepicker = form.querySelector('#kt_calendar_datepicker_end_date');
+            startTimepicker = form.querySelector('#kt_calendar_datepicker_start_time');
+            endTimepicker = form.querySelector('#kt_calendar_datepicker_end_time');
+            addButton = document.querySelector('[data-kt-calendar="add"]');
+            submitButton = form.querySelector('#kt_modal_add_event_submit');
+            cancelButton = form.querySelector('#kt_modal_add_event_cancel');
+            closeButton = element.querySelector('#kt_modal_add_event_close');
+            modalTitle = form.querySelector('[data-kt-calendar="title"]');
+            modal = new bootstrap.Modal(element);
+
+            // View event modal
+            const viewElement = document.getElementById('kt_modal_view_event');
+            viewModal = new bootstrap.Modal(viewElement);
+            viewEventName = viewElement.querySelector('[data-kt-calendar="event_name"]');
+            viewAllDay = viewElement.querySelector('[data-kt-calendar="all_day"]');
+            viewEventDescription = viewElement.querySelector('[data-kt-calendar="event_description"]');
+            viewEventLocation = viewElement.querySelector('[data-kt-calendar="event_location"]');
+            viewStartDate = viewElement.querySelector('[data-kt-calendar="event_start_date"]');
+            viewEndDate = viewElement.querySelector('[data-kt-calendar="event_end_date"]');
+            viewEditButton = viewElement.querySelector('#kt_modal_view_event_edit');
+            viewDeleteButton = viewElement.querySelector('#kt_modal_view_event_delete');
+
+            initCalendarApp();
+            initValidator();
+            initDatepickers();
+            handleEditButton();
+            handleAddButton();
+            handleDeleteEvent();
+            handleCancelButton();
+            handleCloseButton();
+            resetFormValidator(element);
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppCalendar.init();
+});

resources/assets/core/js/custom/apps/chat/chat.js

@@ -0,0 +1,72 @@
+"use strict";
+
+// Class definition
+var KTAppChat = function () {
+	// Private functions
+	var handeSend = function (element) {
+		if (!element) {
+			return;
+		}
+
+		// Handle send
+		KTUtil.on(element, '[data-kt-element="input"]', 'keydown', function(e) {
+			if (e.keyCode == 13) {
+				handeMessaging(element);
+				e.preventDefault();
+
+				return false;
+			}
+		});
+
+		KTUtil.on(element, '[data-kt-element="send"]', 'click', function(e) {
+			handeMessaging(element);
+		});
+	}
+
+	var handeMessaging = function(element) {
+		var messages = element.querySelector('[data-kt-element="messages"]');
+		var input = element.querySelector('[data-kt-element="input"]');
+
+        if (input.value.length === 0 ) {
+            return;
+        }
+
+		var messageOutTemplate = messages.querySelector('[data-kt-element="template-out"]');
+		var messageInTemplate = messages.querySelector('[data-kt-element="template-in"]');
+		var message;
+		
+		// Show example outgoing message
+		message = messageOutTemplate.cloneNode(true);
+		message.classList.remove('d-none');
+		message.querySelector('[data-kt-element="message-text"]').innerText = input.value;		
+		input.value = '';
+		messages.appendChild(message);
+		messages.scrollTop = messages.scrollHeight;
+		
+		
+		setTimeout(function() {			
+			// Show example incoming message
+			message = messageInTemplate.cloneNode(true);			
+			message.classList.remove('d-none');
+			message.querySelector('[data-kt-element="message-text"]').innerText = 'Thank you for your awesome support!';
+			messages.appendChild(message);
+			messages.scrollTop = messages.scrollHeight;
+		}, 2000);
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+			handeSend(element);
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	// Init inline chat messenger
+    KTAppChat.init(document.querySelector('#kt_chat_messenger'));
+
+	// Init drawer chat messenger
+	KTAppChat.init(document.querySelector('#kt_drawer_chat_messenger'));
+});

resources/assets/core/js/custom/apps/inbox/compose.js

@@ -0,0 +1,294 @@
+"use strict";
+
+// Class definition
+var KTAppInboxCompose = function () {
+    // Private functions
+    // Init reply form
+    const initForm = () => {
+        // Set variables
+        const form = document.querySelector('#kt_inbox_compose_form');
+        const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
+
+        // Handle CC and BCC
+        handleCCandBCC(form);
+
+        // Handle submit form
+        handleSubmit(form);
+
+        // Init tagify
+        allTagify.forEach(tagify => {
+            initTagify(tagify);
+        });
+
+        // Init quill editor
+        initQuill(form);
+
+        // Init dropzone
+        initDropzone(form);
+    }
+
+    // Handle CC and BCC toggle
+    const handleCCandBCC = (el) => {
+        // Get elements
+        const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
+        const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
+        const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
+        const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
+        const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
+        const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
+
+        // Handle CC button click
+        ccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.remove('d-none');
+            ccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        ccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.add('d-none');
+            ccElement.classList.remove('d-flex');
+        });
+
+        // Handle BCC button click
+        bccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.remove('d-none');
+            bccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        bccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.add('d-none');
+            bccElement.classList.remove('d-flex');
+        });
+    }
+
+    // Handle submit form
+    const handleSubmit = (el) => {
+        const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
+
+        // Handle button click event
+        submitButton.addEventListener("click", function () {
+            // Activate indicator
+            submitButton.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function () {
+                submitButton.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    // Init tagify 
+    const initTagify = (el) => {
+        var inputElm = el;
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
+        ];
+
+        function tagTemplate(tagData) {
+            return `
+                <tag title="${(tagData.title || tagData.email)}"
+                        contenteditable='false'
+                        spellcheck='false'
+                        tabIndex="-1"
+                        class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
+                        ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+                    <div class="d-flex align-items-center">
+                        <div class='tagify__tag__avatar-wrap ps-0'>
+                            <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
+                        </div>
+                        <span class='tagify__tag-text'>${tagData.name}</span>
+                    </div>
+                </tag>
+            `
+        }
+
+        function suggestionItemTemplate(tagData) {
+            return `
+                <div ${this.getAttributes(tagData)}
+                    class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
+                    tabindex="0"
+                    role="option">
+
+                    ${tagData.avatar ? `
+                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
+                                <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
+                            </div>` : ''
+                }
+
+                    <div class="d-flex flex-column">
+                        <strong>${tagData.name}</strong>
+                        <span>${tagData.email}</span>
+                    </div>
+                </div>
+            `
+        }
+
+        // initialize Tagify on the above input node reference
+        var tagify = new Tagify(inputElm, {
+            tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
+            enforceWhitelist: true,
+            skipInvalid: true, // do not remporarily add invalid tags
+            dropdown: {
+                closeOnSelect: false,
+                enabled: 0,
+                classname: 'users-list',
+                searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
+            },
+            templates: {
+                tag: tagTemplate,
+                dropdownItem: suggestionItemTemplate
+            },
+            whitelist: usersList
+        })
+
+        tagify.on('dropdown:show dropdown:updated', onDropdownShow)
+        tagify.on('dropdown:select', onSelectSuggestion)
+
+        var addAllSuggestionsElm;
+
+        function onDropdownShow(e) {
+            var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
+
+            if (tagify.suggestedListItems.length > 1) {
+                addAllSuggestionsElm = getAddAllSuggestionsElm();
+
+                // insert "addAllSuggestionsElm" as the first element in the suggestions list
+                dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
+            }
+        }
+
+        function onSelectSuggestion(e) {
+            if (e.detail.elm == addAllSuggestionsElm)
+                tagify.dropdown.selectAll.call(tagify);
+        }
+
+        // create a "add all" custom suggestion element every time the dropdown changes
+        function getAddAllSuggestionsElm() {
+            // suggestions items should be based on "dropdownItem" template
+            return tagify.parseTemplate('dropdownItem', [{
+                class: "addAll",
+                name: "Add all",
+                email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
+                    return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
+                }, 0) + " Members"
+            }]
+            )
+        }
+    }
+
+    // Init quill editor 
+    const initQuill = (el) => {
+        var quill = new Quill('#kt_inbox_form_editor', {
+            modules: {
+                toolbar: [
+                    [{
+                        header: [1, 2, false]
+                    }],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow' // or 'bubble'
+        });
+
+        // Customize editor
+        const toolbar = el.querySelector('.ql-toolbar');
+
+        if (toolbar) {
+            const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
+            toolbar.classList.add(...classes);
+        }
+    }
+
+    // Init dropzone
+    const initDropzone = (el) => {
+        // set the dropzone container id
+        const id = '[data-kt-inbox-form="dropzone"]';
+        const dropzone = el.querySelector(id);
+        const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            maxFilesize: 1, // Max filesize in MB
+            previewTemplate: previewTemplate,
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: uploadButton // Define the element that should be used as click trigger to select files.
+        });
+
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+        });
+
+        // Hide the total progress bar when nothing"s uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                });
+            }, 300);
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxCompose.init();
+});

resources/assets/core/js/custom/apps/inbox/listing.js

@@ -0,0 +1,58 @@
+"use strict";
+
+// Class definition
+var KTAppInboxListing = function () {
+    var table;
+    var datatable;
+
+    // Private functions
+    var initDatatable = function () {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            // 'paging': false,
+            // 'pageLength': false,      
+        });
+
+        datatable.on('draw', function () {
+            handleDatatableFooter();
+        });
+    }
+
+    // Handle datatable footer spacings
+    var handleDatatableFooter = () => {
+        const footerElement = document.querySelector('#kt_inbox_listing_wrapper > .row');
+        const spacingClasses = ['px-9', 'pt-3', 'pb-5'];
+        footerElement.classList.add(...spacingClasses);
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-inbox-listing-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            table = document.querySelector('#kt_inbox_listing');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            handleSearchDatatable();
+            handleDatatableFooter();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxListing.init();
+});

resources/assets/core/js/custom/apps/inbox/reply.js

@@ -0,0 +1,323 @@
+"use strict";
+
+// Class definition
+var KTAppInboxReply = function () {
+
+    // Private functions
+    const handlePreviewText = () => {
+        // Get all messages
+        const accordions = document.querySelectorAll('[data-kt-inbox-message="message_wrapper"]');
+        accordions.forEach(accordion => {
+            // Set variables
+            const header = accordion.querySelector('[data-kt-inbox-message="header"]');
+            const previewText = accordion.querySelector('[data-kt-inbox-message="preview"]');
+            const details = accordion.querySelector('[data-kt-inbox-message="details"]');
+            const message = accordion.querySelector('[data-kt-inbox-message="message"]');
+
+            // Init bootstrap collapse -- more info: https://getbootstrap.com/docs/5.1/components/collapse/#via-javascript
+            const collapse = new bootstrap.Collapse(message, { toggle: false });
+
+            // Handle header click action
+            header.addEventListener('click', e => {
+                // Return if KTMenu or buttons are clicked
+                if (e.target.closest('[data-kt-menu-trigger="click"]') || e.target.closest('.btn')) {
+                    return;
+                } else {
+                    previewText.classList.toggle('d-none');
+                    details.classList.toggle('d-none');
+                    collapse.toggle();
+                }
+            });
+        });
+    }
+
+    // Init reply form
+    const initForm = () => {
+        // Set variables
+        const form = document.querySelector('#kt_inbox_reply_form');
+        const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
+
+        // Handle CC and BCC
+        handleCCandBCC(form);
+
+        // Handle submit form
+        handleSubmit(form);
+
+        // Init tagify
+        allTagify.forEach(tagify => {
+            initTagify(tagify);
+        });
+
+        // Init quill editor
+        initQuill(form);
+
+        // Init dropzone
+        initDropzone(form);
+    }
+
+    // Handle CC and BCC toggle
+    const handleCCandBCC = (el) => {
+        // Get elements
+        const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
+        const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
+        const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
+        const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
+        const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
+        const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
+
+        // Handle CC button click
+        ccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.remove('d-none');
+            ccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        ccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            ccElement.classList.add('d-none');
+            ccElement.classList.remove('d-flex');
+        });
+
+        // Handle BCC button click
+        bccButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.remove('d-none');
+            bccElement.classList.add('d-flex');
+        });
+
+        // Handle CC close button click
+        bccClose.addEventListener('click', e => {
+            e.preventDefault();
+
+            bccElement.classList.add('d-none');
+            bccElement.classList.remove('d-flex');
+        });
+    }
+
+    // Handle submit form
+    const handleSubmit = (el) => {
+        const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
+
+        // Handle button click event
+        submitButton.addEventListener("click", function () {
+            // Activate indicator
+            submitButton.setAttribute("data-kt-indicator", "on");
+
+            // Disable indicator after 3 seconds
+            setTimeout(function () {
+                submitButton.removeAttribute("data-kt-indicator");
+            }, 3000);
+        });
+    }
+
+    // Init tagify 
+    const initTagify = (el) => {
+        var inputElm = el;
+
+        const usersList = [
+            { value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
+            { value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
+            { value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
+            { value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
+            { value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
+            { value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
+            { value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
+            { value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
+        ];
+
+        function tagTemplate(tagData) {
+            return `
+                <tag title="${(tagData.title || tagData.email)}"
+                        contenteditable='false'
+                        spellcheck='false'
+                        tabIndex="-1"
+                        class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
+                        ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+                    <div class="d-flex align-items-center">
+                        <div class='tagify__tag__avatar-wrap ps-0'>
+                            <img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
+                        </div>
+                        <span class='tagify__tag-text'>${tagData.name}</span>
+                    </div>
+                </tag>
+            `
+        }
+
+        function suggestionItemTemplate(tagData) {
+            return `
+                <div ${this.getAttributes(tagData)}
+                    class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
+                    tabindex="0"
+                    role="option">
+
+                    ${tagData.avatar ? `
+                            <div class='tagify__dropdown__item__avatar-wrap me-2'>
+                                <img onerror="this.style.visibility='hidden'"  class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
+                            </div>` : ''
+                }
+
+                    <div class="d-flex flex-column">
+                        <strong>${tagData.name}</strong>
+                        <span>${tagData.email}</span>
+                    </div>
+                </div>
+            `
+        }
+
+        // initialize Tagify on the above input node reference
+        var tagify = new Tagify(inputElm, {
+            tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
+            enforceWhitelist: true,
+            skipInvalid: true, // do not remporarily add invalid tags
+            dropdown: {
+                closeOnSelect: false,
+                enabled: 0,
+                classname: 'users-list',
+                searchKeys: ['name', 'email']  // very important to set by which keys to search for suggesttions when typing
+            },
+            templates: {
+                tag: tagTemplate,
+                dropdownItem: suggestionItemTemplate
+            },
+            whitelist: usersList
+        })
+
+        tagify.on('dropdown:show dropdown:updated', onDropdownShow)
+        tagify.on('dropdown:select', onSelectSuggestion)
+
+        var addAllSuggestionsElm;
+
+        function onDropdownShow(e) {
+            var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
+
+            if (tagify.suggestedListItems.length > 1) {
+                addAllSuggestionsElm = getAddAllSuggestionsElm();
+
+                // insert "addAllSuggestionsElm" as the first element in the suggestions list
+                dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
+            }
+        }
+
+        function onSelectSuggestion(e) {
+            if (e.detail.elm == addAllSuggestionsElm)
+                tagify.dropdown.selectAll.call(tagify);
+        }
+
+        // create a "add all" custom suggestion element every time the dropdown changes
+        function getAddAllSuggestionsElm() {
+            // suggestions items should be based on "dropdownItem" template
+            return tagify.parseTemplate('dropdownItem', [{
+                class: "addAll",
+                name: "Add all",
+                email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
+                    return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
+                }, 0) + " Members"
+            }]
+            )
+        }
+    }
+
+    // Init quill editor 
+    const initQuill = (el) => {
+        var quill = new Quill('#kt_inbox_form_editor', {
+            modules: {
+                toolbar: [
+                    [{
+                        header: [1, 2, false]
+                    }],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+            },
+            placeholder: 'Type your text here...',
+            theme: 'snow' // or 'bubble'
+        });
+
+        // Customize editor
+        const toolbar = el.querySelector('.ql-toolbar');
+
+        if (toolbar) {
+            const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
+            toolbar.classList.add(...classes);
+        }
+    }
+
+    // Init dropzone
+    const initDropzone = (el) => {
+        // set the dropzone container id
+        const id = '[data-kt-inbox-form="dropzone"]';
+        const dropzone = el.querySelector(id);
+        const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
+
+        // set the preview element template
+        var previewNode = dropzone.querySelector(".dropzone-item");
+        previewNode.id = "";
+        var previewTemplate = previewNode.parentNode.innerHTML;
+        previewNode.parentNode.removeChild(previewNode);
+
+        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
+            url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
+            parallelUploads: 20,
+            maxFilesize: 1, // Max filesize in MB
+            previewTemplate: previewTemplate,
+            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
+            clickable: uploadButton // Define the element that should be used as click trigger to select files.
+        });
+
+
+        myDropzone.on("addedfile", function (file) {
+            // Hookup the start button
+            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
+            dropzoneItems.forEach(dropzoneItem => {
+                dropzoneItem.style.display = '';
+            });
+        });
+
+        // Update the total progress bar
+        myDropzone.on("totaluploadprogress", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.width = progress + "%";
+            });
+        });
+
+        myDropzone.on("sending", function (file) {
+            // Show the total progress bar when upload starts
+            const progressBars = dropzone.querySelectorAll('.progress-bar');
+            progressBars.forEach(progressBar => {
+                progressBar.style.opacity = "1";
+            });
+        });
+
+        // Hide the total progress bar when nothing"s uploading anymore
+        myDropzone.on("complete", function (progress) {
+            const progressBars = dropzone.querySelectorAll('.dz-complete');
+
+            setTimeout(function () {
+                progressBars.forEach(progressBar => {
+                    progressBar.querySelector('.progress-bar').style.opacity = "0";
+                    progressBar.querySelector('.progress').style.opacity = "0";
+                });
+            }, 300);
+        });
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            handlePreviewText();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInboxReply.init();
+});

resources/assets/core/js/custom/apps/invoices/create.js

@@ -0,0 +1,111 @@
+"use strict";
+
+// Class definition
+var KTAppInvoicesCreate = function () {
+    var form;
+
+	// Private functions
+	var updateTotal = function() {
+		var items = [].slice.call(form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]'));
+		var grandTotal = 0;
+
+		var format = wNumb({
+			//prefix: '$ ',
+			decimals: 2,
+			thousand: ','
+		});
+
+		items.map(function (item) {
+            var quantity = item.querySelector('[data-kt-element="quantity"]');
+			var price = item.querySelector('[data-kt-element="price"]');
+
+			var priceValue = format.from(price.value);
+			priceValue = (!priceValue || priceValue < 0) ? 0 : priceValue;
+
+			var quantityValue = parseInt(quantity.value);
+			quantityValue = (!quantityValue || quantityValue < 0) ?  1 : quantityValue;
+
+			price.value = format.to(priceValue);
+			quantity.value = quantityValue;
+
+			item.querySelector('[data-kt-element="total"]').innerText = format.to(priceValue * quantityValue);			
+
+			grandTotal += priceValue * quantityValue;
+		});
+
+		form.querySelector('[data-kt-element="sub-total"]').innerText = format.to(grandTotal);
+		form.querySelector('[data-kt-element="grand-total"]').innerText = format.to(grandTotal);
+	}
+
+	var handleEmptyState = function() {
+		if (form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]').length === 0) {
+			var item = form.querySelector('[data-kt-element="empty-template"] tr').cloneNode(true);
+			form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
+		} else {
+			KTUtil.remove(form.querySelector('[data-kt-element="items"] [data-kt-element="empty"]'));
+		}
+	}
+
+	var handeForm = function (element) {
+		// Add item
+		form.querySelector('[data-kt-element="items"] [data-kt-element="add-item"]').addEventListener('click', function(e) {
+			e.preventDefault();
+
+			var item = form.querySelector('[data-kt-element="item-template"] tr').cloneNode(true);
+
+			form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
+
+			handleEmptyState();
+			updateTotal();			
+		});
+
+		// Remove item
+		KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="remove-item"]', 'click', function(e) {
+			e.preventDefault();
+
+			KTUtil.remove(this.closest('[data-kt-element="item"]'));
+
+			handleEmptyState();
+			updateTotal();			
+		});		
+
+		// Handle price and quantity changes
+		KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="quantity"], [data-kt-element="items"] [data-kt-element="price"]', 'change', function(e) {
+			e.preventDefault();
+
+			updateTotal();			
+		});
+	}
+
+	var initForm = function(element) {
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var invoiceDate = $(form.querySelector('[name="invoice_date"]'));
+		invoiceDate.flatpickr({
+			enableTime: false,
+			dateFormat: "d, M Y",
+		});
+
+        // Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="invoice_due_date"]'));
+		dueDate.flatpickr({
+			enableTime: false,
+			dateFormat: "d, M Y",
+		});
+	}
+
+	// Public methods
+	return {
+		init: function(element) {
+            form = document.querySelector('#kt_invoice_form');
+
+			handeForm();
+            initForm();
+			updateTotal();
+        }
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTAppInvoicesCreate.init();
+});

resources/assets/core/js/custom/apps/subscriptions/add/advanced.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var KTSubscriptionsAdvanced = function () {
+    // Shared variables
+    var table;
+    var datatable;
+
+    var initCustomFieldsDatatable = function () {
+        // Define variables
+        const addButton = document.getElementById('kt_create_new_custom_fields_add');
+
+        // Duplicate input fields
+        const fieldName = table.querySelector('tbody tr td:first-child').innerHTML;
+        const fieldValue = table.querySelector('tbody tr td:nth-child(2)').innerHTML;
+        const deleteButton = table.querySelector('tbody tr td:last-child').innerHTML;
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'ordering': false,
+            'paging': false,
+            "lengthChange": false
+        });
+
+        // Define datatable row node
+        var rowNode;
+
+        // Handle add button
+        addButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            rowNode = datatable.row.add([
+                fieldName,
+                fieldValue,
+                deleteButton
+            ]).draw().node();
+
+            // Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+            $(rowNode).find('td').eq(2).addClass('text-end');
+
+            // Re-calculate index
+            initCustomFieldRowIndex();
+        });
+    }
+
+    // Handle row index count
+    var initCustomFieldRowIndex = function() {
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach((tr, index) => {
+            // add index number to input names & id
+            const fieldNameInput = tr.querySelector('td:first-child input');
+            const fieldValueInput = tr.querySelector('td:nth-child(2) input');
+            const fieldNameLabel = fieldNameInput.getAttribute('id');
+            const fieldValueLabel = fieldValueInput.getAttribute('id');
+
+            fieldNameInput.setAttribute('name', fieldNameLabel + '-' + index);
+            fieldValueInput.setAttribute('name', fieldValueLabel + '-' + index);
+        });
+    }
+
+    // Delete product
+    var deleteCustomField = function() {
+        KTUtil.on(table, '[data-kt-action="field_remove"]', 'click', function(e) {
+            e.preventDefault();
+
+            // Select parent row
+            const parent = e.target.closest('tr');
+
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete this field ?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted it!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove current row
+                        datatable.row($(parent)).remove().draw();
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "It was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    })
+                }
+            });
+        });
+    }
+
+    return {
+        init: function () {
+            table = document.getElementById('kt_create_new_custom_fields');
+
+            initCustomFieldsDatatable();
+            initCustomFieldRowIndex();            
+            deleteCustomField();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsAdvanced.init();
+});

resources/assets/core/js/custom/apps/subscriptions/add/customer-select.js

@@ -0,0 +1,85 @@
+"use strict";
+
+// Class definition
+var KTModalCustomerSelect = function() {
+    // Private variables
+    var element;
+    var suggestionsElement;
+    var resultsElement;
+    var wrapperElement;
+    var emptyElement;
+    var searchObject;
+    
+    var modal;
+
+    // Private functions
+    var processs = function(search) {
+        var timeout = setTimeout(function() {
+            var number = KTUtil.getRandomInt(1, 6);
+
+            // Hide recently viewed
+            suggestionsElement.classList.add('d-none');
+
+            if (number === 3) {
+                // Hide results
+                resultsElement.classList.add('d-none');
+                // Show empty message 
+                emptyElement.classList.remove('d-none');
+            } else {
+                // Show results
+                resultsElement.classList.remove('d-none');
+                // Hide empty message 
+                emptyElement.classList.add('d-none');
+            }                  
+
+            // Complete search
+            search.complete();
+        }, 1500);
+    }
+
+    var clear = function(search) {
+        // Show recently viewed
+        suggestionsElement.classList.remove('d-none');
+        // Hide results
+        resultsElement.classList.add('d-none');
+        // Hide empty message 
+        emptyElement.classList.add('d-none');
+    }    
+
+    // Public methods
+	return {
+		init: function() {
+            // Elements
+            element = document.querySelector('#kt_modal_customer_search_handler');
+            modal = new bootstrap.Modal(document.querySelector('#kt_modal_customer_search'));
+
+            if (!element) {
+                return;
+            }
+
+            wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
+            suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
+            resultsElement = element.querySelector('[data-kt-search-element="results"]');
+            emptyElement = element.querySelector('[data-kt-search-element="empty"]');
+            
+            // Initialize search handler
+            searchObject = new KTSearch(element);
+
+            // Search handler
+            searchObject.on('kt.search.process', processs);
+
+            // Clear handler
+            searchObject.on('kt.search.clear', clear);
+
+            // Handle select
+            KTUtil.on(element, '[data-kt-search-element="customer"]', 'click', function() {
+                modal.hide();
+            });
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalCustomerSelect.init();
+});

resources/assets/core/js/custom/apps/subscriptions/add/products.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var KTSubscriptionsProducts = function () {
+    // Shared variables
+    var table;
+    var datatable;
+    var modalEl;
+    var modal;
+
+    var initDatatable = function() {
+        // Init datatable --- more info on datatables: https://datatables.net/manual/        
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'ordering': false,
+            'paging': false,
+            "lengthChange": false
+        });
+    }
+
+    // Delete product
+    var deleteProduct = function() {
+        KTUtil.on(table, '[data-kt-action="product_remove"]', 'click', function(e) {
+            e.preventDefault();
+
+            // Select parent row
+            const parent = e.target.closest('tr');
+
+            // Get customer name
+            const productName = parent.querySelectorAll('td')[0].innerText;
+
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete " + productName + "?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted " + productName + "!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove current row
+                        datatable.row($(parent)).remove().draw();
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: customerName + " was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Modal handlers
+    var addProduct = function() {
+        // Select modal buttons
+        const closeButton = modalEl.querySelector('#kt_modal_add_product_close');
+        const cancelButton = modalEl.querySelector('#kt_modal_add_product_cancel');
+        const submitButton = modalEl.querySelector('#kt_modal_add_product_submit');
+
+        // Cancel button action
+        cancelButton.addEventListener('click', function(e){
+            e.preventDefault();
+
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+        });
+
+        // Add customer button handler
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Check all radio buttons
+            var radio = modalEl.querySelector('input[type="radio"]:checked');            
+
+            // Define datatable row node
+            var rowNode;
+
+            if (radio && radio.checked === true) {
+                rowNode = datatable.row.add( [
+                    radio.getAttribute('data-kt-product-name'),
+                    '1',
+                    radio.getAttribute('data-kt-product-price') + ' / ' + radio.getAttribute('data-kt-product-frequency'),
+                    table.querySelector('tbody tr td:last-child').innerHTML
+                ]).draw().node();
+
+                // Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
+                $( rowNode ).find('td').eq(3).addClass('text-end');
+            }           
+
+            modal.hide(); // Remove modal
+        });
+    }
+
+    return {
+        init: function () {
+            modalEl = document.getElementById('kt_modal_add_product');
+
+            // Select modal -- more info on Bootstrap modal: https://getbootstrap.com/docs/5.0/components/modal/
+            modal = new bootstrap.Modal(modalEl);
+
+            table = document.querySelector('#kt_subscription_products_table');
+
+            initDatatable();
+            deleteProduct();
+            addProduct();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsProducts.init();
+});

resources/assets/core/js/custom/apps/subscriptions/list/export.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTSubscriptionsExport = function () {
+    var element;
+    var submitButton;
+    var cancelButton;
+    var closeButton;
+    var validator;
+    var form;
+    var modal;
+
+    // Init form inputs
+    var handleForm = function () {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'date': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Date range is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Action buttons
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            Swal.fire({
+                                text: "Customer list has been successfully exported!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        cancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal	      			
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        closeButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal		      
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    var initForm = function () {
+        const datepicker = form.querySelector("[name=date]");
+
+        // Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
+        $(datepicker).flatpickr({
+            altInput: true,
+            altFormat: "F j, Y",
+            dateFormat: "Y-m-d",
+            mode: "range"
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_subscriptions_export_modal');
+            modal = new bootstrap.Modal(element);
+
+            form = document.querySelector('#kt_subscriptions_export_form');
+            submitButton = form.querySelector('#kt_subscriptions_export_submit');
+            cancelButton = form.querySelector('#kt_subscriptions_export_cancel');
+            closeButton = element.querySelector('#kt_subscriptions_export_close');
+
+            handleForm();
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsExport.init();
+});

resources/assets/core/js/custom/apps/subscriptions/list/list.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var KTSubscriptionsList = function () {
+    // Define shared variables
+    var table;
+    var datatable;
+    var toolbarBase;
+    var toolbarSelected;
+    var selectedCount;
+
+    // Private functions
+    var initDatatable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
+            dateRow[5].setAttribute('data-order', realDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)                
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleRowDeletion();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearch = function () {
+        const filterSearch = document.querySelector('[data-kt-subscription-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilter = function () {
+        // Select filter options
+        const filterForm = document.querySelector('[data-kt-subscription-table-filter="form"]');
+        const filterButton = filterForm.querySelector('[data-kt-subscription-table-filter="filter"]');
+        const resetButton = filterForm.querySelector('[data-kt-subscription-table-filter="reset"]');
+        const selectOptions = filterForm.querySelectorAll('select');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            var filterString = '';
+
+            // Get filter values
+            selectOptions.forEach((item, index) => {
+                if (item.value && item.value !== '') {
+                    if (index !== 0) {
+                        filterString += ' ';
+                    }
+
+                    // Build filter value options
+                    filterString += item.value;
+                }
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Reset filter form
+            selectOptions.forEach((item, index) => {
+                // Reset Select2 dropdown --- official docs reference: https://select2.org/programmatic-control/add-select-clear-items
+                $(item).val(null).trigger('change');
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+    // Delete subscirption
+    var handleRowDeletion = function () {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-subscriptions-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const customerName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + customerName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + customerName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        toolbarBase = document.querySelector('[data-kt-subscription-table-toolbar="base"]');
+        toolbarSelected = document.querySelector('[data-kt-subscription-table-toolbar="selected"]');
+        selectedCount = document.querySelector('[data-kt-subscription-table-select="selected_count"]');
+        const deleteSelected = document.querySelector('[data-kt-subscription-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function () {
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions  
+        init: function () {
+            table = document.getElementById('kt_subscriptions_table');
+
+            if (!table) {
+                return;
+            }
+
+            initDatatable();
+            initToggleToolbar();
+            handleSearch();
+            handleRowDeletion();
+            handleFilter();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSubscriptionsList.init();
+});

resources/assets/core/js/custom/apps/support-center/tickets/create.js

@@ -0,0 +1,219 @@
+"use strict";
+
+// Class definition
+var KTModalNewTicket = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Ticket attachments
+		// For more info about Dropzone plugin visit:  https://www.dropzonejs.com/#usage
+		var myDropzone = new Dropzone("#kt_modal_create_ticket_attachments", { 
+			url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
+            paramName: "file", // The name that will be used to transfer the file
+            maxFiles: 10,
+            maxFilesize: 10, // MB
+            addRemoveLinks: true,
+            accept: function(file, done) {
+                if (file.name == "justinbieber.jpg") {
+                    done("Naha, you don't.");
+                } else {
+                    done();
+                }
+            }
+		});  
+
+		// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
+		var dueDate = $(form.querySelector('[name="due_date"]'));
+		dueDate.flatpickr({
+			enableTime: true,
+			dateFormat: "d, M Y, H:i",
+		});
+
+		// Ticket user. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="user"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('user');
+        });
+
+		// Ticket status. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="status"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('status');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					subject: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket subject is required'
+							}
+						}
+					},
+					user: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket user is required'
+							}
+						}
+					},
+					due_date: {
+						validators: {
+							notEmpty: {
+								message: 'Ticket due date is required'
+							}
+						}
+					},
+					description: {
+						validators: {
+							notEmpty: {
+								message: 'Target description is required'
+							}
+						}
+					},
+					'notifications[]': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Please select at least one notifications method'
+                            }
+                        }
+                    },
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_new_ticket');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_new_ticket_form');
+			submitButton = document.getElementById('kt_modal_new_ticket_submit');
+			cancelButton = document.getElementById('kt_modal_new_ticket_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalNewTicket.init();
+});

resources/assets/core/js/custom/apps/user-management/permissions/add-permission.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersAddPermission = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_permission');
+    const form = element.querySelector('#kt_modal_add_permission_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddPermission = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'permission_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Permission name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-permissions-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddPermission();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddPermission.init();
+});

resources/assets/core/js/custom/apps/user-management/permissions/list.js

@@ -0,0 +1,117 @@
+"use strict";
+
+// Class definition
+var KTUsersPermissionsList = function () {
+    // Shared variables
+    var datatable;
+    var table;
+
+    // Init add schedule modal
+    var initPermissionsList = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[2].innerHTML, "DD MMM YYYY, LT").format(); // select date from 2nd column in table
+            dateRow[2].setAttribute('data-order', realDate);
+        });
+
+         // Init datatable --- more info on datatables: https://datatables.net/manual/
+         datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            'columnDefs': [
+                { orderable: false, targets: 1 }, // Disable ordering on column 1 (assigned)
+                { orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
+            ]
+        });        
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-permissions-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete user
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-permissions-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get permission name
+                const permissionName = parent.querySelectorAll('td')[0].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + permissionName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + permissionName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+
+    return {
+        // Public functions
+        init: function () {
+            table = document.querySelector('#kt_permissions_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initPermissionsList();
+            handleSearchDatatable();
+            handleDeleteRows();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersPermissionsList.init();
+});

resources/assets/core/js/custom/apps/user-management/permissions/update-permission.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermission = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_permission');
+    const form = element.querySelector('#kt_modal_update_permission_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermission = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'permission_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Permission name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-permissions-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermission();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermission.init();
+});

resources/assets/core/js/custom/apps/user-management/roles/list/add.js

@@ -0,0 +1,185 @@
+"use strict";
+
+// Class definition
+var KTUsersAddRole = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_role');
+    const form = element.querySelector('#kt_modal_add_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddRole = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+         // Submit button handler
+         const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
+         submitButton.addEventListener('click', function (e) {
+             // Prevent default button action
+             e.preventDefault();
+ 
+             // Validate form before submit
+             if (validator) {
+                 validator.validate().then(function (status) {
+                     console.log('validated!');
+ 
+                     if (status == 'Valid') {
+                         // Show loading indication
+                         submitButton.setAttribute('data-kt-indicator', 'on');
+ 
+                         // Disable button to avoid multiple click 
+                         submitButton.disabled = true;
+ 
+                         // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                         setTimeout(function () {
+                             // Remove loading indication
+                             submitButton.removeAttribute('data-kt-indicator');
+ 
+                             // Enable button
+                             submitButton.disabled = false;
+ 
+                             // Show popup confirmation 
+                             Swal.fire({
+                                 text: "Form has been successfully submitted!",
+                                 icon: "success",
+                                 buttonsStyling: false,
+                                 confirmButtonText: "Ok, got it!",
+                                 customClass: {
+                                     confirmButton: "btn btn-primary"
+                                 }
+                             }).then(function (result) {
+                                 if (result.isConfirmed) {
+                                     modal.hide();
+                                 }
+                             });
+ 
+                             //form.submit(); // Submit form
+                         }, 2000);
+                     } else {
+                         // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                         Swal.fire({
+                             text: "Sorry, looks like there are some errors detected, please try again.",
+                             icon: "error",
+                             buttonsStyling: false,
+                             confirmButtonText: "Ok, got it!",
+                             customClass: {
+                                 confirmButton: "btn btn-primary"
+                             }
+                         });
+                     }
+                 });
+             }
+         });
+        
+
+    }
+
+    // Select all handler
+    const handleSelectAll = () =>{
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddRole();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddRole.init();
+});

resources/assets/core/js/custom/apps/user-management/roles/list/update-role.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermissions = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermissions = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Select all handler
+    const handleSelectAll = () => {
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermissions();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermissions.init();
+});

resources/assets/core/js/custom/apps/user-management/roles/view/update-role.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePermissions = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePermissions = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'role_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Role name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Select all handler
+    const handleSelectAll = () => {
+        // Define variables
+        const selectAll = form.querySelector('#kt_roles_select_all');
+        const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
+
+        // Handle check state
+        selectAll.addEventListener('change', e => {
+
+            // Apply check state to all checkboxes
+            allCheckboxes.forEach(c => {
+                c.checked = e.target.checked;
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePermissions();
+            handleSelectAll();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePermissions.init();
+});

resources/assets/core/js/custom/apps/user-management/roles/view/view.js

@@ -0,0 +1,225 @@
+"use strict";
+
+// Class definition
+var KTUsersViewRole = function () {
+    // Shared variables
+    var datatable;
+    var table;
+
+    // Init add schedule modal
+    var initViewRole = () => {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[3].setAttribute('data-order', realDate);
+        });
+
+         // Init datatable --- more info on datatables: https://datatables.net/manual/
+         datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 5,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 4 }, // Disable ordering on column 4 (actions)
+            ]
+        });        
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-roles-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Delete user
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-roles-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get customer name
+                const userName = parent.querySelectorAll('td')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + userName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + userName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        const deleteSelected = document.querySelector('[data-kt-view-roles-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function(){
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Define variables
+        const toolbarBase = document.querySelector('[data-kt-view-roles-table-toolbar="base"]');
+        const toolbarSelected = document.querySelector('[data-kt-view-roles-table-toolbar="selected"]');
+        const selectedCount = document.querySelector('[data-kt-view-roles-table-select="selected_count"]');
+
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            table = document.querySelector('#kt_roles_view_table');
+            
+            if (!table) {
+                return;
+            }
+
+            initViewRole();
+            handleSearchDatatable();
+            handleDeleteRows();
+            initToggleToolbar();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersViewRole.init();
+});

resources/assets/core/js/custom/apps/user-management/users/list/add.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTUsersAddUser = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_user');
+    const form = element.querySelector('#kt_modal_add_user_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddUser = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'user_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Full name is required'
+                            }
+                        }
+                    },
+                    'user_email': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Valid email address is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form			
+                    modal.hide();	
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form			
+                    modal.hide();	
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddUser();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddUser.init();
+});

resources/assets/core/js/custom/apps/user-management/users/list/export-users.js

@@ -0,0 +1,170 @@
+"use strict";
+
+// Class definition
+var KTModalExportUsers = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_export_users');
+    const form = element.querySelector('#kt_modal_export_users_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init form inputs
+    var initForm = function () {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'format': {
+                        validators: {
+                            notEmpty: {
+                                message: 'File format is required'
+                            }
+                        }
+                    },
+                },
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable submit button whilst loading
+                        submitButton.disabled = true;
+
+                        setTimeout(function () {
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            Swal.fire({
+                                text: "User list has been successfully exported!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+
+                                    // Enable submit button after loading
+                                    submitButton.disabled = false;
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalExportUsers.init();
+});

resources/assets/core/js/custom/apps/user-management/users/list/table.js

@@ -0,0 +1,315 @@
+"use strict";
+
+var KTUsersList = function () {
+    // Define shared variables
+    var table = document.getElementById('kt_table_users');
+    var datatable;
+    var toolbarBase;
+    var toolbarSelected;
+    var selectedCount;
+
+    // Private functions
+    var initUserTable = function () {
+        // Set date data order
+        const tableRows = table.querySelectorAll('tbody tr');
+
+        tableRows.forEach(row => {
+            const dateRow = row.querySelectorAll('td');
+            const lastLogin = dateRow[3].innerText.toLowerCase(); // Get last login time
+            let timeCount = 0;
+            let timeFormat = 'minutes';
+
+            // Determine date & time format -- add more formats when necessary
+            if (lastLogin.includes('yesterday')) {
+                timeCount = 1;
+                timeFormat = 'days';
+            } else if (lastLogin.includes('mins')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'minutes';
+            } else if (lastLogin.includes('hours')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'hours';
+            } else if (lastLogin.includes('days')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'days';
+            } else if (lastLogin.includes('weeks')) {
+                timeCount = parseInt(lastLogin.replace(/\D/g, ''));
+                timeFormat = 'weeks';
+            }
+
+            // Subtract date/time from today -- more info on moment datetime subtraction: https://momentjs.com/docs/#/durations/subtract/
+            const realDate = moment().subtract(timeCount, timeFormat).format();
+
+            // Insert real date to last login attribute
+            dateRow[3].setAttribute('data-order', realDate);
+
+            // Set real date for joined column
+            const joinedDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
+            dateRow[5].setAttribute('data-order', joinedDate);
+        });
+
+        // Init datatable --- more info on datatables: https://datatables.net/manual/
+        datatable = $(table).DataTable({
+            "info": false,
+            'order': [],
+            "pageLength": 10,
+            "lengthChange": false,
+            'columnDefs': [
+                { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
+                { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)                
+            ]
+        });
+
+        // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
+        datatable.on('draw', function () {
+            initToggleToolbar();
+            handleDeleteRows();
+            toggleToolbars();
+        });
+    }
+
+    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
+    var handleSearchDatatable = () => {
+        const filterSearch = document.querySelector('[data-kt-user-table-filter="search"]');
+        filterSearch.addEventListener('keyup', function (e) {
+            datatable.search(e.target.value).draw();
+        });
+    }
+
+    // Filter Datatable
+    var handleFilterDatatable = () => {
+        // Select filter options
+        const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
+        const filterButton = filterForm.querySelector('[data-kt-user-table-filter="filter"]');
+        const selectOptions = filterForm.querySelectorAll('select');
+
+        // Filter datatable on submit
+        filterButton.addEventListener('click', function () {
+            var filterString = '';
+
+            // Get filter values
+            selectOptions.forEach((item, index) => {
+                if (item.value && item.value !== '') {
+                    if (index !== 0) {
+                        filterString += ' ';
+                    }
+
+                    // Build filter value options
+                    filterString += item.value;
+                }
+            });
+
+            // Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search(filterString).draw();
+        });
+    }
+
+    // Reset Filter
+    var handleResetForm = () => {
+        // Select reset button
+        const resetButton = document.querySelector('[data-kt-user-table-filter="reset"]');
+
+        // Reset datatable
+        resetButton.addEventListener('click', function () {
+            // Select filter options
+            const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
+            const selectOptions = filterForm.querySelectorAll('select');
+
+            // Reset select2 values -- more info: https://select2.org/programmatic-control/add-select-clear-items
+            selectOptions.forEach(select => {
+                $(select).val('').trigger('change');
+            });
+
+            // Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
+            datatable.search('').draw();
+        });
+    }
+
+
+    // Delete subscirption
+    var handleDeleteRows = () => {
+        // Select all delete buttons
+        const deleteButtons = table.querySelectorAll('[data-kt-users-table-filter="delete_row"]');
+
+        deleteButtons.forEach(d => {
+            // Delete button on click
+            d.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                // Select parent row
+                const parent = e.target.closest('tr');
+
+                // Get user name
+                const userName = parent.querySelectorAll('td')[1].querySelectorAll('a')[1].innerText;
+
+                // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+                Swal.fire({
+                    text: "Are you sure you want to delete " + userName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, delete!",
+                    cancelButtonText: "No, cancel",
+                    customClass: {
+                        confirmButton: "btn fw-bold btn-danger",
+                        cancelButton: "btn fw-bold btn-active-light-primary"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have deleted " + userName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        }).then(function () {
+                            // Remove current row
+                            datatable.row($(parent)).remove().draw();
+                        }).then(function () {
+                            // Detect checked checkboxes
+                            toggleToolbars();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: customerName + " was not deleted.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn fw-bold btn-primary",
+                            }
+                        });
+                    }
+                });
+            })
+        });
+    }
+
+    // Init toggle toolbar
+    var initToggleToolbar = () => {
+        // Toggle selected action toolbar
+        // Select all checkboxes
+        const checkboxes = table.querySelectorAll('[type="checkbox"]');
+
+        // Select elements
+        toolbarBase = document.querySelector('[data-kt-user-table-toolbar="base"]');
+        toolbarSelected = document.querySelector('[data-kt-user-table-toolbar="selected"]');
+        selectedCount = document.querySelector('[data-kt-user-table-select="selected_count"]');
+        const deleteSelected = document.querySelector('[data-kt-user-table-select="delete_selected"]');
+
+        // Toggle delete selected toolbar
+        checkboxes.forEach(c => {
+            // Checkbox on click event
+            c.addEventListener('click', function () {
+                setTimeout(function () {
+                    toggleToolbars();
+                }, 50);
+            });
+        });
+
+        // Deleted selected rows
+        deleteSelected.addEventListener('click', function () {
+            // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
+            Swal.fire({
+                text: "Are you sure you want to delete selected customers?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, delete!",
+                cancelButtonText: "No, cancel",
+                customClass: {
+                    confirmButton: "btn fw-bold btn-danger",
+                    cancelButton: "btn fw-bold btn-active-light-primary"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have deleted all selected customers!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    }).then(function () {
+                        // Remove all selected customers
+                        checkboxes.forEach(c => {
+                            if (c.checked) {
+                                datatable.row($(c.closest('tbody tr'))).remove().draw();
+                            }
+                        });
+
+                        // Remove header checked box
+                        const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
+                        headerCheckbox.checked = false;
+                    }).then(function () {
+                        toggleToolbars(); // Detect checked checkboxes
+                        initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Selected customers was not deleted.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn fw-bold btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    // Toggle toolbars
+    const toggleToolbars = () => {
+        // Select refreshed checkbox DOM elements 
+        const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
+
+        // Detect checkboxes state & count
+        let checkedState = false;
+        let count = 0;
+
+        // Count checked boxes
+        allCheckboxes.forEach(c => {
+            if (c.checked) {
+                checkedState = true;
+                count++;
+            }
+        });
+
+        // Toggle toolbars
+        if (checkedState) {
+            selectedCount.innerHTML = count;
+            toolbarBase.classList.add('d-none');
+            toolbarSelected.classList.remove('d-none');
+        } else {
+            toolbarBase.classList.remove('d-none');
+            toolbarSelected.classList.add('d-none');
+        }
+    }
+
+    return {
+        // Public functions  
+        init: function () {
+            if (!table) {
+                return;
+            }
+
+            initUserTable();
+            initToggleToolbar();
+            handleSearchDatatable();
+            handleResetForm();
+            handleDeleteRows();
+            handleFilterDatatable();
+
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersList.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/add-auth-app.js

@@ -0,0 +1,81 @@
+"use strict";
+
+// Class definition
+var KTUsersAddAuthApp = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_auth_app');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddAuthApp = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                } 
+            });
+        });
+
+    }
+
+    // QR code to text code swapper
+    var initCodeSwap = () => {
+        const qrCode = element.querySelector('[ data-kt-add-auth-action="qr-code"]');
+        const textCode = element.querySelector('[ data-kt-add-auth-action="text-code"]');
+        const qrCodeButton = element.querySelector('[ data-kt-add-auth-action="qr-code-button"]');
+        const textCodeButton = element.querySelector('[ data-kt-add-auth-action="text-code-button"]');
+        const qrCodeLabel = element.querySelector('[ data-kt-add-auth-action="qr-code-label"]');
+        const textCodeLabel = element.querySelector('[ data-kt-add-auth-action="text-code-label"]');
+
+        const toggleClass = () =>{
+            qrCode.classList.toggle('d-none');
+            qrCodeButton.classList.toggle('d-none');
+            qrCodeLabel.classList.toggle('d-none');
+            textCode.classList.toggle('d-none');
+            textCodeButton.classList.toggle('d-none');
+            textCodeLabel.classList.toggle('d-none');
+        }
+
+        // Swap to text code handler
+        textCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+
+        qrCodeButton.addEventListener('click', e =>{
+            e.preventDefault();
+
+            toggleClass();
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddAuthApp();
+            initCodeSwap();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddAuthApp.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/add-one-time-password.js

@@ -0,0 +1,173 @@
+"use strict";
+
+// Class definition
+var KTUsersAddOneTimePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_one_time_password');
+    const form = element.querySelector('#kt_modal_add_one_time_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init one time password modal
+    var initAddOneTimePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'otp_mobile_number': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Valid mobile number is required'
+                            }
+                        }
+                    },
+                    'otp_confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Password confirmation is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to close?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, close it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    modal.hide(); // Hide modal				
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddOneTimePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddOneTimePassword.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/add-schedule.js

@@ -0,0 +1,223 @@
+"use strict";
+
+// Class definition
+var KTUsersAddSchedule = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_schedule');
+    const form = element.querySelector('#kt_modal_add_schedule_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initAddSchedule = () => {       
+
+        // Init flatpickr -- for more info: https://flatpickr.js.org/
+        $("#kt_modal_add_schedule_datepicker").flatpickr({
+            enableTime: true,
+            dateFormat: "Y-m-d H:i",
+        });
+
+        // Init tagify -- for more info: https://yaireo.github.io/tagify/
+        const tagifyInput = form.querySelector('#kt_modal_add_schedule_tagify');
+        new Tagify(tagifyInput, {
+            whitelist: ["sean@dellito.com", "brian@exchange.com", "mikaela@pexcom.com", "f.mitcham@kpmg.com.au", "olivia@corpmail.com", "owen.neil@gmail.com", "dam@consilting.com", "emma@intenso.com", "ana.cf@limtel.com", "robert@benko.com", "lucy.m@fentech.com", "ethan@loop.com.au"],
+            maxTags: 10,
+            dropdown: {
+                maxItems: 20,           // <- mixumum allowed rendered suggestions
+                classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
+                enabled: 0,             // <- show suggestions on focus
+                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
+            }
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		var validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'event_datetime': {
+						validators: {
+							notEmpty: {
+								message: 'Event date & time is required'
+							}
+						}
+					},
+                    'event_name': {
+						validators: {
+							notEmpty: {
+								message: 'Event name is required'
+							}
+						}
+					},
+                    'event_org': {
+						validators: {
+							notEmpty: {
+								message: 'Event organiser is required'
+							}
+						}
+					},
+                    'event_invitees': {
+						validators: {
+							notEmpty: {
+								message: 'Event invitees is required'
+							}
+						}
+					},					
+				},
+				
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="event_invitees"]')).on('change', function () {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('event_invitees');
+        });
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+		submitButton.addEventListener('click', function (e) {
+			// Prevent default button action
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						setTimeout(function() {
+							// Remove loading indication
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							// Show popup confirmation 
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddSchedule();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddSchedule.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/add-task.js

@@ -0,0 +1,324 @@
+"use strict";
+
+// Class definition
+var KTUsersAddTask = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_add_task');
+    const form = element.querySelector('#kt_modal_add_task_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add task modal
+    var initAddTask = () => {
+
+        // Init flatpickr -- for more info: https://flatpickr.js.org/
+        $("#kt_modal_add_task_datepicker").flatpickr({
+            dateFormat: "Y-m-d",
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'task_duedate': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Task due date is required'
+                            }
+                        }
+                    },
+                    'task_name': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Task name is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    } else {
+                        // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        Swal.fire({
+                            text: "Sorry, looks like there are some errors detected, please try again.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Init update task status
+    var initUpdateTaskStatus = () => {
+        const allTaskMenus = document.querySelectorAll('[data-kt-menu-id="kt-users-tasks"]');
+
+        allTaskMenus.forEach(el => {
+            const resetButton = el.querySelector('[data-kt-users-update-task-status="reset"]');
+            const submitButton = el.querySelector('[data-kt-users-update-task-status="submit"]');
+            const taskForm = el.querySelector('[data-kt-menu-id="kt-users-tasks-form"]');
+
+            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+            var validator = FormValidation.formValidation(
+                taskForm,
+                {
+                    fields: {
+                        'task_status': {
+                            validators: {
+                                notEmpty: {
+                                    message: 'Task due date is required'
+                                }
+                            }
+                        },
+                    },
+
+                    plugins: {
+                        trigger: new FormValidation.plugins.Trigger(),
+                        bootstrap: new FormValidation.plugins.Bootstrap5({
+                            rowSelector: '.fv-row',
+                            eleInvalidClass: '',
+                            eleValidClass: ''
+                        })
+                    }
+                }
+            );
+
+            // Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
+            $(taskForm.querySelector('[name="task_status"]')).on('change', function () {
+                // Revalidate the field when an option is chosen
+                validator.revalidateField('task_status');
+            });
+
+            // Reset action handler
+            resetButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                Swal.fire({
+                    text: "Are you sure you would like to reset?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, reset it!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        taskForm.reset(); // Reset form		
+                        el.hide();
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: "Your form was not reset!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+
+            // Submit action handler
+            submitButton.addEventListener('click', e => {
+                e.preventDefault();
+
+                // Validate form before submit
+                if (validator) {
+                    validator.validate().then(function (status) {
+                        console.log('validated!');
+
+                        if (status == 'Valid') {
+                            // Show loading indication
+                            submitButton.setAttribute('data-kt-indicator', 'on');
+
+                            // Disable button to avoid multiple click 
+                            submitButton.disabled = true;
+
+                            // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                            setTimeout(function () {
+                                // Remove loading indication
+                                submitButton.removeAttribute('data-kt-indicator');
+
+                                // Enable button
+                                submitButton.disabled = false;
+
+                                // Show popup confirmation 
+                                Swal.fire({
+                                    text: "Form has been successfully submitted!",
+                                    icon: "success",
+                                    buttonsStyling: false,
+                                    confirmButtonText: "Ok, got it!",
+                                    customClass: {
+                                        confirmButton: "btn btn-primary"
+                                    }
+                                }).then(function (result) {
+                                    if (result.isConfirmed) {
+                                        el.hide();
+                                    }
+                                });
+
+                                //taskForm.submit(); // Submit form
+                            }, 2000);
+                        } else {
+                            // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                            Swal.fire({
+                                text: "Sorry, looks like there are some errors detected, please try again.",
+                                icon: "error",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function(){
+                                //el.show();
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initAddTask();
+            initUpdateTaskStatus();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersAddTask.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/update-details.js

@@ -0,0 +1,132 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateDetails = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_details');
+    const form = element.querySelector('#kt_modal_update_user_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateDetails = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show loading indication
+            submitButton.setAttribute('data-kt-indicator', 'on');
+
+            // Disable button to avoid multiple click 
+            submitButton.disabled = true;
+
+            // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+            setTimeout(function () {
+                // Remove loading indication
+                submitButton.removeAttribute('data-kt-indicator');
+
+                // Enable button
+                submitButton.disabled = false;
+
+                // Show popup confirmation 
+                Swal.fire({
+                    text: "Form has been successfully submitted!",
+                    icon: "success",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                }).then(function (result) {
+                    if (result.isConfirmed) {
+                        modal.hide();
+                    }
+                });
+
+                //form.submit(); // Submit form
+            }, 2000);
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateDetails();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateDetails.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/update-email.js

@@ -0,0 +1,166 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateEmail = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_email');
+    const form = element.querySelector('#kt_modal_update_email_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateEmail = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'profile_email': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Email address is required'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateEmail();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateEmail.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/update-password.js

@@ -0,0 +1,194 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdatePassword = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_password');
+    const form = element.querySelector('#kt_modal_update_password_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdatePassword = () => {
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            {
+                fields: {
+                    'current_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'Current password is required'
+                            }
+                        }
+                    },
+                    'new_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password is required'
+                            },
+                            callback: {
+                                message: 'Please enter valid password',
+                                callback: function (input) {
+                                    if (input.value.length > 0) {
+                                        return validatePassword();
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    'confirm_password': {
+                        validators: {
+                            notEmpty: {
+                                message: 'The password confirmation is required'
+                            },
+                            identical: {
+                                compare: function () {
+                                    return form.querySelector('[name="new_password"]').value;
+                                },
+                                message: 'The password and its confirm are not the same'
+                            }
+                        }
+                    },
+                },
+
+                plugins: {
+                    trigger: new FormValidation.plugins.Trigger(),
+                    bootstrap: new FormValidation.plugins.Bootstrap5({
+                        rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+                    })
+                }
+            }
+        );
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    modal.hide();
+                                }
+                            });
+
+                            //form.submit(); // Submit form
+                        }, 2000);
+                    }
+                });
+            }
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdatePassword();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdatePassword.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/update-role.js

@@ -0,0 +1,132 @@
+"use strict";
+
+// Class definition
+var KTUsersUpdateRole = function () {
+    // Shared variables
+    const element = document.getElementById('kt_modal_update_role');
+    const form = element.querySelector('#kt_modal_update_role_form');
+    const modal = new bootstrap.Modal(element);
+
+    // Init add schedule modal
+    var initUpdateRole = () => {
+
+        // Close button handler
+        const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
+        closeButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Cancel button handler
+        const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+
+        // Submit button handler
+        const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Show loading indication
+            submitButton.setAttribute('data-kt-indicator', 'on');
+
+            // Disable button to avoid multiple click 
+            submitButton.disabled = true;
+
+            // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+            setTimeout(function () {
+                // Remove loading indication
+                submitButton.removeAttribute('data-kt-indicator');
+
+                // Enable button
+                submitButton.disabled = false;
+
+                // Show popup confirmation 
+                Swal.fire({
+                    text: "Form has been successfully submitted!",
+                    icon: "success",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                }).then(function (result) {
+                    if (result.isConfirmed) {
+                        modal.hide();
+                    }
+                });
+
+                //form.submit(); // Submit form
+            }, 2000);
+        });
+    }
+
+    return {
+        // Public functions
+        init: function () {
+            initUpdateRole();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersUpdateRole.init();
+});

resources/assets/core/js/custom/apps/user-management/users/view/view.js

@@ -0,0 +1,234 @@
+"use strict";
+
+// Class definition
+var KTUsersViewMain = function () {
+
+    // Init login session button
+    var initLoginSession = () => {
+        const button = document.getElementById('kt_modal_sign_out_sesions');
+
+        button.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like sign out all sessions?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, sign out!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have signed out all sessions!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your sessions are still preserved!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+
+    // Init sign out single user
+    var initSignOutUser = () => {
+        const signOutButtons = document.querySelectorAll('[data-kt-users-sign-out="single_user"]');
+
+        signOutButtons.forEach(button => {
+            button.addEventListener('click', e => {
+                e.preventDefault();
+
+                const deviceName = button.closest('tr').querySelectorAll('td')[1].innerText;
+
+                Swal.fire({
+                    text: "Are you sure you would like sign out " + deviceName + "?",
+                    icon: "warning",
+                    showCancelButton: true,
+                    buttonsStyling: false,
+                    confirmButtonText: "Yes, sign out!",
+                    cancelButtonText: "No, return",
+                    customClass: {
+                        confirmButton: "btn btn-primary",
+                        cancelButton: "btn btn-active-light"
+                    }
+                }).then(function (result) {
+                    if (result.value) {
+                        Swal.fire({
+                            text: "You have signed out " + deviceName + "!.",
+                            icon: "success",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        }).then(function(){
+                            button.closest('tr').remove();
+                        });
+                    } else if (result.dismiss === 'cancel') {
+                        Swal.fire({
+                            text: deviceName + "'s session is still preserved!.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary",
+                            }
+                        });
+                    }
+                });
+            });
+        });
+
+
+    }
+
+    // Delete two step authentication handler
+    const initDeleteTwoStep = () => {
+        const deleteButton = document.getElementById('kt_users_delete_two_step');
+
+        deleteButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like remove this two-step authentication?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, remove it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    Swal.fire({
+                        text: "You have removed this two-step authentication!.",
+                        icon: "success",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your two-step authentication is still valid!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        })
+    }
+
+    // Email preference form handler
+    const initEmailPreferenceForm = () => {
+        // Define variables
+        const form = document.getElementById('kt_users_email_notification_form');
+        const submitButton = form.querySelector('#kt_users_email_notification_submit');
+        const cancelButton = form.querySelector('#kt_users_email_notification_cancel');
+
+        // Submit action handler
+        submitButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            // Show loading indication
+            submitButton.setAttribute('data-kt-indicator', 'on');
+
+            // Disable button to avoid multiple click 
+            submitButton.disabled = true;
+
+            // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+            setTimeout(function () {
+                // Remove loading indication
+                submitButton.removeAttribute('data-kt-indicator');
+
+                // Enable button
+                submitButton.disabled = false;
+
+                // Show popup confirmation 
+                Swal.fire({
+                    text: "Form has been successfully submitted!",
+                    icon: "success",
+                    buttonsStyling: false,
+                    confirmButtonText: "Ok, got it!",
+                    customClass: {
+                        confirmButton: "btn btn-primary"
+                    }
+                });
+
+                //form.submit(); // Submit form
+            }, 2000);
+        });
+
+        cancelButton.addEventListener('click', e => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+
+    return {
+        // Public functions
+        init: function () {
+            initLoginSession();
+            initSignOutUser();
+            initDeleteTwoStep();
+            initEmailPreferenceForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTUsersViewMain.init();
+});

resources/assets/core/js/custom/pages/pricing/general.js

@@ -0,0 +1,57 @@
+"use strict";
+
+// Class definition
+var KTPricingGeneral = function () {
+    // Private variables
+    var element;
+	var planPeriodMonthButton;
+	var planPeriodAnnualButton;
+
+	var changePlanPrices = function(type) {
+		var items = [].slice.call(element.querySelectorAll('[data-kt-plan-price-month]'));
+
+		items.map(function (item) {
+			var monthPrice = item.getAttribute('data-kt-plan-price-month');
+			var annualPrice = item.getAttribute('data-kt-plan-price-annual');
+
+			if ( type === 'month' ) {
+				item.innerHTML = monthPrice;
+			} else if ( type === 'annual' ) {
+				item.innerHTML = annualPrice;
+			}
+		});
+	}
+
+    var handlePlanPeriodSelection = function(e) {
+
+        // Handle period change
+        planPeriodMonthButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            changePlanPrices('month');
+        });
+
+		planPeriodAnnualButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            
+            changePlanPrices('annual');
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            element = document.querySelector('#kt_pricing');
+			planPeriodMonthButton = element.querySelector('[data-kt-plan="month"]');
+			planPeriodAnnualButton = element.querySelector('[data-kt-plan="annual"]');
+
+            // Handlers
+            handlePlanPeriodSelection();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTPricingGeneral.init();
+});

resources/assets/core/js/custom/pages/user-profile/followers.js

@@ -0,0 +1,49 @@
+"use strict";
+
+// Class definition
+var KTProfileFollowers = function () {
+    // init variables
+    var showMoreButton = document.getElementById('kt_followers_show_more_button');
+    var showMoreCards = document.getElementById('kt_followers_show_more_cards');
+
+    // Private functions
+    var handleShowMore = function () {
+        // Show more click
+        showMoreButton.addEventListener('click', function (e) {
+            showMoreButton.setAttribute('data-kt-indicator', 'on');
+
+            // Disable button to avoid multiple click 
+            showMoreButton.disabled = true;
+            
+            setTimeout(function() {
+                // Hide loading indication
+                showMoreButton.removeAttribute('data-kt-indicator');
+
+                // Enable button
+				showMoreButton.disabled = false;
+
+                // Hide button
+                showMoreButton.classList.add('d-none');
+
+                // Show card
+                showMoreCards.classList.remove('d-none');
+
+                // Scroll to card
+                KTUtil.scrollTo(showMoreCards, 200);
+            }, 2000);
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            handleShowMore();
+        }
+    }
+}();
+
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTProfileFollowers.init();
+});

resources/assets/core/js/custom/utilities/modals/bidding.js

@@ -0,0 +1,264 @@
+"use strict";
+
+// Class definition
+var KTModalBidding = function () {
+    // Shared variables
+    var element;
+    var form;
+    var modal;
+
+    // Private functions
+    const initForm = () => {
+        // Dynamically create validation non-empty rule
+        const requiredFields = form.querySelectorAll('.required');
+        var detectedField;
+        var validationFields = {
+            fields: {},
+
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap: new FormValidation.plugins.Bootstrap5({
+                    rowSelector: '.fv-row',
+                    eleInvalidClass: '',
+                    eleValidClass: ''
+                })
+            }
+        }
+
+        // Detect required fields
+        requiredFields.forEach(el => {
+            const input = el.closest('.fv-row').querySelector('input');
+            if (input) {
+                detectedField = input;
+            }
+
+            const textarea = el.closest('.fv-row').querySelector('textarea');
+            if (textarea) {
+                detectedField = textarea;
+            }
+
+            const select = el.closest('.fv-row').querySelector('select');
+            if (select) {
+                detectedField = select;
+            }
+
+            // Add validation rule                
+            const name = detectedField.getAttribute('name');
+            validationFields.fields[name] = {
+                validators: {
+                    notEmpty: {
+                        message: el.innerText + ' is required'
+                    }
+                }
+            }
+        });
+
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+        var validator = FormValidation.formValidation(
+            form,
+            validationFields
+        );
+
+        // Submit button handler
+        const submitButton = form.querySelector('[data-kt-modal-action-type="submit"]');
+        submitButton.addEventListener('click', function (e) {
+            // Prevent default button action
+            e.preventDefault();
+
+            // Validate form before submit
+            if (validator) {
+                validator.validate().then(function (status) {
+                    console.log('validated!');
+
+                    if (status == 'Valid') {
+                        // Show loading indication
+                        submitButton.setAttribute('data-kt-indicator', 'on');
+
+                        // Disable button to avoid multiple click 
+                        submitButton.disabled = true;
+
+                        // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+                        setTimeout(function () {
+                            // Remove loading indication
+                            submitButton.removeAttribute('data-kt-indicator');
+
+                            // Enable button
+                            submitButton.disabled = false;
+
+                            // Show popup confirmation 
+                            Swal.fire({
+                                text: "Form has been successfully submitted!",
+                                icon: "success",
+                                buttonsStyling: false,
+                                confirmButtonText: "Ok, got it!",
+                                customClass: {
+                                    confirmButton: "btn btn-primary"
+                                }
+                            }).then(function () {
+                                //form.submit(); // Submit form
+                                form.reset();
+                                modal.hide();
+                            });
+                        }, 2000);
+                    } else {
+                        // Show popup error 
+                        Swal.fire({
+                            text: "Oops! There are some error(s) detected.",
+                            icon: "error",
+                            buttonsStyling: false,
+                            confirmButtonText: "Ok, got it!",
+                            customClass: {
+                                confirmButton: "btn btn-primary"
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Init Select2 template options
+    const initSelect2Templates = () => {
+        const elements = form.querySelectorAll('[data-kt-modal-bidding-type] select');
+
+        if (!elements) {
+            return;
+        }
+
+        // Format options
+        const format = (item) => {
+            if (!item.id) {
+                return item.text;
+            }
+
+            var url = 'assets/media/' + item.element.getAttribute('data-kt-bidding-modal-option-icon');
+            var img = $("<img>", {
+                class: "rounded-circle me-2",
+                width: 26,
+                src: url
+            });
+            var span = $("<span>", {
+                text: " " + item.text
+            });
+            span.prepend(img);
+            return span;
+        }
+
+        elements.forEach(el => {
+            // Init Select2 --- more info: https://select2.org/
+            $(el).select2({
+                minimumResultsForSearch: Infinity,
+                templateResult: function (item) {
+                    return format(item);
+                }
+            });
+        });
+    }
+
+    // Handle bid options
+    const handleBidOptions = () => {
+        const options = form.querySelectorAll('[data-kt-modal-bidding="option"]');
+        const inputEl = form.querySelector('[name="bid_amount"]');
+        options.forEach(option => {
+            option.addEventListener('click', e => {
+                e.preventDefault();
+
+                inputEl.value = e.target.innerText;
+            });
+        });
+    }
+
+    // Handle currency selector
+    const handleCurrencySelector = () => {
+        const element = form.querySelector('.form-select[name="currency_type"]');
+
+        // Select2 event listener
+        $(element).on('select2:select', function (e) {
+            const value = e.params.data;
+            swapCurrency(value);
+        });
+
+        const swapCurrency = (target) => {
+            console.log(target);
+            const currencies = form.querySelectorAll('[data-kt-modal-bidding-type]');
+            currencies.forEach(currency => {
+                currency.classList.add('d-none');
+
+                if (currency.getAttribute('data-kt-modal-bidding-type') === target.id) {
+                    currency.classList.remove('d-none');
+                }
+            });
+        }
+    }
+
+    // Handle cancel modal
+    const handleCancelAction = () => {
+        const cancelButton = element.querySelector('[data-kt-modal-action-type="cancel"]');
+        const closeButton = element.querySelector('[data-kt-modal-action-type="close"]');
+        cancelButton.addEventListener('click', e => {
+            cancelAction(e);
+        });
+
+        closeButton.addEventListener('click', e => {
+            cancelAction(e);
+        });
+
+        const cancelAction = (e) => {
+            e.preventDefault();
+
+            Swal.fire({
+                text: "Are you sure you would like to cancel?",
+                icon: "warning",
+                showCancelButton: true,
+                buttonsStyling: false,
+                confirmButtonText: "Yes, cancel it!",
+                cancelButtonText: "No, return",
+                customClass: {
+                    confirmButton: "btn btn-primary",
+                    cancelButton: "btn btn-active-light"
+                }
+            }).then(function (result) {
+                if (result.value) {
+                    form.reset(); // Reset form	
+                    modal.hide(); // Hide modal				
+                } else if (result.dismiss === 'cancel') {
+                    Swal.fire({
+                        text: "Your form has not been cancelled!.",
+                        icon: "error",
+                        buttonsStyling: false,
+                        confirmButtonText: "Ok, got it!",
+                        customClass: {
+                            confirmButton: "btn btn-primary",
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_bidding');
+            form = document.getElementById('kt_modal_bidding_form');
+            modal = new bootstrap.Modal(element);
+
+            if (!form) {
+                return;
+            }
+
+            initForm();
+            initSelect2Templates();
+            handleBidOptions();
+            handleCurrencySelector();
+            handleCancelAction();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalBidding.init();
+});

resources/assets/core/js/custom/utilities/modals/create-account.js

@@ -0,0 +1,363 @@
+"use strict";
+
+// Class definition
+var KTCreateAccount = function () {
+	// Elements
+	var modal;	
+	var modalEl;
+
+	var stepper;
+	var form;
+	var formSubmitButton;
+	var formContinueButton;
+
+	// Variables
+	var stepperObj;
+	var validations = [];
+
+	// Private Functions
+	var initStepper = function () {
+		// Initialize Stepper
+		stepperObj = new KTStepper(stepper);
+
+		// Stepper change event
+		stepperObj.on('kt.stepper.changed', function (stepper) {
+			if (stepperObj.getCurrentStepIndex() === 4) {
+				formSubmitButton.classList.remove('d-none');
+				formSubmitButton.classList.add('d-inline-block');
+				formContinueButton.classList.add('d-none');
+			} else if (stepperObj.getCurrentStepIndex() === 5) {
+				formSubmitButton.classList.add('d-none');
+				formContinueButton.classList.add('d-none');
+			} else {
+				formSubmitButton.classList.remove('d-inline-block');
+				formSubmitButton.classList.remove('d-none');
+				formContinueButton.classList.remove('d-none');
+			}
+		});
+
+		// Validation before going to next page
+		stepperObj.on('kt.stepper.next', function (stepper) {
+			console.log('stepper.next');
+
+			// Validate form before change stepper step
+			var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for currnt step
+
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						stepper.goNext();
+
+						KTUtil.scrollTop();
+					} else {
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-light"
+							}
+						}).then(function () {
+							KTUtil.scrollTop();
+						});
+					}
+				});
+			} else {
+				stepper.goNext();
+
+				KTUtil.scrollTop();
+			}
+		});
+
+		// Prev event
+		stepperObj.on('kt.stepper.previous', function (stepper) {
+			console.log('stepper.previous');
+
+			stepper.goPrevious();
+			KTUtil.scrollTop();
+		});
+	}
+
+	var handleForm = function() {
+		formSubmitButton.addEventListener('click', function (e) {
+			// Validate form before change stepper step
+			var validator = validations[3]; // get validator for last form
+
+			validator.validate().then(function (status) {
+				console.log('validated!');
+
+				if (status == 'Valid') {
+					// Prevent default button action
+					e.preventDefault();
+
+					// Disable button to avoid multiple click 
+					formSubmitButton.disabled = true;
+
+					// Show loading indication
+					formSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+					// Simulate form submission
+					setTimeout(function() {
+						// Hide loading indication
+						formSubmitButton.removeAttribute('data-kt-indicator');
+
+						// Enable button
+						formSubmitButton.disabled = false;
+
+						stepperObj.goNext();
+						//KTUtil.scrollTop();
+					}, 2000);
+				} else {
+					Swal.fire({
+						text: "Sorry, looks like there are some errors detected, please try again.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-light"
+						}
+					}).then(function () {
+						KTUtil.scrollTop();
+					});
+				}
+			});
+		});
+
+		// Expiry month. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_month"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_month');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="card_expiry_year"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[3].revalidateField('card_expiry_year');
+        });
+
+		// Expiry year. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="business_type"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validations[2].revalidateField('business_type');
+        });
+	}
+
+	var initValidation = function () {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		// Step 1
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					account_type: {
+						validators: {
+							notEmpty: {
+								message: 'Account type is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 2
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'account_team_size': {
+						validators: {
+							notEmpty: {
+								message: 'Time size is required'
+							}
+						}
+					},
+					'account_name': {
+						validators: {
+							notEmpty: {
+								message: 'Account name is required'
+							}
+						}
+					},
+					'account_plan': {
+						validators: {
+							notEmpty: {
+								message: 'Account plan is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 3
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'business_name': {
+						validators: {
+							notEmpty: {
+								message: 'Busines name is required'
+							}
+						}
+					},
+					'business_descriptor': {
+						validators: {
+							notEmpty: {
+								message: 'Busines descriptor is required'
+							}
+						}
+					},
+					'business_type': {
+						validators: {
+							notEmpty: {
+								message: 'Busines type is required'
+							}
+						}
+					},
+					'business_description': {
+						validators: {
+							notEmpty: {
+								message: 'Busines description is required'
+							}
+						}
+					},
+					'business_email': {
+						validators: {
+							notEmpty: {
+								message: 'Busines email is required'
+							},
+							emailAddress: {
+								message: 'The value is not a valid email address'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+
+		// Step 4
+		validations.push(FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'card_name': {
+						validators: {
+							notEmpty: {
+								message: 'Name on card is required'
+							}
+						}
+					},
+					'card_number': {
+						validators: {
+							notEmpty: {
+								message: 'Card member is required'
+							},
+                            creditCard: {
+                                message: 'Card number is not valid'
+                            }
+						}
+					},
+					'card_expiry_month': {
+						validators: {
+							notEmpty: {
+								message: 'Month is required'
+							}
+						}
+					},
+					'card_expiry_year': {
+						validators: {
+							notEmpty: {
+								message: 'Year is required'
+							}
+						}
+					},
+					'card_cvv': {
+						validators: {
+							notEmpty: {
+								message: 'CVV is required'
+							},
+							digits: {
+								message: 'CVV must contain only digits'
+							},
+							stringLength: {
+								min: 3,
+								max: 4,
+								message: 'CVV must contain 3 to 4 digits only'
+							}
+						}
+					}
+				},
+
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					// Bootstrap Framework Integration
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		));
+	}
+
+	var handleFormSubmit = function() {
+		
+	}
+
+	return {
+		// Public Functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_account');
+			if (modalEl) {
+				modal = new bootstrap.Modal(modalEl);	
+			}					
+
+			stepper = document.querySelector('#kt_create_account_stepper');
+			form = stepper.querySelector('#kt_create_account_form');
+			formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
+			formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');
+
+			initStepper();
+			initValidation();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCreateAccount.init();
+});

resources/assets/core/js/custom/utilities/modals/create-api-key.js

@@ -0,0 +1,183 @@
+"use strict";
+
+// Class definition
+var KTModalCreateApiKey = function () {
+	var submitButton;
+	var cancelButton;
+	var validator;
+	var form;
+	var modal;
+	var modalEl;
+
+	// Init form inputs
+	var initForm = function() {
+		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
+        $(form.querySelector('[name="category"]')).on('change', function() {
+            // Revalidate the field when an option is chosen
+            validator.revalidateField('category');
+        });
+	}
+
+	// Handle form validation and submittion
+	var handleForm = function() {
+		// Stepper custom navigation
+
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		validator = FormValidation.formValidation(
+			form,
+			{
+				fields: {
+					'name': {
+						validators: {
+							notEmpty: {
+								message: 'API name is required'
+							}
+						}
+					},
+					'description': {
+						validators: {
+							notEmpty: {
+								message: 'Description is required'
+							}
+						}
+					},
+					'category': {
+						validators: {
+							notEmpty: {
+								message: 'Country is required'
+							}
+						}
+					},
+					'method': {
+						validators: {
+							notEmpty: {
+								message: 'API method is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+		// Action buttons
+		submitButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Validate form before submit
+			if (validator) {
+				validator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						submitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						submitButton.disabled = true;
+
+						setTimeout(function() {
+							submitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							submitButton.disabled = false;
+							
+							Swal.fire({
+								text: "Form has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modal.hide();
+								}
+							});
+
+							//form.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error popuo. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+		});
+
+		cancelButton.addEventListener('click', function (e) {
+			e.preventDefault();
+
+			// Show confirmation popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+			Swal.fire({
+				text: "Are you sure you would like to cancel?",
+				icon: "warning",
+				showCancelButton: true,
+				buttonsStyling: false,
+				confirmButtonText: "Yes, cancel it!",
+				cancelButtonText: "No, return",
+				customClass: {
+					confirmButton: "btn btn-primary",
+					cancelButton: "btn btn-active-light"
+				}
+			}).then(function (result) {
+				if (result.value) {
+					form.reset(); // Reset form	
+					modal.hide(); // Hide modal				
+				} else if (result.dismiss === 'cancel') {
+					// Show success message. 
+					Swal.fire({
+						text: "Your form has not been cancelled!.",
+						icon: "error",
+						buttonsStyling: false,
+						confirmButtonText: "Ok, got it!",
+						customClass: {
+							confirmButton: "btn btn-primary",
+						}
+					});
+				}
+			});
+		});
+	}
+
+	return {
+		// Public functions
+		init: function () {
+			// Elements
+			modalEl = document.querySelector('#kt_modal_create_api_key');
+
+			if (!modalEl) {
+				return;
+			}
+
+			modal = new bootstrap.Modal(modalEl);
+
+			form = document.querySelector('#kt_modal_create_api_key_form');
+			submitButton = document.getElementById('kt_modal_create_api_key_submit');
+			cancelButton = document.getElementById('kt_modal_create_api_key_cancel');
+
+			initForm();
+			handleForm();
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+	KTModalCreateApiKey.init();
+});

resources/assets/core/js/custom/utilities/modals/two-factor-authentication.js

@@ -0,0 +1,266 @@
+"use strict";
+
+// Class definition
+var KTModalTwoFactorAuthentication = function () {
+    // Private variables
+    var modal;
+    var modalObject;
+
+    var optionsWrapper;
+    var optionsSelectButton;
+
+    var smsWrapper;
+    var smsForm;
+    var smsSubmitButton;
+    var smsCancelButton;
+    var smsValidator;
+
+    var appsWrapper;
+    var appsForm;
+    var appsSubmitButton;
+    var appsCancelButton;
+    var appsValidator;
+
+    // Private functions
+    var handleOptionsForm = function() {
+        // Handle options selection
+        optionsSelectButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.add('d-none');
+
+            if (option.value == 'sms') {
+                smsWrapper.classList.remove('d-none');
+            } else {
+                appsWrapper.classList.remove('d-none');
+            }
+        });
+    }
+
+	var showOptionsForm = function() {
+		optionsWrapper.classList.remove('d-none');
+		smsWrapper.classList.add('d-none');
+		appsWrapper.classList.add('d-none');
+    }
+
+    var handleSMSForm = function() {
+        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		smsValidator = FormValidation.formValidation(
+			smsForm,
+			{
+				fields: {
+					'mobile': {
+						validators: {
+							notEmpty: {
+								message: 'Mobile no is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Handle apps submition
+        smsSubmitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+			// Validate form before submit
+			if (smsValidator) {
+				smsValidator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						// Show loading indication
+						smsSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						smsSubmitButton.disabled = true;						
+
+						// Simulate ajax process
+						setTimeout(function() {
+							// Remove loading indication
+							smsSubmitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							smsSubmitButton.disabled = false;
+							
+							// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
+							Swal.fire({
+								text: "Mobile number has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modalObject.hide();
+									showOptionsForm();
+								}
+							});
+
+							//smsForm.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+        });
+
+        // Handle sms cancelation
+        smsCancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.remove('d-none');
+            smsWrapper.classList.add('d-none');
+        });
+    }
+
+    var handleAppsForm = function() {
+		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
+		appsValidator = FormValidation.formValidation(
+			appsForm,
+			{
+				fields: {
+					'code': {
+						validators: {
+							notEmpty: {
+								message: 'Code is required'
+							}
+						}
+					}
+				},
+				plugins: {
+					trigger: new FormValidation.plugins.Trigger(),
+					bootstrap: new FormValidation.plugins.Bootstrap5({
+						rowSelector: '.fv-row',
+                        eleInvalidClass: '',
+                        eleValidClass: ''
+					})
+				}
+			}
+		);
+
+        // Handle apps submition
+        appsSubmitButton.addEventListener('click', function (e) {
+            e.preventDefault();
+
+			// Validate form before submit
+			if (appsValidator) {
+				appsValidator.validate().then(function (status) {
+					console.log('validated!');
+
+					if (status == 'Valid') {
+						appsSubmitButton.setAttribute('data-kt-indicator', 'on');
+
+						// Disable button to avoid multiple click 
+						appsSubmitButton.disabled = true;
+
+						setTimeout(function() {
+							appsSubmitButton.removeAttribute('data-kt-indicator');
+
+							// Enable button
+							appsSubmitButton.disabled = false;
+							
+							// Show success message.
+							Swal.fire({
+								text: "Code has been successfully submitted!",
+								icon: "success",
+								buttonsStyling: false,
+								confirmButtonText: "Ok, got it!",
+								customClass: {
+									confirmButton: "btn btn-primary"
+								}
+							}).then(function (result) {
+								if (result.isConfirmed) {
+									modalObject.hide();
+									showOptionsForm();
+								}
+							});
+
+							//appsForm.submit(); // Submit form
+						}, 2000);   						
+					} else {
+						// Show error message.
+						Swal.fire({
+							text: "Sorry, looks like there are some errors detected, please try again.",
+							icon: "error",
+							buttonsStyling: false,
+							confirmButtonText: "Ok, got it!",
+							customClass: {
+								confirmButton: "btn btn-primary"
+							}
+						});
+					}
+				});
+			}
+        });
+
+        // Handle apps cancelation
+        appsCancelButton.addEventListener('click', function (e) {
+            e.preventDefault();
+            var option = optionsWrapper.querySelector('[name="auth_option"]:checked');
+
+            optionsWrapper.classList.remove('d-none');
+            appsWrapper.classList.add('d-none');
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            modal = document.querySelector('#kt_modal_two_factor_authentication');
+
+			if (!modal) {
+				return;
+			}
+
+            modalObject = new bootstrap.Modal(modal);
+
+            optionsWrapper = modal.querySelector('[data-kt-element="options"]');
+            optionsSelectButton = modal.querySelector('[data-kt-element="options-select"]');
+
+            smsWrapper = modal.querySelector('[data-kt-element="sms"]');
+            smsForm = modal.querySelector('[data-kt-element="sms-form"]');
+            smsSubmitButton = modal.querySelector('[data-kt-element="sms-submit"]');
+            smsCancelButton = modal.querySelector('[data-kt-element="sms-cancel"]');
+
+            appsWrapper = modal.querySelector('[data-kt-element="apps"]');
+            appsForm = modal.querySelector('[data-kt-element="apps-form"]');
+            appsSubmitButton = modal.querySelector('[data-kt-element="apps-submit"]');
+            appsCancelButton = modal.querySelector('[data-kt-element="apps-cancel"]');
+
+            // Handle forms
+            handleOptionsForm();
+            handleSMSForm();
+            handleAppsForm();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalTwoFactorAuthentication.init();
+});

resources/assets/core/js/custom/utilities/modals/upgrade-plan.js

@@ -0,0 +1,65 @@
+"use strict";
+
+// Class definition
+var KTModalUpgradePlan = function () {
+    // Private variables
+    var modal;
+	var planPeriodMonthButton;
+	var planPeriodAnnualButton;
+
+	var changePlanPrices = function(type) {
+		var items = [].slice.call(modal.querySelectorAll('[data-kt-plan-price-month]'));
+
+		items.map(function (item) {
+			var monthPrice = item.getAttribute('data-kt-plan-price-month');
+			var annualPrice = item.getAttribute('data-kt-plan-price-annual');
+
+			if ( type === 'month' ) {
+				item.innerHTML = monthPrice;
+			} else if ( type === 'annual' ) {
+				item.innerHTML = annualPrice;
+			}
+		});
+	}
+
+    var handlePlanPeriodSelection = function() {
+        // Handle period change
+        planPeriodMonthButton.addEventListener('click', function (e) {
+            changePlanPrices('month');
+        });
+
+		planPeriodAnnualButton.addEventListener('click', function (e) {
+            changePlanPrices('annual');
+        });
+    }
+
+    var handleTabs = function() {
+        KTUtil.on(modal, '[data-bs-toggle="tab"]', 'click', function(e) {
+            this.querySelector('[type="radio"]').checked = true;
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            modal = document.querySelector('#kt_modal_upgrade_plan');
+
+            if (!modal) {
+				return;
+			}
+
+			planPeriodMonthButton = modal.querySelector('[data-kt-plan="month"]');
+			planPeriodAnnualButton = modal.querySelector('[data-kt-plan="annual"]');
+
+            // Handlers
+            handlePlanPeriodSelection();
+            handleTabs();
+        }
+    }
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTModalUpgradePlan.init();
+});

resources/assets/core/js/custom/utilities/modals/users-search.js

@@ -0,0 +1,77 @@
+"use strict";
+
+// Class definition
+var KTModalUserSearch = function () {
+    // Private variables
+    var element;
+    var suggestionsElement;
+    var resultsElement;
+    var wrapperElement;
+    var emptyElement;
+    var searchObject;
+
+    // Private functions
+    var processs = function (search) {
+        var timeout = setTimeout(function () {
+            var number = KTUtil.getRandomInt(1, 3);
+
+            // Hide recently viewed
+            suggestionsElement.classList.add('d-none');
+
+            if (number === 3) {
+                // Hide results
+                resultsElement.classList.add('d-none');
+                // Show empty message 
+                emptyElement.classList.remove('d-none');
+            } else {
+                // Show results
+                resultsElement.classList.remove('d-none');
+                // Hide empty message 
+                emptyElement.classList.add('d-none');
+            }
+
+            // Complete search
+            search.complete();
+        }, 1500);
+    }
+
+    var clear = function (search) {
+        // Show recently viewed
+        suggestionsElement.classList.remove('d-none');
+        // Hide results
+        resultsElement.classList.add('d-none');
+        // Hide empty message 
+        emptyElement.classList.add('d-none');
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            element = document.querySelector('#kt_modal_users_search_handler');
+
+            if (!element) {
+                return;
+            }
+
+            wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
+            suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
+            resultsElement = element.querySelector('[data-kt-search-element="results"]');
+            emptyElement = element.querySelector('[data-kt-search-element="empty"]');
+
+            // Initialize search handler
+            searchObject = new KTSearch(element);
+
+            // Search handler
+            searchObject.on('kt.search.process', processs);
+
+            // Clear handler
+            searchObject.on('kt.search.clear', clear);
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTModalUserSearch.init();
+});

resources/assets/core/js/custom/utilities/search/horizontal.js

@@ -0,0 +1,40 @@
+"use strict";
+ 
+// Class definition
+var KTSearchHorizontal = function () {
+    // Private functions
+    var initAdvancedSearchForm = function () {
+       var form = document.querySelector('#kt_advanced_search_form');
+
+       // Init tags
+       var tags = form.querySelector('[name="tags"]');
+       new Tagify(tags);
+    }
+
+    var handleAdvancedSearchToggle = function () {
+        var link = document.querySelector('#kt_horizontal_search_advanced_link');
+
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            
+            if (link.innerHTML === "Advanced Search") {
+                link.innerHTML = "Hide Advanced Search";
+            } else {
+                link.innerHTML = "Advanced Search";
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initAdvancedSearchForm();
+            handleAdvancedSearchToggle();
+        }
+    }     
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTSearchHorizontal.init();
+});

resources/assets/core/js/layout/app.js

@@ -0,0 +1,659 @@
+"use strict";
+
+// Class definition
+var KTApp = function () {
+    var select2FocusFixInitialized = false;
+
+    var initPageLoader = function () {
+        // CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
+        KTUtil.removeClass(document.body, 'page-loading');
+    }
+
+    var initBootstrapTooltip = function (el, options) {
+        var delay = {};
+
+        // Handle delay options
+        if (el.hasAttribute('data-bs-delay-hide')) {
+            delay['hide'] = el.getAttribute('data-bs-delay-hide');
+        }
+
+        if (el.hasAttribute('data-bs-delay-show')) {
+            delay['show'] = el.getAttribute('data-bs-delay-show');
+        }
+
+        if (delay) {
+            options['delay'] = delay;
+        }
+
+        // Check dismiss options
+        if (el.hasAttribute('data-bs-dismiss') && el.getAttribute('data-bs-dismiss') == 'click') {
+            options['dismiss'] = 'click';
+        }
+
+        // Initialize popover
+        var tp = new bootstrap.Tooltip(el, options);
+
+        // Handle dismiss
+        if (options['dismiss'] && options['dismiss'] === 'click') {
+            // Hide popover on element click
+            el.addEventListener("click", function (e) {
+                tp.hide();
+            });
+        }
+
+        return tp;
+    }
+
+    var initBootstrapTooltips = function (el, options) {
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            initBootstrapTooltip(tooltipTriggerEl, {});
+        });
+    }
+
+    var initBootstrapPopover = function (el, options) {
+        var delay = {};
+
+        // Handle delay options
+        if (el.hasAttribute('data-bs-delay-hide')) {
+            delay['hide'] = el.getAttribute('data-bs-delay-hide');
+        }
+
+        if (el.hasAttribute('data-bs-delay-show')) {
+            delay['show'] = el.getAttribute('data-bs-delay-show');
+        }
+
+        if (delay) {
+            options['delay'] = delay;
+        }
+
+        // Handle dismiss option
+        if (el.getAttribute('data-bs-dismiss') == 'true') {
+            options['dismiss'] = true;
+        }
+
+        if (options['dismiss'] === true) {
+            options['template'] = '<div class="popover" role="tooltip"><div class="popover-arrow"></div><span class="popover-dismiss btn btn-icon"></span><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        }
+
+        // Initialize popover
+        var popover = new bootstrap.Popover(el, options);
+
+        // Handle dismiss click
+        if (options['dismiss'] === true) {
+            var dismissHandler = function (e) {
+                popover.hide();
+            }
+
+            el.addEventListener('shown.bs.popover', function () {
+                var dismissEl = document.getElementById(el.getAttribute('aria-describedby'));
+                dismissEl.addEventListener('click', dismissHandler);
+            });
+
+            el.addEventListener('hide.bs.popover', function () {
+                var dismissEl = document.getElementById(el.getAttribute('aria-describedby'));
+                dismissEl.removeEventListener('click', dismissHandler);
+            });
+        }
+
+        return popover;
+    }
+
+    var initBootstrapPopovers = function () {
+        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+
+        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+            initBootstrapPopover(popoverTriggerEl, {});
+        });
+    }
+
+    var initBootstrapScrollSpy = function () {
+        var elements = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'));
+
+        elements.map(function (element) {
+            var sel = element.getAttribute('data-bs-target');
+            var scrollContent = document.querySelector(element.getAttribute('data-bs-target'));
+            var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollContent);
+            if (scrollSpy) {
+                scrollSpy.refresh();
+            }
+        });
+    }
+
+    var initBootstrapToast = function () {
+        var toastElList = [].slice.call(document.querySelectorAll('.toast'));
+        var toastList = toastElList.map(function (toastEl) {
+            return new bootstrap.Toast(toastEl, {})
+        });
+    }
+
+    var initBootstrapCollapse = function() {
+        KTUtil.on(document.body,  '.collapsible[data-bs-toggle="collapse"]', 'click', function(e) {
+            if (this.classList.contains('collapsed')) {
+                this.classList.remove('active');
+                this.blur();
+            } else {
+                this.classList.add('active');
+            }
+
+            if (this.hasAttribute('data-kt-toggle-text')) {
+                var text = this.getAttribute('data-kt-toggle-text');
+                var target = this.querySelector('[data-kt-toggle-text-target="true"]');
+                var target = target ? target : this;
+
+                this.setAttribute('data-kt-toggle-text', target.innerText);
+                target.innerText = text;
+            }
+        });
+    }
+
+    var initBootstrapRotate = function() {
+        KTUtil.on(document.body,  '[data-kt-rotate="true"]', 'click', function(e) {
+            if (this.classList.contains('active')) {
+                this.classList.remove('active');
+                this.blur();
+            } else {
+                this.classList.add('active');
+            }
+        });
+    }
+
+    var initButtons = function () {
+        var buttonsGroup = [].slice.call(document.querySelectorAll('[data-kt-buttons="true"]'));
+
+        buttonsGroup.map(function (group) {
+            var selector = group.hasAttribute('data-kt-buttons-target') ? group.getAttribute('data-kt-buttons-target') : '.btn';
+
+            // Toggle Handler
+            KTUtil.on(group, selector, 'click', function (e) {
+                var buttons = [].slice.call(group.querySelectorAll(selector + '.active'));
+
+                buttons.map(function (button) {
+                    button.classList.remove('active');
+                });
+
+                this.classList.add('active');
+            });
+        });
+    }
+
+    var initDaterangepicker = function() {
+        // Check if jQuery included
+        if (typeof jQuery == 'undefined') {
+            return;
+        }
+
+        // Check if daterangepicker included
+        if (typeof $.fn.daterangepicker === 'undefined') {
+            return;
+        }
+
+        var elements = [].slice.call(document.querySelectorAll('[data-kt-daterangepicker="true"]'));
+        var start = moment().subtract(29, 'days');
+        var end = moment();
+        
+        elements.map(function (element) {
+            var display = element.querySelector('div');
+            var attrOpens  = element.hasAttribute('data-kt-daterangepicker-opens') ? element.getAttribute('data-kt-daterangepicker-opens') : 'left';
+
+            var cb = function(start, end) {
+                if (display) {
+                    display.innerHTML = start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY');
+                }
+            }
+
+            $(element).daterangepicker({
+                startDate: start,
+                endDate: end,
+                opens: attrOpens,
+                ranges: {
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+                'This Month': [moment().startOf('month'), moment().endOf('month')],
+                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+                }
+            }, cb);
+
+            cb(start, end);
+        });
+    }
+
+    var initCheck = function () {
+        // Toggle Handler
+        KTUtil.on(document.body, '[data-kt-check="true"]', 'change', function (e) {
+            var check = this;
+            var targets = document.querySelectorAll(check.getAttribute('data-kt-check-target'));
+
+            KTUtil.each(targets, function (target) {
+                if (target.type == 'checkbox') {
+                    target.checked = check.checked;
+                } else {
+                    target.classList.toggle('active');
+                }
+            });
+        });
+    }
+
+    var initSelect2 = function () {
+        // Check if jQuery included
+        if (typeof jQuery == 'undefined') {
+            return;
+        }
+
+        // Check if select2 included
+        if (typeof $.fn.select2 === 'undefined') {
+            return;
+        }
+
+        var elements = [].slice.call(document.querySelectorAll('[data-control="select2"], [data-kt-select2="true"]'));
+
+        elements.map(function (element) {
+            var options = {
+                dir: document.body.getAttribute('direction')
+            };
+
+            if (element.getAttribute('data-hide-search') == 'true') {
+                options.minimumResultsForSearch = Infinity;
+            }
+
+            $(element).select2(options);
+        });
+
+        /*
+        * Hacky fix for a bug in select2 with jQuery 3.6.0's new nested-focus "protection"
+        * see: https://github.com/select2/select2/issues/5993
+        * see: https://github.com/jquery/jquery/issues/4382
+        *
+        * TODO: Recheck with the select2 GH issue and remove once this is fixed on their side
+        */
+
+        if (select2FocusFixInitialized === false) {
+            select2FocusFixInitialized = true;
+            
+            $(document).on('select2:open', function(e) {
+                var elements = document.querySelectorAll('.select2-container--open .select2-search__field');
+                if (elements.length > 0) {
+                    elements[elements.length - 1].focus();
+                }                
+            });
+        }        
+    }
+    
+    var initModal = function() {
+        // Apply fix for Firefox's known bug with Flatpickr and other inputs focus state
+        if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
+            const allModals = document.querySelectorAll('.modal:not(.initialized)');
+
+            allModals.forEach(modal => {
+                modal.addEventListener('shown.bs.modal', function() {
+                    bootstrap.Modal.getInstance(this).handleUpdate();
+                    this.classList.add('initialized');
+                    alert(2);
+                });
+            });
+        }
+    }
+
+    var initAutosize = function () {
+        var inputs = [].slice.call(document.querySelectorAll('[data-kt-autosize="true"]'));
+
+        inputs.map(function (input) {
+            autosize(input);
+        });
+    }
+
+    var initCountUp = function () {
+        var elements = [].slice.call(document.querySelectorAll('[data-kt-countup="true"]:not(.counted)'));
+
+        elements.map(function (element) {
+            if (KTUtil.isInViewport(element) && KTUtil.visible(element)) {
+                var options = {};
+
+                var value = element.getAttribute('data-kt-countup-value');
+                value = parseFloat(value.replace(/,/g, ""));
+
+                if (element.hasAttribute('data-kt-countup-start-val')) {
+                    options.startVal = parseFloat(element.getAttribute('data-kt-countup-start-val'));
+                }
+
+                if (element.hasAttribute('data-kt-countup-duration')) {
+                    options.duration = parseInt(element.getAttribute('data-kt-countup-duration'));
+                }
+
+                if (element.hasAttribute('data-kt-countup-decimal-places')) {
+                    options.decimalPlaces = parseInt(element.getAttribute('data-kt-countup-decimal-places'));
+                }
+
+                if (element.hasAttribute('data-kt-countup-prefix')) {
+                    options.prefix = element.getAttribute('data-kt-countup-prefix');
+                }
+
+                if (element.hasAttribute('data-kt-countup-separator')) {
+                    options.separator = element.getAttribute('data-kt-countup-separator');
+                }
+
+                if (element.hasAttribute('data-kt-countup-suffix')) {
+                    options.suffix = element.getAttribute('data-kt-countup-suffix');
+                }
+
+                var count = new countUp.CountUp(element, value, options);
+
+                count.start();
+
+                element.classList.add('counted');
+            }
+        });
+    }
+
+    var initCountUpTabs = function () {
+        // Initial call
+        initCountUp();
+
+        // Window scroll event handler
+        window.addEventListener('scroll', initCountUp);
+
+        // Tabs shown event handler
+        var tabs = [].slice.call(document.querySelectorAll('[data-kt-countup-tabs="true"][data-bs-toggle="tab"]'));
+        tabs.map(function (tab) {
+            tab.addEventListener('shown.bs.tab', initCountUp);
+        });
+    }
+
+    var initTinySliders = function () {
+        // Init Slider
+        var initSlider = function (el) {
+            if (!el) {
+                return;
+            }
+
+            const tnsOptions = {};
+
+            // Convert string boolean
+            const checkBool = function (val) {
+                if (val === 'true') {
+                    return true;
+                }
+                if (val === 'false') {
+                    return false;
+                }
+                return val;
+            };
+
+            // get extra options via data attributes
+            el.getAttributeNames().forEach(function (attrName) {
+                // more options; https://github.com/ganlanyuan/tiny-slider#options
+                if ((/^data-tns-.*/g).test(attrName)) {
+                    let optionName = attrName.replace('data-tns-', '').toLowerCase().replace(/(?:[\s-])\w/g, function (match) {
+                        return match.replace('-', '').toUpperCase();
+                    });
+
+                    if (attrName === 'data-tns-responsive') {
+                        // fix string with a valid json
+                        const jsonStr = el.getAttribute(attrName).replace(/(\w+:)|(\w+ :)/g, function (matched) {
+                            return '"' + matched.substring(0, matched.length - 1) + '":';
+                        });
+                        try {
+                            // convert json string to object
+                            tnsOptions[optionName] = JSON.parse(jsonStr);
+                        }
+                        catch (e) {
+                        }
+                    }
+                    else {
+                        tnsOptions[optionName] = checkBool(el.getAttribute(attrName));
+                    }
+                }
+            });
+
+            const opt = Object.assign({}, {
+                container: el,
+                slideBy: 'page',
+                autoplay: true,
+                autoplayButtonOutput: false,
+            }, tnsOptions);
+
+            if (el.closest('.tns')) {
+                KTUtil.addClass(el.closest('.tns'), 'tns-initiazlied');
+            }
+
+            return tns(opt);
+        }
+
+        // Sliders
+        const elements = Array.prototype.slice.call(document.querySelectorAll('[data-tns="true"]'), 0);
+
+        if (!elements && elements.length === 0) {
+            return;
+        }
+
+        elements.forEach(function (el) {
+            initSlider(el);
+        });
+    }
+
+    var initSmoothScroll = function () {
+        if (SmoothScroll) {
+
+            new SmoothScroll('a[data-kt-scroll-toggle][href*="#"]', {
+                speed: 1000,
+                speedAsDuration: true,
+                offset: function (anchor, toggle) {
+                    // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
+                    // This example is a function, but you could do something as simple as `offset: 25`
+
+                    // An example returning different values based on whether the clicked link was in the header nav or not
+                    if (anchor.hasAttribute('data-kt-scroll-offset')) {
+                        var val = KTUtil.getResponsiveValue(anchor.getAttribute('data-kt-scroll-offset'));
+                        
+                        return val;
+                    } else {
+                        return 0;
+                    }
+                }
+            });
+        }
+    }
+
+    var setThemeMode = function(mode, cb) {
+        // Load css file
+        var loadCssFile = function(fileName, newFileName) {
+            return new Promise(function(resolve, reject) {
+                var oldLink = document.querySelector("link[href*='" + fileName + "']");
+                var link = document.createElement('link');
+                var href = oldLink.href.replace(fileName, newFileName);
+                
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                link.href = href;
+
+                document.head.insertBefore(link, oldLink);               
+
+                // Important success and error for the promise
+                link.onload = function() {
+                    resolve(href);
+                    oldLink.remove();
+                };
+
+                link.onerror = function() {
+                    reject(href);
+                };
+            });
+        };
+
+        // Set page loading state
+        document.body.classList.add('page-loading');
+
+        if ( mode === 'dark' ) {
+            Promise.all([
+                loadCssFile('plugins.bundle.css', 'plugins.dark.bundle.css'),
+                loadCssFile('style.bundle.css', 'style.dark.bundle.css')
+            ]).then(function() {
+                // Set dark mode class
+                document.body.classList.add("dark-mode");
+
+                // Remove page loading srate
+                document.body.classList.remove('page-loading');
+
+                if (cb instanceof Function) {
+                    cb();
+                }
+            }).catch(function() {
+                // error
+            });
+        } else if ( mode === 'light' ) {
+            Promise.all([
+                loadCssFile('plugins.dark.bundle.css', 'plugins.bundle.css'),
+                loadCssFile('style.dark.bundle.css', 'style.bundle.css')
+            ]).then(function() {
+                // Remove dark mode class
+                document.body.classList.remove("dark-mode");
+
+                // Remove page loading srate
+                document.body.classList.remove('page-loading');
+
+                // Callback
+                if (cb instanceof Function) {
+                    cb();
+                }
+            }).catch(function() {
+                // error
+            });
+        }             
+    }
+
+    return {
+        init: function () {
+            this.initBootstrapTooltips();
+
+            this.initBootstrapPopovers();
+
+            this.initBootstrapScrollSpy();
+
+            this.initDaterangepicker();
+
+            this.initButtons();
+
+            this.initCheck();
+
+            this.initSelect2();
+
+            this.initCountUp();
+
+            this.initCountUpTabs();
+
+            this.initAutosize();
+
+            this.initTinySliders();
+
+            this.initSmoothScroll();
+
+            this.initBootstrapToast();
+
+            this.initBootstrapCollapse();
+
+            this.initBootstrapRotate();
+        },
+
+        initPageLoader: function () {
+            initPageLoader();
+        },
+
+        initDaterangepicker: function() {
+            initDaterangepicker();
+        },
+
+        initBootstrapTooltip: function (el, options) {
+            return initBootstrapTooltip(el, options);
+        },
+
+        initBootstrapTooltips: function () {
+            initBootstrapTooltips();
+        },
+
+        initBootstrapModal: function() {
+            initModal();
+        },
+
+        initBootstrapPopovers: function () {
+            initBootstrapPopovers();
+        },
+
+        initBootstrapPopover: function (el, options) {
+            return initBootstrapPopover(el, options);
+        },
+
+        initBootstrapScrollSpy: function () {
+            initBootstrapScrollSpy();
+        },        
+
+        initBootstrapToast: function () {
+            initBootstrapToast();
+        },
+
+        initBootstrapCollapse: function() {
+            initBootstrapCollapse();
+        },
+
+        initBootstrapRotate: function() {
+            initBootstrapRotate();
+        },
+
+        initButtons: function () {
+            initButtons();
+        },
+
+        initCheck: function () {
+            initCheck();
+        },
+
+        initSelect2: function () {
+            initSelect2();
+        },
+
+        initCountUp: function () {
+            initCountUp();
+        },
+
+        initCountUpTabs: function () {
+            initCountUpTabs();
+        },
+
+        initAutosize: function () {
+            initAutosize();
+        },
+
+        initTinySliders: function () {
+            initTinySliders();
+        },
+
+        initSmoothScroll: function () {
+            initSmoothScroll();
+        },
+
+        isDarkMode: function () {
+            return document.body.classList.contains('dark-mode');
+        },
+
+        setThemeMode: function(mode, cb) {
+            setThemeMode(mode, cb);
+        }
+    };
+}();
+
+// Initialize app on document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTApp.init();
+});
+
+// Initialize page loader on window load
+window.addEventListener("load", function() {
+    KTApp.initPageLoader();
+});
+
+// Declare KTApp for Webpack support
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = KTApp;
+}

resources/assets/core/js/layout/search.js

@@ -0,0 +1,135 @@
+"use strict";
+
+// Class definition
+var KTLayoutSearch = function() {
+    // Private variables
+    var element;
+    var formElement;
+    var mainElement;
+    var resultsElement;
+    var wrapperElement;
+    var emptyElement;
+
+    var preferencesElement;
+    var preferencesShowElement;
+    var preferencesDismissElement;
+    
+    var advancedOptionsFormElement;
+    var advancedOptionsFormShowElement;
+    var advancedOptionsFormCancelElement;
+    var advancedOptionsFormSearchElement;
+    
+    var searchObject;
+
+    // Private functions
+    var processs = function(search) {
+        var timeout = setTimeout(function() {
+            var number = KTUtil.getRandomInt(1, 3);
+
+            // Hide recently viewed
+            mainElement.classList.add('d-none');
+
+            if (number === 3) {
+                // Hide results
+                resultsElement.classList.add('d-none');
+                // Show empty message 
+                emptyElement.classList.remove('d-none');
+            } else {
+                // Show results
+                resultsElement.classList.remove('d-none');
+                // Hide empty message 
+                emptyElement.classList.add('d-none');
+            }                  
+
+            // Complete search
+            search.complete();
+        }, 1500);
+    }
+
+    var clear = function(search) {
+        // Show recently viewed
+        mainElement.classList.remove('d-none');
+        // Hide results
+        resultsElement.classList.add('d-none');
+        // Hide empty message 
+        emptyElement.classList.add('d-none');
+    }    
+
+    var handlePreferences = function() {
+        // Preference show handler
+        preferencesShowElement.addEventListener('click', function() {
+            wrapperElement.classList.add('d-none');
+            preferencesElement.classList.remove('d-none');
+        });
+
+        // Preference dismiss handler
+        preferencesDismissElement.addEventListener('click', function() {
+            wrapperElement.classList.remove('d-none');
+            preferencesElement.classList.add('d-none');
+        });
+    }
+
+    var handleAdvancedOptionsForm = function() {
+        // Show
+        advancedOptionsFormShowElement.addEventListener('click', function() {
+            wrapperElement.classList.add('d-none');
+            advancedOptionsFormElement.classList.remove('d-none');
+        });
+
+        // Cancel
+        advancedOptionsFormCancelElement.addEventListener('click', function() {
+            wrapperElement.classList.remove('d-none');
+            advancedOptionsFormElement.classList.add('d-none');
+        });
+
+        // Search
+        advancedOptionsFormSearchElement.addEventListener('click', function() {
+            
+        });
+    }
+
+    // Public methods
+	return {
+		init: function() {
+            // Elements
+            element = document.querySelector('#kt_header_search');
+
+            if (!element) {
+                return;
+            }
+
+            wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
+            formElement = element.querySelector('[data-kt-search-element="form"]');
+            mainElement = element.querySelector('[data-kt-search-element="main"]');
+            resultsElement = element.querySelector('[data-kt-search-element="results"]');
+            emptyElement = element.querySelector('[data-kt-search-element="empty"]');
+
+            preferencesElement = element.querySelector('[data-kt-search-element="preferences"]');
+            preferencesShowElement = element.querySelector('[data-kt-search-element="preferences-show"]');
+            preferencesDismissElement = element.querySelector('[data-kt-search-element="preferences-dismiss"]');
+
+            advancedOptionsFormElement = element.querySelector('[data-kt-search-element="advanced-options-form"]');
+            advancedOptionsFormShowElement = element.querySelector('[data-kt-search-element="advanced-options-form-show"]');
+            advancedOptionsFormCancelElement = element.querySelector('[data-kt-search-element="advanced-options-form-cancel"]');
+            advancedOptionsFormSearchElement = element.querySelector('[data-kt-search-element="advanced-options-form-search"]');
+            
+            // Initialize search handler
+            searchObject = new KTSearch(element);
+
+            // Search handler
+            searchObject.on('kt.search.process', processs);
+
+            // Clear handler
+            searchObject.on('kt.search.clear', clear);
+
+            // Custom handlers
+            handlePreferences();
+            handleAdvancedOptionsForm();            
+		}
+	};
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTLayoutSearch.init();
+});

resources/assets/core/js/vendors/plugins/apexchart.init.js

@@ -0,0 +1,7 @@
+Apex.xaxis = {
+    labels: {
+        style: {
+           fontFamily: 'Montserrat'
+        }
+    }
+ }

resources/assets/core/js/vendors/plugins/bootstrap-markdown.init.js

@@ -0,0 +1,10 @@
+"use strict";
+
+//
+// Markdown Initialization
+//
+
+$.fn.markdown.defaults.iconlibrary = 'fa';
+$.fn.markdown.defaults.buttons[0][0]['data'][2]['icon']['fa'] = 'fa fa-heading';
+$.fn.markdown.defaults.buttons[0][1]['data'][1]['icon']['fa'] = 'fa fa-image';
+$.fn.markdown.defaults.buttons[0][2]['data'][1]['icon']['fa'] = 'fa fa-list-ol';

resources/assets/core/js/vendors/plugins/datatables.init.js

@@ -0,0 +1,212 @@
+"use strict";
+
+//
+// Datatables.net Initialization
+//
+
+// Set Defaults
+
+var defaults = {
+	"language": {		
+		"info": "Showing _START_ to _END_ of _TOTAL_ records",
+    	"infoEmpty": "Showing no records",
+		"lengthMenu": "_MENU_",
+		"paginate": {
+			"first": '<i class="first"></i>',
+			"last": '<i class="last"></i>',
+			"next": '<i class="next"></i>',
+			"previous": '<i class="previous"></i>'
+		}
+	}
+};
+
+$.extend(true, $.fn.dataTable.defaults, defaults);
+
+/*! DataTables Bootstrap 4 integration
+ * ©2011-2017 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * DataTables integration for Bootstrap 4. This requires Bootstrap 4 and
+ * DataTables 1.10 or newer.
+ *
+ * This file sets the defaults and adds options to DataTables to style its
+ * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
+ * for further information.
+ */
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		module.exports = function (root, $) {
+			if ( ! root ) {
+				root = window;
+			}
+
+			if ( ! $ || ! $.fn.dataTable ) {
+				// Require DataTables, which attaches to jQuery, including
+				// jQuery if needed and have a $ property so we can access the
+				// jQuery object that is used
+				$ = require('datatables.net')(root, $).$;
+			}
+
+			return factory( $, root, root.document );
+		};
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document, undefined ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+/* Set the defaults for DataTables initialisation */
+$.extend( true, DataTable.defaults, {
+	dom: 
+		"<'table-responsive'tr>" +
+		
+		"<'row'" + 
+		"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'li>" + 
+		"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
+		">",
+	
+	renderer: 'bootstrap'
+} );
+
+
+/* Default class modification */
+$.extend( DataTable.ext.classes, {
+	sWrapper:      "dataTables_wrapper dt-bootstrap4",
+	sFilterInput:  "form-control form-control-sm form-control-solid",
+	sLengthSelect: "form-select form-select-sm form-select-solid",
+	sProcessing:   "dataTables_processing",
+	sPageButton:   "paginate_button page-item"
+} );
+
+
+/* Bootstrap paging button renderer */
+DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
+	var api     = new DataTable.Api( settings );
+	var classes = settings.oClasses;
+	var lang    = settings.oLanguage.oPaginate;
+	var aria = settings.oLanguage.oAria.paginate || {};
+	var btnDisplay, btnClass, counter=0;
+
+	var attach = function( container, buttons ) {
+		var i, ien, node, button;
+		var clickHandler = function ( e ) {
+			e.preventDefault();
+			if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
+				api.page( e.data.action ).draw( 'page' );
+			}
+		};
+
+		for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
+			button = buttons[i];
+
+			if ( Array.isArray( button ) ) {
+				attach( container, button );
+			}
+			else {
+				btnDisplay = '';
+				btnClass = '';
+
+				switch ( button ) {
+					case 'ellipsis':
+						btnDisplay = '&#x2026;';
+						btnClass = 'disabled';
+						break;
+
+					case 'first':
+						btnDisplay = lang.sFirst;
+						btnClass = button + (page > 0 ?
+							'' : ' disabled');
+						break;
+
+					case 'previous':
+						btnDisplay = lang.sPrevious;
+						btnClass = button + (page > 0 ?
+							'' : ' disabled');
+						break;
+
+					case 'next':
+						btnDisplay = lang.sNext;
+						btnClass = button + (page < pages-1 ?
+							'' : ' disabled');
+						break;
+
+					case 'last':
+						btnDisplay = lang.sLast;
+						btnClass = button + (page < pages-1 ?
+							'' : ' disabled');
+						break;
+
+					default:
+						btnDisplay = button + 1;
+						btnClass = page === button ?
+							'active' : '';
+						break;
+				}
+
+				if ( btnDisplay ) {
+					node = $('<li>', {
+							'class': classes.sPageButton+' '+btnClass,
+							'id': idx === 0 && typeof button === 'string' ?
+								settings.sTableId +'_'+ button :
+								null
+						} )
+						.append( $('<a>', {
+								'href': '#',
+								'aria-controls': settings.sTableId,
+								'aria-label': aria[ button ],
+								'data-dt-idx': counter,
+								'tabindex': settings.iTabIndex,
+								'class': 'page-link'
+							} )
+							.html( btnDisplay )
+						)
+						.appendTo( container );
+
+					settings.oApi._fnBindAction(
+						node, {action: button}, clickHandler
+					);
+
+					counter++;
+				}
+			}
+		}
+	};
+
+	// IE9 throws an 'unknown error' if document.activeElement is used
+	// inside an iframe or frame.
+	var activeEl;
+
+	try {
+		// Because this approach is destroying and recreating the paging
+		// elements, focus is lost on the select button which is bad for
+		// accessibility. So we want to restore focus once the draw has
+		// completed
+		activeEl = $(host).find(document.activeElement).data('dt-idx');
+	}
+	catch (e) {}
+
+	attach(
+		$(host).empty().html('<ul class="pagination"/>').children('ul'),
+		buttons
+	);
+
+	if ( activeEl !== undefined ) {
+		$(host).find( '[data-dt-idx='+activeEl+']' ).trigger('focus');
+	}
+};
+
+
+return DataTable;
+}));

resources/assets/core/js/vendors/plugins/dropzone.init.js

@@ -0,0 +1,42 @@
+"use strict";
+
+//
+// Dropzone Initialization
+//
+
+// Set Defaults
+Dropzone.autoDiscover = false;
+Dropzone.prototype.previewTemplate = `\
+    <div class="dz-preview dz-file-preview">
+        <div class="dz-image"><img data-dz-thumbnail /></div>
+        
+        <div class="dz-details">
+            <div class="dz-size"><span data-dz-size></span></div>
+            <div class="dz-filename"><span data-dz-name></span></div>
+        </div>
+
+        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
+
+        <div class="dz-error-message"><span data-dz-errormessage></span></div>
+        
+        <div class="dz-success-mark">
+            <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <title>Check</title>
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" stroke-opacity="0.198794158" stroke="#747474" fill-opacity="0.816519475" fill="#FFFFFF"></path>
+                </g>
+            </svg>
+        </div>
+
+        <div class="dz-error-mark">
+            <svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <title>Error</title>
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <g stroke="#747474" stroke-opacity="0.198794158" fill="#FFFFFF" fill-opacity="0.816519475">
+                    <path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z"></path>
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </div>\
+`;

resources/assets/core/js/vendors/plugins/flatpickr.init.js

@@ -0,0 +1,5 @@
+"use strict";
+
+//
+// Flatpickr
+//

resources/assets/core/js/vendors/plugins/prism.init.js

@@ -0,0 +1,12 @@
+"use strict";
+
+//
+// Prism Initialization
+//
+
+Prism.plugins.NormalizeWhitespace.setDefaults({
+    'remove-trailing': true,
+	'remove-indent': true,
+	'left-trim': true,
+	'right-trim': true
+});

resources/assets/core/js/vendors/plugins/select2.init.js

@@ -0,0 +1,9 @@
+"use strict";
+
+//
+// Select2 Initialization
+//
+
+$.fn.select2.defaults.set("theme", "bootstrap5");
+$.fn.select2.defaults.set("width", "100%");
+$.fn.select2.defaults.set("selectionCssClass", ":all:");

resources/assets/core/js/vendors/plugins/sweetalert2.init.js

@@ -0,0 +1,17 @@
+"use strict";
+
+//
+// SweetAlert2 Initialization
+//
+
+// Set Defaults
+swal.mixin({
+	width: 400,
+	heightAuto: false,
+	padding: '2.5rem',
+	buttonsStyling: false,
+	confirmButtonClass: 'btn btn-success',
+	confirmButtonColor: null,
+	cancelButtonClass: 'btn btn-secondary',
+	cancelButtonColor: null
+});

resources/assets/core/js/widgets/cards/widget-1.js

@@ -0,0 +1,171 @@
+"use strict";
+
+// Class definition
+var KTCardsWidget1 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_1_chart");
+        
+        if (!element) {
+            return;
+        }
+
+        var color = element.getAttribute('data-kt-chart-color');
+        
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');         
+        var baseColor = KTUtil.isHexColor(color) ? color : KTUtil.getCssVariableValue('--bs-' + color);
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');        
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [30, 75, 55, 45, 30, 60, 75, 50],
+                margin: {
+					left: 5,
+					right: 5
+				}   
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                },
+                sparkline: {
+                    enabled: true
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['35%'],
+                    borderRadius: 6
+                }
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 4,
+                colors: ['transparent']
+            },
+            xaxis: {                
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },               
+                crosshairs: {
+                    show: false
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            fill: {
+                type: 'solid'
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return "Feb: " + val
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return val + "%"  
+                    }
+                }
+            },
+            colors: [baseColor, secondaryColor],
+            grid: {
+                borderColor: false,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                },
+                padding: {
+                    top: 10,
+					left: 25,
+					right: 25     
+				}               
+            }
+        };
+
+        // Set timeout to properly get the parent elements width
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardsWidget1;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardsWidget1.init();
+});
+   
+        
+        
+        
+           

resources/assets/core/js/widgets/cards/widget-10.js

@@ -0,0 +1,76 @@
+"use strict";
+
+// Class definition
+var KTCardsWidget10 = function () {
+    // Private methods
+    var initChart = function() {
+        var el = document.getElementById('kt_card_widget_10_chart'); 
+
+        if (!el) {
+            return;
+        }
+
+        var options = {
+            size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
+            lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
+            rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,            
+            //percent:  el.getAttribute('data-kt-percent') ,
+        }
+
+        var canvas = document.createElement('canvas');
+        var span = document.createElement('span'); 
+            
+        if (typeof(G_vmlCanvasManager) !== 'undefined') {
+            G_vmlCanvasManager.initElement(canvas);
+        }
+
+        var ctx = canvas.getContext('2d');
+        canvas.width = canvas.height = options.size;
+
+        el.appendChild(span);
+        el.appendChild(canvas);
+
+        ctx.translate(options.size / 2, options.size / 2); // change center
+        ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+
+        //imd = ctx.getImageData(0, 0, 240, 240);
+        var radius = (options.size - options.lineWidth) / 2;
+
+        var drawCircle = function(color, lineWidth, percent) {
+            percent = Math.min(Math.max(0, percent || 1), 1);
+            ctx.beginPath();
+            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+            ctx.strokeStyle = color;
+            ctx.lineCap = 'round'; // butt, round or square
+            ctx.lineWidth = lineWidth
+            ctx.stroke();
+        };
+
+        // Init 
+        drawCircle('#E4E6EF', options.lineWidth, 100 / 100); 
+        drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
+        drawCircle(KTUtil.getCssVariableValue('--bs-success'), options.lineWidth, 100 / 250);   
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardsWidget10;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardsWidget10.init();
+});
+   
+        
+        
+        
+           

resources/assets/core/js/widgets/cards/widget-12.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTCardWidget12 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_12_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));       
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
+        var lightColor = KTUtil.getCssVariableValue('--bs-success');
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [3.5, 5.7, 2.8, 5.9, 4.2, 5.6, 4.3, 4.5, 5.9, 4.5, 5.7, 4.8, 5.7]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 0
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return "Feb " + val;
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return val * "10" + "K"
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {                 
+                strokeDashArray: 4,
+                padding: {
+                    top: 0,
+                    right: -20,
+                    bottom: -20,
+                    left: -20
+                },
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardWidget12;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardWidget12.init();
+});

resources/assets/core/js/widgets/cards/widget-13.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTCardWidget13 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_13_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));       
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
+        var lightColor = KTUtil.getCssVariableValue('--bs-success');
+
+        var options = {
+            series: [{
+                name: 'Shipments',
+                data: [1.5, 4.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 3.5, 4.5, 2.5]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 0
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return "Feb " + val;
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return val * "10" + "K"
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {                 
+                strokeDashArray: 4,
+                padding: {
+                    top: 0,
+                    right: -20,
+                    bottom: -20,
+                    left: -20
+                },
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardWidget13;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardWidget13.init();
+});

resources/assets/core/js/widgets/cards/widget-17.js

@@ -0,0 +1,76 @@
+"use strict";
+
+// Class definition
+var KTCardsWidget17 = function () {
+    // Private methods
+    var initChart = function() {
+        var el = document.getElementById('kt_card_widget_17_chart'); 
+
+        if (!el) {
+            return;
+        }
+
+        var options = {
+            size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
+            lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
+            rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,            
+            //percent:  el.getAttribute('data-kt-percent') ,
+        }
+
+        var canvas = document.createElement('canvas');
+        var span = document.createElement('span'); 
+            
+        if (typeof(G_vmlCanvasManager) !== 'undefined') {
+            G_vmlCanvasManager.initElement(canvas);
+        }
+
+        var ctx = canvas.getContext('2d');
+        canvas.width = canvas.height = options.size;
+
+        el.appendChild(span);
+        el.appendChild(canvas);
+
+        ctx.translate(options.size / 2, options.size / 2); // change center
+        ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+
+        //imd = ctx.getImageData(0, 0, 240, 240);
+        var radius = (options.size - options.lineWidth) / 2;
+
+        var drawCircle = function(color, lineWidth, percent) {
+            percent = Math.min(Math.max(0, percent || 1), 1);
+            ctx.beginPath();
+            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+            ctx.strokeStyle = color;
+            ctx.lineCap = 'round'; // butt, round or square
+            ctx.lineWidth = lineWidth
+            ctx.stroke();
+        };
+
+        // Init 
+        drawCircle('#E4E6EF', options.lineWidth, 100 / 100); 
+        drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 150);
+        drawCircle(KTUtil.getCssVariableValue('--bs-success'), options.lineWidth, 100 / 250);   
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardsWidget17;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardsWidget17.init();
+});
+   
+        
+        
+        
+           

resources/assets/core/js/widgets/cards/widget-4.js

@@ -0,0 +1,76 @@
+"use strict";
+
+// Class definition
+var KTCardsWidget4 = function () {
+    // Private methods
+    var initChart = function() {
+        var el = document.getElementById('kt_card_widget_4_chart'); 
+
+        if (!el) {
+            return;
+        }
+
+        var options = {
+            size: el.getAttribute('data-kt-size') ? parseInt(el.getAttribute('data-kt-size')) : 70,
+            lineWidth: el.getAttribute('data-kt-line') ? parseInt(el.getAttribute('data-kt-line')) : 11,
+            rotate: el.getAttribute('data-kt-rotate') ? parseInt(el.getAttribute('data-kt-rotate')) : 145,            
+            //percent:  el.getAttribute('data-kt-percent') ,
+        }
+
+        var canvas = document.createElement('canvas');
+        var span = document.createElement('span'); 
+            
+        if (typeof(G_vmlCanvasManager) !== 'undefined') {
+            G_vmlCanvasManager.initElement(canvas);
+        }
+
+        var ctx = canvas.getContext('2d');
+        canvas.width = canvas.height = options.size;
+
+        el.appendChild(span);
+        el.appendChild(canvas);
+
+        ctx.translate(options.size / 2, options.size / 2); // change center
+        ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+
+        //imd = ctx.getImageData(0, 0, 240, 240);
+        var radius = (options.size - options.lineWidth) / 2;
+
+        var drawCircle = function(color, lineWidth, percent) {
+            percent = Math.min(Math.max(0, percent || 1), 1);
+            ctx.beginPath();
+            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+            ctx.strokeStyle = color;
+            ctx.lineCap = 'round'; // butt, round or square
+            ctx.lineWidth = lineWidth
+            ctx.stroke();
+        };
+
+        // Init 
+        drawCircle('#E4E6EF', options.lineWidth, 100 / 100); 
+        drawCircle(KTUtil.getCssVariableValue('--bs-danger'), options.lineWidth, 100 / 150);
+        drawCircle(KTUtil.getCssVariableValue('--bs-primary'), options.lineWidth, 100 / 250);   
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardsWidget4;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardsWidget4.init();
+});
+   
+        
+        
+        
+           

resources/assets/core/js/widgets/cards/widget-6.js

@@ -0,0 +1,165 @@
+"use strict";
+
+// Class definition
+var KTCardsWidget6 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_6_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-primary');
+        var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [30, 60, 53, 45, 60, 75, 53]
+            }, ],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                },
+                sparkline: {
+                    enabled: true
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['55%'],
+                    borderRadius: 6
+                }
+            },
+            legend: {
+                show: false,
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                show: true,
+                width: 9,
+                colors: ['transparent']
+            },
+            xaxis: {                
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false,
+                    tickPlacement: 'between'
+                },
+                labels: {
+                    show: false,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    show: false
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                }
+            },
+            fill: {
+                type: 'solid'
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return 'Feb: ' + val;
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return val + "%" 
+                    }
+                }
+            },
+            colors: [baseColor, secondaryColor],
+            grid: {
+                padding: {
+                    left: 10,
+                    right: 10
+                },
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }             
+            }
+        }; 
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);     
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardsWidget6;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardsWidget6.init();
+});
+   
+        
+        
+        
+           

resources/assets/core/js/widgets/cards/widget-8.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTCardWidget8 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_8_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));       
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
+        var lightColor = KTUtil.getCssVariableValue('--bs-success');
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [4.5, 5.7, 2.8, 5.9, 4.2, 5.6, 5.2, 4.5, 5.9, 4.5, 5.7, 4.8, 5.7]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 0
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return "Feb " + val;
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return "$" + val + "K"
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {                 
+                strokeDashArray: 4,
+                padding: {
+                    top: 0,
+                    right: -20,
+                    bottom: -20,
+                    left: -20
+                },
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardWidget8;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardWidget8.init();
+});

resources/assets/core/js/widgets/cards/widget-9.js

@@ -0,0 +1,160 @@
+"use strict";
+
+// Class definition
+var KTCardWidget9 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_card_widget_9_chart");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));       
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-gray-800');
+        var lightColor = KTUtil.getCssVariableValue('--bs-success');
+
+        var options = {
+            series: [{
+                name: 'Visitors',
+                data: [1.5, 2.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 2.5, 4.5, 2.5]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: 'solid',
+                opacity: 0
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                x: {
+                    formatter: function (val) {
+                        return "Feb " + val;
+                    }
+                },
+                y: {
+                    formatter: function (val) {
+                        return val + "K"
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {                 
+                strokeDashArray: 4,
+                padding: {
+                    top: 0,
+                    right: -20,
+                    bottom: -20,
+                    left: -20
+                },
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 300);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTCardWidget9;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTCardWidget9.init();
+});

resources/assets/core/js/widgets/charts/widget-1.js

@@ -0,0 +1,162 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget1 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_charts_widget_1");
+
+        if (!element) {
+            return;
+        }
+
+        var negativeColor = element.hasAttribute('data-kt-negative-color') ? element.getAttribute('data-kt-negative-color') : KTUtil.getCssVariableValue('--bs-success');
+
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+
+        var baseColor = KTUtil.getCssVariableValue('--bs-primary');
+
+        var options = {
+            series: [{
+                name: 'Subscribed',
+                data: [20, 30, 20, 40, 60, 75, 65, 18, 10, 5, 15, 40, 60, 18, 35, 55, 20]
+            }, {
+                name: 'Unsubscribed',
+                data: [-20, -15, -5, -20, -30, -15, -10, -8, -5, -5, -10, -25, -15, -5, -10, -5, -15]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                stacked: true,
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+                bar: {
+                    //horizontal: false,
+                    columnWidth: "35%",
+                    barHeight: "70%",
+                    borderRadius: [6, 6]
+                }
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            xaxis: {
+                categories: ['Jan 5', 'Jan 7', 'Jan 9', 'Jan 11', 'Jan 13', 'Jan 15', 'Jan 17', 'Jan 19', 'Jan 20', 'Jan 21', 'Jan 23', 'Jan 24', 'Jan 25', 'Jan 26', 'Jan 24', 'Jan 28', 'Jan 29'],
+                axisBorder: {
+                    show: false
+                },
+                axisTicks: {
+                    show: false
+                },
+                tickAmount: 10,
+                labels: {
+                    //rotate: -45,
+                    //rotateAlways: true,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    show: false
+                }
+            },
+            yaxis: {
+                min: -50,
+                max: 80,
+                tickAmount: 6,
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    },
+                    formatter: function (val) {
+                        return parseInt(val) + "K"
+                    }
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px',
+                    borderRadius: 4
+                },
+                y: {
+                    formatter: function (val) {
+                        if (val > 0) {
+                            return val + 'K';
+                        } else {
+                            return Math.abs(val) + 'K';
+                        }
+                    }
+                }
+            },
+            colors: [baseColor, negativeColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,               
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 200);    
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget1;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget1.init();
+});

resources/assets/core/js/widgets/charts/widget-10.js

@@ -0,0 +1,181 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget10 = function () {
+    // Private methods
+    var initChart = function(tabSelector, chartSelector, data, initByDefault) {
+        var element = document.querySelector(chartSelector);
+
+        if (!element) {
+            return;
+        }
+        
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
+
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');    
+
+        var options = {
+            series: [{
+                name: 'Achieved Target',
+                data: data
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }              
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['22%'],
+                    borderRadius: 5,                     
+                    dataLabels: {
+                        position: "top" // top, center, bottom
+                    },
+                    startingShape: 'flat'
+                },
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: true, 
+                offsetY: -30,                                             
+                style: {
+                    fontSize: '13px',
+                    colors: ['labelColor']
+                },
+                formatter: function(val) {
+                    return val + "K";
+                }          
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Metals', 'Energy', 'Agro', 'Machines', 'Transport', 'Textile', 'Wood'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    }                    
+                },
+                crosshairs: {
+                    fill: {         
+                        gradient: {         
+                            opacityFrom: 0,
+                            opacityTo: 0
+                        }
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    },
+                    formatter: function (val) {
+                        return parseInt(val) + "K"
+                    }
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return + val + "K"
+                    }
+                }
+            },
+            colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-light-primary')],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        var init = false;
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            chart.render();
+            init = true;
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {   
+            initChart('#kt_charts_widget_10_tab_1', '#kt_charts_widget_10_chart_1', [30, 18, 43, 70, 13, 37, 23], true);
+            initChart('#kt_charts_widget_10_tab_2', '#kt_charts_widget_10_chart_2', [25, 55, 35, 50, 45, 20, 31], false); 
+            initChart('#kt_charts_widget_10_tab_3', '#kt_charts_widget_10_chart_3', [45, 15, 35, 70, 45, 50, 21], false);
+            initChart('#kt_charts_widget_10_tab_4', '#kt_charts_widget_10_chart_4', [15, 55, 25, 50, 25, 60, 31], false);            
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget10;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget10.init();
+});
+
+
+ 

resources/assets/core/js/widgets/charts/widget-11.js

@@ -0,0 +1,185 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget11 = function () {
+    // Private methods
+    var initChart = function(tabSelector, chartSelector, data, initByDefault) {
+        var element = document.querySelector(chartSelector);
+        var height = parseInt(KTUtil.css(element, 'height'));
+
+        if (!element) {
+            return;
+        }        
+        
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-success');
+        var lightColor = KTUtil.getCssVariableValue('--bs-success');
+
+        var options = {
+            series: [{
+                name: 'Deliveries',
+                data: data
+            }],            
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                shadeIntensity: 1,
+                opacityFrom: 0.3,
+                opacityTo: 0.7,
+                stops: [0, 90, 100]
+                }
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 3,
+                colors: [baseColor]
+            },
+            xaxis: {
+                categories: ['', 'Apr 02', 'Apr 06', 'Apr 06', 'Apr 05', 'Apr 06', 'Apr 10', 'Apr 08', 'Apr 09', 'Apr 14', 'Apr 10', 'Apr 12', 'Apr 18', 'Apr 14', 
+                    'Apr 15', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 02', 'Apr 06', 'Apr 18', 'Apr 05', 'Apr 06', 'Apr 10', 'Apr 08', 'Apr 22', 'Apr 14', 'Apr 11', 'Apr 12', ''
+                ],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                tickAmount: 5,
+                labels: {
+                    rotate: 0,
+                    rotateAlways: true,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '13px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '13px'
+                    }
+                }
+            },
+            yaxis: {
+                tickAmount: 4,
+                max: 24,
+                min: 10,
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '13px'
+                    }                     
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return + val  
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+        var init = false;
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            chart.render();
+            init = true;
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })   
+    }
+
+    // Public methods
+    return {
+        init: function () {           
+            initChart('#kt_chart_widget_11_tab_1', '#kt_chart_widget_11_chart_1', [16, 19, 19, 16, 16, 14, 15, 15, 17, 17, 19, 19, 18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 20, 20, 22], false);
+            initChart('#kt_chart_widget_11_tab_2', '#kt_chart_widget_11_chart_2', [18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22, 15, 18, 18, 17, 17, 15, 15, 17, 17, 19, 17], false); 
+            initChart('#kt_chart_widget_11_tab_3', '#kt_chart_widget_11_chart_3', [17, 20, 20, 19, 19, 17, 17, 19, 19, 21, 21, 19, 19, 21, 21, 18, 18, 16, 17, 17, 19, 19, 21, 21, 19, 19, 17, 17, 18, 18], true); 
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget11;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget11.init();
+});

resources/assets/core/js/widgets/charts/widget-12.js

@@ -0,0 +1,182 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget12 = function () {
+    // Private methods
+    var initChart = function(tabSelector, chartSelector, data, initByDefault) {
+        var element = document.querySelector(chartSelector);
+
+        if (!element) {
+            return;
+        }
+        
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
+
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');    
+
+        var options = {
+            series: [{
+                name: 'Deliveries',
+                data: data
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }              
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['22%'],
+                    borderRadius: 5,                     
+                    dataLabels: {
+                        position: "top" // top, center, bottom
+                    },
+                    startingShape: 'flat'
+                },
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: true, 
+                offsetY: -28,                                             
+                style: {
+                    fontSize: '13px',
+                    colors: ['labelColor']
+                }, 
+                
+                formatter: function(val) {
+                    return val + "K";
+                } 
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['Grossey', 'Pet Food', 'Flowers', 'Restaurant', 'Kids Toys', 'Clothing', 'Still Water'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    }                    
+                },
+                crosshairs: {
+                    fill: {         
+                        gradient: {         
+                            opacityFrom: 0,
+                            opacityTo: 0
+                        }
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    },
+                    
+                    formatter: function(val) {
+                        return val + "K";
+                    } 
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return  + val + 'K' 
+                    }
+                }
+            },
+            colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-light-primary')],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        var init = false;
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            chart.render();
+            init = true;
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {   
+            initChart('#kt_charts_widget_12_tab_1', '#kt_charts_widget_12_chart_1', [54, 42, 75, 110, 23, 87, 50], true);
+            initChart('#kt_charts_widget_12_tab_2', '#kt_charts_widget_12_chart_2', [25, 55, 35, 50, 45, 20, 31], false); 
+            initChart('#kt_charts_widget_12_tab_3', '#kt_charts_widget_12_chart_3', [45, 15, 35, 70, 45, 50, 21], false); 
+        }        
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget12;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget12.init();
+});
+
+
+ 

resources/assets/core/js/widgets/charts/widget-13.js

@@ -0,0 +1,333 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget13 = (function () {
+    // Private methods
+    var initChart = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_13_chart");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/
+            var chart = root.container.children.push(
+                am5xy.XYChart.new(root, {
+                    panX: true,
+                    panY: true,
+                    wheelX: "panX",
+                    wheelY: "zoomX",
+                })
+            );
+
+            // Add cursor
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+            var cursor = chart.set(
+                "cursor",
+                am5xy.XYCursor.new(root, {
+                    behavior: "none"
+                })
+            );
+
+            cursor.lineY.set("visible", false);
+
+            // The data
+            var data = [
+                {
+                    year: "2003",
+                    cars: 1587,
+                    motorcycles: 650,
+                    bicycles: 121,
+                },
+                {
+                    year: "2004",
+                    cars: 1567,
+                    motorcycles: 683,
+                    bicycles: 146,
+                },
+                {
+                    year: "2005",
+                    cars: 1617,
+                    motorcycles: 691,
+                    bicycles: 138,
+                },
+                {
+                    year: "2006",
+                    cars: 1630,
+                    motorcycles: 642,
+                    bicycles: 127,
+                },
+                {
+                    year: "2007",
+                    cars: 1660,
+                    motorcycles: 699,
+                    bicycles: 105,
+                },
+                {
+                    year: "2008",
+                    cars: 1683,
+                    motorcycles: 721,
+                    bicycles: 109,
+                },
+                {
+                    year: "2009",
+                    cars: 1691,
+                    motorcycles: 737,
+                    bicycles: 112,
+                },
+                {
+                    year: "2010",
+                    cars: 1298,
+                    motorcycles: 680,
+                    bicycles: 101,
+                },
+                {
+                    year: "2011",
+                    cars: 1275,
+                    motorcycles: 664,
+                    bicycles: 97,
+                },
+                {
+                    year: "2012",
+                    cars: 1246,
+                    motorcycles: 648,
+                    bicycles: 93,
+                },
+                {
+                    year: "2013",
+                    cars: 1318,
+                    motorcycles: 697,
+                    bicycles: 111,
+                },
+                {
+                    year: "2014",
+                    cars: 1213,
+                    motorcycles: 633,
+                    bicycles: 87,
+                },
+                {
+                    year: "2015",
+                    cars: 1199,
+                    motorcycles: 621,
+                    bicycles: 79,
+                },
+                {
+                    year: "2016",
+                    cars: 1110,
+                    motorcycles: 210,
+                    bicycles: 81,
+                },
+                {
+                    year: "2017",
+                    cars: 1165,
+                    motorcycles: 232,
+                    bicycles: 75,
+                },
+                {
+                    year: "2018",
+                    cars: 1145,
+                    motorcycles: 219,
+                    bicycles: 88,
+                },
+                {
+                    year: "2019",
+                    cars: 1163,
+                    motorcycles: 201,
+                    bicycles: 82,
+                },
+                {
+                    year: "2020",
+                    cars: 1180,
+                    motorcycles: 285,
+                    bicycles: 87,
+                },
+                {
+                    year: "2021",
+                    cars: 1159,
+                    motorcycles: 277,
+                    bicycles: 71,
+                },
+            ];
+
+            // Create axes
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+            var xAxis = chart.xAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "year",
+                    startLocation: 0.5,
+                    endLocation: 0.5,
+                    renderer: am5xy.AxisRendererX.new(root, {}),
+                    tooltip: am5.Tooltip.new(root, {}),
+                })
+            );
+
+            xAxis.get("renderer").grid.template.setAll({
+                disabled: true,
+                strokeOpacity: 0
+            });
+
+            xAxis.get("renderer").labels.template.setAll({
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            xAxis.data.setAll(data);
+
+            var yAxis = chart.yAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: am5xy.AxisRendererY.new(root, {}),
+                })
+            );
+
+            yAxis.get("renderer").grid.template.setAll({
+                stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
+                strokeWidth: 1,
+                strokeOpacity: 1,
+                strokeDasharray: [3]
+            });
+
+            yAxis.get("renderer").labels.template.setAll({
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            // Add series
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+
+            function createSeries(name, field, color) {
+                var series = chart.series.push(
+                    am5xy.LineSeries.new(root, {
+                        name: name,
+                        xAxis: xAxis,
+                        yAxis: yAxis,
+                        stacked: true,
+                        valueYField: field,
+                        categoryXField: "year",
+                        fill: am5.color(color),
+                        tooltip: am5.Tooltip.new(root, {
+                            pointerOrientation: "horizontal",
+                            labelText: "[bold]{name}[/]\n{categoryX}: {valueY}",
+                        }),
+                    })
+                );
+
+                
+
+                series.fills.template.setAll({
+                    fillOpacity: 0.5,
+                    visible: true,
+                });
+
+                series.data.setAll(data);
+                series.appear(1000);
+            }
+
+            createSeries("Cars", "cars", KTUtil.getCssVariableValue('--bs-primary'));
+            createSeries("Motorcycles", "motorcycles", KTUtil.getCssVariableValue('--bs-success'));
+            createSeries("Bicycles", "bicycles", KTUtil.getCssVariableValue('--bs-warning'));
+
+            // Add scrollbar
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+            var scrollbarX = chart.set(
+                "scrollbarX",
+                am5.Scrollbar.new(root, {
+                    orientation: "horizontal",
+                    marginBottom: 25,
+                    height: 8
+                })
+            );
+
+            // Create axis ranges
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
+            var rangeDataItem = xAxis.makeDataItem({
+                category: "2016",
+                endCategory: "2021",
+            });
+
+            var range = xAxis.createAxisRange(rangeDataItem);
+
+            rangeDataItem.get("grid").setAll({
+                stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-200')),
+                strokeOpacity: 0.5,
+                strokeDasharray: [3],
+            });
+
+            rangeDataItem.get("axisFill").setAll({
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-200')),
+                fillOpacity: 0.1,
+            });
+
+            rangeDataItem.get("label").setAll({
+                inside: true,
+                text: "Fines increased",
+                rotation: 90,
+                centerX: am5.p100,
+                centerY: am5.p100,
+                location: 0,
+                paddingBottom: 10,
+                paddingRight: 15,
+            });
+
+            var rangeDataItem2 = xAxis.makeDataItem({
+                category: "2021",
+            });
+
+            var range2 = xAxis.createAxisRange(rangeDataItem2);
+
+            rangeDataItem2.get("grid").setAll({
+                stroke: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
+                strokeOpacity: 1,
+                strokeDasharray: [3],
+            });
+
+            rangeDataItem2.get("label").setAll({
+                inside: true,
+                text: "Fee introduced",
+                rotation: 90,
+                centerX: am5.p100,
+                centerY: am5.p100,
+                location: 0,
+                paddingBottom: 10,
+                paddingRight: 15,
+            });
+
+            // Make stuff animate on load
+            // https://www.amcharts.com/docs/v5/concepts/animations/
+            chart.appear(1000, 100);
+        }); // end am5.ready()
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget13;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget13.init();
+});

resources/assets/core/js/widgets/charts/widget-14.js

@@ -0,0 +1,208 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget14 = (function () {
+    // Private methods
+    var initChart = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_14_chart");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/
+            var chart = root.container.children.push(
+                am5radar.RadarChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "panX",
+                    wheelY: "zoomX",
+                    innerRadius: am5.percent(20),
+                    startAngle: -90,
+                    endAngle: 180,
+                })
+            );
+
+            // Data
+            var data = [
+                {
+                    category: "Research",
+                    value: 80,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
+                    },
+                },
+                {
+                    category: "Marketing",
+                    value: 35,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
+                    },
+                },
+                {
+                    category: "Distribution",
+                    value: 92,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
+                    },
+                },
+                {
+                    category: "Human Resources",
+                    value: 68,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
+                    },
+                },
+            ];
+
+            // Add cursor
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
+            var cursor = chart.set(
+                "cursor",
+                am5radar.RadarCursor.new(root, {
+                    behavior: "zoomX",
+                })
+            );
+
+            cursor.lineY.set("visible", false);
+
+            // Create axes and their renderers
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
+            var xRenderer = am5radar.AxisRendererCircular.new(root, {
+                //minGridDistance: 50
+            });
+
+            xRenderer.labels.template.setAll({
+                radius: 10
+            });
+
+            xRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var xAxis = chart.xAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: xRenderer,
+                    min: 0,
+                    max: 100,
+                    strictMinMax: true,
+                    numberFormat: "#'%'",
+                    tooltip: am5.Tooltip.new(root, {}),
+                })
+            );
+
+            var yRenderer = am5radar.AxisRendererRadial.new(root, {
+                minGridDistance: 20,
+            });
+
+            yRenderer.labels.template.setAll({
+                centerX: am5.p100,
+                fontWeight: "500",
+                fontSize: 18,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
+                templateField: "columnSettings",
+            });
+
+            yRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var yAxis = chart.yAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "category",
+                    renderer: yRenderer,
+                })
+            );
+
+            yAxis.data.setAll(data);
+
+            // Create series
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+            var series1 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "full",
+                    categoryYField: "category",
+                    fill: root.interfaceColors.get("alternativeBackground"),
+                })
+            );
+
+            series1.columns.template.setAll({
+                width: am5.p100,
+                fillOpacity: 0.08,
+                strokeOpacity: 0,
+                cornerRadius: 20,
+            });
+
+            series1.data.setAll(data);
+
+            var series2 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "value",
+                    categoryYField: "category",
+                })
+            );
+
+            series2.columns.template.setAll({
+                width: am5.p100,
+                strokeOpacity: 0,
+                tooltipText: "{category}: {valueX}%",
+                cornerRadius: 20,
+                templateField: "columnSettings",
+            });
+
+            series2.data.setAll(data);
+
+            // Animate chart and series in
+            // https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
+            series1.appear(1000);
+            series2.appear(1000);
+            chart.appear(1000, 100);
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget14;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget14.init();
+});

resources/assets/core/js/widgets/charts/widget-15.js

@@ -0,0 +1,248 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget15 = (function () {
+    // Private methods
+    var initChart = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_15_chart");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/
+            var chart = root.container.children.push(
+                am5xy.XYChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    //wheelX: "panX",
+                    //wheelY: "zoomX",
+                    layout: root.verticalLayout,
+                })
+            );
+
+            // Data
+            var colors = chart.get("colors");
+
+            var data = [
+                {
+                    country: "US",
+                    visits: 725,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "UK",
+                    visits: 625,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "China",
+                    visits: 602,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Japan",
+                    visits: 509,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Germany",
+                    visits: 322,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "France",
+                    visits: 214,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "India",
+                    visits: 204,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),        
+                    }
+                },
+                {
+                    country: "Spain",
+                    visits: 200,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Italy",
+                    visits: 165,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/italy.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Russia",
+                    visits: 152,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/russia.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Norway",
+                    visits: 125,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/norway.svg",
+                    columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+                {
+                    country: "Canada",
+                    visits: 99,
+                    icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
+                   columnSettings: { 
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary'))        
+                    }
+                },
+            ];
+
+            // Create axes
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+            var xAxis = chart.xAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "country",
+                    renderer: am5xy.AxisRendererX.new(root, {
+                        minGridDistance: 30,
+                    }),
+                    bullet: function (root, axis, dataItem) {
+                        return am5xy.AxisBullet.new(root, {
+                            location: 0.5,
+                            sprite: am5.Picture.new(root, {
+                                width: 24,
+                                height: 24,
+                                centerY: am5.p50,
+                                centerX: am5.p50,
+                                src: dataItem.dataContext.icon,
+                            }),
+                        });
+                    },
+                })
+            );
+
+            xAxis.get("renderer").labels.template.setAll({
+                paddingTop: 20,                
+                fontWeight: "400",
+                fontSize: 10,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+            
+            xAxis.get("renderer").grid.template.setAll({
+                disabled: true,
+                strokeOpacity: 0
+            });
+
+            xAxis.data.setAll(data);
+
+            var yAxis = chart.yAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: am5xy.AxisRendererY.new(root, {}),
+                })
+            );
+
+            yAxis.get("renderer").grid.template.setAll({
+                stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
+                strokeWidth: 1,
+                strokeOpacity: 1,
+                strokeDasharray: [3]
+            });
+
+            yAxis.get("renderer").labels.template.setAll({
+                fontWeight: "400",
+                fontSize: 10,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            // Add series
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+            var series = chart.series.push(
+                am5xy.ColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    valueYField: "visits",
+                    categoryXField: "country"
+                })
+            );
+
+            series.columns.template.setAll({
+                tooltipText: "{categoryX}: {valueY}",
+                tooltipY: 0,
+                strokeOpacity: 0,
+                templateField: "columnSettings",
+            });
+
+            series.columns.template.setAll({
+                strokeOpacity: 0,
+                cornerRadiusBR: 0,
+                cornerRadiusTR: 6,
+                cornerRadiusBL: 0,
+                cornerRadiusTL: 6,
+            });
+
+            series.data.setAll(data);
+
+            // Make stuff animate on load
+            // https://www.amcharts.com/docs/v5/concepts/animations/
+            series.appear();
+            chart.appear(1000, 100);
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget15;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget15.init();
+});

resources/assets/core/js/widgets/charts/widget-16.js

@@ -0,0 +1,252 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget16 = (function () {
+    // Private methods
+    var initChart = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_16_chart");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/
+            var chart = root.container.children.push(
+                am5xy.XYChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "panX",
+                    wheelY: "zoomX",
+                    layout: root.verticalLayout,
+                })
+            );
+
+            var colors = chart.get("colors");
+
+            var data = [
+                {
+                    country: "US",
+                    visits: 725,
+                },
+                {
+                    country: "UK",
+                    visits: 625,
+                },
+                {
+                    country: "China",
+                    visits: 602,
+                },
+                {
+                    country: "Japan",
+                    visits: 509,
+                },
+                {
+                    country: "Germany",
+                    visits: 322,
+                },
+                {
+                    country: "France",
+                    visits: 214,
+                },
+                {
+                    country: "India",
+                    visits: 204,
+                },
+                {
+                    country: "Spain",
+                    visits: 198,
+                },
+                {
+                    country: "Italy",
+                    visits: 165,
+                },
+                {
+                    country: "Russia",
+                    visits: 130,
+                },
+                {
+                    country: "Norway",
+                    visits: 93,
+                },
+                {
+                    country: "Canada",
+                    visits: 41,
+                },
+            ];
+
+            prepareParetoData();
+
+            function prepareParetoData() {
+                var total = 0;
+
+                for (var i = 0; i < data.length; i++) {
+                    var value = data[i].visits;
+                    total += value;
+                }
+
+                var sum = 0;
+                for (var i = 0; i < data.length; i++) {
+                    var value = data[i].visits;
+                    sum += value;
+                    data[i].pareto = (sum / total) * 100;
+                }
+            }
+
+            // Create axes
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+            var xAxis = chart.xAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "country",
+                    renderer: am5xy.AxisRendererX.new(root, {
+                        minGridDistance: 30,
+                    }),
+                })
+            );
+
+            xAxis.get("renderer").labels.template.setAll({
+                paddingTop: 10,
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            xAxis.get("renderer").grid.template.setAll({
+                disabled: true,
+                strokeOpacity: 0
+            });
+
+            xAxis.data.setAll(data);
+
+            var yAxis = chart.yAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: am5xy.AxisRendererY.new(root, {}),
+                })
+            );
+
+            yAxis.get("renderer").labels.template.setAll({
+                paddingLeft: 10,
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            yAxis.get("renderer").grid.template.setAll({
+                stroke: am5.color(KTUtil.getCssVariableValue('--bs-gray-300')),
+                strokeWidth: 1,
+                strokeOpacity: 1,
+                strokeDasharray: [3]
+            });
+
+            var paretoAxisRenderer = am5xy.AxisRendererY.new(root, {
+                opposite: true,
+            });
+            var paretoAxis = chart.yAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: paretoAxisRenderer,
+                    min: 0,
+                    max: 100,
+                    strictMinMax: true,
+                })
+            );
+            paretoAxis.get("renderer").labels.template.setAll({
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            paretoAxisRenderer.grid.template.set("forceHidden", true);
+            paretoAxis.set("numberFormat", "#'%");
+
+            // Add series
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+            var series = chart.series.push(
+                am5xy.ColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    valueYField: "visits",
+                    categoryXField: "country",
+                })
+            );
+
+            series.columns.template.setAll({
+                tooltipText: "{categoryX}: {valueY}",
+                tooltipY: 0,
+                strokeOpacity: 0,
+                cornerRadiusTL: 6,
+                cornerRadiusTR: 6,
+            });
+
+            series.columns.template.adapters.add(
+                "fill",
+                function (fill, target) {
+                    return chart
+                        .get("colors")
+                        .getIndex(series.dataItems.indexOf(target.dataItem));
+                }
+            );
+
+            // pareto series
+            var paretoSeries = chart.series.push(
+                am5xy.LineSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: paretoAxis,
+                    valueYField: "pareto",
+                    categoryXField: "country",
+                    stroke: am5.color(KTUtil.getCssVariableValue('--bs-dark')),
+                    maskBullets: false,
+                })
+            );
+
+            paretoSeries.bullets.push(function () {
+                return am5.Bullet.new(root, {
+                    locationY: 1,
+                    sprite: am5.Circle.new(root, {
+                        radius: 5,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
+                        stroke: am5.color(KTUtil.getCssVariableValue('--bs-dark'))
+                    }),
+                });
+            });
+
+            series.data.setAll(data);
+            paretoSeries.data.setAll(data);
+
+            // Make stuff animate on load
+            // https://www.amcharts.com/docs/v5/concepts/animations/
+            series.appear();
+            chart.appear(1000, 100);
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget16;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget16.init();
+});

resources/assets/core/js/widgets/charts/widget-17.js

@@ -0,0 +1,102 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget17 = (function () {
+    // Private methods
+    var initChart = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_17_chart");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+            // start and end angle must be set both for chart and series
+            var chart = root.container.children.push(
+                am5percent.PieChart.new(root, {
+                    startAngle: 180,
+                    endAngle: 360,
+                    layout: root.verticalLayout,
+                    innerRadius: am5.percent(50),
+                })
+            );
+
+            // Create series
+            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
+            // start and end angle must be set both for chart and series
+            var series = chart.series.push(
+                am5percent.PieSeries.new(root, {
+                    startAngle: 180,
+                    endAngle: 360,
+                    valueField: "value",
+                    categoryField: "category",
+                    alignLabels: false,
+                })
+            );
+
+            series.labels.template.setAll({
+                fontWeight: "400",
+                fontSize: 13,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500'))
+            });
+
+            series.states.create("hidden", {
+                startAngle: 180,
+                endAngle: 180,
+            });
+
+            series.slices.template.setAll({
+                cornerRadius: 5,
+            });
+
+            series.ticks.template.setAll({
+                forceHidden: true,
+            });
+
+            // Set data
+            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
+            series.data.setAll([
+                { value: 10, category: "One", fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')) },
+                { value: 9, category: "Two", fill: am5.color(KTUtil.getCssVariableValue('--bs-success')) },
+                { value: 6, category: "Three", fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')) },
+                { value: 5, category: "Four", fill: am5.color(KTUtil.getCssVariableValue('--bs-warning')) },
+                { value: 4, category: "Five", fill: am5.color(KTUtil.getCssVariableValue('--bs-info')) },
+                { value: 3, category: "Six", fill: am5.color(KTUtil.getCssVariableValue('--bs-secondary')) }
+            ]);
+
+            series.appear(1000, 100);
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget17;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget17.init();
+});

resources/assets/core/js/widgets/charts/widget-18.js

@@ -0,0 +1,167 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget18 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_charts_widget_18_chart");
+
+        if (!element) {
+            return;
+        }
+        
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');    
+
+        var options = {
+            series: [{
+                name: 'Spent time',
+                data: [54, 42, 75, 110, 23, 87, 50]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'bar',
+                height: height,
+                toolbar: {
+                    show: false
+                }              
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: false,
+                    columnWidth: ['28%'],
+                    borderRadius: 5,                     
+                    dataLabels: {
+                        position: "top" // top, center, bottom
+                    },
+                    startingShape: 'flat'
+                },
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: true, 
+                offsetY: -28,                                             
+                style: {
+                    fontSize: '13px',
+                    colors: [labelColor]
+                },
+                    formatter: function(val) {
+                        return val;// + "H";
+                    }                           
+            },
+            stroke: {
+                show: true,
+                width: 2,
+                colors: ['transparent']
+            },
+            xaxis: {
+                categories: ['QA Analysis', 'Marketing', 'Web Dev', 'Maths', 'Front-end Dev', 'Physics', 'Phylosophy'],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    }                  
+                },
+                crosshairs: {
+                    fill: {         
+                        gradient: {         
+                            opacityFrom: 0,
+                            opacityTo: 0
+                        }
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: KTUtil.getCssVariableValue('--bs-gray-500'),
+                        fontSize: '13px'
+                    },
+                    formatter: function(val) {
+                        return val + "H";
+                    } 
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return  + val + ' hours' 
+                    }
+                } 
+            },
+            colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-light-primary')],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            }
+        };
+
+        var chart = new ApexCharts(element, options);  
+        
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();   
+        }, 200); 
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }        
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget18;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget18.init();
+});
+
+
+ 

resources/assets/core/js/widgets/charts/widget-19.js

@@ -0,0 +1,395 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget19 = (function () {
+    // Private methods
+    var initChart1 = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_19_chart_1");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/
+            var chart = root.container.children.push(
+                am5radar.RadarChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "panX",
+                    wheelY: "zoomX",
+                    innerRadius: am5.percent(20),
+                    startAngle: -90,
+                    endAngle: 180,
+                })
+            );
+
+            // Data
+            var data = [
+                {
+                    category: "Research",
+                    value: 80,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
+                    },
+                },
+                {
+                    category: "Marketing",
+                    value: 35,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
+                    },
+                },
+                {
+                    category: "Distribution",
+                    value: 92,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
+                    },
+                },
+                {
+                    category: "Human Resources",
+                    value: 68,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
+                    },
+                },
+            ];
+
+            // Add cursor
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
+            var cursor = chart.set(
+                "cursor",
+                am5radar.RadarCursor.new(root, {
+                    behavior: "zoomX",
+                })
+            );
+
+            cursor.lineY.set("visible", false);
+
+            // Create axes and their renderers
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
+            var xRenderer = am5radar.AxisRendererCircular.new(root, {
+                //minGridDistance: 50
+            });
+
+            xRenderer.labels.template.setAll({
+                radius: 10
+            });
+
+            xRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var xAxis = chart.xAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: xRenderer,
+                    min: 0,
+                    max: 100,
+                    strictMinMax: true,
+                    numberFormat: "#'%'",
+                    tooltip: am5.Tooltip.new(root, {}),
+                })
+            );
+
+            var yRenderer = am5radar.AxisRendererRadial.new(root, {
+                minGridDistance: 20,
+            });
+
+            yRenderer.labels.template.setAll({
+                centerX: am5.p100,
+                fontWeight: "500",
+                fontSize: 18,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
+                templateField: "columnSettings",
+            });
+
+            yRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var yAxis = chart.yAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "category",
+                    renderer: yRenderer,
+                })
+            );
+
+            yAxis.data.setAll(data);
+
+            // Create series
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+            var series1 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "full",
+                    categoryYField: "category",
+                    fill: root.interfaceColors.get("alternativeBackground"),
+                })
+            );
+
+            series1.columns.template.setAll({
+                width: am5.p100,
+                fillOpacity: 0.08,
+                strokeOpacity: 0,
+                cornerRadius: 20,
+            });
+
+            series1.data.setAll(data);
+
+            var series2 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "value",
+                    categoryYField: "category",
+                })
+            );
+
+            series2.columns.template.setAll({
+                width: am5.p100,
+                strokeOpacity: 0,
+                tooltipText: "{category}: {valueX}%",
+                cornerRadius: 20,
+                templateField: "columnSettings",
+            });
+
+            series2.data.setAll(data);
+
+            // Animate chart and series in
+            // https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
+            series1.appear(1000);
+            series2.appear(1000);
+            chart.appear(1000, 100);
+        });
+    };
+
+    var initChart2 = function () {
+        // Check if amchart library is included
+        if (typeof am5 === "undefined") {
+            return;
+        }
+
+        var element = document.getElementById("kt_charts_widget_19_chart_2");
+
+        if (!element) {
+            return;
+        }
+
+        am5.ready(function () {
+            // Create root element
+            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
+            var root = am5.Root.new(element);
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([am5themes_Animated.new(root)]);
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/
+            var chart = root.container.children.push(
+                am5radar.RadarChart.new(root, {
+                    panX: false,
+                    panY: false,
+                    wheelX: "panX",
+                    wheelY: "zoomX",
+                    innerRadius: am5.percent(20),
+                    startAngle: -90,
+                    endAngle: 180,
+                })
+            );
+
+            // Data
+            var data = [
+                {
+                    category: "Research",
+                    value: 40,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-info')),
+                    },
+                },
+                {
+                    category: "Marketing",
+                    value: 50,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-danger')),
+                    },
+                },
+                {
+                    category: "Distribution",
+                    value: 80,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-primary')),
+                    },
+                },
+                {
+                    category: "Human Resources",
+                    value: 70,
+                    full: 100,
+                    columnSettings: {
+                        fillOpacity: 1,
+                        fill: am5.color(KTUtil.getCssVariableValue('--bs-success')),
+                    },
+                },
+            ];
+
+            // Add cursor
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
+            var cursor = chart.set(
+                "cursor",
+                am5radar.RadarCursor.new(root, {
+                    behavior: "zoomX",
+                })
+            );
+
+            cursor.lineY.set("visible", false);
+
+            // Create axes and their renderers
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
+            var xRenderer = am5radar.AxisRendererCircular.new(root, {
+                //minGridDistance: 50
+            });
+
+            xRenderer.labels.template.setAll({
+                radius: 10
+            });
+
+            xRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var xAxis = chart.xAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    renderer: xRenderer,
+                    min: 0,
+                    max: 100,
+                    strictMinMax: true,
+                    numberFormat: "#'%'",
+                    tooltip: am5.Tooltip.new(root, {}),
+                })
+            );
+
+            var yRenderer = am5radar.AxisRendererRadial.new(root, {
+                minGridDistance: 20,
+            });
+
+            yRenderer.labels.template.setAll({
+                centerX: am5.p100,
+                fontWeight: "500",
+                fontSize: 18,
+                fill: am5.color(KTUtil.getCssVariableValue('--bs-gray-500')),
+                templateField: "columnSettings",
+            });
+
+            yRenderer.grid.template.setAll({
+                forceHidden: true,
+            });
+
+            var yAxis = chart.yAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: "category",
+                    renderer: yRenderer,
+                })
+            );
+
+            yAxis.data.setAll(data);
+
+            // Create series
+            // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+            var series1 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "full",
+                    categoryYField: "category",
+                    fill: root.interfaceColors.get("alternativeBackground"),
+                })
+            );
+
+            series1.columns.template.setAll({
+                width: am5.p100,
+                fillOpacity: 0.08,
+                strokeOpacity: 0,
+                cornerRadius: 20,
+            });
+
+            series1.data.setAll(data);
+
+            var series2 = chart.series.push(
+                am5radar.RadarColumnSeries.new(root, {
+                    xAxis: xAxis,
+                    yAxis: yAxis,
+                    clustered: false,
+                    valueXField: "value",
+                    categoryYField: "category",
+                })
+            );
+
+            series2.columns.template.setAll({
+                width: am5.p100,
+                strokeOpacity: 0,
+                tooltipText: "{category}: {valueX}%",
+                cornerRadius: 20,
+                templateField: "columnSettings",
+            });
+
+            series2.data.setAll(data);
+
+            // Animate chart and series in
+            // https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
+            series1.appear(1000);
+            series2.appear(1000);
+            chart.appear(1000, 100);
+        });
+    };
+
+    // Public methods
+    return {
+        init: function () {
+            initChart1();
+            initChart2();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget19;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget19.init();
+});

resources/assets/core/js/widgets/charts/widget-2.js

@@ -0,0 +1,167 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget2 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.querySelectorAll('.charts-widget-2');
+
+        [].slice.call(element).map(function(element) {
+            var height = parseInt(KTUtil.css(element, 'height'));
+
+            if ( !element ) {
+                return;
+            }
+
+            var color = element.getAttribute('data-kt-chart-color');
+
+            var labelColor = KTUtil.getCssVariableValue('--bs-gray-800');
+            var strokeColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+            var baseColor = KTUtil.getCssVariableValue('--bs-' + color);
+            var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color);
+
+            var options = {
+                series: [{
+                    name: 'Overview',
+                    data: [15, 15, 45, 45, 25, 25, 55, 55, 20, 20, 37]
+                }],
+                chart: {
+                    fontFamily: 'inherit',
+                    type: 'area',
+                    height: height,
+                    toolbar: {
+                        show: false
+                    },
+                    zoom: {
+                        enabled: false
+                    },
+                    sparkline: {
+                        enabled: true
+                    }
+                },
+                plotOptions: {},
+                legend: {
+                    show: false
+                },
+                dataLabels: {
+                    enabled: false
+                },
+                fill: {
+                    type: 'solid',
+                    opacity: 1
+                },
+                stroke: {
+                    curve: 'smooth',
+                    show: true,
+                    width: 3,
+                    colors: [baseColor]
+                },
+                xaxis: {
+                    categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                    axisBorder: {
+                        show: false,
+                    },
+                    axisTicks: {
+                        show: false
+                    },
+                    labels: {
+                        show: false,
+                        style: {
+                            colors: labelColor,
+                            fontSize: '12px'
+                        }
+                    },
+                    crosshairs: {
+                        show: false,
+                        position: 'front',
+                        stroke: {
+                            color: strokeColor,
+                            width: 1,
+                            dashArray: 3
+                        }
+                    },
+                    tooltip: {
+                        enabled: true,
+                        formatter: undefined,
+                        offsetY: 0,
+                        style: {
+                            fontSize: '12px'
+                        }
+                    }
+                },
+                yaxis: {
+                    min: 0,
+                    max: 60,
+                    labels: {
+                        show: false,
+                        style: {
+                            colors: labelColor,
+                            fontSize: '12px'
+                        }
+                    }
+                },
+                states: {
+                    normal: {
+                        filter: {
+                            type: 'none',
+                            value: 0
+                        }
+                    },
+                    hover: {
+                        filter: {
+                            type: 'none',
+                            value: 0
+                        }
+                    },
+                    active: {
+                        allowMultipleDataPointsSelection: false,
+                        filter: {
+                            type: 'none',
+                            value: 0
+                        }
+                    }
+                },
+                tooltip: {
+                    style: {
+                        fontSize: '12px'
+                    },
+                    y: {
+                        formatter: function (val) {
+                            return val
+                        }
+                    }
+                },
+                colors: [lightColor],
+                markers: {
+                    colors: [lightColor],
+                    strokeColor: [baseColor],
+                    strokeWidth: 3
+                }
+            }; 
+            
+            var chart = new ApexCharts(element, options);
+
+            // Set timeout to properly get the parent elements width
+            setTimeout(function() {
+                chart.render();   
+            }, 200);  
+        });           
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget2;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget2.init();
+});

resources/assets/core/js/widgets/charts/widget-20.js

@@ -0,0 +1,176 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget20 = function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_charts_widget_20");
+
+        if (!element) {
+            return;
+        }
+        
+        var height = parseInt(KTUtil.css(element, 'height'));
+        var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
+        var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');
+        var baseColor = KTUtil.getCssVariableValue('--bs-danger');
+        var lightColor = KTUtil.getCssVariableValue('--bs-danger');
+        var chartInfo = element.getAttribute('data-kt-chart-info');
+
+        var options = {
+            series: [{
+                name: chartInfo,
+                data: [34.5,34.5,35,35,35.5,35.5,35,35,35.5,35.5,35,35,34.5,34.5,35,35,35.4,35.4,35]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },
+            plotOptions: {
+
+            },
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.4,
+                    opacityTo: 0,
+                    stops: [0, 80, 100]
+                }
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 3,
+                colors: [baseColor]
+            },
+            xaxis: {
+                categories: ['', 'Apr 02', 'Apr 03', 'Apr 04', 'Apr 05', 'Apr 06', 'Apr 07', 'Apr 08', 'Apr 09', 'Apr 10', 'Apr 11', 'Apr 12', 'Apr 13', 'Apr 14', 'Apr 17', 'Apr 18', 'Apr 19', 'Apr 21', ''],
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                tickAmount: 6,
+                labels: {
+                    rotate: 0,
+                    rotateAlways: true,
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    }
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    formatter: undefined,
+                    offsetY: 0,
+                    style: {
+                        fontSize: '12px'
+                    }
+                }
+            },
+            yaxis: {
+                max: 36.3,
+                min: 33,
+                tickAmount: 6,
+                labels: {
+                    style: {
+                        colors: labelColor,
+                        fontSize: '12px'
+                    },
+                    formatter: function (val) {
+                        return '$' + parseInt(10 * val)
+                    }
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                style: {
+                    fontSize: '12px'
+                },
+                y: {
+                    formatter: function (val) {
+                        return '$' + parseInt(10 * val)
+                    }
+                }
+            },
+            colors: [lightColor],
+            grid: {
+                borderColor: borderColor,
+                strokeDashArray: 4,
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 3
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();
+        }, 200);           
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget20;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget20.init();
+});

resources/assets/core/js/widgets/charts/widget-21.js

@@ -0,0 +1,259 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget21 = (function () {
+    // Private methods
+    var initChart = function() {
+        var element = document.getElementById("kt_charts_widget_21");
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            "type": "serial",
+            "theme": "light",
+            "legend": {
+                "equalWidths": false,
+                "useGraphSettings": true,
+                "valueAlign": "left",
+                "valueWidth": 120
+            },
+            "dataProvider": [{
+                "date": "2012-01-01",
+                "distance": 227,
+                "townName": "New York",
+                "townName2": "New York",
+                "townSize": 25,
+                "latitude": 40.71,
+                "duration": 408
+            }, {
+                "date": "2012-01-02",
+                "distance": 371,
+                "townName": "Washington",
+                "townSize": 14,
+                "latitude": 38.89,
+                "duration": 482
+            }, {
+                "date": "2012-01-03",
+                "distance": 433,
+                "townName": "Wilmington",
+                "townSize": 6,
+                "latitude": 34.22,
+                "duration": 562
+            }, {
+                "date": "2012-01-04",
+                "distance": 345,
+                "townName": "Jacksonville",
+                "townSize": 7,
+                "latitude": 30.35,
+                "duration": 379
+            }, {
+                "date": "2012-01-05",
+                "distance": 480,
+                "townName": "Miami",
+                "townName2": "Miami",
+                "townSize": 10,
+                "latitude": 25.83,
+                "duration": 501
+            }, {
+                "date": "2012-01-06",
+                "distance": 386,
+                "townName": "Tallahassee",
+                "townSize": 7,
+                "latitude": 30.46,
+                "duration": 443
+            }, {
+                "date": "2012-01-07",
+                "distance": 348,
+                "townName": "New Orleans",
+                "townSize": 10,
+                "latitude": 29.94,
+                "duration": 405
+            }, {
+                "date": "2012-01-08",
+                "distance": 238,
+                "townName": "Houston",
+                "townName2": "Houston",
+                "townSize": 16,
+                "latitude": 29.76,
+                "duration": 309
+            }, {
+                "date": "2012-01-09",
+                "distance": 218,
+                "townName": "Dalas",
+                "townSize": 17,
+                "latitude": 32.8,
+                "duration": 287
+            }, {
+                "date": "2012-01-10",
+                "distance": 349,
+                "townName": "Oklahoma City",
+                "townSize": 11,
+                "latitude": 35.49,
+                "duration": 485
+            }, {
+                "date": "2012-01-11",
+                "distance": 603,
+                "townName": "Kansas City",
+                "townSize": 10,
+                "latitude": 39.1,
+                "duration": 890
+            }, {
+                "date": "2012-01-12",
+                "distance": 534,
+                "townName": "Denver",
+                "townName2": "Denver",
+                "townSize": 18,
+                "latitude": 39.74,
+                "duration": 810
+            }, {
+                "date": "2012-01-13",
+                "townName": "Salt Lake City",
+                "townSize": 12,
+                "distance": 425,
+                "duration": 670,
+                "latitude": 40.75,
+                "dashLength": 8,
+                "alpha": 0.4
+            }, {
+                "date": "2012-01-14",
+                "latitude": 36.1,
+                "duration": 470,
+                "townName": "Las Vegas",
+                "townName2": "Las Vegas"
+            }, {
+                "date": "2012-01-15"
+            }, {
+                "date": "2012-01-16"
+            }, {
+                "date": "2012-01-17"
+            }, {
+                "date": "2012-01-18"
+            }, {
+                "date": "2012-01-19"
+            }],
+            "valueAxes": [{
+                "id": "distanceAxis",
+                "axisAlpha": 0,
+                "gridAlpha": 0,
+                "position": "left",
+                "title": "distance"
+            }, {
+                "id": "latitudeAxis",
+                "axisAlpha": 0,
+                "gridAlpha": 0,
+                "labelsEnabled": false,
+                "position": "right"
+            }, {
+                "id": "durationAxis",
+                "duration": "mm",
+                "durationUnits": {
+                    "hh": "h ",
+                    "mm": "min"
+                },
+                "axisAlpha": 0,
+                "gridAlpha": 0,
+                "inside": true,
+                "position": "right",
+                "title": "duration"
+            }],
+            "graphs": [{
+                "alphaField": "alpha",
+                "balloonText": "[[value]] miles",
+                "dashLengthField": "dashLength",
+                "fillAlphas": 0.7,
+                "legendPeriodValueText": "total: [[value.sum]] mi",
+                "legendValueText": "[[value]] mi",
+                "title": "distance",
+                "type": "column",
+                "valueField": "distance",
+                "valueAxis": "distanceAxis"
+            }, {
+                "balloonText": "latitude:[[value]]",
+                "bullet": "round",
+                "bulletBorderAlpha": 1,
+                "useLineColorForBulletBorder": true,
+                "bulletColor": "#FFFFFF",
+                "bulletSizeField": "townSize",
+                "dashLengthField": "dashLength",
+                "descriptionField": "townName",
+                "labelPosition": "right",
+                "labelText": "[[townName2]]",
+                "legendValueText": "[[value]]/[[description]]",
+                "title": "latitude/city",
+                "fillAlphas": 0,
+                "valueField": "latitude",
+                "valueAxis": "latitudeAxis"
+            }, {
+                "bullet": "square",
+                "bulletBorderAlpha": 1,
+                "bulletBorderThickness": 1,
+                "dashLengthField": "dashLength",
+                "legendValueText": "[[value]]",
+                "title": "duration",
+                "fillAlphas": 0,
+                "valueField": "duration",
+                "valueAxis": "durationAxis"
+            }],
+            "chartCursor": {
+                "categoryBalloonDateFormat": "DD",
+                "cursorAlpha": 0.1,
+                "cursorColor": "#000000",
+                "fullWidth": true,
+                "valueBalloonsEnabled": false,
+                "zoomable": false
+            },
+            "dataDateFormat": "YYYY-MM-DD",
+            "categoryField": "date",
+            "categoryAxis": {
+                "dateFormats": [{
+                    "period": "DD",
+                    "format": "DD"
+                }, {
+                    "period": "WW",
+                    "format": "MMM DD"
+                }, {
+                    "period": "MM",
+                    "format": "MMM"
+                }, {
+                    "period": "YYYY",
+                    "format": "YYYY"
+                }],
+                "parseDates": true,
+                "autoGridCount": false,
+                "axisColor": "#555555",
+                "gridAlpha": 0.1,
+                "gridColor": "#FFFFFF",
+                "gridCount": 50
+            },
+            "export": {
+                "enabled": true
+            }
+        };
+
+        var chart = new ApexCharts(element, options);
+
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.render();
+        }, 200);  
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart();
+        },
+    };
+})();
+
+// Webpack support
+if (typeof module !== "undefined") {
+    module.exports = KTChartsWidget21;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTChartsWidget21.init();
+});

resources/assets/core/js/widgets/charts/widget-22.js

@@ -0,0 +1,88 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget22 = function () {
+    // Private methods
+    var initChart = function(tabSelector, chartSelector, data, initByDefault) {
+        var element = document.querySelector(chartSelector);        
+
+        if (!element) {
+            return;
+        }  
+          
+        var height = parseInt(KTUtil.css(element, 'height'));
+        
+        var options = {
+            series: data,                 
+            chart: {           
+                fontFamily: 'inherit', 
+                type: 'donut',
+                width: 250,
+            },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: '50%',
+                        labels: {
+                            value: {
+                                fontSize: '10px'
+                            }
+                        }                        
+                    }
+                }
+            },
+            colors: [
+                KTUtil.getCssVariableValue('--bs-info'), 
+                KTUtil.getCssVariableValue('--bs-success'), 
+                KTUtil.getCssVariableValue('--bs-primary'), 
+                KTUtil.getCssVariableValue('--bs-danger') 
+            ],           
+            stroke: {
+              width: 0
+            },
+            labels: ['Sales', 'Sales', 'Sales', 'Sales'],
+            legend: {
+                show: false,
+            },
+            fill: {
+                type: 'false',          
+            }     
+        };                     
+
+        var chart = new ApexCharts(element, options);
+
+        var init = false;
+
+        var tab = document.querySelector(tabSelector);
+        
+        if (initByDefault === true) {
+            chart.render();
+            init = true;
+        }        
+
+        tab.addEventListener('shown.bs.tab', function (event) {
+            if (init == false) {
+                chart.render();
+                init = true;
+            }
+        })
+    }
+
+    // Public methods
+    return {
+        init: function () {           
+            initChart('#kt_chart_widgets_22_tab_1', '#kt_chart_widgets_22_chart_1', [20, 100, 15, 25], true);
+            initChart('#kt_chart_widgets_22_tab_2', '#kt_chart_widgets_22_chart_2', [70, 13, 11, 2], false);              
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget22;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget22.init();
+});